fix: user profile area should be clickable #2566

CHANGELOG.md

@@ -13,6 +13,7 @@
 
 # Fixes:
 
+* Made entire user profile area clickable in the sidebar and updated hover state for improved usability ([#2566](https://github.com/TryQuiet/quiet/issues/2566))
 * Fix issue with websocket not being reconnected after app is resumed on android ([#2587](https://github.com/TryQuiet/quiet/issues/2587))
 * Disable spellCheck/autoCorrect on non-spelling sensitive fields like usernames and channels ([#373](https://github.com/TryQuiet/quiet/issues/373))
 * Fixes issue with reconnecting to peers on resume on iOS ([#2424](https://github.com/TryQuiet/quiet/issues/2424))

package.json

@@ -21,5 +21,8 @@
     "husky": "^9.0.11",
     "lerna": "^6.6.2",
     "typescript": "^4.9.3"
+  },
+  "dependencies": {
+    "micromatch": "^4.0.8"
   }
 }

packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx

@@ -23,20 +23,21 @@ const classes = {
 const UserProfilePanelButtonStyled = styled('div')(({ theme }) => ({
   marginTop: theme.spacing(1),
   borderTop: '1px solid rgba(255, 255, 255, 0.10)',
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingTop: 12,
-  paddingBottom: 12,
 
   [`& .${classes.button}`]: {
     color: theme.palette.colors.white,
-    padding: 0,
+    padding: '12px 16px',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    transition: 'background-color 0.2s, opacity 0.2s',
+    width: '100%',
     textAlign: 'left',
     opacity: 0.7,
     textTransform: 'lowercase',
+    backgroundColor: 'inherit',
     '&:hover': {
       opacity: 1,
-      backgroundColor: 'inherit',
+      backgroundColor: theme.palette.action.hover,
     },
   },
 

packages/desktop/src/renderer/components/windows/Main.test.tsx

@@ -246,7 +246,7 @@ describe('Main', () => {
                         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                       >
                         <div
-                          class="css-9zw54k"
+                          class="css-b98vji"
                         >
                           <div
                             class="MuiButtonBase-root MuiButton-root UserProfilePanel-button MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root UserProfilePanel-button MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1rwf87u-MuiButtonBase-root-MuiButton-root"