fix: focus dialog primary button on open

apps/web/src/components/dialogs/dialog.js

@@ -120,16 +120,10 @@ function Dialog(props) {
           >
             {props.negativeButton && (
               <RebassButton
-                variant="primary"
+                variant="dialog"
                 data-test-id="dialog-no"
                 onClick={props.negativeButton.onClick}
                 color="text"
-                fontWeight="bold"
-                bg={"transparent"}
-                sx={{
-                  opacity: props.negativeButton.disabled ? 0.7 : 1,
-                  ":hover": { bg: "bgSecondary" },
-                }}
               >
                 {props.negativeButton.text || "Cancel"}
               </RebassButton>
@@ -137,15 +131,9 @@ function Dialog(props) {
             {props.positiveButton && (
               <RebassButton
                 {...props.positiveButton.props}
-                variant="primary"
-                color="primary"
-                fontWeight="bold"
-                bg={"transparent"}
+                variant="dialog"
                 data-test-id="dialog-yes"
-                sx={{
-                  opacity: props.positiveButton.disabled ? 0.7 : 1,
-                  ":hover": { bg: "bgSecondary" },
-                }}
+                autoFocus
                 disabled={props.positiveButton.disabled || false}
                 onClick={
                   !props.positiveButton.disabled

apps/web/src/theme/variants/button.js

@@ -9,7 +9,7 @@ class ButtonFactory {
       anchor: new Anchor(),
       tool: new Tool(),
       icon: new Icon(),
-      shade: new Shade(),
+      dialog: new Dialog(),
       statusitem: new StatusItem(),
       menuitem: new MenuItem(),
     };
@@ -36,9 +36,11 @@ class Default {
         filter: "brightness(98%)",
       },
       outline: "none",
-      ":focus-visible:not(:active)": {
-        boxShadow: "0px 0px 0px 2px var(--text)",
-      },
+      ":focus:not(:active), :focus-within:not(:active), :focus-visible:not(:active)":
+        {
+          filter: "brightness(90%)",
+          bg: "bgSecondary",
+        },
       ":disabled": {
         opacity: 0.5,
         cursor: "not-allowed",
@@ -57,9 +59,24 @@ class Primary {
   }
 }
 
-class Shade {
+class Dialog {
   constructor() {
-    return { variant: "buttons.primary", color: "primary", bg: "shade" };
+    return {
+      variant: "buttons.primary",
+      color: "primary",
+      fontWeight: "bold",
+      bg: "transparent",
+      ":hover": { bg: "bgSecondary" },
+      ":focus:not(:active), :focus-within:not(:active), :focus-visible:not(:active)":
+        {
+          bg: "hover",
+          filter: "brightness(90%)",
+        },
+      ":disabled": {
+        opacity: 0.7,
+        cursor: "not-allowed",
+      },
+    };
   }
 }