fix css

src/components/header/header.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Header = ({ height, bgColor, children, className }) => {
-  const headerStyle = {
-    height: height,
-    backgroundColor: bgColor,
-    width: 'calc(100% - var(--sidebar-width-left) - var(--sidebar-width-right))', 
-    position: 'fixed',
-    top: 0,
-    left: 'var(--sidebar-width-left)', 
-    zIndex: 1000,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '0 1rem',
-  };
-
-  return (
-    <div className={className} style={headerStyle}>
-      {children}
-    </div>
-  );
-};
-
-Header.propTypes = {
-  height: PropTypes.string,
-  bgColor: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-Header.defaultProps = {
-  height: 'var(--header-height)',
-  bgColor: '#f8f9fa',
-  className: '',
-};
-
-export default Header;

src/components/navbar/Navbar.jsx

@@ -18,6 +18,6 @@ const Navbar = ({ user }) => {
       </div>
     </div>
   );
-  };
+};
 
-  export default Navbar;
+export default Navbar;

src/components/navbar/Navbar.module.scss

@@ -3,49 +3,49 @@
   justify-content: flex-end;
   align-items: center;
   padding: 10px 20px;
-    background-color: #333;
+  background-color: var(--navbar-background-color);
-    color: #fff;
+  color: var(--navbar-color);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
-  }
+  height: var(--navbar-height);
+}
 
-  .userInfo {
+.userInfo {
   display: flex;
   align-items: center;
-  }
+}
 
-  .profilePic {
+.profilePic {
-    width: 3rem;
+  width: var(--profile-pic-size);
-    height: 3rem;
+  height: var(--profile-pic-size);
   border-radius: 50%;
   margin-right: 1rem;
-  }
+}
 
-  .userDetails {
+.userDetails {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-right: 4rem;
-  }
+}
 
-  .userName {
+.userName {
   font-weight: bold;
-  }
+}
 
-  .logoutButton {
+.logoutButton {
   margin-top: 5px;
   padding: 5px 10px;
-    background-color: #ff4b4b;
+  background-color: var(--logout-button-bg);
-    color: #fff;
+  color: var(--navbar-color);
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  }
+}
-  
-  .logoutButton:hover {
-    background-color: #ff1a1a;
-  }
 
+.logoutButton:hover {
+  background-color: var(--logout-button-bg-hover);
+}

src/components/serverCard/serverCard.module.scss

@@ -1,14 +1,14 @@
 .serverCard {
-  width: 90%;
+  width: var(--card-width);
-  padding: 2.5rem;
+  padding: var(--card-padding);
-  border: 0.1rem solid #343947;
+  border: 0.1rem solid var(--card-border-color);
   border-radius: 0.5rem;
   text-decoration: none;
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: #1E2227;
+  background-color: var(--card-bg-color);
-  color: white;
+  color: var(--text-color);
 }
 
 .status {

src/main.css

@@ -2,3 +2,18 @@ html{
   font-size: 12px;
 }
 
+
+:root {
+  --navbar-height: 5rem;
+  --navbar-background-color: #333;
+  --navbar-color: #fff;
+  --profile-pic-size: 3rem;
+  --logout-button-bg: #ff4b4b;
+  --logout-button-bg-hover: #ff1a1a;
+  --card-width: 90%;
+  --card-padding: 2.5rem;
+  --card-border-color: #343947;
+  --card-bg-color: #1E2227;
+  --main-bg-color: #23272E;
+  --text-color: white;
+}

src/pages/DashboardPage/DashboardPage.module.scss

@@ -1,18 +1,25 @@
-body, html {
+html, body {
-    background-color: #23272E;
   margin: 0;
   padding: 0;
+  width: 100%;
   height: 100%;
-  }
+  overflow-x: hidden;
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  background-color: var(--main-bg-color);
+  color: var(--text-color);
+}
 
-  .container {
+
-    min-height: 100vh;
+.dashboardContainer {
+  padding-top: var(--navbar-height);
+  background-color: var(--main-bg-color);
   display: flex;
-    justify-content: center;
+  flex-direction: column;
   align-items: center;
-  }
+  color: var(--text-color);
+}
 
-  .cardsContainer {
+.cardsContainer {
   width: 100%;
   margin-top: 5rem; 
   display: flex;
@@ -20,5 +27,4 @@ body, html {
   gap: 1rem;
   align-items: center;
   justify-content: center;
-  }
+}
-