Revert "make changes according to design descision"

This reverts commit ff05685.

frontend/src/components/DropdownMenu/DropdownMenu.css → frontend/src/components/Header/DropdownMenu/DropdownMenu.css

@@ -1,42 +1,43 @@
-.dropdown-menu {
-    position: absolute;
-    bottom: calc(8vh + 10px); 
-    min-width: fit-content;
-    z-index: 1;
-}
-
-.dropdown-menu .MuiListItem-root {
-    cursor: pointer;
-}
-
-.dropdown-menu .MuiListItem-root:hover {
-    background-color: #F9FAFB;
-}
-
-.dropdown-item .MuiTypography-root{
-    width: 100%; 
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 24px;
-    color: #344054;
-    display: inline;
-    justify-content: center;
-  }
-
-  .dropdown-item {
-    padding: 4px 12px !important; 
-  }
-
-  .dropdown-list{
-    padding-top: 4px !important;
-    padding-bottom: 4px !important;
-  }
-
-  .dropdown-menu .MuiSvgIcon-root{
-    color:#667085;
-  }
-
-  .dropdown-menu .MuiListItemIcon-root {
-    min-width: 2rem; 
-  }
-
+.dropdown-menu {
+    position: absolute;
+    top: calc(8vh + 10px); 
+    right: 3px;
+    min-width: fit-content;
+    z-index: 1;
+}
+
+.dropdown-menu .MuiListItem-root {
+    cursor: pointer;
+}
+
+.dropdown-menu .MuiListItem-root:hover {
+    background-color: #F9FAFB;
+}
+
+.dropdown-item .MuiTypography-root{
+    width: 100%; 
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #344054;
+    display: inline;
+    justify-content: center;
+  }
+
+  .dropdown-item {
+    padding: 4px 12px !important; 
+  }
+
+  .dropdown-list{
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+  }
+
+  .dropdown-menu .MuiSvgIcon-root{
+    color:#667085;
+  }
+
+  .dropdown-menu .MuiListItemIcon-root {
+    min-width: 2rem; 
+  }
+

frontend/src/components/DropdownMenu/DropdownMenu.jsx → frontend/src/components/Header/DropdownMenu/DropdownMenu.jsx

@@ -1,43 +1,43 @@
-import React from 'react';
-import { List, ListItemButton, ListItemText, Paper, ListItemIcon } from '@mui/material';
-import './DropdownMenu.css';
-import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
-import Person2OutlinedIcon from '@mui/icons-material/Person2Outlined';
-import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
-import { useNavigate } from 'react-router-dom';
-import { logout } from '../../services/loginServices';
-import toastEmitter, { TOAST_EMITTER_KEY } from '../../utils/toastEmitter';
-import { useAuth } from '../../services/authProvider';
-
-const DropdownMenu = () => {
-    const navigate = useNavigate();
-    const { logoutAuth } = useAuth();
-
-    const handleLogoutClick = async () => {
-        await logout();
-        logoutAuth();
-        toastEmitter.emit(TOAST_EMITTER_KEY, 'Logout successfull');
-        navigate('/');
-    };
-
-    const menuItems = [
-        { text: 'Profile', icon: <Person2OutlinedIcon /> },
-        { text: 'Settings', icon: <SettingsOutlinedIcon /> },
-        { text: 'Logout', icon: <LogoutOutlinedIcon />, onClick: handleLogoutClick },
-    ];
-
-    return (
-        <Paper className="dropdown-menu" elevation={3}>
-            <List className="dropdown-list">
-                {menuItems.map(({ text, icon, onClick }, index) => (
-                    <ListItemButton key={index} className="dropdown-item" onClick={onClick}>
-                        <ListItemIcon>{icon}</ListItemIcon>
-                        <ListItemText primary={text} />
-                    </ListItemButton>
-                ))}
-            </List>
-        </Paper>
-    );
-};
-
-export default DropdownMenu;
+import React from 'react';
+import { List, ListItemButton, ListItemText, Paper, ListItemIcon } from '@mui/material';
+import './DropdownMenu.css';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import Person2OutlinedIcon from '@mui/icons-material/Person2Outlined';
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import { useNavigate } from 'react-router-dom';
+import { logout } from '../../../services/loginServices';
+import toastEmitter, { TOAST_EMITTER_KEY } from '../../../utils/toastEmitter';
+import { useAuth } from '../../../services/authProvider';
+
+const DropdownMenu = () => {
+    const navigate = useNavigate();
+    const { logoutAuth } = useAuth();
+
+    const handleLogoutClick = async () => {
+        await logout();
+        logoutAuth();
+        toastEmitter.emit(TOAST_EMITTER_KEY, 'Logout successfull');
+        navigate('/');
+    };
+
+    const menuItems = [
+        { text: 'Profile', icon: <Person2OutlinedIcon /> },
+        { text: 'Settings', icon: <SettingsOutlinedIcon /> },
+        { text: 'Logout', icon: <LogoutOutlinedIcon />, onClick: handleLogoutClick },
+    ];
+
+    return (
+        <Paper className="dropdown-menu" elevation={3}>
+            <List className="dropdown-list">
+                {menuItems.map(({ text, icon, onClick }, index) => (
+                    <ListItemButton key={index} className="dropdown-item" onClick={onClick}>
+                        <ListItemIcon>{icon}</ListItemIcon>
+                        <ListItemText primary={text} />
+                    </ListItemButton>
+                ))}
+            </List>
+        </Paper>
+    );
+};
+
+export default DropdownMenu;

frontend/src/components/Header/Header.jsx

@@ -3,7 +3,7 @@ import './Header.css';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import DropdownMenu from './DropdownMenu/DropdownMenu';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import Avatar from '../Avatar/Avatar';
+import Avatar from './Avatar/Avatar';
 import { useAuth } from '../../services/authProvider';
 
 function Header({ }) {

frontend/src/components/LeftMenu/LeftMenu.css

@@ -1,97 +1,55 @@
-.left-menu {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  padding-left: 0.5rem;
-  padding-right: 1rem;
-  box-shadow: 0px 4px 6px rgba(81, 81, 81, 0.1);
-  border-right: 1px solid #EBEBEB;
-  min-width: max-content;
-}
-
-.left-menu .MuiSvgIcon-root {
-  color: #667085;
-}
-
-.title .MuiTypography-root {
-  font-size: 11px;
-  font-weight: 400;
-  line-height: 38px;
-  color: #98A2B3;
-  margin-left: 8px;
-  margin-top: 8px;
-}
-
-.left-menu .MuiListItemIcon-root {
-  min-width: 2rem;
-}
-
-
-.search-item {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.left-menu .MuiListItemText-root {
-  margin: 0;
-}
-
-.menu-item .MuiTypography-root {
-  width: 100%;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 24px;
-  color: #344054;
-  display: inline;
-  justify-content: center;
-  padding-right: 1.5rem;
-}
 
-.left-menu .MuiListItemButton-root {
-  border-radius: 6px;
-}
-
-.bottom-menu {
-  margin-bottom: 20px;
-}
-
-.user-info {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 1rem;
-  padding-left: 16px;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-name {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 20px;
-  color: #344054;
-}
-
-.user-role {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #344054;
-}
-
-.dropdown-button {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.4em 0.4em;
-  margin: 1px
-}
-
-.user-details-container {
-  display: flex;
-}
+.left-menu {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding-left: 0.5rem;
+    padding-right: 1rem;
+    box-shadow: 0px 4px 6px rgba(81, 81, 81, 0.1); 
+    border-right: 1px solid #EBEBEB;
+    min-width: max-content;
+  }
+  .left-menu .MuiSvgIcon-root{
+    color:#667085;
+  }
+  .title .MuiTypography-root{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 38px;
+    color: #98A2B3;
+    margin-left: 8px;
+    margin-top: 8px;
+  }
+
+  .left-menu .MuiListItemIcon-root {
+    min-width: 2rem; 
+  }
+
+
+  .search-item {
+    padding-top: 4px; 
+    padding-bottom: 4px; 
+  }
+
+  .left-menu .MuiListItemText-root {
+    margin: 0; 
+  }
+
+  .menu-item .MuiTypography-root{
+    width: 100%; 
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    color: #344054;
+    display: inline;
+    justify-content: center;
+    padding-right: 1.5rem;
+  }
+
+  .left-menu .MuiListItemButton-root{
+    border-radius: 6px;
+  }
+
+  .bottom-menu{
+    margin-bottom: 20px;
+  }

frontend/src/components/LeftMenu/LeftMenu.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { List, ListItemIcon, ListItemText, Divider, ListItemButton } from '@mui/material';
 import {
   DirectionsBusFilledOutlined as DirectionsBusIcon,
@@ -12,13 +12,7 @@ import {
   MarkChatUnreadOutlined as ChatIcon,
 } from '@mui/icons-material';
 import './LeftMenu.css';
-import Logo from '../Logo/Logo';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../services/authProvider';
-import Avatar from '../Avatar/Avatar';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
-import DropdownMenu from '../DropdownMenu/DropdownMenu';
 
 const menuItems = [
   { text: 'Home', icon: <HomeIcon />, route: '/' },
@@ -27,9 +21,9 @@ const menuItems = [
   { text: 'Hints', icon: <TipsIcon />, route: '/hint' },
   { text: 'Checklist', icon: <ChecklistIcon /> },
   { text: 'MAKE AN ANNOUNCEMENT', title: true },
-  { text: 'Popups', icon: <SmsIcon />, route: '/popup' },
-  { text: 'Banners', icon: <SportsIcon />, route: '/banner' },
-  { text: 'Helper Links', icon: <LinkIcon />, route: '/link' },
+  { text: 'Popups', icon: <SmsIcon />, route: '/popup'},
+  { text: 'Banners', icon: <SportsIcon /> , route: '/banner'},
+  { text: 'Helper Links', icon: <LinkIcon /> , route: '/link'},
   { text: 'GET FEEDBACK', title: true },
   { text: 'Feedback', icon: <ChatIcon /> },
   { text: 'Surveys', icon: <ListIcon /> },
@@ -42,16 +36,8 @@ function LeftMenu() {
     if (route) navigate(route);
   };
 
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { userInfo } = useAuth();
-
-  const handleDropdownClick = () => {
-    setIsDropdownOpen(!isDropdownOpen);
-  };
-
   return (
     <div className="left-menu">
-      <Logo isSidebar={true} />
       <List>
         {menuItems.map((item, index) => (
           item.title ? (
@@ -77,18 +63,6 @@ function LeftMenu() {
           <ListItemText primary="Support" />
         </ListItemButton>
       </div>
-      <div className="user-info">
-        <div className='user-details-container'>
-          <Avatar src="/vendetta.png" alt="User" size="medium" />
-          <div className="user-details">
-            <div className="user-name">{userInfo.fullName}</div>
-            <div className="user-role">{userInfo.role}</div>
-          </div>
-        </div>
-        <button className="dropdown-button" onClick={handleDropdownClick}>
-          {isDropdownOpen ? <>< KeyboardArrowUpIcon /><DropdownMenu /></> : <KeyboardArrowDownOutlinedIcon />}
-        </button>
-      </div>
     </div>
   );
 }

frontend/src/components/Logo/Logo.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import './LogoStyles.css';
 
-function Logo({ isSidebar = false }) {
-    return <div className={isSidebar ? 'sidebar' : 'logo-container'}>
+function Logo() {
+    return <div className='logo-container'>
         <svg width="346" height="32" viewBox="0 0 346 32" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M0.0200003 2.68H8.66C9.83333 2.68 10.98 2.8 12.1 3.04C13.22 3.28 14.22 3.68 15.1 4.24C15.98 4.77333 16.6867 5.48 17.22 6.36C17.78 7.24 18.06 8.33333 18.06 9.64C18.06 11.2933 17.6067 12.6667 16.7 13.76C15.82 14.8267 14.62 15.5867 13.1 16.04V16.12C14.0067 16.2 14.8467 16.44 15.62 16.84C16.42 17.2133 17.1 17.7067 17.66 18.32C18.2467 18.9333 18.7 19.6533 19.02 20.48C19.34 21.28 19.5 22.1467 19.5 23.08C19.5 24.6533 19.1667 25.9467 18.5 26.96C17.86 27.9733 17.0067 28.7867 15.94 29.4C14.9 29.9867 13.7133 30.4 12.38 30.64C11.0733 30.88 9.76667 31 8.46 31H0.0200003V2.68ZM3.38 14.68H8.02C8.82 14.68 9.59333 14.6267 10.34 14.52C11.1133 14.4133 11.8067 14.2 12.42 13.88C13.0333 13.5333 13.5267 13.0667 13.9 12.48C14.2733 11.8667 14.46 11.0667 14.46 10.08C14.46 9.2 14.2867 8.49333 13.94 7.96C13.5933 7.4 13.1267 6.96 12.54 6.64C11.98 6.32 11.3267 6.10667 10.58 6C9.86 5.86667 9.12667 5.8 8.38 5.8H3.38V14.68ZM3.38 27.88H9.06C9.88667 27.88 10.7 27.8 11.5 27.64C12.3267 27.4533 13.06 27.1733 13.7 26.8C14.3667 26.4 14.9 25.8933 15.3 25.28C15.7 24.64 15.9 23.8667 15.9 22.96C15.9 21.9733 15.7 21.1467 15.3 20.48C14.9267 19.8133 14.42 19.28 13.78 18.88C13.1667 18.48 12.4467 18.2 11.62 18.04C10.82 17.88 9.99333 17.8 9.14 17.8H3.38V27.88ZM24.9353 0.759998H28.0553V31H24.9353V0.759998ZM50.5847 26.56C50.5847 27.4133 50.6114 28.2133 50.6647 28.96C50.718 29.7067 50.7447 30.3867 50.7447 31H47.7847C47.7847 30.4933 47.7714 29.9867 47.7447 29.48C47.718 28.9733 47.7047 28.4533 47.7047 27.92H47.6247C47.4114 28.3733 47.1047 28.8133 46.7047 29.24C46.3314 29.6667 45.878 30.0533 45.3447 30.4C44.8114 30.72 44.2114 30.9733 43.5447 31.16C42.878 31.3733 42.158 31.48 41.3847 31.48C40.158 31.48 39.0914 31.2933 38.1847 30.92C37.3047 30.5467 36.5714 30.0267 35.9847 29.36C35.398 28.6933 34.958 27.8933 34.6647 26.96C34.398 26 34.2647 24.96 34.2647 23.84V12.28H37.3847V23.52C37.3847 25.0933 37.7314 26.3333 38.4247 27.24C39.118 28.1467 40.198 28.6 41.6647 28.6C42.678 28.6 43.5447 28.4267 44.2647 28.08C45.0114 27.7333 45.6114 27.24 46.0647 26.6C46.5447 25.96 46.8914 25.2 47.1047 24.32C47.3447 23.44 47.4647 22.4667 47.4647 21.4V12.28H50.5847V26.56ZM73.2113 27.6C72.0913 29.04 70.8646 30.0533 69.5313 30.64C68.1979 31.2 66.6513 31.48 64.8913 31.48C63.4246 31.48 62.1046 31.2267 60.9313 30.72C59.7579 30.1867 58.7579 29.48 57.9313 28.6C57.1313 27.72 56.5046 26.68 56.0513 25.48C55.6246 24.28 55.4113 23 55.4113 21.64C55.4113 20.2 55.6513 18.88 56.1313 17.68C56.6113 16.4533 57.2779 15.4133 58.1313 14.56C58.9846 13.68 59.9979 13 61.1713 12.52C62.3446 12.04 63.6246 11.8 65.0113 11.8C66.3179 11.8 67.5179 12.0267 68.6113 12.48C69.7046 12.9067 70.6379 13.5467 71.4113 14.4C72.2113 15.2267 72.8246 16.2533 73.2513 17.48C73.6779 18.68 73.8913 20.0533 73.8913 21.6V22.6H58.7713C58.8246 23.4 59.0113 24.1733 59.3313 24.92C59.6779 25.64 60.1179 26.28 60.6513 26.84C61.1846 27.3733 61.8113 27.8 62.5313 28.12C63.2513 28.44 64.0379 28.6 64.8913 28.6C66.2513 28.6 67.3979 28.36 68.3313 27.88C69.2646 27.4 70.1046 26.6933 70.8513 25.76L73.2113 27.6ZM70.5313 19.96C70.4779 18.36 69.9579 17.08 68.9713 16.12C67.9846 15.16 66.6246 14.68 64.8913 14.68C63.1579 14.68 61.7579 15.16 60.6913 16.12C59.6246 17.08 58.9846 18.36 58.7713 19.96H70.5313ZM75.9978 2.68H79.7178L86.1578 26.2H86.2378L93.1978 2.68H96.9578L103.878 26.2H103.958L110.518 2.68H114.038L105.718 31H102.078L95.0778 7H94.9978L87.9578 31H84.2778L75.9978 2.68ZM115.509 14.68C116.469 13.6933 117.602 12.9733 118.909 12.52C120.242 12.04 121.589 11.8 122.949 11.8C125.722 11.8 127.722 12.4533 128.949 13.76C130.176 15.0667 130.789 17.0533 130.789 19.72V27.76C130.789 28.2933 130.816 28.8533 130.869 29.44C130.922 30 130.989 30.52 131.069 31H128.069C127.962 30.5733 127.896 30.1067 127.869 29.6C127.869 29.0667 127.869 28.6 127.869 28.2H127.789C127.176 29.16 126.349 29.9467 125.309 30.56C124.296 31.1733 123.069 31.48 121.629 31.48C120.669 31.48 119.762 31.36 118.909 31.12C118.082 30.88 117.349 30.5333 116.709 30.08C116.096 29.6 115.602 29.0133 115.229 28.32C114.856 27.6267 114.669 26.8267 114.669 25.92C114.669 24.3733 115.069 23.16 115.869 22.28C116.669 21.4 117.656 20.7467 118.829 20.32C120.029 19.8933 121.309 19.6267 122.669 19.52C124.056 19.4133 125.322 19.36 126.469 19.36H127.669V18.8C127.669 17.44 127.256 16.4133 126.429 15.72C125.629 15.0267 124.496 14.68 123.029 14.68C122.016 14.68 121.016 14.8533 120.029 15.2C119.069 15.52 118.216 16.0267 117.469 16.72L115.509 14.68ZM124.549 22C122.549 22 120.962 22.28 119.789 22.84C118.616 23.4 118.029 24.32 118.029 25.6C118.029 26.7733 118.416 27.6133 119.189 28.12C119.989 28.6 120.976 28.84 122.149 28.84C123.056 28.84 123.842 28.6933 124.509 28.4C125.202 28.08 125.776 27.6667 126.229 27.16C126.682 26.6533 127.029 26.0667 127.269 25.4C127.509 24.7067 127.642 23.9733 127.669 23.2V22H124.549ZM145.011 31H141.571L133.931 12.28H137.571L143.411 26.96H143.491L149.051 12.28H152.411L145.011 31ZM172.508 27.6C171.388 29.04 170.161 30.0533 168.828 30.64C167.495 31.2 165.948 31.48 164.188 31.48C162.721 31.48 161.401 31.2267 160.228 30.72C159.055 30.1867 158.055 29.48 157.228 28.6C156.428 27.72 155.801 26.68 155.348 25.48C154.921 24.28 154.708 23 154.708 21.64C154.708 20.2 154.948 18.88 155.428 17.68C155.908 16.4533 156.575 15.4133 157.428 14.56C158.281 13.68 159.295 13 160.468 12.52C161.641 12.04 162.921 11.8 164.308 11.8C165.615 11.8 166.815 12.0267 167.908 12.48C169.001 12.9067 169.935 13.5467 170.708 14.4C171.508 15.2267 172.121 16.2533 172.548 17.48C172.975 18.68 173.188 20.0533 173.188 21.6V22.6H158.068C158.121 23.4 158.308 24.1733 158.628 24.92C158.975 25.64 159.415 26.28 159.948 26.84C160.481 27.3733 161.108 27.8 161.828 28.12C162.548 28.44 163.335 28.6 164.188 28.6C165.548 28.6 166.695 28.36 167.628 27.88C168.561 27.4 169.401 26.6933 170.148 25.76L172.508 27.6ZM169.828 19.96C169.775 18.36 169.255 17.08 168.268 16.12C167.281 15.16 165.921 14.68 164.188 14.68C162.455 14.68 161.055 15.16 159.988 16.12C158.921 17.08 158.281 18.36 158.068 19.96H169.828Z" fill="#344054" />
             <path d="M202.868 31.72C200.708 31.72 198.721 31.3467 196.908 30.6C195.121 29.8533 193.561 28.8267 192.228 27.52C190.921 26.1867 189.894 24.6133 189.148 22.8C188.428 20.96 188.068 18.9733 188.068 16.84C188.068 14.7067 188.428 12.7333 189.148 10.92C189.894 9.08 190.921 7.50667 192.228 6.2C193.561 4.86667 195.121 3.82667 196.908 3.08C198.721 2.33333 200.708 1.96 202.868 1.96C205.028 1.96 207.001 2.33333 208.787 3.08C210.601 3.82667 212.161 4.86667 213.468 6.2C214.801 7.50667 215.828 9.08 216.548 10.92C217.294 12.7333 217.668 14.7067 217.668 16.84C217.668 18.9733 217.294 20.96 216.548 22.8C215.828 24.6133 214.801 26.1867 213.468 27.52C212.161 28.8267 210.601 29.8533 208.787 30.6C207.001 31.3467 205.028 31.72 202.868 31.72ZM202.868 28.6C204.521 28.6 206.028 28.2933 207.388 27.68C208.774 27.0667 209.961 26.2267 210.948 25.16C211.934 24.0933 212.694 22.8533 213.228 21.44C213.788 20 214.068 18.4667 214.068 16.84C214.068 15.2133 213.788 13.6933 213.228 12.28C212.694 10.84 211.934 9.58667 210.948 8.52C209.961 7.45333 208.774 6.61333 207.388 6C206.028 5.38667 204.521 5.08 202.868 5.08C201.214 5.08 199.694 5.38667 198.308 6C196.948 6.61333 195.774 7.45333 194.788 8.52C193.801 9.58667 193.028 10.84 192.468 12.28C191.934 13.6933 191.668 15.2133 191.668 16.84C191.668 18.4667 191.934 20 192.468 21.44C193.028 22.8533 193.801 24.0933 194.788 25.16C195.774 26.2267 196.948 27.0667 198.308 27.68C199.694 28.2933 201.214 28.6 202.868 28.6ZM222.507 16.72C222.507 15.8667 222.48 15.0667 222.427 14.32C222.374 13.5733 222.347 12.8933 222.347 12.28H225.307C225.307 12.7867 225.32 13.2933 225.347 13.8C225.374 14.3067 225.387 14.8267 225.387 15.36H225.467C225.68 14.9067 225.974 14.4667 226.347 14.04C226.747 13.6133 227.214 13.24 227.747 12.92C228.28 12.5733 228.88 12.3067 229.547 12.12C230.214 11.9067 230.934 11.8 231.707 11.8C232.934 11.8 233.987 11.9867 234.867 12.36C235.774 12.7333 236.52 13.2533 237.107 13.92C237.694 14.5867 238.12 15.4 238.387 16.36C238.68 17.2933 238.827 18.32 238.827 19.44V31H235.707V19.76C235.707 18.1867 235.36 16.9467 234.667 16.04C233.974 15.1333 232.894 14.68 231.427 14.68C230.414 14.68 229.534 14.8533 228.787 15.2C228.067 15.5467 227.467 16.04 226.987 16.68C226.534 17.32 226.187 18.08 225.947 18.96C225.734 19.84 225.627 20.8133 225.627 21.88V31H222.507V16.72ZM244.573 0.759998H247.693V15H247.773C248.627 13.9867 249.613 13.2 250.733 12.64C251.88 12.08 253.133 11.8 254.493 11.8C255.96 11.8 257.293 12.0533 258.493 12.56C259.72 13.04 260.76 13.72 261.613 14.6C262.467 15.48 263.133 16.52 263.613 17.72C264.093 18.92 264.333 20.2267 264.333 21.64C264.333 23.0533 264.093 24.36 263.613 25.56C263.133 26.76 262.467 27.8 261.613 28.68C260.787 29.56 259.8 30.2533 258.653 30.76C257.507 31.24 256.28 31.48 254.973 31.48C253.293 31.48 251.813 31.12 250.533 30.4C249.28 29.6533 248.36 28.7467 247.773 27.68H247.693V31H244.573V0.759998ZM247.693 21.64C247.693 22.6267 247.84 23.5467 248.133 24.4C248.453 25.2267 248.907 25.96 249.493 26.6C250.08 27.2133 250.773 27.7067 251.573 28.08C252.4 28.4267 253.32 28.6 254.333 28.6C255.347 28.6 256.253 28.4267 257.053 28.08C257.88 27.7067 258.587 27.2133 259.173 26.6C259.76 25.96 260.2 25.2267 260.493 24.4C260.813 23.5467 260.973 22.6267 260.973 21.64C260.973 20.6533 260.813 19.7467 260.493 18.92C260.2 18.0667 259.76 17.3333 259.173 16.72C258.587 16.08 257.88 15.5867 257.053 15.24C256.253 14.8667 255.347 14.68 254.333 14.68C253.32 14.68 252.4 14.8667 251.573 15.24C250.773 15.5867 250.08 16.08 249.493 16.72C248.907 17.3333 248.453 18.0667 248.133 18.92C247.84 19.7467 247.693 20.6533 247.693 21.64ZM268.107 21.64C268.107 20.1733 268.36 18.84 268.867 17.64C269.373 16.44 270.067 15.4133 270.947 14.56C271.827 13.68 272.88 13 274.107 12.52C275.333 12.04 276.667 11.8 278.107 11.8C279.547 11.8 280.88 12.04 282.107 12.52C283.333 13 284.387 13.68 285.267 14.56C286.147 15.4133 286.84 16.44 287.347 17.64C287.853 18.84 288.107 20.1733 288.107 21.64C288.107 23.1067 287.853 24.44 287.347 25.64C286.84 26.84 286.147 27.88 285.267 28.76C284.387 29.6133 283.333 30.28 282.107 30.76C280.88 31.24 279.547 31.48 278.107 31.48C276.667 31.48 275.333 31.24 274.107 30.76C272.88 30.28 271.827 29.6133 270.947 28.76C270.067 27.88 269.373 26.84 268.867 25.64C268.36 24.44 268.107 23.1067 268.107 21.64ZM271.467 21.64C271.467 22.6267 271.613 23.5467 271.907 24.4C272.227 25.2267 272.68 25.96 273.267 26.6C273.853 27.2133 274.547 27.7067 275.347 28.08C276.173 28.4267 277.093 28.6 278.107 28.6C279.12 28.6 280.027 28.4267 280.827 28.08C281.653 27.7067 282.36 27.2133 282.947 26.6C283.533 25.96 283.973 25.2267 284.267 24.4C284.587 23.5467 284.747 22.6267 284.747 21.64C284.747 20.6533 284.587 19.7467 284.267 18.92C283.973 18.0667 283.533 17.3333 282.947 16.72C282.36 16.08 281.653 15.5867 280.827 15.24C280.027 14.8667 279.12 14.68 278.107 14.68C277.093 14.68 276.173 14.8667 275.347 15.24C274.547 15.5867 273.853 16.08 273.267 16.72C272.68 17.3333 272.227 18.0667 271.907 18.92C271.613 19.7467 271.467 20.6533 271.467 21.64ZM292.697 14.68C293.657 13.6933 294.79 12.9733 296.097 12.52C297.43 12.04 298.777 11.8 300.137 11.8C302.91 11.8 304.91 12.4533 306.137 13.76C307.363 15.0667 307.977 17.0533 307.977 19.72V27.76C307.977 28.2933 308.003 28.8533 308.057 29.44C308.11 30 308.177 30.52 308.257 31H305.257C305.15 30.5733 305.083 30.1067 305.057 29.6C305.057 29.0667 305.057 28.6 305.057 28.2H304.977C304.363 29.16 303.537 29.9467 302.497 30.56C301.483 31.1733 300.257 31.48 298.817 31.48C297.857 31.48 296.95 31.36 296.097 31.12C295.27 30.88 294.537 30.5333 293.897 30.08C293.283 29.6 292.79 29.0133 292.417 28.32C292.043 27.6267 291.857 26.8267 291.857 25.92C291.857 24.3733 292.257 23.16 293.057 22.28C293.857 21.4 294.843 20.7467 296.017 20.32C297.217 19.8933 298.497 19.6267 299.857 19.52C301.243 19.4133 302.51 19.36 303.657 19.36H304.857V18.8C304.857 17.44 304.443 16.4133 303.617 15.72C302.817 15.0267 301.683 14.68 300.217 14.68C299.203 14.68 298.203 14.8533 297.217 15.2C296.257 15.52 295.403 16.0267 294.657 16.72L292.697 14.68ZM301.737 22C299.737 22 298.15 22.28 296.977 22.84C295.803 23.4 295.217 24.32 295.217 25.6C295.217 26.7733 295.603 27.6133 296.377 28.12C297.177 28.6 298.163 28.84 299.337 28.84C300.243 28.84 301.03 28.6933 301.697 28.4C302.39 28.08 302.963 27.6667 303.417 27.16C303.87 26.6533 304.217 26.0667 304.457 25.4C304.697 24.7067 304.83 23.9733 304.857 23.2V22H301.737ZM313.679 16.72C313.679 15.8667 313.652 15.0667 313.599 14.32C313.545 13.5733 313.519 12.8933 313.519 12.28H316.479C316.479 12.7867 316.492 13.2933 316.519 13.8C316.545 14.3067 316.559 14.8267 316.559 15.36H316.639C316.852 14.9067 317.145 14.4667 317.519 14.04C317.919 13.6133 318.385 13.24 318.919 12.92C319.452 12.5733 320.052 12.3067 320.719 12.12C321.385 11.9067 322.105 11.8 322.879 11.8C323.092 11.8 323.305 11.8133 323.519 11.84C323.732 11.8667 323.945 11.92 324.159 12L323.959 15.16C323.425 15 322.865 14.92 322.279 14.92C320.359 14.92 318.959 15.5467 318.079 16.8C317.225 18.0267 316.799 19.72 316.799 21.88V31H313.679V16.72ZM342.598 27.68H342.518C341.931 28.7467 340.998 29.6533 339.718 30.4C338.465 31.12 336.998 31.48 335.318 31.48C334.011 31.48 332.785 31.24 331.638 30.76C330.491 30.2533 329.491 29.56 328.638 28.68C327.811 27.8 327.158 26.76 326.678 25.56C326.198 24.36 325.958 23.0533 325.958 21.64C325.958 20.2267 326.198 18.92 326.678 17.72C327.158 16.52 327.825 15.48 328.678 14.6C329.531 13.72 330.558 13.04 331.758 12.56C332.985 12.0533 334.331 11.8 335.798 11.8C337.158 11.8 338.398 12.08 339.518 12.64C340.665 13.2 341.665 13.9867 342.518 15H342.598V0.759998H345.718V31H342.598V27.68ZM342.598 21.64C342.598 20.6533 342.438 19.7467 342.118 18.92C341.825 18.0667 341.385 17.3333 340.798 16.72C340.211 16.08 339.505 15.5867 338.678 15.24C337.878 14.8667 336.971 14.68 335.958 14.68C334.945 14.68 334.025 14.8667 333.198 15.24C332.398 15.5867 331.705 16.08 331.118 16.72C330.531 17.3333 330.078 18.0667 329.758 18.92C329.465 19.7467 329.318 20.6533 329.318 21.64C329.318 22.6267 329.465 23.5467 329.758 24.4C330.078 25.2267 330.531 25.96 331.118 26.6C331.705 27.2133 332.398 27.7067 333.198 28.08C334.025 28.4267 334.945 28.6 335.958 28.6C336.971 28.6 337.878 28.4267 338.678 28.08C339.505 27.7067 340.211 27.2133 340.798 26.6C341.385 25.96 341.825 25.2267 342.118 24.4C342.438 23.5467 342.598 22.6267 342.598 21.64Z" fill="#7F56D9" />

frontend/src/components/Logo/LogoStyles.css

@@ -8,15 +8,4 @@
   margin-top: 78px;
   font-weight: 400;
   font-size: 40px;
-}
-
-.sidebar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  max-width: 200px;
-  padding: 0;
-  margin-top: 1.5rem;
-  padding: 0px 16px;
-  box-sizing: border-box;
 }

frontend/src/scenes/dashboard/Dashboard.module.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 1.5rem 3rem;
+    padding: 3rem;
     gap:1.5rem;
 
     .top{

frontend/src/scenes/hints/HintPage.css

@@ -3,7 +3,7 @@
   grid-template-columns: 3fr 1fr;
   grid-gap: 20px;
   width: 100%;
-  padding: 3rem;
+  padding: 2% 3%;
 }
 
 .hint-page-title {

frontend/src/scenes/hints/HintPage.jsx

@@ -26,7 +26,7 @@ const HintPage = () => {
     return (
       <div className="hint-page-container">
         <div className="hint-page-left-section">
-          <h2 className="hint-page-title" style={{ marginTop: "8px", marginBottom: "16px" }}>All Hints</h2>
+          <h2 className="hint-page-title" style={{ marginBottom: "16px" }}>All Hints</h2>
           <List items={hintsData} onSelectItem={() => { }} />
         </div>
         <div className="hint-right-content">

frontend/src/scenes/tours/ProductTour.jsx

@@ -49,7 +49,7 @@ const TourPage = ({ items }) => {
   return (
     <div className="product-page-container">
       <div className="product-page-header">
-        <h2 style={{marginTop: "0.3rem"}}>{showDemoItems ? "Demo Tours" : "All Tours"}</h2>
+        <ContentHeader title={showDemoItems ? "Demo Tours" : "All Tours"} />
         <Button text="Create a new tour" onClick={toggleSettings} /> {/* Button action */}
       </div>
       <div className="product-page">

frontend/src/scenes/tours/ProductTourStyles.css

@@ -1,5 +1,5 @@
 .product-page-container {
-  padding: 3rem;
+  padding: 2% 3%;
 }
 
 .product-page-header {

frontend/src/scenes/tours/ToursDefaultPage.jsx

@@ -13,10 +13,10 @@ const ToursDefaultPage = () => {
 
     const style = {
         "display": "flex",
-        "flexDirection": "column",
+        "flex-direction": "column",
         "width": "100%",
-        "justifyContent": "center",
-        "alignItems": "center",
+        "justify-content": "center",
+        "align-items": "center",
     };
 
     return (

frontend/src/templates/HomePageTemplate/HomePageTemplate.css

@@ -9,8 +9,4 @@
 .content-container{
     display: flex;
     flex-grow: 1;
-}
-
-.content-container > div:last-child {
-    padding-top: 1.5rem;
 }

frontend/src/templates/HomePageTemplate/HomePageTemplate.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import LeftMenu from "../../components/LeftMenu/LeftMenu";
+import Header from "../../components/Header/Header";
 import "./HomePageTemplate.css";
 import { Outlet } from "react-router-dom";
 
@@ -8,6 +9,7 @@ const HomePageTemplate = () => {
 
   return (
     <div className="container">
+      <Header/>
       <div className="content-container">
         <LeftMenu className="sidebar"/>
         <Outlet />