@learningpool/ui 1.6.0 → 1.6.1

package/src/lib/components/navigation/MobileNavigation/MobileNavigation.tsx

@@ -0,0 +1,276 @@
+import React, { useEffect } from 'react'
+import { Person } from '@mui/icons-material'
+import { IMobileNavigationItemProps } from './MobileNavigationItem/MobileNavigationItem'
+import {
+  StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation
+} from './MobileNavigationStyles'
+import { StyledAvatar } from './MobileNavigationAvatarStyles'
+import SwipeableTemporaryDrawer from './MobileNavigationDrawer'
+import SwipeableTemporarySearch from './MobileNavigationSearch'
+import SwipeableTemporaryAvatar, { IAvatarMenuItemProps } from './MobileNavigationAvatar'
+import NotchIndicator from './MobileNavigationNotchIndicator'
+import ToggleX from './MobileNavigationToggleX'
+import ToggleSearchX from './MobileNavigationToggleSearchX'
+import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants'
+import { handleAvatarInitials } from '../../../utils/helpers'
+import { useSpring, animated, useSpringRef, config } from '@react-spring/web'
+import { useCurrentWidth } from '../../../utils/hooks'
+
+interface MobileNavigationProps {
+  logo?: string
+  logoText?: string
+  logoOnClick?: any
+  items?: IMobileNavigationItemProps[]
+  secondaryItems?: IMobileNavigationItemProps[]
+  hasStreamHome?: boolean
+  streamHomeAccessToken?: string
+  streamHomeBaseUrl?: string
+  streamHomeApiKey?: string
+  avatarName?: string
+  isDrawerOpen?: boolean
+  isSearchOpen?: boolean
+  isAvatarOpen?: boolean
+  hideAvatarInitials?: boolean
+  showNotchIndicator?: boolean
+
+  // Search panel props
+  hasSearch?: boolean
+  searchPanelPlaceholder?: string
+  searchPanelDefaultValue?: string
+  searchPanelOnClickSearch?: any
+
+  // Avatar panel props
+  hasAvatar?: boolean
+  avatarPanelLogoutString?: string
+  avatarPanelOnClickSwitchDirection?: any
+  avatarPanelOnClickLogout?: any
+  avatarPanelOnClickViewProfile?: any
+  avatarPanelViewProfileString?: string
+  avatarPanelOnClickEditProfile?: any
+  avatarPanelEditProfileString?: string
+  avatarPanelMenuItems?: Array<IAvatarMenuItemProps>
+  avatarPanelOnClickMainAction?: any
+  avatarPanelMainActionString?: string
+  avatarPanelSettingItems?: Array<IAvatarMenuItemProps>
+}
+
+const MobileNavigation = (
+  props: MobileNavigationProps
+): React.ReactElement => {
+  const {
+    items, secondaryItems, hideAvatarInitials,
+    hasSearch, hasAvatar, showNotchIndicator, ...rest
+  } = props
+  const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined
+  const propIsSearchOpen = typeof props?.isSearchOpen === 'boolean' ? props.isSearchOpen : undefined
+  const propIsAvatarOpen = typeof props?.isAvatarOpen === 'boolean' ? props.isAvatarOpen : undefined
+  const avatarName = props?.avatarName ?? 'Avatar name'
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(propIsDrawerOpen ?? false)
+  const [isSearchOpen, setIsSearchOpen] = React.useState(propIsSearchOpen ?? false)
+  const [isAvatarOpen, setIsAvatarOpen] = React.useState(propIsAvatarOpen ?? false)
+  const [value, setValue] = React.useState(0)
+
+  const currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction')
+  const [mobileNavDirection, setMobileNavDirection] = React.useState(currentDirection ?? 'ltr')
+
+  const [mobileNotchPosition, setMobileNotchPosition] = React.useState(0)
+  const windowWidth = useCurrentWidth()
+
+  useEffect(() => {
+    window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection)
+    positionMobileNotch()
+  }, [mobileNavDirection])
+
+  const NOTCH = {
+    Height: 50,
+    Width: 50
+  }
+
+  const BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item')
+
+  const positionMobileNotch = () => {
+    const selectedDOMRect = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]?.getBoundingClientRect()
+    setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition)
+  }
+
+  useEffect(() => positionMobileNotch(), [
+    value,
+    windowWidth,
+    // Fix notch position if scrollbar is hidden/shown
+    BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]?.getBoundingClientRect()
+  ])
+
+  useEffect(() => setIsDrawerOpen(propIsDrawerOpen ?? false), [propIsDrawerOpen])
+  useEffect(() => setIsSearchOpen(propIsSearchOpen ?? false), [propIsSearchOpen])
+  useEffect(() => setIsAvatarOpen(propIsAvatarOpen ?? false), [propIsAvatarOpen])
+  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName])
+
+  useEffect(() => {
+    function hideNotch (): void {
+      const HIDE_NOTCH = -1
+
+      if (!isDrawerOpen && !isSearchOpen && !isAvatarOpen) {
+        setValue(HIDE_NOTCH)
+      }
+    }
+
+    hideNotch()
+  }, [isDrawerOpen, isSearchOpen, isAvatarOpen])
+
+  const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN')
+
+  const toggleDrawer = (open: boolean, action: string) => (event: React.KeyboardEvent | React.MouseEvent) => {
+    event?.stopPropagation()
+
+    if (event.type === 'keydown') {
+      if ((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift') {
+        return
+      }
+    }
+
+    // Close any open drawers
+    setIsDrawerOpen(false)
+    setIsSearchOpen(false)
+    setIsAvatarOpen(false)
+
+    // Handle drawer toggling based on 'action' or default to 'drawer'
+    switch (action) {
+      case MOBILE_NAV_PANEL_TYPES.SEARCH: {
+        setIsSearchOpen(open ?? !isSearchOpen)
+        setValue(1)
+        break
+      }
+      case MOBILE_NAV_PANEL_TYPES.AVATAR: {
+        setIsAvatarOpen(open ?? !isAvatarOpen)
+        setValue(2)
+        break
+      }
+      default: {
+        setIsDrawerOpen(open ?? !isDrawerOpen)
+        setValue(0)
+        break
+      }
+    }
+  }
+
+  const api = useSpringRef()
+  const animationConfig: any = {
+    MobileNavigationPaper: {
+      from: { opacity: 0 },
+      to: { opacity: 1 }
+    },
+    MobileNavigation: {
+      from: { opacity: 0 },
+      to: { opacity: 1 }
+    },
+    MobileNavigationButton: {
+      from: { opacity: 0 },
+      to: { opacity: 1 }
+    },
+    MobileNavigationNotch: {
+      ref: api,
+      config: {
+        ...config.default,
+        mass: 1
+        // friction: 30,
+        // tension: 200
+      },
+      x: mobileNotchPosition,
+      y: value < 0 ? 100 : 0
+    }
+  }
+
+  const MobileNavigationPaperAnimation = useSpring(animationConfig.MobileNavigationPaper)
+  const MobileNavigationAnimation = useSpring(animationConfig.MobileNavigation)
+  const MobileNavigationButtonAnimation = useSpring(animationConfig.MobileNavigationButton)
+
+  return (
+    <>
+      <SwipeableTemporaryDrawer
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        items={items}
+        secondaryItems={secondaryItems}
+        label='Primary'
+        {...rest}
+      />
+      {hasSearch && (
+        <SwipeableTemporarySearch
+          isSearchOpen={isSearchOpen}
+          setIsSearchOpen={setIsSearchOpen}
+          {...rest}
+        />
+      )}
+      {hasAvatar && (
+        <SwipeableTemporaryAvatar
+          isAvatarOpen={isAvatarOpen}
+          setIsAvatarOpen={setIsAvatarOpen}
+          avatarName={avatarName}
+          mobileNavDirection={mobileNavDirection}
+          setMobileNavDirection={setMobileNavDirection}
+          {...rest}
+        />
+      )}
+      <StyledPaper
+        elevation={3}
+        // @ts-expect-error
+        component={animated.div}
+        style={MobileNavigationPaperAnimation}
+      >
+        {showNotchIndicator && <NotchIndicator {...animationConfig.MobileNavigationNotch} />}
+
+        <StyledBottomNavigation
+          value={value}
+          onChange={(event, newValue) => setValue(newValue)}
+          // @ts-expect-error
+          component={animated.div}
+          style={{
+            flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row',
+            ...MobileNavigationAnimation
+          }}
+        >
+          <StyledBottomNavigationAction
+            icon={<ToggleX isOpen={isDrawerOpen} />}
+            onClick={toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER)}
+            // @ts-expect-error
+            component={animated.div}
+            aria-label={isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel'}
+            aria-expanded={isDrawerOpen ? 'true' : 'false'}
+            aria-controls='mobile-nav-menu'
+            style={{
+              marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
+              marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto',
+              ...MobileNavigationButtonAnimation
+            }}
+          />
+          {hasSearch && (
+            <StyledBottomNavigationAction
+              icon={<ToggleSearchX isOpen={isSearchOpen} />}
+              onClick={toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH)}
+              // @ts-expect-error
+              component={animated.div}
+              aria-label={isSearchOpen ? 'Close search panel' : 'Open search panel'}
+              aria-expanded={isSearchOpen ? 'true' : 'false'}
+              aria-controls='mobile-nav-menu'
+              style={MobileNavigationButtonAnimation}
+            />
+          )}
+          {hasAvatar && (
+            <StyledBottomNavigationAction
+              onClick={toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR)}
+              icon={!hideAvatarInitials ? <StyledAvatar>{avatarInitials}</StyledAvatar> : <Person />}
+              // @ts-expect-error
+              component={animated.button}
+              aria-label={isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu'}
+              aria-expanded={isAvatarOpen ? 'true' : 'false'}
+              aria-controls='mobile-nav-menu'
+              style={MobileNavigationButtonAnimation}
+            />
+          )}
+        </StyledBottomNavigation>
+      </StyledPaper>
+    </>
+  )
+}
+
+export default MobileNavigation

package/src/lib/components/navigation/MobileNavigation/MobileNavigationAvatar.tsx

@@ -0,0 +1,334 @@
+import React, { useEffect } from 'react'
+import {
+  Box, ButtonGroup, Button, Link,
+  List, ListItem, ListItemIcon,
+  ListItemText
+} from '../../../index'
+import {
+  StyledSwipeableAvatar, StyledBox, StyledBoxProfile,
+  StyledAvatarName, StyledAvatar, StyledOutlineButton,
+  StyledBoxProfileEdit, StyledListItemButton
+} from './MobileNavigationAvatarStyles'
+import { useTheme } from '@mui/material/styles'
+import EditIcon from '@mui/icons-material/Edit'
+import LogoutIcon from '@mui/icons-material/Logout'
+import ToggleOffIcon from '@mui/icons-material/ToggleOff'
+import ToggleOnIcon from '@mui/icons-material/ToggleOn'
+import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers'
+import { animated } from '@react-spring/web'
+
+export interface IAvatarMenuItemProps {
+  label: string
+  icon: any
+  onClick: any
+}
+
+export interface ISwipeableTemporaryAvatarProps {
+  avatarName: string
+  editProfileText?: string
+  isAvatarOpen: boolean
+  setIsAvatarOpen?: any
+  mobileNavDirection?: string
+  setMobileNavDirection?: any
+
+  avatarPanelLogoutString?: string
+  avatarPanelOnClickSwitchDirection?: any
+  avatarPanelOnClickLogout?: any
+  avatarPanelOnClickViewProfile?: any
+  avatarPanelViewProfileString?: string
+  avatarPanelOnClickEditProfile?: any
+  avatarPanelEditProfileString?: string
+  avatarPanelMenuItems?: Array<IAvatarMenuItemProps>
+  avatarPanelOnClickMainAction?: any
+  avatarPanelMainActionString?: string
+  avatarPanelSettingItems?: Array<IAvatarMenuItemProps>
+  avatarPanelInvertNavString?: string
+}
+
+const SwipeableTemporaryAvatar = (
+  props: ISwipeableTemporaryAvatarProps
+): React.ReactElement => {
+  const theme = useTheme()
+  const {
+    avatarName, mobileNavDirection, avatarPanelLogoutString,
+    isAvatarOpen, setIsAvatarOpen, setMobileNavDirection,
+    avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout,
+    avatarPanelOnClickViewProfile, avatarPanelViewProfileString,
+    avatarPanelOnClickEditProfile, avatarPanelEditProfileString,
+    avatarPanelMenuItems, avatarPanelOnClickMainAction,
+    avatarPanelMainActionString, avatarPanelSettingItems,
+    avatarPanelInvertNavString
+  } = props
+
+  const [isOpen, setIsOpen] = React.useState(isAvatarOpen ?? false)
+
+  React.useEffect(() => handleOpenState(isAvatarOpen), [isAvatarOpen])
+
+  const handleOpenState = (open: boolean): void => {
+    setIsOpen(open)
+    setIsAvatarOpen(open)
+  }
+
+  const toggleAvatar =
+    (open: boolean) =>
+      (event: React.KeyboardEvent | React.MouseEvent) => {
+        if (event && event.type === 'keydown' &&
+          ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+        ) {
+          return
+        }
+
+        handleOpenState(open)
+      }
+
+  const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN')
+  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName])
+
+  const handleOnClickSwitchDirection = () => {
+    setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl')
+    avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection()
+  }
+
+  // First item starts at 70ms
+  // see STAGGER_ITEMS_DELAY in helpers.js
+  let animationCount = 1
+  const incrementAnimationCount = () => animationCount++
+
+  return (
+    <StyledSwipeableAvatar
+      anchor='bottom'
+      open={isOpen}
+      onClose={toggleAvatar(false)}
+      hideBackdrop
+      ModalProps={{
+        keepMounted: true
+      }}
+    >
+      <StyledBox>
+        {avatarPanelOnClickLogout && (
+          <Button
+            // @ts-expect-error
+            component={animated.button}
+            style={{
+              left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
+              position: 'absolute',
+              right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
+              top: theme.spacing(1),
+              ...useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)
+            }}
+            onClick={() => {
+              handleOpenState(false)
+              avatarPanelOnClickLogout()
+            }}
+            startIcon={<LogoutIcon />}
+            variant='text'
+            color='inherit'
+          >
+            {avatarPanelLogoutString ?? 'Logout'}
+          </Button>
+        )}
+
+        <Box
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          <StyledBoxProfile
+            style={useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)}
+          >
+            <StyledAvatar style={{ marginRight: '0.5rem' }}>
+              {avatarInitials}
+            </StyledAvatar>
+            <StyledAvatarName>
+              <span style={{ fontWeight: 300 }}>
+                Hi,</span> <strong>{avatarName.split(' ')[0]}
+              </strong>
+            </StyledAvatarName>
+          </StyledBoxProfile>
+
+          {avatarPanelOnClickViewProfile && (
+            <StyledBoxProfileEdit
+              style={{
+                flexDirection: 'row',
+                marginBottom: theme.spacing(1),
+                ...useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)
+              }}>
+              <ButtonGroup variant="contained" aria-label="split button">
+                <Button
+                  variant='contained'
+                  color='primary'
+                  size='medium'
+                  onClick={() => {
+                    handleOpenState(false)
+                    avatarPanelOnClickViewProfile()
+                  }}
+                >{avatarPanelViewProfileString ?? 'View Profile'}</Button>
+                {avatarPanelOnClickEditProfile && (
+                  <Button
+                    size='medium'
+                    aria-label={avatarPanelEditProfileString ?? 'Edit Profile'}
+                    onClick={() => {
+                      handleOpenState(false)
+                      avatarPanelOnClickEditProfile()
+                    }}
+                  >
+                    <EditIcon />
+                  </Button>
+                )}
+              </ButtonGroup>
+            </StyledBoxProfileEdit>
+          )}
+        </Box>
+
+        <Box
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          {avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (
+            <List style={{
+              marginInlineStart: '3rem',
+              marginBottom: theme.spacing(2),
+              maxWidth: '18rem'
+            }}>
+              {avatarPanelMenuItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
+                <ListItem
+                  component={animated.div}
+                  style={useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)}
+                  // whileHover={motionWhileHover}
+                  // whileTap={motionWhileTap}
+                  disablePadding
+                >
+                  <StyledListItemButton
+                    // TODO: figure out if these are links or buttons
+                    // @ts-expect-error
+                    component={Link}
+                    role='link'
+                    onClick={() => {
+                      handleOpenState(false)
+                      avatarMenuItem.onClick()
+                    }}
+                  >
+                    <ListItemIcon
+                      aria-hidden={true}
+                      style={{
+                        minWidth: theme.spacing(5)
+                      }}
+                    >
+                      {avatarMenuItem.icon}
+                    </ListItemIcon>
+                    <ListItemText primary={avatarMenuItem.label} />
+                  </StyledListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          )}
+
+          {avatarPanelOnClickMainAction && <StyledOutlineButton
+            // @ts-expect-error
+            component={animated.button}
+            style={useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)}
+            disablePadding
+            variant='outlined'
+            color='primary'
+            size='medium'
+            onClick={() => {
+              handleOpenState(false)
+              avatarPanelOnClickMainAction()
+            }}
+          >{avatarPanelMainActionString}</StyledOutlineButton>}
+
+          <List style={{ marginBottom: theme.spacing(2) }}>
+            {avatarPanelSettingItems &&
+            avatarPanelSettingItems.length > 0 &&
+            avatarPanelSettingItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
+              <ListItem
+                component={animated.div}
+                style={useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)}
+                // whileHover={motionWhileHover}
+                // whileTap={motionWhileTap}
+                disablePadding
+              >
+                <StyledListItemButton
+                  // TODO: figure out if these are links or buttons
+                  // @ts-expect-error
+                  component={Link}
+                  role='link'
+                  onClick={() => {
+                    handleOpenState(false)
+                    avatarMenuItem.onClick()
+                  }}
+                >
+                  <ListItemIcon
+                    aria-hidden={true}
+                    style={{
+                      minWidth: theme.spacing(5)
+                    }}
+                  >
+                    {avatarMenuItem.icon}
+                  </ListItemIcon>
+                  <ListItemText primary={avatarMenuItem.label} />
+                </StyledListItemButton>
+              </ListItem>
+            ))}
+
+            {avatarPanelOnClickSwitchDirection && (
+              <ListItem
+                component={animated.div}
+                style={useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)}
+                // whileHover={motionWhileHover}
+                // whileTap={motionWhileTap}
+                disablePadding
+              >
+                <StyledListItemButton
+                  // TODO: figure out if these are links or buttons
+                  // @ts-expect-error
+                  component={Link}
+                  role='link'
+                  onClick={handleOnClickSwitchDirection}
+                >
+                  <ListItemText primary={avatarPanelInvertNavString ?? 'Invert navigation bar'} />
+                  <ListItemIcon
+                    aria-hidden={true}
+                    style={{
+                      minWidth: theme.spacing(5),
+                      marginInlineStart: '0.5rem'
+                    }}
+                  >
+                    {mobileNavDirection === 'ltr'
+                      ? (
+                        <ToggleOffIcon
+                          style={{
+                            boxSizing: 'border-box',
+                            height: '2em',
+                            padding: '0.15em',
+                            width: '2em'
+                          }}
+                        />)
+                      : (
+                        <ToggleOnIcon
+                          style={{
+                            boxSizing: 'border-box',
+                            color: 'green',
+                            height: '2em',
+                            padding: '0.15em',
+                            width: '2em'
+                          }}
+                        />)}
+                  </ListItemIcon>
+                </StyledListItemButton>
+              </ListItem>
+            )}
+          </List>
+        </Box>
+      </StyledBox>
+    </StyledSwipeableAvatar>
+  )
+}
+
+export default SwipeableTemporaryAvatar

package/src/lib/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.tsx

@@ -0,0 +1,77 @@
+import {
+  Avatar, Button,
+  ListItemButton, Typography
+} from '../../../index'
+import { Drawer } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { animated } from '@react-spring/web'
+
+export const StyledSwipeableAvatar = styled(Drawer)`
+  .MuiPaper-root {
+    color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary};
+    height: 100vh;
+    border: none;
+    z-index: 1;
+  }
+`
+
+export const StyledBox = styled(animated.div)`
+  background-color: ${props => props.theme.palette.mode === 'dark'
+    ? '#003366'
+    : props.theme.palette.background.paper};
+  background-image: ${props => props.theme.palette.mode === 'dark'
+    ? 'none'
+    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  overflow: auto;
+  padding: 15vh ${props => props.theme.spacing(2)};
+  position: relative;
+`
+
+export const StyledBoxProfile = styled(animated.div)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 2rem
+`
+
+export const StyledBoxProfileEdit = styled(animated.div)`
+  display: flex;
+`
+
+export const StyledAvatarName = styled(Typography)`
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary};
+  font-size: 1.75rem;
+`
+
+export const StyledOutlineButton = styled(Button)`
+  border-color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.primary.main};
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.primary.main};
+`
+
+export const StyledAvatar = styled(Avatar)`
+  background-color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.primary.main};
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.primary.contrastText};
+  font-size: 0.85rem;
+`
+
+export const StyledListItemButton = styled(ListItemButton)`
+  border-radius: 50px;
+  margin-inline-end: 2rem;
+`