diff --git a/CHANGELOG.md b/CHANGELOG.md index 58bb659f52..58ad0674ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,3 +21,5 @@ * Use csrs instead of certificates as a source of user data * Integration state manager layer with UI layer(desktop and mobile) + +* Clarify autoupdate language in update modal to let users know that the app will update on restart. diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.stories.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.stories.tsx new file mode 100644 index 0000000000..a12096b6c1 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.stories.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { ComponentMeta, ComponentStory } from '@storybook/react' + +import { withTheme } from '../../../storybook/decorators' +import UpdateModal, { UpdateModalProps } from './UpdateModal' + +const Template: ComponentStory = args => { + return +} + +export const Component = Template.bind({}) + +const args: UpdateModalProps = { + open: true, + handleClose: function (): void {}, + handleUpdate: function (): void {}, +} + +Component.args = args + +const component: ComponentMeta = { + title: 'Components/UpdateModal', + decorators: [withTheme], + component: UpdateModal, +} + +export default component diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx index 3741bb265b..d29212be1e 100644 --- a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx +++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx @@ -84,7 +84,7 @@ describe('UpdateModal', () => { style="width: 600px;" >
{

- An update is available for Quiet. + A new update for Quiet is available and will be applied on your next restart.

@@ -134,13 +134,27 @@ describe('UpdateModal', () => { tabindex="0" type="submit" > - Update now + Restart now +
+ +
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx index 7fa7abb4db..9f372f17fa 100644 --- a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx +++ b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx @@ -18,6 +18,8 @@ const classes = { updateIcon: `${PREFIX}updateIcon`, title: `${PREFIX}title`, subTitle: `${PREFIX}subTitle`, + secondaryButtonContainer: `${PREFIX}secondaryButtonContainer`, + secondaryButton: `${PREFIX}secondaryButton`, } const StyledModalContent = styled(Grid)(({ theme }) => ({ @@ -47,9 +49,27 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ [`& .${classes.subTitle}`]: { marginBottom: 32, }, + + [`& .${classes.secondaryButtonContainer}`]: { + marginTop: 16, + marginBottom: 32, + }, + + [`& .${classes.secondaryButton}`]: { + width: 160, + height: 40, + color: theme.palette.colors.darkGray, + backgroundColor: theme.palette.colors.white, + padding: theme.spacing(2), + '&:hover': { + boxShadow: 'none', + cursor: 'pointer', + backgroundColor: theme.palette.colors.white, + }, + }, })) -interface UpdateModalProps { +export interface UpdateModalProps { open: boolean handleClose: () => void handleUpdate: () => void @@ -71,9 +91,12 @@ export const UpdateModal: React.FC = ({ open, handleClose, han - An update is available for Quiet. + + A new update for Quiet is available and will be applied on your next restart. + + + + + + ) diff --git a/packages/desktop/src/renderer/index.tsx b/packages/desktop/src/renderer/index.tsx index ef2e8f1e08..a3a1ecc0b5 100644 --- a/packages/desktop/src/renderer/index.tsx +++ b/packages/desktop/src/renderer/index.tsx @@ -12,7 +12,7 @@ if (window && process.env.DEBUG) { } ipcRenderer.on('newUpdateAvailable', _event => { - store.dispatch(updateHandlers.epics.checkForUpdate() as any) + store.dispatch(updateHandlers.epics.openUpdateModal() as any) }) ipcRenderer.on('force-save-state', async _event => { diff --git a/packages/desktop/src/renderer/store/handlers/update.ts b/packages/desktop/src/renderer/store/handlers/update.ts index 5f6ec83c1f..7d711b3bdc 100644 --- a/packages/desktop/src/renderer/store/handlers/update.ts +++ b/packages/desktop/src/renderer/store/handlers/update.ts @@ -3,7 +3,7 @@ import { ModalName } from '../../sagas/modals/modals.types' import { modalsActions } from '../../sagas/modals/modals.slice' import { AnyAction, Dispatch } from 'redux' -export const checkForUpdate = () => async (dispatch: Dispatch) => { +export const openUpdateModal = () => async (dispatch: Dispatch) => { dispatch(modalsActions.openModal({ name: ModalName.applicationUpdate })) } @@ -17,7 +17,7 @@ export const declineUpdate = () => async (dispatch: Dispatch) => { } export const epics = { - checkForUpdate, + openUpdateModal, startApplicationUpdate, declineUpdate, }