Merge pull request #6307 from Tainan404/issue-6289

Change the buttons on actions bar to ghost buttons

bigbluebutton-html5/imports/ui/components/actions-bar/desktop-share/component.jsx

@@ -5,6 +5,7 @@ import browser from 'browser-detect';
 import Button from '/imports/ui/components/button/component';
 import logger from '/imports/startup/client/logger';
 import { notify } from '/imports/ui/services/notification';
+import cx from 'classnames';
 import { styles } from '../styles';
 
 const propTypes = {
@@ -68,14 +69,14 @@ const DesktopShare = ({
   };
   return (screenSharingCheck && !isMobileBrowser && isUserPresenter ?
     <Button
-      className={styles.button}
-      icon={isVideoBroadcasting ? 'desktop_off' : 'desktop'}
+      className={cx(styles.button, isVideoBroadcasting || styles.btn)}
+      icon={isVideoBroadcasting ? 'desktop' : 'desktop_off'}
       label={intl.formatMessage(isVideoBroadcasting ?
           intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
       description={intl.formatMessage(isVideoBroadcasting ?
           intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
-      color={isVideoBroadcasting ? 'danger' : 'primary'}
-      ghost={false}
+      color={isVideoBroadcasting ? 'primary' : 'default'}
+      ghost={!isVideoBroadcasting}
       hideLabel
       circle
       size="lg"

bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss

@@ -44,3 +44,17 @@
     box-shadow: 0 2px 5px 0 rgb(0, 0, 0);
   }
 }
+
+.btn {
+  span {
+    border: none;
+    box-shadow: none;
+    background-color: transparent !important;
+    color: var(--color-white) !important;
+    border: 1.5px solid var(--color-white) !important;
+  }
+
+  span:hover {
+    border: 1.5px solid rgba(255,255,255, .5) !important;
+  }
+}
\ No newline at end of file

bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx

@@ -71,7 +71,7 @@ class AudioControls extends Component {
       <span className={styles.container}>
         {mute ?
           <Button
-            className={glow ? cx(styles.button, styles.glow) : styles.button}
+            className={glow ? cx(styles.button, styles.glow) : cx(styles.button, !unmute || styles.ghostButton)}
             onClick={handleToggleMuteMicrophone}
             disabled={disable}
             hideLabel
@@ -79,14 +79,15 @@ class AudioControls extends Component {
               intl.formatMessage(intlMessages.muteAudio)}
             aria-label={unmute ? intl.formatMessage(intlMessages.unmuteAudio) :
               intl.formatMessage(intlMessages.muteAudio)}
-            color="primary"
+            color={!unmute ? 'primary' : 'default'}
+            ghost={unmute}
             icon={unmute ? 'mute' : 'unmute'}
             size="lg"
             circle
             accessKey={shortcuts.toggleMute}
           /> : null}
         <Button
-          className={styles.button}
+          className={cx(styles.button, join || styles.ghostButton)}
           onClick={join ? handleLeaveAudio : handleJoinAudio}
           disabled={disable}
           hideLabel
@@ -94,8 +95,8 @@ class AudioControls extends Component {
             intl.formatMessage(intlMessages.joinAudio)}
           label={join ? intl.formatMessage(intlMessages.leaveAudio) :
             intl.formatMessage(intlMessages.joinAudio)}
-          color={join ? 'danger' : 'primary'}
-          icon={join ? 'audio_off' : 'audio_on'}
+          color={join ? 'primary' : 'default'}
+          icon={join ? 'audio_on' : 'audio_off'}
           size="lg"
           circle
           accessKey={join ? shortcuts.leaveAudio : shortcuts.joinAudio}

bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss

 @import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/components/actions-bar/styles.scss";
 
 .container {
   display: flex;
@@ -47,3 +48,7 @@
     box-shadow: 0 0 0 0 transparent;
   }
 }
+
+.ghostButton {
+  @extend .btn;
+}

bigbluebutton-html5/imports/ui/components/button/styles.scss

@@ -143,7 +143,8 @@
   margin: 0 !important;
   padding: 0 !important;
   overflow: hidden;
-  display: block;
+  display: none !important;
+  
 }
 
 .icon {

bigbluebutton-html5/imports/ui/components/video-provider/video-menu/component.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
+import cx from 'classnames';
 import Button from '/imports/ui/components/button/component';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import Dropdown from '/imports/ui/components/dropdown/component';
@@ -64,12 +65,13 @@ const JoinVideoOptions = ({
             intl.formatMessage(intlMessages.videoMenuDisabled)
             : intl.formatMessage(intlMessages.videoMenu)
           }
-          className={styles.button}
+          className={cx(styles.button, isSharingVideo || styles.ghostButton)}
           onClick={() => null}
           hideLabel
           aria-label={intl.formatMessage(intlMessages.videoMenuDesc)}
-          color={isSharingVideo ? 'danger' : 'primary'}
-          icon={isSharingVideo ? 'video_off' : 'video'}
+          color={isSharingVideo ? 'primary' : 'default'}
+          icon={isSharingVideo ? 'video' : 'video_off'}
+          ghost={!isSharingVideo}
           size="lg"
           circle
           disabled={!videoShareAllowed}

bigbluebutton-html5/imports/ui/components/video-provider/video-menu/styles.scss

 @import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/components/actions-bar/styles.scss";
 
 .button {
   &:focus {
@@ -10,6 +11,10 @@
   }
 }
 
+.ghostButton {
+  @extend .btn;
+}
+
 .imageSize {
   height: 4rem;
   @include mq($small-only) {