trampa-frontend/src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

import { Avatar, Box, Button, List, ListItem, ListItemAvatar, ListItemText, Typography } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../themes";
import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
import { ProfileAvatar } from "../MyProfile/MyProfile.styled";


export const HeaderPopoverContainer = styled(Box)`
`
export const PopoverTitle = styled(Typography)`
    background-color: ${selectedTheme.primaryPurple};
    color: white;
    width: 100%;
    min-width: 270px;
    font-family: "Open Sans";
`
export const PopoverList = styled(List)`
    width: 100%;
    max-width: 360px;
    background-color: "white";
`
export const PopoverListItem = styled(ListItem)`
    align-items: flex-start;
`
export const PopoverListItemAvatar = styled(Avatar)`
    position: relative;
    top: 4px;
`
export const PopoverListItemProfileAvatar = styled(ProfileAvatar)`
`
export const PopoverListItemAvatarContainer = styled(ListItemAvatar)`
`
export const PopoverButton = styled(Button)`
    text-decoration: underline;
    color: ${selectedTheme.primaryPurple};
    font-weight: 500;
    text-align: right;
    height: 20px;
`
export const PopoverListItemTextContainer = styled(ListItemText)`
    & span {
        font-weight: 700;
        color: ${selectedTheme.primaryPurple};
    }
    & p {
        font-size: 0.81rem;
        & svg {
            position: relative;
            top: 2px;
        }
    }
`
export const EyeIcon = styled(Eye)`
    & path {
        stroke: ${selectedTheme.primaryYellow};
    }
`
export const PopoverButtonsContainer = styled(Box)`
    flex-direction: column;
    display: flex;
    align-items: flex-end;
`
export const PopoverNoItemsText = styled(Typography)`
    text-align: center;
    width: 100%;
    font-weight: 600;
    padding-top: 5px;
    font-size: 13px;
    font-family: "Open Sans";
`