FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/index.tsx

import { makeStyles } from '@material-ui/core'
import ToolBar from './ToolBar'
import ProfilePicture from './ProfilePicture'
import ProfileMenu from './ProfileMenu'
import ProfileLists from './ProfileLists'

const useStyles = makeStyles({
  container: {
    backgroundColor: '#ffffff',
    height: '100%',
    width:'100%',
    position:'relative'
  },
  scrollContainer: {
    overflowY: 'scroll',
    maxHeight: '93vh',
    width: '100%',
    '&::-webkit-scrollbar': {
      width: '0.4em'
    },
    '&::-webkit-scrollbar-track': {
      boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
      webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
      backgroundColor: '#eceeec',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: '#ccc8c8',
    },
    "&::-webkit-scrollbar-thumb:focus": {
      backgroundColor: "#959595",
    },
    "&::-webkit-scrollbar-thumb:active": {
      backgroundColor: "#959595",
    },    
  },
})

const CredentialsList = () => {
  const classes = useStyles()
    return (
    <div className={classes.container}>
      <ToolBar />
      <div className={classes.scrollContainer}>
        <ProfilePicture />
        <ProfileMenu />
        <ProfileLists />
      </div>
    </div>
  )
}

export default CredentialsList