From 89850f881d6afbe9f67e1a07510f6978acfca0ac Mon Sep 17 00:00:00 2001
From: SwiftHawk <SwiftHawk@SwiftHawk.com>
Date: Fri, 19 Apr 2024 14:07:18 +0500
Subject: [PATCH] feat: add color border to user's profile picture based on
 first 6 character of user's hexkey

---
 src/components/username.tsx | 25 +++++++++++++++++++------
 src/index.css               |  4 ++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/username.tsx b/src/components/username.tsx
index 001382b..fd6cc89 100644
--- a/src/components/username.tsx
+++ b/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-controls="menu-appbar"
-      aria-haspopup="true"
+      aria-label='account of current user'
+      aria-controls='menu-appbar'
+      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',
diff --git a/src/index.css b/src/index.css
index e8046ed..3f10537 100644
--- a/src/index.css
+++ b/src/index.css
@@ -165,8 +165,8 @@ button:disabled {
 }
 
 .profile-image {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   overflow: hidden;
 }