diff --git a/src/components/ambassadorButton/ambassadorButton.module.scss b/src/components/ambassadorButton/ambassadorButton.module.scss index 8837294..9466791 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 58ddd8b..6b2b9e4 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 6162bc0..2938244 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 9b6771c..573d4cf 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 c267fdc..7e5ca82 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/pages/overlay/components/toggle/Toggle.tsx b/src/pages/overlay/components/toggle/Toggle.tsx index 0b73981..3646cc3 100644 --- a/src/pages/overlay/components/toggle/Toggle.tsx +++ b/src/pages/overlay/components/toggle/Toggle.tsx @@ -20,11 +20,11 @@ export default function Toggle(props: ToggleProps) { return ( ); } diff --git a/src/pages/overlay/components/toggle/toggle.module.scss b/src/pages/overlay/components/toggle/toggle.module.scss index fe7351e..84eac14 100644 --- a/src/pages/overlay/components/toggle/toggle.module.scss +++ b/src/pages/overlay/components/toggle/toggle.module.scss @@ -1,78 +1,56 @@ @import "../../../../variables.scss"; -$knob: 1rem; -$padding: 0.2rem; - .container { display: flex; align-items: center; - gap: 1rem; + gap: 0.5rem; cursor: pointer; &:hover { - .slider { - outline: $outline !important; + .toggle { + input { + outline: $outline; + } } } - .label { - font-size: 0.75rem; - } - - .switch { + .toggle { position: relative; - display: inline-block; - width: ($knob * 2) + ($padding * 2); - height: $knob + ($padding * 2); - margin-top: 0.25rem; input { - opacity: 0; - width: 0; - height: 0; - - &:focus + .slider { - outline: $outline !important; - } - - &:checked + .slider { - background: $primary-color; - outline: 0.125rem solid $tertiary-color; - - &::before { - transform: translateX($knob); + appearance: none; + background: $tertiary-color; + border: none; + border-radius: 0.5rem; + cursor: inherit; + display: block; + width: 1.5rem; + height: 1.5rem; + outline-color: $outline-color; + transition: $transition outline; + + &:checked { + background: $secondary-color; + + ~ span { + opacity: 1; } } } - .slider { + span { + color: $primary-color; + opacity: 0; position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: $knob; - background: $tertiary-color; - transition: $transition; - transition-property: background, outline; - - &::before { - position: absolute; - content: ""; - height: $knob; - width: $knob; - left: $padding; - top: $padding; - border-radius: 50%; - background-color: white; - transition: $transition; - transition-property: transform; - - @media (prefers-reduced-motion) { - transition: unset; - } - } + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + transition: $transition opacity; } } + + .label { + font-size: 0.75rem; + } } diff --git a/src/variables.scss b/src/variables.scss index d89edec..02d1d85 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -13,6 +13,9 @@ $tooltip-background-color: #18181b; $font-family: "Nunito", sans-serif; $outline: 0.25rem solid $outline-color; +$shadow: + 0 0.125rem 0.5rem rgba($accent-color, 0.75), + 0 0.125rem 1rem rgba($accent-color, 0.25); $transition: 0.3s ease; $slide-distance: 2.5rem;