feat: add color border to user's profile picture based on first 6 character of user's hexkey

src/components/username.tsx

@@ -1,4 +1,6 @@
 import { Typography, IconButton } from '@mui/material'
+import { useSelector } from 'react-redux'
+import { State } from '../store/rootReducer'
 
 type Props = {
   username: string
@@ -7,17 +9,28 @@ type Props = {
 }
 
 const Username = ({ username, avatarContent, handleClick }: Props) => {
+  const hexKey = useSelector((state: State) => state.auth.usersPubkey)
+
   return (
     <IconButton
-      aria-label="account of current user"
+      aria-label='account of current user'
-      aria-controls="menu-appbar"
+      aria-controls='menu-appbar'
-      aria-haspopup="true"
+      aria-haspopup='true'
       onClick={handleClick}
-      color="inherit"
+      color='inherit'
     >
-      <img src={avatarContent} alt="user-avatar" className="profile-image" />
+      <img
+        src={avatarContent}
+        alt='user-avatar'
+        className='profile-image'
+        style={{
+          borderWidth: '3px',
+          borderStyle: hexKey ? 'solid' : 'none',
+          borderColor: `#${hexKey?.substring(0, 6)}`
+        }}
+      />
       <Typography
-        variant="h6"
+        variant='h6'
         sx={{
           color: '#3e3e3e',
           padding: '0 8px',

src/index.css

@@ -165,8 +165,8 @@ button:disabled {
 }
 
 .profile-image {
-  width: 44px;
+  width: 40px;
-  height: 44px;
+  height: 40px;
   border-radius: 50%;
   overflow: hidden;
 }