fix: user profile area should be clickable #2566 (#2595)

* fix: user profile area should be clickable #2566 * fix: retry resolving failing tests in WSL environment * addressed unrelated inclusions and failing checks * addressed unrelated inclusions and failing checks * rm micromatch
TryQuiet · Sep 6, 2024 · 9dfd6da · 9dfd6da
1 parent 808c279
commit 9dfd6da
Show file tree

Hide file tree

Showing 22 changed files with 7,597 additions and 2,125 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/package-lock.json b/package-lock.json
diff --git a/...c/renderer/components/Channel/Channel.regression.cy.tsx/after launch-actual.png b/...c/renderer/components/Channel/Channel.regression.cy.tsx/after launch-actual.png
diff --git a/...renderer/components/Channel/Channel.regression.cy.tsx/after pagedown-actual.png b/...renderer/components/Channel/Channel.regression.cy.tsx/after pagedown-actual.png
diff --git a/...c/renderer/components/Channel/Channel.regression.cy.tsx/after pageup-actual.png b/...c/renderer/components/Channel/Channel.regression.cy.tsx/after pageup-actual.png
diff --git a/...nents/Channel/Channel.regression.cy.tsx/message input words wrapping-actual.png b/...nents/Channel/Channel.regression.cy.tsx/message input words wrapping-actual.png
diff --git a/...er/components/Channel/Channel.regression.cy.tsx/scroll to the middle-actual.png b/...er/components/Channel/Channel.regression.cy.tsx/scroll to the middle-actual.png
diff --git a/...derer/components/Channel/Channel.regression.cy.tsx/scroll to the top-actual.png b/...derer/components/Channel/Channel.regression.cy.tsx/scroll to the top-actual.png
diff --git a/...nderer/components/Channel/Channel.regression.cy.tsx/send after enter-actual.png b/...nderer/components/Channel/Channel.regression.cy.tsx/send after enter-actual.png
diff --git a/...derer/components/Channel/Channel.regression.cy.tsx/send after scroll-actual.png b/...derer/components/Channel/Channel.regression.cy.tsx/send after scroll-actual.png
diff --git a/...r/components/Channel/Channel.regression.cy.tsx/send after top scroll-actual.png b/...r/components/Channel/Channel.regression.cy.tsx/send after top scroll-actual.png
diff --git a/...src/renderer/components/Channel/Channel.regression.cy.tsx/after launch-base.png b/...src/renderer/components/Channel/Channel.regression.cy.tsx/after launch-base.png
diff --git a/...c/renderer/components/Channel/Channel.regression.cy.tsx/after pagedown-base.png b/...c/renderer/components/Channel/Channel.regression.cy.tsx/after pagedown-base.png
diff --git a/...src/renderer/components/Channel/Channel.regression.cy.tsx/after pageup-base.png b/...src/renderer/components/Channel/Channel.regression.cy.tsx/after pageup-base.png
diff --git a/...ponents/Channel/Channel.regression.cy.tsx/message input words wrapping-base.png b/...ponents/Channel/Channel.regression.cy.tsx/message input words wrapping-base.png
diff --git a/...erer/components/Channel/Channel.regression.cy.tsx/scroll to the middle-base.png b/...erer/components/Channel/Channel.regression.cy.tsx/scroll to the middle-base.png
diff --git a/...enderer/components/Channel/Channel.regression.cy.tsx/scroll to the top-base.png b/...enderer/components/Channel/Channel.regression.cy.tsx/scroll to the top-base.png
diff --git a/...renderer/components/Channel/Channel.regression.cy.tsx/send after enter-base.png b/...renderer/components/Channel/Channel.regression.cy.tsx/send after enter-base.png
diff --git a/...enderer/components/Channel/Channel.regression.cy.tsx/send after scroll-base.png b/...enderer/components/Channel/Channel.regression.cy.tsx/send after scroll-base.png
diff --git a/...rer/components/Channel/Channel.regression.cy.tsx/send after top scroll-base.png b/...rer/components/Channel/Channel.regression.cy.tsx/send after top scroll-base.png
diff --git a/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx b/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,
     },
   },
 

diff --git a/packages/desktop/src/renderer/components/windows/Main.test.tsx b/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"