CSS fixes in the frontend

frontend/public/data/shared/theme-config.json

@@ -1,4 +1,5 @@
 {
+    "defaultTheme": "darkTheme",
     "darkTheme": {
         "theme": "Dark Mode",
         "background": "bg-dark",

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 =>
+    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} />
+        <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>
-        <Footer ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
+        </div>
+        <Footer className="footer" ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
       </Router>
     </div>
   );

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>

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 }} />

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%"}}>

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>

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">

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>

frontend/src/index.css

@@ -4,6 +4,8 @@ a {
     border: none;         /* Removes any borders */
 }
 
-.min-vh-82{
+.app-container {
-    min-height: 82.2vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto; /* Header size, flexible content, footer size */
+  height: 100vh;
 }