Refactor styles

client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css

@@ -0,0 +1,10 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button {
+  width: 300px;
+  margin-left: 20px;
+}

client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js

@@ -2,6 +2,8 @@ import React from 'react';
 import {Button} from 'coral-ui';
 import PropTypes from 'prop-types';
 import t, {timeago} from 'coral-framework/services/i18n';
+import cn from 'classnames';
+import styles from './AssetStatusInfo.css';
 
 class AssetStatusInfo extends React.Component {
 
@@ -45,11 +47,11 @@ class AssetStatusInfo extends React.Component {
       <div>
         <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
         {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
-        <div className="close-comments-intro-wrapper">
+        <div className={cn('close-comments-intro-wrapper', styles.wrapper)}>
           <p>
             {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
           </p>
-          <Button onClick={!isClosed ? onClose : onOpen}>
+          <Button className={styles.button} onClick={!isClosed ? onClose : onOpen}>
             {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
           </Button>
         </div>

client/coral-embed-stream/style/default.css

@@ -275,22 +275,6 @@ button.comment__action-button[disabled],
 
 /* Close comments */
 
-.close-comments-intro-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.close-comments-intro-wrapper button {
-  width: 300px;
-  margin-left: 20px;
-}
-
-.close-comments-intro-wrapper button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .close-comments-message {
   box-sizing: border-box;
   width: 100%;