Added css changes, .gitignore and removed redundant files

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

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

@@ -10,13 +10,11 @@
         "navBar": {
             "navBarTheme": "navbar-dark",
             "background": "bg-secondary",
-            "buttonColor": "light",
-            "shadow": "-webkit-box-shadow: 1px 28px 20px -22px rgba(0,0,0,0.75); -moz-box-shadow: 1px 28px 20px -22px rgba(0,0,0,0.75); box-shadow: 1px 28px 20px -22px rgba(0,0,0,0.75);"
+            "buttonColor": "light"
         },
         "footer": {
             "background": "bg-secondary",
-            "text": "bg-white",
-            "shadow": "1px -29px 20px -22px rgba(0,0,0,0.75)"
+            "text": "bg-white"
         }
     },
     "lightTheme":{
@@ -29,14 +27,12 @@
         "categoryNavigator": "dark",
         "navBar": {
             "navBarTheme": "navbar-light",
-            "background": "bg-primary",
-            "buttonColor": "light",
-            "shadow": "-webkit-box-shadow: 1px 28px 20px -22px rgba(0,0,0,0.75); -moz-box-shadow: 1px 28px 20px -22px rgba(0,0,0,0.75); box-shadow: 1px 28px 20px -22px rgba(0,0,0,0.75);"
+            "background": "bg-secondary",
+            "buttonColor": "light"
         },
         "footer": {
-            "background": "bg-primary",
-            "text": "bg-white",
-            "shadow": "1px -29px 20px -22px rgba(0,0,0,0.75)"
+            "background": "bg-secondary",
+            "text": "bg-white"
         }
     }
 }

frontend/src/components/elements/toggle-button.jsx

@@ -1,14 +0,0 @@
-import React from "react";
-function ToggleButton(props){
-    return (
-        <>
-          <label className="custom-toggle" onClick={props.themeSwitcher}>
-            <input type="checkbox" id={props.Id} onChange={props.ThemeSwitcher}/>
-            <span className="custom-toggle-slider rounded-circle" />
-          </label>
-          <span className="clearfix" />
-        </>
-      );
-}
-
-export default ToggleButton;

frontend/src/components/views/blog-list.jsx

@@ -53,7 +53,7 @@ function BlogList(props) {
       <Container fluid className={`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-100">
+          <Col className="d-flex flex-column align-items-center min-vh-83">
             <div className="w-100">
             <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{"width": "100%"}}>
               <CardBody>

frontend/src/components/views/blog.jsx

@@ -24,7 +24,7 @@ function Blog(props) {
 
   if (GlobalTheme && ThemeConfig) {
   return (
-    <Container fluid className={`min-vh-100 ${ThemeConfig[GlobalTheme].background}`}>
+    <Container fluid className={`min-vh-83 ${ThemeConfig[GlobalTheme].background}`}>
     <CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
       <Row className="mb-4">
         <Col className="p-0">

frontend/src/components/views/category-list.jsx

@@ -35,7 +35,7 @@ function Blogs(props) {
     return (
       <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
         <Row className="justify-content-center align-items-center">
-          <Col className="d-flex flex-column align-items-center min-vh-100">
+          <Col className="d-flex flex-column align-items-center min-vh-83">
             {/* Top Section - Categories */}
             <div className="w-100">
             <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{"width": "100%"}}>
@@ -51,6 +51,7 @@ function Blogs(props) {
               {categoryMetadata.length > 0 ? 
                 categoryMetadata.map((item, index) => (
                   <CardListViewer 
+                    key={item.id}
                     totalItems={categoryMetadata.length} 
                     cardType={"longCard"} 
                     resourceType={"categories"}

frontend/src/components/views/home.jsx

@@ -8,7 +8,7 @@ function HomePage(props) {
   if (GlobalTheme && ThemeConfig) 
   return (
     <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
-      <div className="d-flex flex-column justify-content-center align-items-center vh-100">
+      <div className="d-flex flex-column justify-content-center align-items-center min-vh-83">
       {UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={MediaService.getMedia(UserData.profilePhoto)} /> : ""}
         <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
           <center>