feat(ui): Allow newlines in confirmation dialog

Hypfer · Jan 15, 2022 · df2ee4f · df2ee4f
1 parent ea45f01
commit df2ee4f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/frontend/src/components/ConfirmationDialog.tsx b/frontend/src/components/ConfirmationDialog.tsx
@@ -28,22 +28,26 @@ const ConfirmationDialog: FunctionComponent<YesNoDialogProps> = ({
             </DialogTitle>
             <DialogContent>
                 {text && (
-                    <DialogContentText>
-                        {text}
+                    <DialogContentText
+                        style={{
+                            whiteSpace: "pre-wrap"
+                        }}
+                    >
+                        {text.split("<br/>").join("\n")}
                     </DialogContentText>
                 )}
                 {children}
             </DialogContent>
             <DialogActions>
-                <Button onClick={() => {
-                    onClose();
-                }}>No</Button>
                 <Button onClick={() => {
                     onAccept();
                     onClose();
                 }} autoFocus>
                     Yes
                 </Button>
+                <Button onClick={() => {
+                    onClose();
+                }}>No</Button>
             </DialogActions>
         </Dialog>
     );

diff --git a/frontend/src/settings/Updater.tsx b/frontend/src/settings/Updater.tsx
@@ -340,7 +340,7 @@ const DownloadUpdateControls: FunctionComponent = () => {
                 setDialogOpen(true);
             }} sx={{mt: 1, mb: 1}}>Download Update</LoadingButton>
             <ConfirmationDialog title="Download Update?"
-                text="Do you want to download the displayed Valetudo update? Please make sure to fully read the provided changelog as it may contain breaking changes as well as other relevant information."
+                text="Do you want to download the displayed Valetudo update?<br/>Please make sure to fully read the provided changelog as it may contain breaking changes as well as other relevant information."
                 open={dialogOpen} onClose={() => {
                     setDialogOpen(false);
                 }} onAccept={() => {