diff --git a/package.json b/package.json index 58656d8b..565ea72d 100644 --- 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 index 2b2f3a4e..f5cf5a95 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + @@ -28,7 +28,8 @@
diff --git a/public/manifest.json b/public/manifest.json index d13ba925..607f513a 100644 --- 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 deleted file mode 100644 index d6f215d0..00000000 --- a/public/res/icons/behavioral.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/code.svg b/public/res/icons/code.svg deleted file mode 100644 index 7943436c..00000000 --- a/public/res/icons/code.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/file-circle-question-solid.svg b/public/res/icons/file-circle-question-solid.svg deleted file mode 100644 index 4f81f38f..00000000 --- a/public/res/icons/file-circle-question-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/file-pen-solid.svg b/public/res/icons/file-pen-solid.svg deleted file mode 100644 index 2a6ba42e..00000000 --- a/public/res/icons/file-pen-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/guides.svg b/public/res/icons/guides.svg deleted file mode 100644 index 3f9430d6..00000000 --- a/public/res/icons/guides.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/improve.svg b/public/res/icons/improve.svg deleted file mode 100644 index 1e3026b7..00000000 --- a/public/res/icons/improve.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/salary.svg b/public/res/icons/salary.svg deleted file mode 100644 index dd337857..00000000 --- a/public/res/icons/salary.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/res/icons/sd.svg b/public/res/icons/sd.svg deleted file mode 100644 index 700c66a1..00000000 --- a/public/res/icons/sd.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx index ec8bbe9f..782c18a7 100644 --- 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 index 73b5bdaf..75f86035 100644 --- 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 index 5249dd09..d73727a3 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -7,15 +7,15 @@ const FooterPage = () => { className="navbar navbar-default font-small" role="navigation" > -
+
© {new Date().getFullYear()} Copyright:{" "} PineappleResume.com
Privacy | Terms & Conditions
diff --git a/src/components/GuideCard.tsx b/src/components/GuideCard.tsx index ee39fdab..a999ca20 100644 --- 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 ( - +
+ {props.title +
{props.title} diff --git a/src/components/Header/Theme.tsx b/src/components/Header/Theme.tsx new file mode 100644 index 00000000..c2d1521f --- /dev/null +++ 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 ( + + ); +} + +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 index d90cf254..0aab3c09 100644 --- 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 ( <> - + - Pineapple Resume + Pineapple Resume - - +
+ + + +
); diff --git a/src/components/HomeCards.tsx b/src/components/HomeCards.tsx index 0ebc29b2..ea8585ae 100644 --- a/src/components/HomeCards.tsx +++ b/src/components/HomeCards.tsx @@ -1,5 +1,8 @@ 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 ( @@ -7,19 +10,19 @@ function InterviewGuide() {
diff --git a/src/components/MainJumbo.js b/src/components/MainJumbo.js index 596153c7..642f7d39 100644 --- a/src/components/MainJumbo.js +++ b/src/components/MainJumbo.js @@ -7,9 +7,6 @@ function MainJumbo() { return (

( + + + +); + +export default BehaviouralIcon; diff --git a/src/icons/CircleQuestionIcon.js b/src/icons/CircleQuestionIcon.js new file mode 100644 index 00000000..058d6802 --- /dev/null +++ b/src/icons/CircleQuestionIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; + diff --git a/src/icons/CodeIcon.js b/src/icons/CodeIcon.js new file mode 100644 index 00000000..58541f68 --- /dev/null +++ b/src/icons/CodeIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; diff --git a/src/icons/FilePenIcon.js b/src/icons/FilePenIcon.js new file mode 100644 index 00000000..87a0c56c --- /dev/null +++ b/src/icons/FilePenIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; + diff --git a/src/icons/GuidesIcon.js b/src/icons/GuidesIcon.js new file mode 100644 index 00000000..0327f41e --- /dev/null +++ b/src/icons/GuidesIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; + diff --git a/src/icons/ImproveIcon.js b/src/icons/ImproveIcon.js new file mode 100644 index 00000000..f3789491 --- /dev/null +++ b/src/icons/ImproveIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; diff --git a/src/icons/SalaryIcon.js b/src/icons/SalaryIcon.js new file mode 100644 index 00000000..bfb4e278 --- /dev/null +++ b/src/icons/SalaryIcon.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; + diff --git a/src/icons/SysDesignIcon.js b/src/icons/SysDesignIcon.js new file mode 100644 index 00000000..fe4041f9 --- /dev/null +++ b/src/icons/SysDesignIcon.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const BehaviouralIcon = () => ( + + + +); + +export default BehaviouralIcon; diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..45f9af76 --- /dev/null +++ b/src/index.css @@ -0,0 +1,63 @@ +/* Hide scrollbar for Chrome, Safari and Opera */ +.hiddenscroll::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE and Edge */ +.hiddenscroll { + -ms-overflow-style: none; +} + +[data-bs-theme='light'] { + --color-bg: var(--bs-light); +} + +[data-bs-theme='dark'] { + --color-bg: var(--bs-dark); +} + +/* Bring back Bootstrap 4 Jumbotron */ +.jumbotron { + padding: 3.5rem 1rem; + margin-bottom: 2rem; + background-color: var(--color-bg); + border-radius: .3rem; +} + +.shadow { + border-radius: .3rem; + margin-bottom: 2rem; +} + +:root { + --color-text-light: black; + --color-text-dark: #ADB5BD; +} + +[data-bs-theme='light'] { + --color-text: var(--color-text-light); +} + +[data-bs-theme='dark'] { + --color-text: var(--color-text-dark); +} + +[data-bs-theme='dark'] .btn-primary { + background-color: #0964AA !important; + border-color: #0964AA !important; +} + +[data-bs-theme='dark'] .btn-primary:hover, +[data-bs-theme='dark'] .btn-primary:focus { + background-color: #075289 !important; + border-color: #075289 !important; +} + +[data-bs-theme='dark'] .form-check-input:checked { + background-color: #0964AA; + border-color: #0964AA; +} + +[data-bs-theme="dark"] .svg-icon { + fill: #ADB5BD; +} diff --git a/src/index.js b/src/index.js index a7da2bd8..6c28d2a4 100644 --- a/src/index.js +++ b/src/index.js @@ -4,14 +4,19 @@ import { Provider } from "react-redux"; import store from "./reducers/store"; import Router from "./router"; import { HelmetProvider } from 'react-helmet-async'; +import "mdbreact/dist/css/mdb.css"; +import "bootstrap/dist/css/bootstrap.min.css"; +import "./index.css" const helmetContext = {}; createRoot( document.getElementById("root")).render( - - - - - +
+ + + + + +
); diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx index 6b4bb8bd..cdab7c60 100644 --- a/src/pages/examples.tsx +++ b/src/pages/examples.tsx @@ -1,17 +1,14 @@ import React from "react"; import { logevent } from "../firebase/firebaseapp"; -import "./index.css"; import SEO from "../components/SEO"; import { Col, Row } from "react-bootstrap"; import GuideCard from "../components/GuideCard"; +import FilePenIcon from "../icons/FilePenIcon"; function Example(props) { return (
{props.left} @@ -27,7 +24,7 @@ function GetReviewed(props) {
diff --git a/src/pages/index.css b/src/pages/index.css deleted file mode 100644 index c2b2b972..00000000 --- a/src/pages/index.css +++ /dev/null @@ -1,22 +0,0 @@ -/* Hide scrollbar for Chrome, Safari and Opera */ -.hiddenscroll::-webkit-scrollbar { - display: none; -} - -/* Hide scrollbar for IE and Edge */ -.hiddenscroll { - -ms-overflow-style: none; -} - -/* Bring back Bootstrap 4 Jumbotron */ -.jumbotron { - padding: 3.5rem 1rem; - margin-bottom: 2rem; - background-color: var(--bs-light); - border-radius: .3rem; -} - -.shadow { - border-radius: .3rem; - margin-bottom: 2rem; -} diff --git a/src/pages/interview/behavioral.tsx b/src/pages/interview/behavioral.tsx index 0f9f6c31..8af7d6aa 100644 --- a/src/pages/interview/behavioral.tsx +++ b/src/pages/interview/behavioral.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../index.css"; import { logevent } from "../../firebase/firebaseapp"; import SEO from "../../components/SEO"; diff --git a/src/pages/interview/coding.tsx b/src/pages/interview/coding.tsx index 8ffa534e..a6862ae8 100644 --- a/src/pages/interview/coding.tsx +++ b/src/pages/interview/coding.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../index.css"; import { logevent } from "../../firebase/firebaseapp"; import SEO from "../../components/SEO"; diff --git a/src/pages/interview/index.tsx b/src/pages/interview/index.tsx index 6fc46434..9f2c6197 100644 --- a/src/pages/interview/index.tsx +++ b/src/pages/interview/index.tsx @@ -1,8 +1,11 @@ import React from "react"; -import "../index.css"; import { logevent } from "../../firebase/firebaseapp"; import GuideCard from "../../components/GuideCard"; import SEO from "../../components/SEO"; +import BehaviouralIcon from "../../icons/BehaviouralIcon"; +import CodeIcon from "../../icons/CodeIcon"; +import SysDesignIcon from "../../icons/SysDesignIcon"; +import SalaryIcon from "../../icons/SalaryIcon"; function InterviewGuide() { React.useEffect(() => { @@ -23,25 +26,25 @@ function InterviewGuide() {
diff --git a/src/pages/interview/salary.tsx b/src/pages/interview/salary.tsx index 0d9a492c..b436540b 100644 --- a/src/pages/interview/salary.tsx +++ b/src/pages/interview/salary.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../index.css"; import { logevent } from "../../firebase/firebaseapp"; import SEO from "../../components/SEO"; import Form from "react-bootstrap/Form"; diff --git a/src/pages/interview/systemdesign.tsx b/src/pages/interview/systemdesign.tsx index 4520160c..77dafcd6 100644 --- a/src/pages/interview/systemdesign.tsx +++ b/src/pages/interview/systemdesign.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../index.css"; import { logevent } from "../../firebase/firebaseapp"; import SEO from "../../components/SEO"; diff --git a/src/pages/privacy/index.tsx b/src/pages/privacy/index.tsx index d1597119..905b477c 100644 --- a/src/pages/privacy/index.tsx +++ b/src/pages/privacy/index.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../index.css"; import SEO from "../../components/SEO"; function Splash() { diff --git a/src/pages/splash/index.tsx b/src/pages/splash/index.tsx index 01f56d20..8ebed2f8 100644 --- a/src/pages/splash/index.tsx +++ b/src/pages/splash/index.tsx @@ -2,7 +2,6 @@ import React from "react"; import FAQ from "../../components/FAQ"; import { logevent } from "../../firebase/firebaseapp"; import Carousel from "../../components/Carousel"; -import "../index.css"; import SEO from "../../components/SEO"; import HomeCards from "../../components/HomeCards"; import Refund from "../../components/Refund"; diff --git a/src/pages/success/index.tsx b/src/pages/success/index.tsx index ee930bed..97be2963 100644 --- a/src/pages/success/index.tsx +++ b/src/pages/success/index.tsx @@ -1,6 +1,5 @@ import React from "react"; import { Container, Row, Col } from "react-bootstrap"; -import "../index.css"; import { logevent } from "../../firebase/firebaseapp"; import SEO from "../../components/SEO"; @@ -19,9 +18,6 @@ function Splash() {
diff --git a/src/pages/terms/index.tsx b/src/pages/terms/index.tsx index bcd27f80..767ab28f 100644 --- a/src/pages/terms/index.tsx +++ b/src/pages/terms/index.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../index.css"; import SEO from "../../components/SEO"; function Splash() { diff --git a/src/router.js b/src/router.js index ebecf2b6..1f6bb093 100644 --- a/src/router.js +++ b/src/router.js @@ -12,8 +12,6 @@ import Coding from "./pages/interview/coding"; import SystemDesign from "./pages/interview/systemdesign"; import Salary from "./pages/interview/salary"; import Examples from "./pages/examples"; -import "mdbreact/dist/css/mdb.css"; -import "bootstrap/dist/css/bootstrap.min.css"; function ScrollToTop() { const { pathname } = useLocation();