Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(2576): Update hover and selected contrast and modify sidebar color in dark mode #2579

Merged
merged 2 commits into from
Jul 29, 2024
Merged

fix(2576): Update hover and selected contrast and modify sidebar color in dark mode #2579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0be8ebb
Update hover and selected contrast and modify sidebar color in dark mode
islathehut Jul 12, 2024
47406fd
Update snapshots
islathehut Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,17 @@ const classes = {

const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
[`&.${classes.root}`]: {
padding: 0,
width: 220,
height: 'hug',
padding: `3px 16px 3px 16px`,
gap: 4,
opacity: 1,
display: 'flex',
backgroundColor: 'inherit',
},

[`&.${classes.root}:hover`]: {
backgroundColor: theme.palette.colors.sidebarHover,
},

[`&.${classes.selected}`]: {
Expand Down
24 changes: 12 additions & 12 deletions packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ describe('Channels panel', () => {
data-testid="channelsList"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="general-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -166,7 +166,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="allergies-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -198,7 +198,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="antiques-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -230,7 +230,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="croatia-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -262,7 +262,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="pets-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -294,7 +294,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="sailing-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -395,7 +395,7 @@ describe('Channels panel', () => {
data-testid="channelsList"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="general-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -427,7 +427,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="allergies-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -459,7 +459,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="antiques-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -491,7 +491,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="croatia-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -523,7 +523,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="pets-link"
role="button"
tabindex="0"
Expand Down Expand Up @@ -555,7 +555,7 @@ describe('Channels panel', () => {
/>
</div>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="sailing-link"
role="button"
tabindex="0"
Expand Down
4 changes: 2 additions & 2 deletions packages/desktop/src/renderer/components/windows/Main.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe('Main', () => {
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column SidebarComponentroot css-1ydhkjx-MuiGrid-root"
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column SidebarComponentroot css-1xru4iw-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-true SidebarComponentpadding css-1fzha0v-MuiGrid-root"
Expand Down Expand Up @@ -151,7 +151,7 @@ describe('Main', () => {
data-testid="channelsList"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-1nv2jos-MuiButtonBase-root-MuiListItemButton-root"
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-dfcapv-MuiButtonBase-root-MuiListItemButton-root"
data-testid="general-link"
role="button"
tabindex="0"
Expand Down
8 changes: 5 additions & 3 deletions packages/desktop/src/renderer/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,8 @@ const lightTheme = createTheme({
border03: '#D2D2D2',
// Other custom colors
sidebarBackground: '#511974',
sidebarSelected: '#fff3',
sidebarSelected: '#FFFFFF19',
sidebarHover: '#FFFFFF0C',
},
},
//@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
Expand Down Expand Up @@ -344,8 +345,9 @@ const darkTheme = createTheme({
border02: '#B3B3B3',
border03: '#D2D2D2',
// Gradients and other run-of-the-mill things
sidebarBackground: '#000',
sidebarSelected: '#fff3',
sidebarBackground: '#2F193D',
sidebarSelected: '#FFFFFF19',
sidebarHover: '#FFFFFF0C',
},
},
//@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
Expand Down
Loading