DM switch, fix Benefits bg, styles

src/components/common/footer/footer.module.scss

@@ -337,20 +337,33 @@
       p {
         margin: 0;
         line-height: 1;
-        color: var(--color-grey-light);
         font-size: tovw(18px, 'default', 14px);
         font-weight: 400 !important;
       }
     }
 
-    li:first-of-type {
+    li:first-child {
+      color: var(--color-grey-light);
+    }
+
+    li:last-child {
       @include respond-to('mobile') {
         margin-bottom: tovw(32px, 'tablet', 32px);
         gap: tovw(32px, 'mobile');
       }
 
       display: flex;
+      height: fit-content;
       gap: tovw(37px, 'default', 24px);
+
+      p {
+        display: flex;
+        align-items: center;
+
+        label {
+          margin-left: tovw(8px, 'default', 6px);
+        }
+      }
     }
   }
 }

src/components/common/footer/index.tsx

@@ -9,6 +9,7 @@ import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
 import Link from '~/components/primitives/link'
+import Switch from '~/components/primitives/switch'
 import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
 
 import {
@@ -242,6 +243,9 @@ export const Footer = () => {
                 </li>
               </ul>
               <ul className={s['sub__footer__links']}>
+                <li>
+                  <p>Laconic, The Source of Proof</p>
+                </li>
                 <li>
                   <Link href="/privacy-policy" variant="nav">
                     Privacy Policy
@@ -249,9 +253,9 @@ export const Footer = () => {
                   <Link href="/terms-of-use" variant="nav">
                     Terms of Use
                   </Link>
-                </li>
-                <li>
-                  <p>Laconic, The Source of Proof</p>
+                  <p>
+                    <span>Dark Mode</span> <Switch />
+                  </p>
                 </li>
               </ul>
             </nav>

src/components/primitives/select/select.css

@@ -1,66 +0,0 @@
-.select {
-  height: 100%;
-  display: flex;
-
-  &__control {
-    appearance: none;
-    width: 100%;
-    min-height: unset;
-    place-self: end;
-    font-size: tovw(24px, 'default', 18px);
-    padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px);
-    background: rgb(142 142 142 / 0.1) !important;
-    border: tovw(1px, 'default', 1px) solid transparent !important;
-    border-radius: tovw(8px, 'default', 8px) !important;
-    transition: unset !important;
-
-    &:hover {
-      border: tovw(1px, 'default', 1px) solid transparent;
-    }
-
-    &--is-focused {
-      border: tovw(1px, 'default', 1px) solid var(--color-accent) !important;
-      background: rgb(0 0 244 / 0.1) !important;
-      transition: all 250ms;
-    }
-  }
-
-  &__option {
-    color: var(--color-grey-light) !important;
-
-    &--is-focused {
-      color: white !important;
-      background-color: unset !important;
-    }
-
-    &--is-selected {
-      background-color: unset !important;
-      color: white !important;
-    }
-  }
-
-  [class$='-menu'] {
-    background: rgb(0 0 0 / 0.3);
-    backdrop-filter: blur(2px);
-    margin: 0;
-  }
-
-  [class$='-indicatorContainer'] {
-    padding: 0 tovw(8px, 'default', 2px);
-  }
-
-  [class$='-ValueContainer'],
-  [class$='-Input'] {
-    height: 100%;
-    padding: 0 !important;
-    margin: 0;
-  }
-
-  &__single-value {
-    color: var(--color-white) !important;
-  }
-
-  &__placeholder {
-    color: var(--color-grey-light) !important;
-  }
-}

src/components/primitives/switch/index.tsx

@@ -0,0 +1,12 @@
+import s from './switch.module.scss'
+
+const Switch = () => {
+  return (
+    <label className={s.switch}>
+      <input type="checkbox" />
+      <span className={s.slider}></span>
+    </label>
+  )
+}
+
+export default Switch

src/components/primitives/switch/switch.module.scss

@@ -0,0 +1,49 @@
+@import '~/css/helpers';
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: tovw(24px, 'default', 24px);
+  height: tovw(15px, 'default', 15px);
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-black);
+  border-radius: tovw(100px, 'default', 100px);
+  border: tovw(1px, 'default', 1px) solid var(--color-white);
+  transition: var(--normal-transition);
+}
+
+.slider::before {
+  position: absolute;
+  content: '';
+  height: tovw(9px, 'default', 9px);
+  width: tovw(9px, 'default', 9px);
+  left: tovw(2px, 'default', 2px);
+  bottom: tovw(2px, 'default', 2px);
+  background-color: white;
+  border-radius: 50%;
+  transition: var(--normal-transition);
+}
+
+input:checked + .slider {
+  border: tovw(1px, 'default', 1px) solid var(--color-black);
+  background-color: var(--color-white);
+}
+
+input:checked + .slider::before {
+  background-color: var(--color-black);
+  transform: translateX(tovw(10px, 'default', 10px));
+}

src/components/sections/homepage/benefits/benefits.module.scss

@@ -88,7 +88,7 @@
     height: auto;
   }
 
-  margin: 0 tovw(-56px, 'default', -56px);
+  margin: 0 tovw(-56px, 'default', -116px);
   margin-top: tovw(72px, 'default', 60px);
   background-image: url('/images/benefit-bg.png');
   background-position: center center;