From 539cef0bf60cad438499a69d76dba2c27cc16c9a Mon Sep 17 00:00:00 2001
From: Brittany Chiang <brittany.chiang@gmail.com>
Date: Tue, 25 Apr 2023 12:48:24 -0400
Subject: [PATCH] Fix some button stuff

---
 src/components/nav.js     |  8 ++++++--
 src/styles/GlobalStyle.js |  6 ++++--
 src/styles/mixins.js      | 34 +++++++++++++++-------------------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/nav.js b/src/components/nav.js
index c0e67692d1..e48875cd12 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -77,7 +77,9 @@ const StyledNav = styled.nav`
         top: 0;
         left: 0;
         z-index: -1;
-        transition: var(--transition);
+        @media (prefers-reduced-motion: no-preference) {
+          transition: var(--transition);
+        }
       }
 
       .logo-container {
@@ -85,8 +87,10 @@ const StyledNav = styled.nav`
         z-index: 1;
         svg {
           fill: none;
-          transition: var(--transition);
           user-select: none;
+          @media (prefers-reduced-motion: no-preference) {
+            transition: var(--transition);
+          }
           polygon {
             fill: var(--navy);
           }
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
index f38a4d6f90..d10850a258 100644
--- a/src/styles/GlobalStyle.js
+++ b/src/styles/GlobalStyle.js
@@ -370,8 +370,8 @@ const GlobalStyle = createGlobalStyle`
     overflow: hidden;
     z-index: -99;
 
-    &:focus,
-    &:active {
+    &:hover,
+    &:focus {
       background-color: var(--green);
       color: var(--navy);
       top: 0;
@@ -380,6 +380,8 @@ const GlobalStyle = createGlobalStyle`
       height: auto;
       overflow: auto;
       z-index: 99;
+      box-shadow: none;
+      transform: none;
     }
   }
 
diff --git a/src/styles/mixins.js b/src/styles/mixins.js
index 870b862595..a02cd9ea6f 100644
--- a/src/styles/mixins.js
+++ b/src/styles/mixins.js
@@ -9,13 +9,11 @@ const button = css`
   font-family: var(--font-mono);
   line-height: 1;
   text-decoration: none;
-  cursor: pointer;
-  transition: var(--transition);
   padding: 1.25rem 1.75rem;
+  transition: var(--transition);
 
   &:hover,
-  &:focus,
-  &:active {
+  &:focus-visible {
     outline: none;
     box-shadow: 4px 4px 0 0 var(--green);
     transform: translate(-5px, -5px);
@@ -45,9 +43,9 @@ const mixins = {
     color: inherit;
     position: relative;
     transition: var(--transition);
+
     &:hover,
-    &:active,
-    &:focus {
+    &:focus-visible {
       color: var(--green);
       outline: 0;
     }
@@ -55,14 +53,12 @@ const mixins = {
 
   inlineLink: css`
     display: inline-block;
-    text-decoration: none;
-    text-decoration-skip-ink: auto;
     position: relative;
-    transition: var(--transition);
     color: var(--green);
+    transition: var(--transition);
+
     &:hover,
-    &:focus,
-    &:active {
+    &:focus-visible {
       color: var(--green);
       outline: 0;
       &:after {
@@ -81,8 +77,10 @@ const mixins = {
       position: relative;
       bottom: 0.37em;
       background-color: var(--green);
-      transition: var(--transition);
       opacity: 0.5;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: var(--transition);
+      }
     }
   `,
 
@@ -98,11 +96,10 @@ const mixins = {
     font-family: var(--font-mono);
     line-height: 1;
     text-decoration: none;
-    cursor: pointer;
     transition: var(--transition);
+
     &:hover,
-    &:focus,
-    &:active {
+    &:focus-visible {
       outline: none;
       box-shadow: 3px 3px 0 0 var(--green);
       transform: translate(-4px, -4px);
@@ -122,11 +119,10 @@ const mixins = {
     font-family: var(--font-mono);
     line-height: 1;
     text-decoration: none;
-    cursor: pointer;
     transition: var(--transition);
+
     &:hover,
-    &:focus,
-    &:active {
+    &:focus-visible {
       outline: none;
       box-shadow: 4px 4px 0 0 var(--green);
       transform: translate(-5px, -5px);
@@ -141,7 +137,7 @@ const mixins = {
     transition: var(--transition);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       box-shadow: 0 20px 30px -15px var(--navy-shadow);
     }
   `,