feat: update tests, tweak sizing, add to Desktop changelog

TryQuiet · Jun 11, 2024 · 9a2b27c · 9a2b27c
1 parent 8f6d7a8
commit 9a2b27c
Show file tree

Hide file tree

Showing 29 changed files with 83 additions and 67 deletions.
diff --git a/packages/desktop/CHANGELOG.md b/packages/desktop/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 # New features:
 
+* Update settings to match designs([#2537](https://github.com/TryQuiet/quiet/issues/2537))
+
 # Refactorings:
 
 # Fixes:

diff --git a/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx b/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx
@@ -21,7 +21,7 @@ describe('LeaveCommunity', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div
@@ -121,7 +121,7 @@ describe('LeaveCommunity', () => {
  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto DeleteChannelbuttonContainer css-1wrgmsj-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelbutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelbutton css-1x25m9x-MuiButtonBase-root-MuiButton-root"
  data-testid="deleteChannelButton"
  tabindex="0"
  type="button"
@@ -136,7 +136,7 @@ describe('LeaveCommunity', () => {
  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 DeleteChannelsecondaryButtonContainer css-s2k0j8-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelsecondaryButton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelsecondaryButton css-1x25m9x-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >

diff --git a/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx b/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx
@@ -13,7 +13,7 @@ describe('Create ChannelCreationModalComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/...s/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx b/...s/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx
@@ -32,7 +32,7 @@ describe('UsernameCreated', () => {
  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto UsernameCreatedbuttonContainer css-1wrgmsj-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UsernameCreatedbutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UsernameCreatedbutton css-1x25m9x-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >

diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx
@@ -22,7 +22,7 @@ describe('Create JoiningPanelComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div
@@ -158,7 +158,7 @@ describe('Create JoiningPanelComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx
@@ -13,7 +13,7 @@ describe('Create StartingPanelComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx
@@ -77,7 +77,8 @@ describe('Search Modal', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
+ data-testid="searchChannelModal"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -43,7 +43,7 @@ export const SettingsComponent: React.FC<SettingsComponentProps> = ({
  return (
  <>
  <Drawer open={open} onClose={handleClose} anchor='right'>
- <List sx={{ minWidth: '375px', paddingTop: '16px' }}>
+ <List sx={{ width: '375px', paddingTop: '16px' }}>
  <ListItem sx={{ paddingBottom: '8px' }}>
  <div>
  <ListItemButton onClick={handleClose} sx={{ padding: '0px' }}>
@@ -111,7 +111,7 @@ export const SettingsComponent: React.FC<SettingsComponentProps> = ({
  </IconButton>
  </Box>
  <Divider />
- <Box p={2} minWidth={375}>
+ <Box p={2} width={375}>
  {TabComponent && <TabComponent />}
  </Box>
  </Drawer>

diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.test.tsx
@@ -35,7 +35,7 @@ describe('CopyLink', () => {
  <body>
  <div>
  <div
- class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-46t05l-MuiGrid-root"
+ class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-14gz6o9-MuiGrid-root"
  >
  <div
  class="MuiGrid-root MuiGrid-container MuiGrid-item InviteToCommunitytitleDiv css-89gxc5-MuiGrid-root"
@@ -145,7 +145,7 @@ describe('CopyLink', () => {
  <body>
  <div>
  <div
- class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-46t05l-MuiGrid-root"
+ class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-14gz6o9-MuiGrid-root"
  >
  <div
  class="MuiGrid-root MuiGrid-container MuiGrid-item InviteToCommunitytitleDiv css-89gxc5-MuiGrid-root"

diff --git a/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.tsx b/packages/desktop/src/renderer/components/Settings/Tabs/Invite/Invite.component.tsx
@@ -24,7 +24,7 @@ const classes = {
 const StyledGrid = styled(Grid)(({ theme }) => ({
  [`& .${classes.title}`]: {},
  [`& .${classes.wrapper}`]: {
- maxWidth: '375px',
+ maxWidth: '100%',
  },
  [`& .${classes.titleDiv}`]: {
  marginBottom: 24,
@@ -34,12 +34,12 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
  fontSize: '13px',
  letterSpacing: '-0.4px',
  overflowWrap: 'break-word',
- inlineSize: '430px',
+ inlineSize: 'calc(100% - 40px);',
  },
  [`& .${classes.button}`]: {
  marginTop: 24,
  textTransform: 'none',
- width: 480,
+ width: '100%',
  height: 60,
  color: theme.palette.colors.white,
  backgroundColor: theme.palette.colors.quietBlue,

diff --git a/...ages/desktop/src/renderer/components/Settings/Tabs/LeaveCommunity/LeaveCommunity.test.tsx b/...ages/desktop/src/renderer/components/Settings/Tabs/LeaveCommunity/LeaveCommunity.test.tsx
@@ -22,7 +22,7 @@ describe('LeaveCommunity', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div
@@ -121,7 +121,7 @@ describe('LeaveCommunity', () => {
  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto LeaveCommunitybuttonContainer css-1wrgmsj-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitybutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitybutton css-1x25m9x-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >
@@ -135,7 +135,7 @@ describe('LeaveCommunity', () => {
  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 LeaveCommunitysecondaryButtonContainer css-s2k0j8-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitysecondaryButton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth LeaveCommunitysecondaryButton css-1x25m9x-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >

diff --git a/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx b/packages/desktop/src/renderer/components/Sidebar/ChannelsPanel/ChannelsPanel.test.tsx
@@ -134,7 +134,7 @@ describe('Channels panel', () => {
  data-testid="channelsList"
  >
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="general-link"
  role="button"
  tabindex="0"
@@ -166,7 +166,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="allergies-link"
  role="button"
  tabindex="0"
@@ -198,7 +198,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="antiques-link"
  role="button"
  tabindex="0"
@@ -230,7 +230,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="croatia-link"
  role="button"
  tabindex="0"
@@ -262,7 +262,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="pets-link"
  role="button"
  tabindex="0"
@@ -294,7 +294,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="sailing-link"
  role="button"
  tabindex="0"
@@ -395,7 +395,7 @@ describe('Channels panel', () => {
  data-testid="channelsList"
  >
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot ChannelsListItemselected css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="general-link"
  role="button"
  tabindex="0"
@@ -427,7 +427,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="allergies-link"
  role="button"
  tabindex="0"
@@ -459,7 +459,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="antiques-link"
  role="button"
  tabindex="0"
@@ -491,7 +491,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="croatia-link"
  role="button"
  tabindex="0"
@@ -523,7 +523,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="pets-link"
  role="button"
  tabindex="0"
@@ -555,7 +555,7 @@ describe('Channels panel', () => {
  />
  </div>
  <div
- class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-z1wnyu-MuiButtonBase-root-MuiListItemButton-root"
+ class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-root ChannelsListItemroot css-wntqhv-MuiButtonBase-root-MuiListItemButton-root"
  data-testid="sailing-link"
  role="button"
  tabindex="0"

diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx
@@ -23,7 +23,7 @@ describe('ErrorModal', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.test.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.test.tsx
@@ -24,7 +24,7 @@ describe('OpenlinkModal', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1evs64r-MuiModal-root"
+ class="MuiModal-root css-16f7e5u-MuiModal-root"
  role="presentation"
  >
  <div
@@ -264,7 +264,7 @@ describe('OpenlinkModal', () => {
  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge OpenlinkModalbuttonBack css-1emapyx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge OpenlinkModalbuttonBack css-1hycmuu-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >