Fix screenshare button styling
This commit is contained in:
parent
0f6b8f9bb1
commit
51a2027d64
2 changed files with 16 additions and 3 deletions
src/button
|
@ -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")}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue