-
-
-
+
-
-
- Software update
-
-
+ Software update
+
-
-
- A new update for Quiet is available and will be applied on your next restart.
-
-
+ Update is available for Quiet.
+
-
-
-
-
-
-
-
+ class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column css-1bnhfwg-MuiGrid-root"
+ />
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModalComponent.tsx
new file mode 100644
index 0000000000..0ffd86edbb
--- /dev/null
+++ 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