Home page styling

src/button/Button.jsx

@@ -18,7 +18,10 @@ const variantToClassName = {
 };
 
 export const Button = forwardRef(
-  ({ variant = "default", on, off, className, children, ...rest }, ref) => {
+  (
+    { variant = "default", on, off, iconStyle, className, children, ...rest },
+    ref
+  ) => {
     const buttonRef = useObjectRef(ref);
     const { buttonProps } = useButton(rest, buttonRef);
 
@@ -33,10 +36,15 @@ export const Button = forwardRef(
 
     return (
       <button
-        className={classNames(variantToClassName[variant], className, {
-          [styles.on]: on,
-          [styles.off]: off,
-        })}
+        className={classNames(
+          variantToClassName[variant],
+          styles[iconStyle],
+          className,
+          {
+            [styles.on]: on,
+            [styles.off]: off,
+          }
+        )}
         {...filteredButtonProps}
         ref={buttonRef}
       >

src/button/Button.module.css

@@ -52,22 +52,22 @@ limitations under the License.
   background-color: #ffffff;
 }
 
-.iconButton svg * {
+.iconButton:not(.stroke) svg * {
   fill: #8e99a4;
 }
 
-.iconButton:hover svg * {
+.iconButton:not(.stroke):hover svg * {
   fill: #8d97a5;
 }
 
-.iconButton:hover svg * {
-  fill: #8d97a5;
-}
-
-.iconButton.on svg * {
+.iconButton.on:not(.stroke) svg * {
   fill: #0dbd8b;
 }
 
+.iconButton.on.stroke svg * {
+  stroke: #0dbd8b;
+}
+
 .hangupButton,
 .hangupButton:hover {
   background-color: #ff5b55;

src/button/CopyButton.jsx

@@ -4,19 +4,25 @@ import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
 import { Button } from "./Button";
 
-export function CopyButton({ value, children, ...rest }) {
+export function CopyButton({ value, children, variant, ...rest }) {
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
 
   return (
-    <Button {...rest} variant="copy" on={isCopied} onPress={setCopied}>
+    <Button
+      {...rest}
+      variant={variant || "copy"}
+      on={isCopied}
+      onPress={setCopied}
+      iconStyle={isCopied ? "stroke" : "fill"}
+    >
       {isCopied ? (
         <>
-          <span>Copied!</span>
+          {variant !== "icon" && <span>Copied!</span>}
           <CheckIcon />
         </>
       ) : (
         <>
-          <span>{children || value}</span>
+          {variant !== "icon" && <span>{children || value}</span>}
           <CopyIcon />
         </>
       )}