From 9dae3a48bef7f4d0d0ce273f6cf9ec78f47b1017 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Mon, 29 Jul 2024 18:06:23 +0200
Subject: [PATCH] fix: IconButton conflict, username layout

---
 src/components/AppBar/AppBar.tsx |  5 +++-
 src/components/username.tsx      | 51 +++++++++++++++++++-------------
 src/layouts/modal/index.tsx      |  8 ++++-
 src/theme/index.ts               | 12 --------
 4 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 641a81d..76d8370 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -170,7 +170,10 @@ export const AppBar = () => {
                   <MenuItem
                     sx={{
                       justifyContent: 'center',
-                      display: { md: 'none' }
+                      display: { md: 'none' },
+                      fontWeight: 500,
+                      fontSize: '14px',
+                      color: 'var(--text-color)'
                     }}
                   >
                     <Typography variant="h6">{username}</Typography>
diff --git a/src/components/username.tsx b/src/components/username.tsx
index 768d1a9..fc4d710 100644
--- a/src/components/username.tsx
+++ b/src/components/username.tsx
@@ -15,34 +15,45 @@ 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"
-      onClick={handleClick}
-      color="inherit"
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'end',
+        alignItems: 'center',
+        gap: '12px'
+      }}
     >
-      <img
-        src={avatarContent}
-        alt="user-avatar"
-        className="profile-image"
-        style={{
-          borderWidth: '3px',
-          borderStyle: hexKey ? 'solid' : 'none',
-          borderColor: `#${hexKey?.substring(0, 6)}`
-        }}
-      />
       <Typography
         variant="h6"
         sx={{
-          color: '#3e3e3e',
-          padding: '0 8px',
+          fontWeight: 500,
+          fontSize: '14px',
+          color: 'var(--text-color)',
           display: { xs: 'none', md: 'flex' }
         }}
       >
-        {username}
+        {username || 'test'}
       </Typography>
-    </IconButton>
+      <IconButton
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleClick}
+        color="inherit"
+      >
+        <img
+          src={avatarContent}
+          alt="user-avatar"
+          className="profile-image"
+          style={{
+            borderWidth: '3px',
+            borderStyle: hexKey ? 'solid' : 'none',
+            borderColor: `#${hexKey?.substring(0, 6)}`
+          }}
+        />
+      </IconButton>
+    </div>
   )
 }
 
diff --git a/src/layouts/modal/index.tsx b/src/layouts/modal/index.tsx
index e13c8d9..5ca46d1 100644
--- a/src/layouts/modal/index.tsx
+++ b/src/layouts/modal/index.tsx
@@ -59,7 +59,13 @@ export const Modal = () => {
             onClick={handleClose}
             sx={{
               fontSize: '18px',
-              color: 'rgba(0, 0, 0, 0.5)'
+              color: 'rgba(0, 0, 0, 0.5)',
+              padding: '8px 15px',
+              borderRadius: '4px',
+              ':hover': {
+                background: 'var(--primary-light)',
+                color: 'white'
+              }
             }}
           >
             <svg
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 1d3f211..60cd68e 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -74,18 +74,6 @@ export const theme = extendTheme({
       defaultProps: {
         fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
       }
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          padding: '8px 15px',
-          borderRadius: '4px',
-          ':hover': {
-            background: 'var(--primary-light)',
-            color: 'white'
-          }
-        }
-      }
     }
   },
   breakpoints: {