fix: add styling for header theme toggle switch button (openedx#26)

Author: hinakhadim

paragon/_extras.scss

@@ -2,82 +2,65 @@
 
 .theme-toggle-button{
     position: relative;
-    width: 40px;
-    height: 40px;
-}
+    display: flex;
+    align-items: center;
 
-#darkmode {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  margin: auto !important;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: scale(1.5);
-}
+    .light-theme-icon > span, .dark-theme-icon > span{
+        width: 18px;
+        color: $primary;
+    }
 
-.darkmode_icon {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  background: $warning-400;
-  transform-origin: center center;
-  transition: transform 0.75s ease-in-out, $page-color-transition;
+    .toggle-switch {
+        display: flex;
+        margin: 0 2px;
 
-  &::after {
-    position: absolute;
-    content: '';
-    width: 16px;
-    height: 16px;
-    left: 6px;
-    bottom: 4px;
-    border-radius: 10px;
-    background: $body-bg;
-    transform-origin: center center;
-    transition: transform 0.2s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition;
-  }
+        label {
+            margin: 0
+        }
 
-  .ray {
-    position: absolute;
-    left: 7px;
-    top: 7px;
-    width: 6px;
-    height: 6px;
-    border-radius: 6px;
-    background: transparent;
-    transform-origin: center;
-    transition: transform 0.5s ease-in-out, $page-color-transition;
+/* The switch - the box around the slider */
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 45px;
+            height: 24px;
 
-    &:nth-child(1) {
-        transform: rotate(45deg) translateX(0);
-    }
-    &:nth-child(2) {
-        transform: rotate(90deg) translateX(0);
-    }
-    &:nth-child(3) {
-        transform: rotate(135deg) translateX(0);
-    }
-    &:nth-child(4) {
-        transform: rotate(180deg) translateX(0);
-    }
-    &:nth-child(5) {
-        transform: rotate(225deg) translateX(0);
-    }
-    &:nth-child(6) {
-        transform: rotate(270deg) translateX(0);
-    }
-    &:nth-child(7) {
-        transform: rotate(315deg) translateX(0);
-    }
-    &:nth-child(8) {
-        transform: rotate(360deg) translateX(0);
+            /* Hide default HTML checkbox */
+            input {
+                opacity: 0;
+                width: 0;
+                height: 0;
+            }
+
+            /* The slider */
+            .slider {
+                position: absolute;
+                cursor: pointer;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: #AEC7F6;
+                transition: .4s;
+
+                &::before{
+                    position: absolute;
+                    content: "";
+                    height: 20px;
+                    width: 20px;
+                    left: 3px;
+                    bottom: 2px;
+                    background-color: white;
+                    transition: .4s;
+                }
+
+                &.round{
+                    border-radius: 34px;
+                    &::before{
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
     }
-  }
 }

themes/dark/_extras.scss

@@ -1457,4 +1457,23 @@ section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSI
 
 .donut-chart-text {
     fill: $primary-500;
-}
+}
+
+.theme-toggle-button{
+    .light-theme-icon > span, .dark-theme-icon > span{
+        color: $text-color-primary;
+    }
+    .toggle-switch {
+        .switch {
+            /* The slider */
+            .slider {
+                background-color: #ccc;
+                box-shadow: 0 0 1px #ccc;
+                &::before{
+                    transform: translateX(19px);
+                    background-color: $text-color-primary;
+                }
+            }
+        }
+    }
+}

themes/dark/_learning.scss

@@ -57,6 +57,9 @@
         &.complete {
             color: $success;
         }
+        &.active::after {
+            background: $primary;
+        }
     }
 }
 
@@ -93,3 +96,18 @@
     }
 }
 
+#root {
+    nav[aria-label=breadcrumb] {
+        background: $primary-light;
+        ol {
+            li {
+                font-size: 14px;
+                line-height: 20px;
+                a {
+                    color: $text-color-primary !important;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}

themes/dark/_utilities.scss

@@ -282,47 +282,3 @@ a.muted-link {
 }
 
 @import "./learning";
-
-
-// toggle theme button for dark mode
-
-.darkmode_icon {
-  transform: scale(0.6);
-  background: $warning-400;
-
-  &::after {
-    left: 15px;
-    bottom: 8px;
-    transform: scale(0);
-    transition: transform 1s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition;
-  }
-  
-  .ray {
-    background: $warning-400;
-
-    &:nth-child(1) {
-      transform: rotate(45deg) translateX(-16px);
-    }
-    &:nth-child(2) {
-      transform: rotate(90deg) translateX(-16px);
-    }
-    &:nth-child(3) {
-      transform: rotate(135deg) translateX(-16px);
-    }
-    &:nth-child(4) {
-      transform: rotate(180deg) translateX(-16px);
-    }
-    &:nth-child(5) {
-      transform: rotate(225deg) translateX(-16px);
-    }
-    &:nth-child(6) {
-      transform: rotate(270deg) translateX(-16px);
-    }
-    &:nth-child(7) {
-      transform: rotate(315deg) translateX(-16px);
-    }
-    &:nth-child(8) {
-      transform: rotate(360deg) translateX(-16px);
-    }    
-  }
-}