From e3cbfb59227acfc85cb81efbf09077e75083cd19 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Fri, 6 Oct 2023 22:29:36 +0100
Subject: [PATCH] Consistent outline/shadow styling

---
 src/components/ambassadorButton/ambassadorButton.module.scss   | 2 +-
 src/components/ambassadorCard/ambassadorCard.module.scss       | 2 +-
 src/pages/overlay/components/buttons/buttons.module.scss       | 3 ++-
 src/pages/overlay/components/card/card.module.scss             | 2 +-
 .../components/overlay/ambassadors/ambassadors.module.scss     | 1 +
 src/variables.scss                                             | 1 +
 6 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ambassadorButton/ambassadorButton.module.scss b/src/components/ambassadorButton/ambassadorButton.module.scss
index 88372947..94667915 100644
--- a/src/components/ambassadorButton/ambassadorButton.module.scss
+++ b/src/components/ambassadorButton/ambassadorButton.module.scss
@@ -15,7 +15,7 @@
   width: 100%;
 
   flex-shrink: 0;
-  box-shadow: 0 0.25rem 0.25rem $accent-color;
+  box-shadow: $shadow;
   border-radius: 0.5rem;
   transition: $transition;
   transition-property: filter;
diff --git a/src/components/ambassadorCard/ambassadorCard.module.scss b/src/components/ambassadorCard/ambassadorCard.module.scss
index 58ddd8b4..6b2b9e46 100644
--- a/src/components/ambassadorCard/ambassadorCard.module.scss
+++ b/src/components/ambassadorCard/ambassadorCard.module.scss
@@ -14,7 +14,7 @@
   background-color: $accent-color;
   border: 0.5rem solid $primary-color;
   border-radius: 1rem;
-  box-shadow: 0 0.2rem 0.2rem $accent-color;
+  box-shadow: $shadow;
   padding: 0.25rem 0 0.5rem;
 
   color: $primary-text;
diff --git a/src/pages/overlay/components/buttons/buttons.module.scss b/src/pages/overlay/components/buttons/buttons.module.scss
index 6162bc02..2938244d 100644
--- a/src/pages/overlay/components/buttons/buttons.module.scss
+++ b/src/pages/overlay/components/buttons/buttons.module.scss
@@ -16,7 +16,8 @@
     border-radius: 0.5rem;
     background: $primary-color;
     cursor: pointer;
-    box-shadow: 0 0.125rem 0.25rem $accent-color;
+    box-shadow: $shadow;
+    outline-color: $outline-color;
     transition: $transition;
     transition-property: outline, filter;
 
diff --git a/src/pages/overlay/components/card/card.module.scss b/src/pages/overlay/components/card/card.module.scss
index 9b6771c6..573d4cf2 100644
--- a/src/pages/overlay/components/card/card.module.scss
+++ b/src/pages/overlay/components/card/card.module.scss
@@ -9,8 +9,8 @@
   justify-content: space-between;
   align-items: center;
 
-  border: 0.25rem solid white;
   border-radius: 1.25rem;
+  box-shadow: $shadow;
   background: $primary-color;
   color: $primary-text;
 
diff --git a/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss b/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss
index c267fdce..7e5ca820 100644
--- a/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss
+++ b/src/pages/overlay/components/overlay/ambassadors/ambassadors.module.scss
@@ -88,6 +88,7 @@
   }
 
   .ambassadorButton {
+    outline-color: $outline-color;
     transition: $transition;
     transition-property: outline, filter;
 
diff --git a/src/variables.scss b/src/variables.scss
index d89edecf..c6d25e5f 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -13,6 +13,7 @@ $tooltip-background-color: #18181b;
 
 $font-family: "Nunito", sans-serif;
 $outline: 0.25rem solid $outline-color;
+$shadow: 0 0.125rem 1rem $accent-color;
 $transition: 0.3s ease;
 
 $slide-distance: 2.5rem;