fixed the sizing issue for the themeToglle button to align with the F…

…igma design (#89) fixed the sizing issue for the themeToglle button to align with the FIgma design
bcgov · Sep 8, 2023 · 8dde5cb · 8dde5cb
1 parent 2eab895
commit 8dde5cb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/frontend/src/components/BCHeaderwSide/index.tsx b/frontend/src/components/BCHeaderwSide/index.tsx
@@ -128,7 +128,9 @@ const BCHeaderwSide = () => {
             <span className="header-full-name"> Quickstarter React Template </span>
           </Link>
           <HeaderGlobalBar className="align-items-center">
-          <ThemeToggle/>
+            <div className="mx-2">
+              <ThemeToggle/>
+            </div>
             <HeaderGlobalAction
               aria-label="Notifications"
               data-testid="header-button__notifications"

diff --git a/frontend/src/components/ThemeToggle/ThemeToggle.scss b/frontend/src/components/ThemeToggle/ThemeToggle.scss
@@ -1,11 +1,11 @@
 @use '@bcgov-nr/nr-fsa-theme/design-tokens/colors.scss' as colors;
 .theme-toggle {
-    width: 62px;
-    height: 31px;
+    width: 48px;
+    height: 24px;
     border-radius: 15px;
     display: flex;
     align-items: center;
-    padding: 2px;
+    padding: 3px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -19,8 +19,8 @@
     }
 
     .circle {
-      width: 26px;
-      height: 26px;
+      width: 18px;
+      height: 18px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
@@ -37,14 +37,15 @@
 
     &.on {
       .circle {
-        transform: translateX(31px);
+        transform: translateX(24px);
         background-color: white;
       }
     }
 
     .icon {
-      width: 23px;
-      height: 23px;
+      width: 16px;
+      height: 16px;
+      padding: 1px;
     }
     &.on {
         .icon {