Consistent outline/shadow styling

alveusgg · Oct 7, 2023 · e3cbfb5 · e3cbfb5
1 parent ea7c456
commit e3cbfb5
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;