From 47b8299625d8b48dd5b59bba0bc2b03ea94b0b9f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Sep 2022 10:47:37 +0800
Subject: [PATCH] Only use button active item focus in modal buttons

This is useful for keyboard tabbing but we don't want it on
all items as it creates a weird effect.

Fixes: https://github.com/omnivore-app/omnivore/issues/1197
---
 packages/web/components/elements/Button.tsx                 | 6 ------
 packages/web/components/elements/ModalPrimitives.tsx        | 6 ++++++
 .../web/components/templates/homeFeed/EditTitleModal.tsx    | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 0ae54959e..5c956ba29 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -29,9 +29,6 @@ export const Button = styled('button', {
         color: '$omnivoreGray',
         bg: '$omnivoreCtaYellow',
         p: '10px 13px',
-        '&:focus': {
-          outline: '5px auto -webkit-focus-ring-color',
-        },
       },
       ctaOutlineYellow: {
         boxSizing: 'border-box',
@@ -48,9 +45,6 @@ export const Button = styled('button', {
         color: '$utilityTextDefault',
         bg: 'transparent',
         p: '9px 12px',
-        '&:focus': {
-          outline: '5px auto -webkit-focus-ring-color',
-        },
       },
       ctaLightGray: {
         border: 0,
diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index ec5ee1416..2790897e9 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -90,6 +90,12 @@ export const ModalButtonBar = (props: ModalButtonBarProps) => {
         gap: '10px',
         width: '100%',
         height: '80px',
+        'input:focus': {
+          outline: '5px auto -webkit-focus-ring-color',
+        },
+        'button:focus': {
+          outline: '5px auto -webkit-focus-ring-color',
+        },
       }}
     >
       <Button style={'ctaOutlineYellow'} type="button" onClick={(event) => {
diff --git a/packages/web/components/templates/homeFeed/EditTitleModal.tsx b/packages/web/components/templates/homeFeed/EditTitleModal.tsx
index ede501393..a913d34f2 100644
--- a/packages/web/components/templates/homeFeed/EditTitleModal.tsx
+++ b/packages/web/components/templates/homeFeed/EditTitleModal.tsx
@@ -134,7 +134,7 @@ export function EditTitleModal(props: EditTitleModalProps): JSX.Element {
               <HStack distribution="end" css={{ mt: '12px', width: '100%' }}>
                 <Button
                   onClick={() => props.onOpenChange(false)}
-                  style="ctaGray"
+                  style="ctaOutlineYellow"
                   css={{ mr: '16px' }}
                 >
                   Cancel