diff --git a/src/button/Button.jsx b/src/button/Button.jsx index 57789b27..b6c3df98 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 ( - {() => (enabled ? "Stop sharing screen" : "Share screen")} diff --git a/src/button/Button.module.css b/src/button/Button.module.css index 265e69d3..72450d51 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;