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

@@ -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,

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) => {

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