Merge pull request #293 from Tech-Start-UCalgary/Toggle

Redesigned toggle button
techstartucalgary · Jan 23, 2022 · c5daaec · c5daaec
2 parents 6bb8951 + a460490
commit c5daaec
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/src/pages/DocsPage.css b/src/pages/DocsPage.css
@@ -251,7 +251,8 @@ html {
   position: absolute;
   display: inline-block;
   height: 24px;
-  width: 55px;
+  width: 52px;
+  cursor: pointer;
   top: 16px;
 }
 
@@ -263,8 +264,7 @@ html {
 
 .switch__span {
   position: absolute;
-
-  background-color: #4b4c4b;
+  background-color: #12b0e0;
 
   cursor: pointer;
   top: 0;
@@ -276,25 +276,46 @@ html {
   border-top-right-radius: 35%;
   border-bottom-right-radius: 35%;
   transition: 0.4s;
+  display: inline;
 }
 
 .switch__span::before {
   content: "";
-
-  top: 3px;
-  height: 18px;
-  width: 18px;
   background-color: white;
 
+  top: 3px;
+  height: 18.5px;
+  width: 19px;
+  font-size: 21px;
   position: absolute;
+  bottom: 20px;
   border-radius: 50%;
   transition: 0.4s;
 }
 
 .switch__label input:checked + .switch__span::before {
-  transform: translateX(-16px);
+  transform: translateX(-21px);
+  background-color: rgb(255, 213, 75);
 }
 
 .switch__label input:checked + .switch__span {
-  background-color: #bef992;
+  background-color: #6cbb5c;
+}
+
+.faSun {
+  position: absolute;
+  left: 9%;
+  top: 15%;
+  color: rgb(255, 213, 75);
+  font-size: 18px;
+  z-index: 1;
+}
+
+.faMoon {
+  position: absolute;
+  right: 14%;
+  top: 18%;
+  font-size: 15px;
+  color: white;
+  z-index: 1;
 }
diff --git a/src/pages/DocsPage.tsx b/src/pages/DocsPage.tsx
@@ -6,8 +6,12 @@ import Emoji from "components/Emoji";
 import docsPage__logoblack from "images/tech-start-logo-black.png";
 import docsPage__logowhite from "images/tech-start-logo-white.png";
 import { faShower } from "@fortawesome/free-solid-svg-icons";
+import { faSun } from "@fortawesome/free-solid-svg-icons";
+import { faMoon } from "@fortawesome/free-solid-svg-icons";
 import GuidesSection from "components/DocsPageSections/GuidesSection";
 import { Link as LinkScroll } from "react-scroll";
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 function DocsPage() {
   const logo = { docsPage__logowhite, docsPage__logoblack };
@@ -99,6 +103,12 @@ function DocsPage() {
               {/*   <span className="switchSun"> <span style={theme === 'light' ? { color: '#ffc045' } : { color: 'grey' }}>☀</span></span>
               <div className="switchMoon"> <span style={theme === 'light' ? { color: 'grey' } : { color: 'white' }}>☾</span></div> */}
               <label className="switch__label">
+                {theme === "light" ? (
+                  <FontAwesomeIcon icon={faMoon} className="faMoon" />
+                ) : (
+                  <FontAwesomeIcon icon={faSun} className="faSun" />
+                )}
+
                 <input type="checkbox" onClick={() => themeToggler()}></input>
                 <span className="switch__span"></span>
               </label>