Merge remote-tracking branch 'origin/feat/new-nav' into feat/new-nav

vevcom · Jan 8, 2024 · fbc38d4 · fbc38d4
2 parents 570ead5 + 1153255
commit fbc38d4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 63 deletions.
diff --git a/src/app/components/EditModeSwitch/EditModeSwitch.module.scss b/src/app/components/EditModeSwitch/EditModeSwitch.module.scss
@@ -2,62 +2,23 @@
 
 .EditModeSwitch {
     margin: ohma.$gap;
-    display: flex;
-    flex-direction: column;
-    > label {
-        font-size: ohma.$fonts-s;
-        margin-bottom: 3px;
-    }
-    > div {
-        position: relative;
-        display: inline-block;
-        width: 36px;
-        height: 19px;
-
-        input {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            cursor: pointer;
-            opacity: 0;
-            z-index: 2;
 
-            &:checked + span {
-                background-color: ohma.$colors-primary;
-            }
+    label {
+        cursor: pointer;
 
-            &:focus + span {
-                box-shadow: 0 0 1px ohma.$colors-primary;
-            }
+        input {
+            display: none;
 
-            &:checked + span:before {
-                transform: translateX(15px);
+            &:checked + .EditModeSwitchIcon {
+                color: ohma.$colors-primary;
             }
         }
 
-        span {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            transition: .4s;
-            border-radius: 17px;
-
-            &:before {
-                position: absolute;
-                content: "";
-                height: 15px;
-                width: 15px;
-                left: 2px;
-                bottom: 2px;
-                background-color: ohma.$colors-white;
-                transition: .4s;
-                border-radius: 50%;
-            }
+        .EditModeSwitchIcon {
+            width: 20px;
+            height: 20px;
+            color: ohma.$colors-white;
+            transition: 0.2s;
         }
     }
 }
diff --git a/src/app/components/EditModeSwitch/EditModeSwitch.tsx b/src/app/components/EditModeSwitch/EditModeSwitch.tsx
@@ -3,6 +3,8 @@ import { useContext } from 'react'
 import { EditModeContext } from '@/context/EditMode'
 import styles from './EditModeSwitch.module.scss'
 import type { ChangeEvent } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencil } from '@fortawesome/free-solid-svg-icons'
 
 export default function EditModeSwitch() {
     const editingContext = useContext(EditModeContext)
@@ -14,11 +16,10 @@ export default function EditModeSwitch() {
 
     return (
         <div className={styles.EditModeSwitch}>
-            <label>Edit</label>
-            <div>
+            <label>
                 <input checked={editingContext.editMode} type="checkbox" id="editModeSwitch" onChange={handleChange} />
-                <span className={styles.slider}></span>
-            </div>
+                <FontAwesomeIcon className={styles.EditModeSwitchIcon} icon={faPencil} />
+            </label>
         </div>
     )
 }
diff --git a/src/app/components/NavBar/MobileNavBar.module.scss b/src/app/components/NavBar/MobileNavBar.module.scss
@@ -36,17 +36,16 @@
     }
     overflow: hidden;
     .editMode {
-        $size: 50px;
-        $padding: 1em;
-        $height: calc(#{$size} + #{$padding});
+        background-color: ohma.$colors-black;
         position: absolute;
-        top: calc(-1*$height);
+        bottom: calc(100% + 3*ohma.$gap);
         right: 0;
-        height: $height;
-        scale: 1.3 bottom right;
-        border-start-start-radius: 15px;
-        background-color: ohma.$colors-black;
-        padding-bottom: 1em;
+        border-start-start-radius: 50%;
+        transform: translateY(50%);
+        svg {
+            width: 30px;
+            height: 30px;
+        }
     }
 }