From 51a2027d64b732e2de71bacca0ffd9ee7542f5ca Mon Sep 17 00:00:00 2001 From: Robert Long <robert@robertlong.me> Date: Tue, 15 Feb 2022 12:58:55 -0800 Subject: [PATCH] Fix screenshare button styling --- src/button/Button.jsx | 3 ++- src/button/Button.module.css | 16 ++++++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/button/Button.jsx b/src/button/Button.jsx index 57789b2..b6c3df9 100644 --- a/src/button/Button.jsx +++ b/src/button/Button.jsx @@ -14,6 +14,7 @@ import { TooltipTrigger } from "../Tooltip"; export const variantToClassName = { default: [styles.button], toolbar: [styles.toolbarButton], + toolbarSecondary: [styles.toolbarButtonSecondary], icon: [styles.iconButton], secondary: [styles.secondary], copy: [styles.copyButton], @@ -103,7 +104,7 @@ export function VideoButton({ muted, ...rest }) { export function ScreenshareButton({ enabled, className, ...rest }) { return ( <TooltipTrigger> - <Button variant="toolbar" {...rest} on={enabled}> + <Button variant="toolbarSecondary" {...rest} on={enabled}> <ScreenshareIcon /> </Button> {() => (enabled ? "Stop sharing screen" : "Share screen")} diff --git a/src/button/Button.module.css b/src/button/Button.module.css index 265e69d..72450d5 100644 --- a/src/button/Button.module.css +++ b/src/button/Button.module.css @@ -16,6 +16,7 @@ limitations under the License. .button, .toolbarButton, +.toolbarButtonSecondary, .iconButton, .iconCopyButton, .secondary, @@ -48,6 +49,7 @@ limitations under the License. .button:focus, .toolbarButton:focus, +.toolbarButtonSecondary:focus, .iconButton:focus, .iconCopyButton:focus, .secondary:focus, @@ -55,14 +57,16 @@ limitations under the License. outline: auto; } -.toolbarButton { +.toolbarButton, +.toolbarButtonSecondary { width: 50px; height: 50px; border-radius: 50px; background-color: var(--bgColor2); } -.toolbarButton:hover { +.toolbarButton:hover, +.toolbarButtonSecondary:hover { background-color: var(--bgColor4); } @@ -71,6 +75,10 @@ limitations under the License. background-color: #ffffff; } +.toolbarButtonSecondary.on { + background-color: #0dbd8b; +} + .iconButton:not(.stroke) svg * { fill: #ffffff; } @@ -100,6 +108,10 @@ limitations under the License. fill: #21262c; } +.toolbarButtonSecondary.on svg * { + fill: #ffffff; +} + .secondary, .copyButton { color: #0dbd8b;