Improve button outlines

src/app/components/pages/SubjectLandingPage.tsx

@@ -64,7 +64,7 @@ const RandomQuestionBanner = ({context}: {context?: PageContextState}) => {
     return <div  className="d-flex flex-column pb-4 container-override random-question-panel" >
         <div className="d-flex my-3 justify-content-between align-items-center">
             <h4 className="m-0">Try a random question!</h4>
-            <button className="btn btn-link invert-underline d-flex align-items-center gap-2" onClick={handleGetDifferentQuestion}>
+            <button className="btn btn-link invert-underline d-flex align-items-center gap-2 p-1" onClick={handleGetDifferentQuestion}>
                 Get a different question
                 <i className="icon icon-refresh icon-color-black"/>
             </button>

src/scss/phy/button.scss

@@ -12,8 +12,8 @@
   opacity: 100%;
 
   &:focus:not(:focus-visible) {
-    outline: none !important;
-    box-shadow: 0 0 0 3px var(--buttons-light), 0 0 0 4.5px var(--buttons-focus-ring) !important;
+    outline: 1px solid var(--buttons-focus-ring) !important;
+    outline-offset: 3px;
   }
 
   &.btn-sm {
@@ -126,8 +126,8 @@
   }
 
   &:focus:not(:focus-visible) {
-    // TODO: depending on use case (colour of background this is used on), we may need to change how this offset border is generated
-    box-shadow: 0 0 0 3px var(--buttons-dark), 0 0 0 4.5px var(--buttons-focus-ring) !important;
+    outline: 2px solid var(--buttons-focus-ring) !important;
+    outline-offset: 3px;
   }
 
   &:disabled, &.disabled {