Fix screenshare button styling

This commit is contained in:
Robert Long 2022-02-15 12:58:55 -08:00
parent 0f6b8f9bb1
commit 51a2027d64
2 changed files with 16 additions and 3 deletions

View file

@ -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")}

View file

@ -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;