More modal extra style

blindsidenetworks · Jul 6, 2020 · 79912b9 · 79912b9
1 parent 77cf6e0
commit 79912b9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/deploy.sh b/deploy.sh
@@ -3,6 +3,8 @@
 BBB_PLAYBACK_HOMEPAGE=playback/presentation/2.3
 BBB_PLAYBACK=/var/bigbluebutton/$BBB_PLAYBACK_HOMEPAGE
 
+export REACT_APP_BBB_PLAYBACK_BUILD=$(git rev-parse --short HEAD)
+
 npm run-script build
 sudo rm -rf $BBB_PLAYBACK
 sudo cp -r ./build $BBB_PLAYBACK

diff --git a/src/components/chat/index.scss b/src/components/chat/index.scss
@@ -113,7 +113,7 @@ $avatar-size: 2.25rem;
   }
 
   .name {
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-semi-bold;
     max-width: 60%;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/components/more/index.js b/src/components/more/index.js
@@ -3,9 +3,12 @@ import {
   FormattedDate,
   FormattedTime,
 } from 'react-intl';
+import cx from 'classnames';
 import Button from 'components/utils/button';
 import './index.scss';
 
+const BUILD = process.env.REACT_APP_BBB_PLAYBACK_BUILD;
+
 export default class More extends PureComponent {
   renderDate(metadata) {
     const date = <FormattedDate
@@ -36,17 +39,20 @@ export default class More extends PureComponent {
     );
   }
 
-  renderItem(type, value) {
+  renderItem(key, value) {
     let element;
     if (typeof value === 'boolean') {
-      element = <div className={value ? 'icon-checkmark' : 'icon-close'} />;
+      const icon = value ? 'icon-checkmark' : 'icon-close';
+      element = <div className={cx(icon, { green: value, red: !value})} />;
     } else {
       element = value;
     }
 
     return (
       <div className="item">
-        <div className={`icon-${type}`} />
+        <div className="key">
+          <div className={`icon-${key}`} />
+        </div>
         <div className="value">
           {element}
         </div>
@@ -94,7 +100,7 @@ export default class More extends PureComponent {
           </div>
           {this.renderBody(metadata)}
           <div className="footer">
-            {this.renderItem('settings', 'ddfgsdfg')}
+            {this.renderItem('settings', BUILD)}
           </div>
         </div>
       </div>

diff --git a/src/components/more/index.scss b/src/components/more/index.scss
@@ -26,13 +26,20 @@
   padding: 0 $padding-small;
   width: 80%;
 
-  .control {
+  .control,
+  .header,
+  .body,
+  .footer {
     box-sizing: border-box;
     display: flex;
+    width: 100%;
+  }
+
+
+  .control {
     flex-direction: row-reverse;
     height: $modal-bar-height;
     padding: $padding-small;
-    width: 100%;
 
     .button {
       color: $gray-light;
@@ -41,28 +48,27 @@
   }
 
   .header {
-    box-sizing: border-box;
-    display: flex;
     flex-direction: column;
     font-weight: $font-weight-regular;
     padding: 0 0 $padding 0;
-    width: 100%;
 
-    .name {
+    .name,
+    .date {
       box-sizing: border-box;
       display: flex;
-      font-size: larger;
       justify-content: center;
+    }
+
+    .name {
+      font-size: larger;
       overflow: hidden;
       padding: 0 0 $padding-extra-small 0;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     .date {
-      box-sizing: border-box;
       color: $gray-light;
-      display: flex;
       font-size: small;
       padding: 0 $padding-small;
 
@@ -74,39 +80,47 @@
   }
 
   .body {
-    box-sizing: border-box;
-    display: flex;
     flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: 0 $padding;
-    width: 100%;
 
     .item {
       box-sizing: border-box;
       display: flex;
       font-size: large;
+      font-weight: $font-weight-semi-bold;
       padding: $padding-small 0;
 
+      .key {
+        color: $gray;
+      }
+
       .value {
         box-sizing: border-box;
         padding: 0 $padding;
       }
+
+      .green {
+        color: $green;
+      }
+
+      .red {
+        color: $red;
+      }
     }
   }
 
   .footer {
-    box-sizing: border-box;
     align-items: center;
-    display: flex;
-    height: $modal-bar-height;
-    padding: 0 $padding;
-    width: 100%;
+    padding: $padding;
 
     .item {
       box-sizing: border-box;
       color: $gray-light;
       display: flex;
       font-size: small;
-      padding: $padding-extra-small 0;
+      padding: $padding 0 0 0;
       width: 100%;
 
       .value {

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
@@ -13,6 +13,8 @@ $blue-lightest: #e4ecf2;
 
 $red: #df2721;
 
+$green: #008081;
+
 $button-color: $blue;
 
 $cursor-color: $red;