![]({"/cc_logo_white.png"}){kind=logo}
-
-
-
-
+
![]()
diff --git a/frontend/src/Components/Home/AppBrand/AppBrand.scss b/frontend/src/Components/Home/AppBrand/AppBrand.scss
index 7ebca49..3f88bbb 100644
--- a/frontend/src/Components/Home/AppBrand/AppBrand.scss
+++ b/frontend/src/Components/Home/AppBrand/AppBrand.scss
@@ -8,17 +8,23 @@
$color-mode-type: data;
// Dark mode
-@include color-mode(dark) {
+.dark-mode {
.cc-logo-img {
content: url("logo_white.png");
}
+ .cc-logo-container {
+ background-color: black;
+ }
}
// Light mode
-@include color-mode(light) {
+.light-mode {
.cc-logo-img {
content: url("logo_black.png");
}
+ .cc-logo-container {
+ background-color: white;
+ }
}
// --------------- End of Color Modes ----------------------
diff --git a/frontend/src/Components/Home/MainArticle/MainArticle.scss b/frontend/src/Components/Home/MainArticle/MainArticle.scss
index f00c2a3..d5355ec 100644
--- a/frontend/src/Components/Home/MainArticle/MainArticle.scss
+++ b/frontend/src/Components/Home/MainArticle/MainArticle.scss
@@ -4,40 +4,10 @@
@import "../../../../node_modules/bootstrap/scss/grid";
@import "../../../../node_modules//bootstrap/scss/mixins";
-// --------------- Color Modes ----------------------------
-$color-mode-type: data;
-
-// Dark mode
-@include color-mode(dark) {
- #main-title,
- .article-description {
- color: $primary-text-dark;
- }
-}
-
-// Light mode
-@include color-mode(light) {
- body {
- background-color: $primary-bg-light;
- }
-
- #main-title,
- .article-description {
- color: $primary-text-light;
- }
-}
-// --------------- End of Color Modes ----------------------
-
// Custom stylings
.main-image {
- @include media-breakpoint-up(md) {
- width: 100%;
- // padding-right: 10px;
- }
-
- @include media-breakpoint-up(xxl) {
- width: 900px;
- }
+ max-width: 100%;
+ height: auto;
}
.main-article-container {
diff --git a/frontend/src/Components/Home/PopularArticles/PopularArticleItems/PopularArticleItem.jsx b/frontend/src/Components/Home/PopularArticles/PopularArticleItems/PopularArticleItem.jsx
index efef091..faa0d71 100644
--- a/frontend/src/Components/Home/PopularArticles/PopularArticleItems/PopularArticleItem.jsx
+++ b/frontend/src/Components/Home/PopularArticles/PopularArticleItems/PopularArticleItem.jsx
@@ -1,13 +1,22 @@
import { Container, Stack, Row, Col } from "react-bootstrap";
import "./PopularArticleItem.scss";
import ArticleImage from "../ArticleImage/ArticleImage";
+import { useTheme } from "../../../../hooks/useTheme";
export default function PopularArticleItem({ title, article_img, number }) {
+ const { isDarkMode } = useTheme();
+
return (
<>
);
diff --git a/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx b/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx
index f49e0e1..6c41dfd 100644
--- a/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx
+++ b/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx
@@ -6,7 +6,7 @@ import quantum from "../../../assets/Article_Images/quantum.png";
import ai_brain from "../../../assets/ml_brain.jpg";
import "./PopularArticles.scss";
-
+import { useTheme } from "../../../hooks/useTheme";
export default function PopularArticles() {
const popular_article_sample = [
{
@@ -22,11 +22,18 @@ export default function PopularArticles() {
article_img: ai_brain,
},
];
+ const { isDarkMode } = useTheme();
return (
<>
-
Popular Articles
++ Popular Articles +
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
index 5de9874..8a2805a 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
@@ -4,7 +4,7 @@ import { Image } from "react-bootstrap";
import { Bookmark, BookmarkFill } from "react-bootstrap-icons";
import "./RecentArticleItem.scss";
-
+import { useTheme } from "../../../../hooks/useTheme";
export default function RecentArticleItem({
articleTitle,
articleAuthor,
@@ -15,6 +15,8 @@ export default function RecentArticleItem({
toBeBookmarked,
bookmarkToggler,
}) {
+ const { isDarkMode } = useTheme();
+
return (
<>
- {children}
-
- )
-}
\ No newline at end of file
+ return (
+
+ {children}
+
+ );
+};
diff --git a/frontend/src/context/ThemeContext.jsx b/frontend/src/context/ThemeContext.jsx
new file mode 100644
index 0000000..870ebad
--- /dev/null
+++ b/frontend/src/context/ThemeContext.jsx
@@ -0,0 +1,20 @@
+// src/contexts/ThemeContext.js
+import React, { createContext, useState } from "react";
+
+const ThemeContext = createContext();
+
+const ThemeProvider = ({ children }) => {
+ const [isDarkMode, setDarkMode] = useState(false);
+
+ const toggleTheme = () => {
+ setDarkMode((prevMode) => !prevMode);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export { ThemeProvider, ThemeContext };
diff --git a/frontend/src/hooks/useTheme.jsx b/frontend/src/hooks/useTheme.jsx
new file mode 100644
index 0000000..69bead5
--- /dev/null
+++ b/frontend/src/hooks/useTheme.jsx
@@ -0,0 +1,17 @@
+// src/hooks/useTheme.js
+import { useContext, useEffect } from "react";
+import { ThemeContext } from "../context/ThemeContext";
+
+export const useTheme = () => {
+ const { isDarkMode, toggleTheme } = useContext(ThemeContext);
+
+ useEffect(() => {
+ if (isDarkMode) {
+ document.body.classList.add("dark-mode");
+ } else {
+ document.body.classList.remove("dark-mode");
+ }
+ }, [isDarkMode]);
+
+ return { isDarkMode, toggleTheme };
+};
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 60d32e3..a1e734a 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -5,14 +5,17 @@ import "./scss/custom.scss";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
import { AuthContextProvider } from "./context/AuthContext";
+import { ThemeProvider } from "./context/ThemeContext";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
-
+
+
+
+
);
@@ -22,7 +25,6 @@ root.render(
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
-
//theme toggle listener
(() => {
"use strict";
diff --git a/frontend/src/pages/BasePage.jsx b/frontend/src/pages/BasePage.jsx
index 3635c5d..9aa478f 100644
--- a/frontend/src/pages/BasePage.jsx
+++ b/frontend/src/pages/BasePage.jsx
@@ -5,10 +5,10 @@ import Footer from "../Components/Footer/Footer";
export default function BasePage() {
return (
-
+ <>
+
);
}
diff --git a/frontend/src/pages/HomePage/Home.jsx b/frontend/src/pages/HomePage/Home.jsx
index 358d6da..4abd515 100644
--- a/frontend/src/pages/HomePage/Home.jsx
+++ b/frontend/src/pages/HomePage/Home.jsx
@@ -14,7 +14,7 @@ import devin_ai from "../../assets/Article_Images/devin_ai.png";
import ai_in_business from "../../assets/Article_Images/ai_in_business.png";
import quantum from "../../assets/Article_Images/quantum.png";
import ai_brain from "../../assets/ml_brain.jpg";
-
+import { useTheme } from "../../hooks/useTheme";
export default function Home() {
// demo feature article
const feature_article_example = {
@@ -76,10 +76,15 @@ export default function Home() {
// useEffect to fetch the main feature article from the database (added later)
useEffect(() => {}, []);
-
+ const { isDarkMode } = useTheme();
return (
<>
-
+
{/* Left section - Articles Display */}
@@ -38,13 +40,20 @@ export default function RecentArticleItem({
)}
-
+
{articleTitle.toUpperCase()}
{/*
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss
index 58fa843..142cd12 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss
@@ -242,46 +242,3 @@
.recent-article-date-time {
margin-bottom: 1px;
}
-
-//COLOR MODES
-@include color-mode(dark) {
- .recent-article-title,
- .recent-article-desc,
- .recent-article-author,
- .recent-article-date-time {
- color: $primary-text-dark;
- }
-
- .recent-article-title:hover {
- text-decoration: underline;
- color: hsl(0, 0%, 85%);
- }
-
- .recent-article-bookmark {
- color: $bookmark-bg-dark;
- }
-}
-
-@include color-mode(light) {
- .recent-article-title,
- .recent-article-desc,
- .recent-article-author,
- .recent-article-date-time {
- color: $primary-text-light;
- }
-
- .recent-article-title:hover {
- text-decoration: underline;
- color: hsl(0, 1%, 27%);
- }
-
- .recent-article-author,
- .recent-article-date-time {
- color: hsl(0, 2%, 10%);
- font-weight: 300;
- }
-
- .recent-article-bookmark {
- color: $bookmark-bg-light;
- }
-}
diff --git a/frontend/src/assets/cs-central-black.png b/frontend/src/assets/cs-central-black.png
new file mode 100644
index 0000000..0ec5f7f
Binary files /dev/null and b/frontend/src/assets/cs-central-black.png differ
diff --git a/frontend/src/assets/cs-central-white.png b/frontend/src/assets/cs-central-white.png
new file mode 100644
index 0000000..24ee818
Binary files /dev/null and b/frontend/src/assets/cs-central-white.png differ
diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
index b729641..6de359b 100644
Binary files a/frontend/src/assets/logo.png and b/frontend/src/assets/logo.png differ
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index 1f79a4c..822361c 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -1,37 +1,35 @@
-import { createContext , useReducer, useEffect } from 'react'
+import { createContext, useReducer, useEffect, useState } from "react";
export const AuthContext = createContext();
-export const authReducer = (state, action) =>
-{
- switch (action.type) {
- case 'LOGIN':
- return {user : action.payload}
- case 'LOGOUT' :
- return {user : null}
- default:
- return state
+export const authReducer = (state, action) => {
+ switch (action.type) {
+ case "LOGIN":
+ return { user: action.payload };
+ case "LOGOUT":
+ return { user: null };
+ default:
+ return state;
+ }
+};
- }
-}
-
-export const AuthContextProvider = ({children}) => {
- const [state, dispatch] = useReducer(authReducer, {
- user : null
- })
+export const AuthContextProvider = ({ children }) => {
+ const [state, dispatch] = useReducer(authReducer, {
+ user: null,
+ });
- useEffect( () => {
- const user = JSON.parse(localStorage.getItem('user'))
- if (user) {
- dispatch({type: 'LOGIN', payload: user})
- }
- }, [])
+ useEffect(() => {
+ const user = JSON.parse(localStorage.getItem("user"));
+ if (user) {
+ dispatch({ type: "LOGIN", payload: user });
+ }
+ }, []);
- console.log ('AuthContext state: ', state)
+ console.log("AuthContext state: ", state);
- return (
- {articleDesc}
*/}By {articleAuthor}
-Published {articleDatePublished}
++ Published {articleDatePublished} +