trampa-frontend/src/components/Header/Drawer/Drawer.styled.js

import { Box, Typography } from "@mui/material";
import styled from "styled-components";
import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
import IconButton from "../../IconButton/IconButton";
import {ReactComponent as Close} from "../../../assets/images/svg/close-modal.svg"
import selectedTheme from "../../../themes";
import {ReactComponent as User} from "../../../assets/images/svg/user.svg"
import {ReactComponent as Mail} from "../../../assets/images/svg/mail.svg"
import {ReactComponent as Package} from "../../../assets/images/svg/package.svg"
import {ReactComponent as Logout} from "../../../assets/images/svg/log-out.svg"


export const DrawerContainer = styled(Box)`
  width: 100vw;
  position: relative;
  height: 100%;
`
export const ToolsContainer = styled(Box)`
  display: flex;
  flex-direction: column;
  justify-content: ${(props) => (props.mobile ? "center" : "space-between")};
  align-items: ${(props) => (props.mobile ? "start" : "center")};
  ${(props) => !props.mobile && `width: 100%;`}
  & div button {
    ${(props) => props.mobile && `width: auto;`}
  }
  position: absolute;
  top: 0px;
  bottom: 70px;
  left: 36px;
  gap: 36px;
`;

export const AuthButtonsDrawerContainer = styled(Box)`
  height: 100%;
  width: 100%;
`;
export const LoginButton = styled(PrimaryButton)`
  height: 49px;
  width: 218px;
  font-weight: 600;
  position: absolute;
  bottom: 85px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
`;
export const RegisterButton = styled(PrimaryButton)`
  height: 49px;
  width: 218px;
  font-weight: 600;
  position: absolute;
  bottom: 40px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
`;
export const CloseButton = styled(IconButton)`
  position: absolute;
  top: 40px;
  right: 36px;
`
export const CloseIcon = styled(Close)`
  color: ${selectedTheme.primaryYellow};
  width: 16px;
  height: 16px;
`
export const DrawerOption = styled(Typography)`
  font-weight: 600;
  font-family: "Open Sans";
  color: ${selectedTheme.primaryPurple};
  font-size: 18px;
  position: relative;
  top: 4px;
`
export const DrawerButton = styled(Box)`
  display: flex;
  flex-direction: row;
`
export const UserIcon = styled(User)`
  width: 24px;
  height: 24px;
  margin-right: 9px;
  & path {
    stroke: ${selectedTheme.primaryYellow};
  }
`
export const MailIcon = styled(Mail)`
  width: 24px;
  height: 24px;
  margin-right: 9px;
  & path {
    stroke: ${selectedTheme.primaryYellow};
  }
`
export const PackageIcon = styled(Package)`
  width: 24px;
  height: 24px;
  margin-right: 9px;
  & path {
    stroke: ${selectedTheme.primaryYellow};
  }
`
export const AddOfferButton = styled(PrimaryButton)`
  width: 165px;
  height: 44px;
  position: relative;
  bottom: -5px;
`
export const FooterButtons = styled(Box)`
  position: absolute;
  bottom: 36px;
  display: flex;
  flex-direction: row;
  width: 100vw;
  justify-content: space-around;
`
export const LogoutButton = styled(Box)`
`
export const LogoutIcon = styled(Logout)`
  width: 20px;
  height: 20px;
  & path {
    stroke: ${selectedTheme.primaryPurple};
  }
`
export const LogoutText = styled(Typography)`
  font-weight: 600;
  font-size: 14px;
  color: ${selectedTheme.primaryPurple};
  font-family: "Open Sans";
  position: relative;
  left: -14px;
  top: -3px;
`
export const HeaderTitle = styled(Typography)`
  font-weight: 700;
  font-family: "Open Sans";
  font-size: 18px;
  color: ${selectedTheme.primaryDarkTextThird};
  position: absolute;
  top: 36px;
  left: 36px;
`
export const MyUsername = styled(Typography)`
  font-size: 12px;
  font-family: "Open Sans";
  color: ${selectedTheme.primaryPurple};
  position: relative;
  top: 12px;
  left: 4px;
  letter-spacing: 2%;
`