TryQuiet · siepra · Nov 21, 2023 · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023
diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx
@@ -29,6 +29,7 @@ import { ChannelContextMenu } from './components/ContextMenu/menus/ChannelContex
 import { DeleteChannel } from './components/Channel/DeleteChannel/DeleteChannel'
 import ChannelCreationModal from './components/ChannelCreationModal/ChannelCreationModal'
 import { SaveStateComponent } from './components/SaveState/SaveStateComponent'
+import BreakingChangesWarning from './containers/widgets/breakingChangesWarning/BreakingChangesWarning'
 // Trigger lerna
 
 export const persistor = persistStore(store)
@@ -54,6 +55,7 @@ export default () => {
                 <CssBaseline />
                 <SettingsModal />
                 <UpdateModal />
+                <BreakingChangesWarning />
                 <QuitAppDialog />
                 <ChannelContextMenu />
                 <DeleteChannel />

diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import UpdateModal, { UpdateModalProps } from './UpdateModalComponent'
+
+import { withTheme } from '../../../storybook/decorators'
+import theme from '../../../theme'
+
+import Button from '@mui/material/Button'
+
+const Template: ComponentStory<typeof UpdateModal> = args => {
+  return <UpdateModal {...args} />
+}
+
+const args: UpdateModalProps = {
+  open: true,
+  handleClose: function (): void {
+    console.log('modal closed')
+  },
+  buttons: [
+    <Button
+      variant='contained'
+      size='large'
+      color='primary'
+      type='submit'
+      onClick={() => {
+        console.log('submit button clicked')
+      }}
+      style={{
+        height: 55,
+        fontSize: '0.9rem',
+        backgroundColor: theme.palette.colors.quietBlue,
+      }}
+      fullWidth
+    >
+      Update now
+    </Button>,
+  ],
+  title: 'Software update',
+  message: 'An update is available for Quiet.',
+}
+
+export const Component = Template.bind({})
+
+Component.args = args
+
+const component: ComponentMeta<typeof UpdateModal> = {
+  title: 'Components/UpdateModalComponent',
+  decorators: [withTheme],
+  component: UpdateModal,
+}
+
+export default component
diff --git a/...nents/widgets/update/UpdateModal.test.tsx → ...gets/update/UpdateModalComponent.test.tsx b/...nents/widgets/update/UpdateModal.test.tsx → ...gets/update/UpdateModalComponent.test.tsx
@@ -1,11 +1,19 @@
 import React from 'react'
 
-import { UpdateModal } from './UpdateModal'
 import { renderComponent } from '../../../testUtils/renderComponent'
+import UpdateModalComponent from './UpdateModalComponent'
 
 describe('UpdateModal', () => {
   it('renders component', () => {
-    const result = renderComponent(<UpdateModal open handleClose={jest.fn()} handleUpdate={jest.fn()} />)
+    const result = renderComponent(
+      <UpdateModalComponent
+        handleClose={jest.fn()}
+        title={'Software update'}
+        message={'Update is available for Quiet.'}
+        buttons={[]}
+        open
+      />
+    )
     expect(result.baseElement).toMatchInlineSnapshot(`
       <body
         style="padding-right: 1024px; overflow: hidden;"
@@ -84,63 +92,36 @@ describe('UpdateModal', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-puyhqi-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1cz3wls-MuiGrid-root"
                 >
                   <div
-                    class="MuiGrid-root MuiGrid-container UpdateModalinfo css-1lym95h-MuiGrid-root"
+                    class="MuiGrid-root UpdateModalinfo css-vj1n65-MuiGrid-root"
                   >
-                    <div
-                      class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
-                    >
-                      <img
-                        src="test-file-stub"
-                      />
-                    </div>
+                    <img
+                      src="test-file-stub"
+                    />
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1h16bbz-MuiGrid-root"
+                    class="MuiGrid-root UpdateModaltitle css-vj1n65-MuiGrid-root"
                   >
-                    <div
-                      class="MuiGrid-root MuiGrid-item UpdateModaltitle css-13i4rnv-MuiGrid-root"
+                    <h3
+                      class="MuiTypography-root MuiTypography-h3 css-ptjqt4-MuiTypography-root"
                     >
-                      <h3
-                        class="MuiTypography-root MuiTypography-h3 css-ptjqt4-MuiTypography-root"
-                      >
-                        Software update
-                      </h3>
-                    </div>
+                      Software update
+                    </h3>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-item css-1h16bbz-MuiGrid-root"
+                    class="MuiGrid-root UpdateModalmessage css-vj1n65-MuiGrid-root"
                   >
-                    <div
-                      class="MuiGrid-root MuiGrid-item UpdateModalsubTitle css-13i4rnv-MuiGrid-root"
+                    <p
+                      class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
                     >
-                      <p
-                        class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
-                      >
-                        An update is available for Quiet.
-                      </p>
-                    </div>
+                      Update is available for Quiet.
+                    </p>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-8 css-m7r6nl-MuiGrid-root"
-                  >
-                    <div
-                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4 css-gj1fbr-MuiGrid-root"
-                    >
-                      <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-fullWidth UpdateModalbutton css-n0wap0-MuiButtonBase-root-MuiButton-root"
-                        tabindex="0"
-                        type="submit"
-                      >
-                        Update now
-                        <span
-                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                        />
-                      </button>
-                    </div>
-                  </div>
+                    class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column css-1bnhfwg-MuiGrid-root"
+                  />
                 </div>
               </div>
             </div>

diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx
@@ -0,0 +1,79 @@
+import React, { ReactElement } from 'react'
+
+import { styled } from '@mui/material/styles'
+
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
+
+import Icon from '../../ui/Icon/Icon'
+import updateIcon from '../../../static/images/updateIcon.svg'
+import Modal from '../../ui/Modal/Modal'
+
+const PREFIX = 'UpdateModal'
+
+const classes = {
+  info: `${PREFIX}info`,
+  updateIcon: `${PREFIX}updateIcon`,
+  title: `${PREFIX}title`,
+  message: `${PREFIX}message`,
+}
+
+const StyledModalContent = styled(Grid)(({ theme }) => ({
+  backgroundColor: theme.palette.colors.white,
+  border: 'none',
+
+  [`& .${classes.info}`]: {
+    marginTop: 38,
+  },
+
+  [`& .${classes.updateIcon}`]: {
+    width: 102,
+    height: 102,
+  },
+
+  [`& .${classes.title}`]: {
+    marginTop: 24,
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+
+  [`& .${classes.message}`]: {
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+}))
+
+export interface UpdateModalProps {
+  open: boolean
+  handleClose: () => void
+  buttons: ReactElement[]
+  title: string
+  message: string
+}
+
+export const UpdateModalComponent: React.FC<UpdateModalProps> = ({ open, handleClose, buttons, title, message }) => {
+  return (
+    <Modal open={open} handleClose={handleClose}>
+      <StyledModalContent container direction='column' alignItems='center' justifyContent='center'>
+        <Grid className={classes.info}>
+          <Icon src={updateIcon} />
+        </Grid>
+        <Grid className={classes.title}>
+          <Typography variant='h3'>{title}</Typography>
+        </Grid>
+        <Grid className={classes.message}>
+          <Typography variant='body2'>{message}</Typography>
+        </Grid>
+        <Grid container direction='column' alignItems='center' spacing={2}>
+          {buttons.map((button, index) => (
+            <Grid item xs={4} key={index}>
+              {button}
+            </Grid>
+          ))}
+        </Grid>
+      </StyledModalContent>
+    </Modal>
+  )
+}
+
+export default UpdateModalComponent