Fix screenshare button styling

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

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;