From 4aee08d1bd4fc3d89b9b0d584ff85fa2387ff8fa Mon Sep 17 00:00:00 2001
From: Barunes Padhy <contact@barunes.io>
Date: Sun, 5 May 2024 19:43:39 +0300
Subject: [PATCH] CSS fixes in the frontend

---
 frontend/public/data/shared/theme-config.json |  1 +
 frontend/src/App.jsx                          | 27 +++++++++++--------
 frontend/src/components/blog-list.jsx         |  4 +--
 frontend/src/components/blog.jsx              |  7 ++---
 frontend/src/components/category-list.jsx     |  4 +--
 frontend/src/components/home.jsx              |  6 +++--
 frontend/src/components/shared/footer.jsx     |  2 +-
 frontend/src/components/shared/navbar.jsx     |  6 ++++-
 frontend/src/index.css                        |  6 +++--
 9 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/frontend/public/data/shared/theme-config.json b/frontend/public/data/shared/theme-config.json
index 5005f9e..11f01ad 100644
--- a/frontend/public/data/shared/theme-config.json
+++ b/frontend/public/data/shared/theme-config.json
@@ -1,4 +1,5 @@
 {
+    "defaultTheme": "darkTheme",
     "darkTheme": {
         "theme": "Dark Mode",
         "background": "bg-dark",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 16a2e1f..47cb752 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -37,8 +37,10 @@ function App() {
     DataService.getData('shared/user-data').then( response =>
     setUserData(response.data)
     )
-    DataService.getData('shared/theme-config').then( response =>
-    setThemeConfig(response.data)
+    DataService.getData('shared/theme-config').then( response =>{
+        setThemeConfig(response.data)
+        setGlobalTheme(response.data.defaultTheme)
+      }
     )
   },[])
 
@@ -46,18 +48,21 @@ function App() {
     setGlobalTheme(theme);
   }
 
+  if (themeConfig)
   return (
-    <div>
+    <div className="app-container">
       <Router>
-        <Header ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
+        <Header className="header" ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
         <Notification isOpen={isOpen} notificationMessage={notificationMessage} />
-        <Routes>
-          <Route path="/" element={<Home GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />} />
-          <Route path="/categories" element={<CategoryList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/categories/:categoryID" element={<BlogList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/blog/:blogID" element={<Blog notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-        </Routes>
-        <Footer ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
+        <div className={`p-0 ${themeConfig[globalTheme].background}`}>
+          <Routes>
+            <Route path="/" element={<Home GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />} />
+            <Route path="/categories" element={<CategoryList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+            <Route path="/categories/:categoryID" element={<BlogList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+            <Route path="/blog/:blogID" element={<Blog notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          </Routes>
+        </div>
+        <Footer className="footer" ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
       </Router>
     </div>
   );
diff --git a/frontend/src/components/blog-list.jsx b/frontend/src/components/blog-list.jsx
index 130f499..eea49af 100644
--- a/frontend/src/components/blog-list.jsx
+++ b/frontend/src/components/blog-list.jsx
@@ -45,10 +45,10 @@ function BlogList(props) {
 
   if (GlobalTheme && ThemeConfig) {
     return (
-      <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
+      <Container fluid className={` mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}>
       <CategoryBar currentPage={categoryID} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
         <Row className="justify-content-center align-items-center">
-          <Col className="d-flex flex-column align-items-center min-vh-82">
+          <Col className="d-flex flex-column align-items-center">
             <div className="w-100">
             <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{"width": "100%"}}>
               <CardBody>
diff --git a/frontend/src/components/blog.jsx b/frontend/src/components/blog.jsx
index 8d26087..536c138 100644
--- a/frontend/src/components/blog.jsx
+++ b/frontend/src/components/blog.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import DataService from '../services/data-service';
 import MediaService from '../services/media-service'
 import CategoryBar from './shared/category-bar';
+
 import {
   Container,Row, Col,Spinner, UncontrolledCollapse, Button, ButtonGroup, Card, CardBody
 } from 'reactstrap';
@@ -24,7 +25,7 @@ function Blog(props) {
 
   if (GlobalTheme && ThemeConfig) {
   return (
-    <Container fluid className={`min-vh-82 ${ThemeConfig[GlobalTheme].background}`}>
+    <Container fluid className={`${ThemeConfig[GlobalTheme].background}`}>
     <CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
       <Row className="mb-4">
         <Col className="p-0">
@@ -37,7 +38,7 @@ function Blog(props) {
       </Row>
       <Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
         <Col xs="3" className="d-none d-md-block"></Col>
-        <Col xs={`${console.log(window.screen.width) >= 765 ? '6':''}`}>
+        <Col xs={`${window.screen.width >= 765 ? '6':''}`}>
           <h1 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.name}</h1>
           <h4 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.description}</h4>
           <div>
@@ -113,7 +114,7 @@ function Blog(props) {
       <Row className="mr-2 ml-2 mt-1">
       <Col xs="3" className="d-none d-md-block"></Col>
 
-      <Col xs={`${console.log(window.screen.width) >= 765 ? '6':''}`} style={{marginBottom: '25px'}}>
+      <Col xs={`${window.screen.width >= 765 ? '6':''}`} style={{marginBottom: '25px'}}>
         <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
         <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
         <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
diff --git a/frontend/src/components/category-list.jsx b/frontend/src/components/category-list.jsx
index ff138e9..6d36939 100644
--- a/frontend/src/components/category-list.jsx
+++ b/frontend/src/components/category-list.jsx
@@ -33,9 +33,9 @@ function Blogs(props) {
 
   if (GlobalTheme && ThemeConfig) {
     return (
-      <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
+      <Container fluid className={`p-0 mb-2 ${ThemeConfig[GlobalTheme].background}`}>
         <Row className="justify-content-center align-items-center">
-          <Col className="d-flex flex-column align-items-center min-vh-82">
+          <Col className="d-flex flex-column align-items-center">
             {/* Top Section - Categories */}
             <div className="w-100">
             <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{"width": "100%"}}>
diff --git a/frontend/src/components/home.jsx b/frontend/src/components/home.jsx
index f9cc6a9..1176d2b 100644
--- a/frontend/src/components/home.jsx
+++ b/frontend/src/components/home.jsx
@@ -7,7 +7,7 @@ function HomePage(props) {
   const ThemeConfig = props.ThemeConfig;
   if (GlobalTheme && ThemeConfig) 
   return (
-    <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
+    <Container fluid className={`p-0 mt-5 ${ThemeConfig[GlobalTheme].background}`}>
       <div className="d-flex flex-column justify-content-center align-items-center min-vh-82">
       {UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={MediaService.getMedia(UserData.profilePhoto)} /> : ""}
         <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
@@ -16,7 +16,9 @@ function HomePage(props) {
           </center>
         </h3>
         <h5 className={`${ThemeConfig[GlobalTheme].textColor}`}>
-          <div dangerouslySetInnerHTML={{ __html: `${UserData.tagLine}` }} />
+          <>
+          <div dangerouslySetInnerHTML={{ __html: `<span">${UserData.tagLine}</span>` }} />
+          </>
         </h5>
       </div>
     </Container>
diff --git a/frontend/src/components/shared/footer.jsx b/frontend/src/components/shared/footer.jsx
index f87acc1..c2bbe13 100644
--- a/frontend/src/components/shared/footer.jsx
+++ b/frontend/src/components/shared/footer.jsx
@@ -15,7 +15,7 @@ const Footer = (props) => {
   const UserData = props.UserData;
 
   return (
-    <footer className={`footer p-4 text-white ${ThemeConfig ? ThemeConfig[GlobalTheme].footer['background'] : ""}`}>
+    <footer className={`footer p-4 text-white ${ThemeConfig ? ThemeConfig[GlobalTheme].footer['background'] : ""}`} id="site-footer">
       <Container className='p-1'>
         <Row>
           <Col md="12">
diff --git a/frontend/src/components/shared/navbar.jsx b/frontend/src/components/shared/navbar.jsx
index 6a1eb8f..2bbc4d2 100644
--- a/frontend/src/components/shared/navbar.jsx
+++ b/frontend/src/components/shared/navbar.jsx
@@ -31,9 +31,13 @@ function Header(props) {
     props.ThemeSwitcher(themeSelected)
   }, [themeSelected])
 
+  useEffect(() => {
+    setThemeSelected(props.ThemeConfig.defaultTheme)
+  }, [])
+
   if (GlobalTheme && ThemeConfig && UserData)
   return (
-    <header className="header-global">
+    <header className="header-global" id="site-header">
     <Navbar className={`navbar-horizontal ${ThemeConfig[GlobalTheme].navBar['navBarTheme']} ${ThemeConfig[GlobalTheme].navBar['background']}`} 
             expand="lg">
       <Container>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 614b9b6..1cc09d6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,6 +4,8 @@ a {
     border: none;         /* Removes any borders */
 }
 
-.min-vh-82{
-    min-height: 82.2vh;
+.app-container {
+  display: grid;
+  grid-template-rows: auto 1fr auto; /* Header size, flexible content, footer size */
+  height: 100vh;
 }
\ No newline at end of file