From be0d5abb1aab2026ede9081a15e2da704ae7a41f Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Fri, 4 Jun 2021 11:27:50 -0500
Subject: [PATCH] Add hover and focus states to modal X button

---
 stylesheets/components/Modal.scss | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss
index 282c2f83bd..0faa697893 100644
--- a/stylesheets/components/Modal.scss
+++ b/stylesheets/components/Modal.scss
@@ -35,6 +35,7 @@
   &__close-button {
     @include button-reset;
 
+    border-radius: 4px;
     float: right;
     height: 24px;
     width: 24px;
@@ -52,14 +53,24 @@
       @include dark-theme {
         @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
       }
+    }
 
+    @include light-theme {
+      &:hover,
       &:focus {
-        @include keyboard-mode {
-          background-color: $color-ultramarine;
-        }
-        @include dark-keyboard-mode {
-          background-color: $color-ultramarine-light;
-        }
+        background: $color-gray-02;
+      }
+      &:active {
+        background: $color-gray-05;
+      }
+    }
+    @include dark-theme {
+      &:hover,
+      &:focus {
+        background: $color-gray-80;
+      }
+      &:active {
+        background: $color-gray-75;
       }
     }
   }