Merge pull request #7 from OpenRedSoftware/darkmode

Add Dark Mode + Toggle support
OpenRedSoftware · Jul 13, 2023 · 711e4c3 · 711e4c3
2 parents ac82c4d + 4bca504
commit 711e4c3
Show file tree

Hide file tree

Showing 41 changed files with 293 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "mdbreact": "^5.2.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
+    "react-bootstrap-icons": "^1.10.3",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-redux": "^8.0.7",

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favico.ico" />
@@ -28,7 +28,8 @@
   </head>
   <body>
     <noscript>
-      PineappleResume.com - Our payment gateway requires JavaScript to be enabled in your browser.
+      PineappleResume.com - Our payment gateway requires JavaScript to be
+      enabled in your browser.
     </noscript>
     <div id="root"></div>
   </body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -9,7 +9,5 @@
     }
   ],
   "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "display": "standalone"
 }
diff --git a/public/res/icons/behavioral.svg b/public/res/icons/behavioral.svg
diff --git a/public/res/icons/code.svg b/public/res/icons/code.svg
diff --git a/public/res/icons/file-circle-question-solid.svg b/public/res/icons/file-circle-question-solid.svg
diff --git a/public/res/icons/file-pen-solid.svg b/public/res/icons/file-pen-solid.svg
diff --git a/public/res/icons/guides.svg b/public/res/icons/guides.svg
diff --git a/public/res/icons/improve.svg b/public/res/icons/improve.svg
diff --git a/public/res/icons/salary.svg b/public/res/icons/salary.svg
diff --git a/public/res/icons/sd.svg b/public/res/icons/sd.svg
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
@@ -1,4 +1,3 @@
-import "../../pages/index.css";
 import React, { useEffect, useState } from "react";
 import "./styles.css";
 

diff --git a/src/components/Carousel/styles.css b/src/components/Carousel/styles.css
@@ -42,16 +42,25 @@
   grid-row: 2;
   justify-self: center;
 }
+[data-bs-theme='light'] {
+  --color-carousel-dot: white;
+  --color-carousel-dot-inverse: #696A6B;
+}
+
+[data-bs-theme='dark'] {
+  --color-carousel-dot: #696A6B;
+  --color-carousel-dot-inverse: #ADB5BD;
+}
 .carousel__dot {
-  background-color: white;
+  background-color: var(--color-carousel-dot);
   border-radius: 50%;
-  border: 0.0625rem solid #696a6b;
+  border: 0.0625rem solid var(--color-carousel-dot-inverse);
   display: block;
   height: 0.5rem;
   width: 0.5rem;
 }
 .carousel__dot.active {
-  background-color: #696a6b;
+  background-color: var(--color-carousel-dot-inverse);
 }
 .carousel__citation {
   display: block;

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -7,15 +7,15 @@ const FooterPage = () => {
       className="navbar navbar-default font-small"
       role="navigation"
     >
-      <div className="footer-copyright py-1 me-auto ps-sm-3">
+      <div className="py-1 me-auto ps-sm-3">
         &copy; {new Date().getFullYear()} Copyright:{" "}
         <Link to="/"> PineappleResume.com </Link>
       </div>
       <div className="pe-sm-3">
         <Link to="/privacy"
-          style={{ textDecoration: "none", color: "black" }}
+          style={{ textDecoration: "none", color: "var(--color-text)" }}
         >Privacy</Link> | <Link to="/terms"
-          style={{ textDecoration: "none", color: "black" }}
+          style={{ textDecoration: "none", color: "var(--color-text)" }}
         >Terms & Conditions</Link>
       </div>
     </div>

diff --git a/src/components/GuideCard.tsx b/src/components/GuideCard.tsx
@@ -3,15 +3,13 @@ import { Card } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
 function GuideCard(props) {
+  const Image = props.image;
   return (
     <Card style={{ width: "18rem", maxWidth: "95%", margin: "1rem" }}>
       <Link to={props.linkdestination} style={{ textDecoration: "none" }}>
-        <Card.Img
-          variant="top"
-          style={{ padding: "30%", height: "15rem" }}
-          src={props.image}
-          alt={props.title + " icon"}
-        />
+        <div style={{ padding: "30%", height: "15rem", textAlign: "center" }}>
+          <Image className="svg-icon" alt={props.title + " icon"} />
+        </div>
         <Card.Body>
           <Card.Title style={{ textAlign: "center" }}>{props.title}</Card.Title>
           <Card.Text style={{ textAlign: "center" }}>

diff --git a/src/components/Header/Theme.tsx b/src/components/Header/Theme.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import Button from "react-bootstrap/Button";
+import { SunFill, MoonStarsFill } from "react-bootstrap-icons";
+
+function ThemeToggleButton() {
+  const [theme, setTheme] = useState(getPreferredTheme());
+
+  useEffect(() => {
+    applyTheme(theme);
+    setStoredTheme(theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={toggleTheme}
+    >
+      {theme === "dark" ? <MoonStarsFill /> : <SunFill />}
+    </Button>
+  );
+}
+
+const getStoredTheme = () =>
+  localStorage.getItem("theme") || getSystemPreference();
+const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
+
+const getPreferredTheme = () => {
+  const storedTheme = getStoredTheme();
+  if (storedTheme) {
+    return storedTheme;
+  }
+
+  return getSystemPreference();
+};
+
+const getSystemPreference = () => {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+const applyTheme = (theme) => {
+  document.documentElement.setAttribute("data-bs-theme", theme);
+};
+
+export default ThemeToggleButton;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -2,21 +2,29 @@ import React from "react";
 import { Navbar } from "react-bootstrap";
 import CheckoutButton from "./CheckoutButton";
 import InterviewGuideButton from "./InterviewGuideButton";
+import Theme from "./Theme";
 import { Link } from "react-router-dom";
 
 const Header = (props) => {
   return (
     <>
-      <Navbar bg="light" expand="lg" className="mb-3 ps-3 pe-3 d-flex">
+      <Navbar expand="lg" className="mb-3 ps-3 pe-3 d-flex">
         <Navbar.Brand className="me-auto">
           <Link to="/"
-            style={{ textDecoration: "none", color: "black" }}
+            style={{ textDecoration: "none", color: "var(--color-text)" }}
           >
-             Pineapple Resume
+            Pineapple Resume
           </Link>
         </Navbar.Brand>
-        <InterviewGuideButton />
-        <CheckoutButton />
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+          }} >
+          <InterviewGuideButton />
+          <CheckoutButton />
+          <Theme />
+        </div>
       </Navbar>
     </>
   );

diff --git a/src/components/HomeCards.tsx b/src/components/HomeCards.tsx
@@ -1,25 +1,28 @@
 import React from "react";
 import GuideCard from "./GuideCard";
+import FilePenIcon from "../icons/FilePenIcon";
+import CircleQuestionIcon from "../icons/CircleQuestionIcon";
+import ImproveIcon from "../icons/ImproveIcon";
 
 function InterviewGuide() {
   return (
     <div className="container">
       <div className="row justify-content-center align-items-center d-flex align-items-stretch mt-2 mb-3">
         <GuideCard
           linkdestination="/checkout"
-          image="/res/icons/file-pen-solid.svg"
+          image={FilePenIcon}
           title="Get Reviewed"
           description="Get your resume professionally reviewed."
         />
         <GuideCard
           linkdestination="/interview"
-          image="/res/icons/file-circle-question-solid.svg"
+          image={CircleQuestionIcon}
           title="Interview Guides"
           description="Use our service to get the interviews. Then follow these guides to land the job."
         />
         <GuideCard
           linkdestination="/examples"
-          image="/res/icons/improve.svg"
+          image={ImproveIcon}
           title="Example Reviews"
           description="See examples of the reviews we provide."
         />

diff --git a/src/components/MainJumbo.js b/src/components/MainJumbo.js
@@ -7,9 +7,6 @@ function MainJumbo() {
   return (
     <div
       className="jumbotron"
-      style={{
-        backgroundColor: "#F8F9FA",
-      }}
     >
       <strong>
         <h1

diff --git a/src/icons/BehaviouralIcon.js b/src/icons/BehaviouralIcon.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 384 512"
+    className="svg-icon"
+  >
+    <path d="M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM105.8 229.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L216 328.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V314.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H158.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM160 416a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
+  </svg>
+);
+
+export default BehaviouralIcon;
diff --git a/src/icons/CircleQuestionIcon.js b/src/icons/CircleQuestionIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+    className="svg-icon"
+  >
+    <path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384v38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6V328c0 8.8 7.2 16 16 16s16-7.2 16-16v-6.4c0-5.3 4.3-9.6 9.6-9.6h40.5c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2V384c0 8.8 7.2 16 16 16s16-7.2 16-16v-5.1l23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9H409.6c-23 0-41.6 18.6-41.6 41.6z"/>
+  </svg>
+);
+
+export default BehaviouralIcon;
+
diff --git a/src/icons/CodeIcon.js b/src/icons/CodeIcon.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+    className="svg-icon"
+  >
+    <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/>
+  </svg>
+);
+
+export default BehaviouralIcon;
diff --git a/src/icons/FilePenIcon.js b/src/icons/FilePenIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+    className="svg-icon"
+  >
+    <path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V285.7l-86.8 86.8c-10.3 10.3-17.5 23.1-21 37.2l-18.7 74.9c-2.3 9.2-1.8 18.8 1.3 27.5H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM549.8 235.7l14.4 14.4c15.6 15.6 15.6 40.9 0 56.6l-29.4 29.4-71-71 29.4-29.4c15.6-15.6 40.9-15.6 56.6 0zM311.9 417L441.1 287.8l71 71L382.9 487.9c-4.1 4.1-9.2 7-14.9 8.4l-60.1 15c-5.5 1.4-11.2-.2-15.2-4.2s-5.6-9.7-4.2-15.2l15-60.1c1.4-5.6 4.3-10.8 8.4-14.9z" />
+  </svg>
+);
+
+export default BehaviouralIcon;
+
diff --git a/src/icons/GuidesIcon.js b/src/icons/GuidesIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+    className="svg-icon"
+  >
+    <path d="M160 64c0-35.3 28.7-64 64-64H576c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H336.8c-11.8-25.5-29.9-47.5-52.4-64H384V320c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v32h64V64L224 64v49.1C205.2 102.2 183.3 96 160 96V64zm0 64a96 96 0 1 1 0 192 96 96 0 1 1 0-192zM133.3 352h53.3C260.3 352 320 411.7 320 485.3c0 14.7-11.9 26.7-26.7 26.7H26.7C11.9 512 0 500.1 0 485.3C0 411.7 59.7 352 133.3 352z"/>
+  </svg>
+);
+
+export default BehaviouralIcon;
+
diff --git a/src/icons/ImproveIcon.js b/src/icons/ImproveIcon.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    className="svg-icon"
+  >
+    <path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/>
+  </svg>
+);
+
+export default BehaviouralIcon;
diff --git a/src/icons/SalaryIcon.js b/src/icons/SalaryIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+    className="svg-icon"
+  >
+    <path d="M96 96V320c0 35.3 28.7 64 64 64H576c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160c-35.3 0-64 28.7-64 64zm64 160c35.3 0 64 28.7 64 64H160V256zM224 96c0 35.3-28.7 64-64 64V96h64zM576 256v64H512c0-35.3 28.7-64 64-64zM512 96h64v64c-35.3 0-64-28.7-64-64zM288 208a80 80 0 1 1 160 0 80 80 0 1 1 -160 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120V360c0 66.3 53.7 120 120 120H520c13.3 0 24-10.7 24-24s-10.7-24-24-24H120c-39.8 0-72-32.2-72-72V120z"/>
+  </svg>
+);
+
+export default BehaviouralIcon;
+
diff --git a/src/icons/SysDesignIcon.js b/src/icons/SysDesignIcon.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BehaviouralIcon = () => (
+  <svg
+    style={{ height: "100%", width: "100%" }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+    className="svg-icon"
+  >
+    <path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z"/>
+  </svg>
+);
+
+export default BehaviouralIcon;