Merge pull request #13329 from ramonlsouza/change-presentation-button-color

change presentation fullscreen/minimize buttons color

bigbluebutton-html5/imports/ui/components/button/component.jsx

@@ -12,7 +12,7 @@ const SIZES = [
 ];
 
 const COLORS = [
-  'default', 'primary', 'danger', 'warning', 'success', 'dark', 'offline',
+  'default', 'primary', 'danger', 'warning', 'success', 'dark', 'offline', 'muted',
 ];
 
 const propTypes = {

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

@@ -34,6 +34,10 @@
   --btn-offline-bg: var(--color-offline);
   --btn-offline-border: var(--color-offline);
 
+  --btn-muted-color: var(--color-muted);
+  --btn-muted-bg: var(--color-muted-background);
+  --btn-muted-border: var(--color-muted-background);
+
   --btn-border-size: var(--border-size);
   --btn-border-radius: var(--border-radius);
   --btn-font-weight: 600;
@@ -325,6 +329,10 @@
   @include button-variant(var(--btn-offline-color), var(--btn-offline-bg), var(--btn-offline-border));
 }
 
+.muted {
+  @include button-variant(var(--btn-muted-color), var(--btn-muted-bg), var(--btn-muted-border));
+}
+
 /* Styles
  * ==========
  */
@@ -362,6 +370,10 @@
   &.offline {
     @include button-ghost-variant(var(--btn-offline-bg), var(--btn-offline-color));
   }
+
+  &.muted {
+    @include button-ghost-variant(var(--btn-muted-bg), var(--btn-muted-color));
+  }
 }
 
 .circle {

bigbluebutton-html5/imports/ui/components/presentation/component.jsx

@@ -730,7 +730,7 @@ class Presentation extends PureComponent {
         elementName={intl.formatMessage(intlMessages.presentationLabel)}
         elementId={fullscreenElementId}
         isFullscreen={isFullscreen}
-        color="primary"
+        color="muted"
         fullScreenStyle={false}
         className={styles.presentationFullscreen}
       />

bigbluebutton-html5/imports/ui/components/presentation/presentation-close-button/component.jsx

@@ -14,7 +14,7 @@ const ClosePresentationComponent = ({
   intl, toggleSwapLayout, layoutContextDispatch, isIphone,
 }) => (
   <Button
-    color="primary"
+    color="muted"
     icon="minus"
     size="sm"
     data-test="hidePresentationButton"

bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss

@@ -21,6 +21,9 @@
   --color-danger: #DF2721;
   --color-warning: purple;
   --color-offline: var(--color-gray-light);
+  --color-muted: #586571;
+
+  --color-muted-background: #F3F6F9;
 
   --color-background: var(--color-gray-dark);