Feature/responsive design

project2-front/src/component/AvatarComponent/UserAvatar.css

@@ -0,0 +1,11 @@
+.UserAvatarButton {
+    border-radius: 80% !important;
+    background-color: transparent !important;
+    height: 60px !important;
+    width: 15px !important;
+}
+
+.UserAvatarPic {
+    height: 42px !important;
+    width: 42px !important;
+}

project2-front/src/component/AvatarComponent/UserAvatar.jsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { useState } from "react";
 import { projectApi } from "../../util/axios.js";
 import { useNavigate } from "react-router-dom";
+import "./UserAvatar.css";
 
 const UserAvatar = ({ username, image, width = 42, height = 42 }) => {
   const [userData, setUserData] = useState(null);
@@ -32,28 +33,9 @@ const UserAvatar = ({ username, image, width = 42, height = 42 }) => {
   };
 
   return (
-    <Button
-      variant="contained"
-      disableRipple={true}
-      onClick={handleSubmit}
-      disableElevation={true}
-      sx={{
-        borderRadius: "30px",
-        width: "30%",
-        backgroundColor: "transparent",
-      }}
-    >
-      <Avatar
-        alt={name}
-        src={image}
-        sx={{
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: "2px",
-          width: { width },
-          height: { height },
-        }}
-      />
+    <Button className="UserAvatarButton" variant="contained" disableRipple={true}
+            onClick={handleSubmit} disableElevation={true}>
+      <Avatar className="UserAvatarPic" alt={name} src={image}/>
     </Button>
   );
 };

project2-front/src/component/LeftSidebar/AuthContainer/AuthContainer.css

@@ -0,0 +1,24 @@
+.AuthContainerLeftBar {
+    width: 100%;
+    padding-left: 30%;
+}
+
+.NavbarDrawer {
+    display: none !important;
+}
+
+@media (max-width: 1280px) {
+    .AuthContainerLeftBar {
+        width: 100%;
+        padding-left: 20%;
+    }
+
+    .NavbarDrawer {
+        display: flex !important;
+        overflow: hidden !important;
+    }
+
+    .NavbarComponentElement {
+        display: none !important;
+    }
+}

project2-front/src/component/LeftSidebar/AuthContainer/AuthContainer.jsx

@@ -1,32 +1,16 @@
-import { Box } from "@mui/material";
-import UserAvatar from "../../AvatarComponent/UserAvatar.jsx";
-import Cookies from "js-cookie";
+import { Box, Drawer } from "@mui/material";
 import Navbar from "../../Navbar/Navbar.jsx";
+import "./AuthContainer.css";
 
 const AuthContainer = () => {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        width: "100%",
-        flexDirection: "column",
-        justifyContent: "flex-end",
-        alignItems: "flex-end",
-        paddingRight: "20px",
-      }}
-    >
-      <Box
-        sx={{
-          paddingBottom: "10px",
-          paddingRight: "42px",
-        }}
-      >
-        <UserAvatar
-          username={Cookies.get("username")}
-          image={Cookies.get("profile_pic")}
-        />
-      </Box>
-      <Navbar />
+    <Box className="AuthContainerLeftBar">
+        <Drawer className="NavbarDrawer" variant="permanent">
+            <Navbar/>
+        </Drawer>
+        <Box className="NavbarComponentElement">
+            <Navbar/>
+        </Box>
     </Box>
   );
 };

project2-front/src/component/LeftSidebar/AuthContainer/FAB_ScrollReset.css

@@ -0,0 +1,31 @@
+.FABScrollResetContainer {
+    height: 62vh !important;
+    display: flex !important;
+    align-items: flex-end !important;
+    justify-content: right !important;
+}
+
+.FABScrollContainer {
+    float: right;
+    margin-right: 20px !important;
+    background-color: #ffffff !important;
+    box-shadow: none !important;
+    border-width: thin !important;
+    border-color: lightgray !important;
+    border-style: solid !important;
+}
+
+.ExpandLessIcon {
+    color: #000000;
+    font-weight: 800;
+    font-size: 35px;
+}
+
+@media (max-width: 1280px) {
+    .FABScrollResetContainer {
+        height: 92vh !important;
+        display: flex !important;
+        align-items: flex-end !important;
+        justify-content: right !important;
+    }
+}

project2-front/src/component/LeftSidebar/AuthContainer/FAB_ScrollReset.jsx

@@ -1,42 +1,14 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import {Box, Fab} from "@mui/material";
 import PropTypes from "prop-types";
+import "./FAB_ScrollReset.css";
 
 const FAB_ScrollReset = ({handleScrollUp, showFAB}) => {
+
     return (
-        <Box
-            sx={{
-                height: '100vh',
-                zIndex: 1000,
-                display: showFAB ? 'flex' : 'none',
-                justifyContent: 'end',
-                alignItems: 'center',
-            }}
-        >
-            <Fab elevation={0}
-                 onClick={handleScrollUp}
-                 disableRipple={true}
-                sx={{
-                    backgroundColor: 'rgb(255,255,255)',
-                    boxShadow: 'none',
-                    '&:hover': {
-                        boxShadow: 'none',
-                        backgroundColor: 'transparent'
-                    },
-                    '&:active': {
-                        backgroundColor: 'transparent'
-                    },
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: 'rgb(195,205,215)',
-                }}
-            >
-                <ExpandLessIcon
-                    sx={{
-                        color: 'black',
-                        fontSize: 30,
-                    }}
-                />
+        <Box className="FABScrollResetContainer">
+            <Fab className="FABScrollContainer" disableElevation onClick={handleScrollUp} disableRipple={true}>
+                <ExpandLessIcon className="ExpandLessIcon"/>
             </Fab>
         </Box>
     )

project2-front/src/component/LeftSidebar/UnauthContainer/AuthButtons.css

@@ -0,0 +1,29 @@
+.AuthButtonsContainer {
+    margin-top: 10%;
+}
+
+.SignupButton {
+    min-width: 75px !important;
+    max-width: 75px !important;
+    min-height: 35px !important;
+    max-height: 35px !important;
+    margin-left: 5px !important;
+    font-family: Inter, sans-serif !important;
+    background-color: rgb(56,155,253) !important;
+    color: #ffffff !important;
+    text-transform: none !important;
+    font-weight: 500 !important;
+}
+
+.SigninButton {
+    min-width: 75px !important;
+    max-width: 75px !important;
+    min-height: 35px !important;
+    max-height: 35px !important;
+    margin-left: 5px !important;
+    font-family: Inter, sans-serif !important;
+    background-color: rgb(212,217,225) !important;
+    color: rgb(66, 87, 108) !important;
+    text-transform: none !important;
+    font-weight: 500 !important;
+}

project2-front/src/component/LeftSidebar/UnauthContainer/AuthButtons.jsx

@@ -1,48 +1,17 @@
 import {Link} from "react-router-dom";
 import {Box, Button} from "@mui/material";
+import "./AuthButtons.css";
 
 const AuthButtons = () => {
     return (
-        <Box
-            sx={{
-                marginTop: '20px',
-            }}
-        >
+        <Box className="AuthButtonsContainer">
             <Link to="/signup">
-                <Button variant="contained"
-                        size="small"
-                        sx={{
-                            minWidth: '75px',
-                            maxWidth: '75px',
-                            minHeight: '35px',
-                            maxHeight: '35px',
-                            marginLeft: '5px',
-                            fontFamily: 'Inter, sans-serif',
-                            backgroundColor: 'rgb(56,155,253)',
-                            color: 'white',
-                            textTransform: 'none',
-                            fontWeight: '500',
-                        }}
-                >
+                <Button className="SignupButton" variant="contained" size="small">
                     Sign up
                 </Button>
             </Link>
             <Link to="/signin">
-                <Button variant="contained"
-                        size="small"
-                        sx={{
-                            minWidth: '75px',
-                            maxWidth: '75px',
-                            minHeight: '35px',
-                            maxHeight: '35px',
-                            marginLeft: '5px',
-                            fontFamily: 'Inter, sans-serif',
-                            backgroundColor: 'rgb(212,217,225)',
-                            color: 'rgb(66, 87, 108)',
-                            textTransform: 'none',
-                            fontWeight: '500',
-                        }}
-                >
+                <Button className="SigninButton" variant="contained" size="small">
                     Sign in
                 </Button>
             </Link>

project2-front/src/component/LeftSidebar/UnauthContainer/UnauthContainer.css

@@ -0,0 +1,30 @@
+.UnauthContainer {
+    height: 100%;
+    width: 100%;
+    margin-top: 25px !important;
+}
+
+.ParticipateTitle {
+    margin-top: 10px !important;
+    font-size: 27px !important;
+    font-weight: 800 !important;
+    color: #000000;
+}
+
+.SelectLanguageContainer {
+    margin-top: 10px !important;
+}
+
+@media (max-width: 1280px) {
+    .SelectLanguageContainer {
+        margin-top: 10px !important;
+        margin-bottom: -250px !important;
+    }
+
+    .ParticipateTitle {
+        margin-top: 10px !important;
+        font-size: 25px !important;
+        font-weight: 800 !important;
+        color: #000000;
+    }
+}

project2-front/src/component/LeftSidebar/UnauthContainer/UnauthContainer.jsx

@@ -1,52 +1,33 @@
-import {Avatar, Box, Grid2, Typography} from "@mui/material";
+import {Avatar, Box, Typography} from "@mui/material";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import RocketIcon from "@mui/icons-material/Rocket";
 import {useState} from "react";
 import {Link} from "react-router-dom";
 import AuthButtons from "./AuthButtons.jsx";
 import SelectLanguage from "../../LanguageChoose/SelectLanguage.jsx";
+import "./UnauthContainer.css";
 
 export function UnauthContainer() {
     const [hover, setHover] = useState(false);
     return(
-        <Grid2 container justifyContent="right">
-            <Box
-                sx={{
-                    minWidth: '200px',
-                    maxWidth: '200px',
-                }}
+        <Box className="UnauthContainer">
+            <Link to="/"
+                  onMouseEnter={() => setHover(true)}
+                  onMouseLeave={() => setHover(false)}
             >
-                <Link to="/"
-                      onMouseEnter={() => setHover(true)}
-                      onMouseLeave={() => setHover(false)}
-                >
-                    <Avatar>
-                        {hover ? <RocketLaunchIcon/> : <RocketIcon/>}
-                    </Avatar>
-                </Link>
+                <Avatar>
+                    {hover ? <RocketLaunchIcon/> : <RocketIcon/>}
+                </Avatar>
+            </Link>
 
-                <Typography
-                    variant="h3"
-                    fontFamily="Inter, sans-serif"
-                    sx={{
-                        marginTop: '20px',
-                        fontSize: '25px',
-                        fontWeight: 800,
-                        color: 'black'
-                    }}
-                >
-                    Participate in discussion
-                </Typography>
+            <Typography variant="h3" fontFamily="Inter, sans-serif" className="ParticipateTitle">
+                Participate in discussion
+            </Typography>
 
-                <AuthButtons/>
-                <Box
-                    sx={{
-                        marginTop: '20px',
-                    }}
-                >
-                    <SelectLanguage/>
-                </Box>
+            <AuthButtons/>
+            <Box className="SelectLanguageContainer">
+                <SelectLanguage/>
             </Box>
-        </Grid2>
+        </Box>
     )
 }