From 582a78c29b6057e3a76450f92fb72f898b8bace4 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sun, 22 Sep 2024 08:41:11 +0200
Subject: [PATCH 1/5] Begin the design of create folder dialog

---
 .../Application/Dialogs/AddEmptyFolder.tsx    |  2 +-
 client/components/Parts/Dialogs/Confirm.tsx   | 24 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/components/Application/Dialogs/AddEmptyFolder.tsx b/client/components/Application/Dialogs/AddEmptyFolder.tsx
index 96e7af601..3b3eaa269 100644
--- a/client/components/Application/Dialogs/AddEmptyFolder.tsx
+++ b/client/components/Application/Dialogs/AddEmptyFolder.tsx
@@ -8,7 +8,7 @@ export default function AddEmptyFolderDialog() {
     <InputDialog
       open={true}
       value={folderPath}
-      title="Create Folder"
+      title="Create new folder"
       label="Create"
       placholder="Name of the new folder"
       onCancel={store.closeDialog}
diff --git a/client/components/Parts/Dialogs/Confirm.tsx b/client/components/Parts/Dialogs/Confirm.tsx
index 217aa80ee..4b8e1dc3e 100644
--- a/client/components/Parts/Dialogs/Confirm.tsx
+++ b/client/components/Parts/Dialogs/Confirm.tsx
@@ -6,6 +6,8 @@ import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
 import SimpleButton from '../Buttons/SimpleButton'
 import Columns from '../Grids/Columns'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
 
 export interface ConfirmDialogProps {
   open?: boolean
@@ -46,6 +48,18 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
         if ((!props.ctrlEnter || event.ctrlKey) && event.key === 'Enter') handleConfirm()
       }}
     >
+      <IconButton
+        aria-label="close"
+        onClick={handleClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
       <DialogTitle
         id="dialog-title"
         sx={{
@@ -71,16 +85,6 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
       </DialogContent>
       <Box sx={{ paddingX: 3, paddingY: 1 }}>
         <Columns spacing={2}>
-          <SimpleButton
-            fullWidth
-            label={props.cancelLabel || 'Cancel'}
-            sx={{ my: 0.5 }}
-            onClick={handleCancel}
-            aria-label="cancel"
-            color="warning"
-            variant="contained"
-            disabled={props.loading}
-          />
           <SimpleButton
             fullWidth
             label={props.label || 'Confirm'}

From 57d3100bb46af14f109d1639d47fd5aee8ac0f2e Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Mon, 14 Oct 2024 00:41:12 +0200
Subject: [PATCH 2/5] Add two different dialogs for one button and two button
 actions

---
 .../Application/Dialogs/AdjustFile.tsx        |   2 +-
 .../Dialogs/CloseWithUnsavedChanges.tsx       |   2 +-
 .../components/Application/Dialogs/Config.tsx |   2 +-
 .../components/Application/Dialogs/Create.tsx |   2 +-
 .../Dialogs/DeleteFilesFolders.tsx            |   6 +-
 .../Application/Dialogs/IndexFiles.tsx        |   2 +-
 .../Application/Dialogs/Publish.tsx           |   2 +-
 .../Application/Dialogs/UnsavedChanges.tsx    |   4 +-
 .../components/Parts/Buttons/SimpleButton.tsx |  10 +-
 client/components/Parts/Dialogs/Input.tsx     |  23 ++--
 .../Dialogs/{Confirm.tsx => OneButton.tsx}    |  26 ++--
 client/components/Parts/Dialogs/Pick.tsx      |   2 +-
 client/components/Parts/Dialogs/TwoButton.tsx | 113 ++++++++++++++++++
 client/components/Parts/Grids/Columns.tsx     |  10 +-
 client/themes.ts                              |  12 +-
 15 files changed, 177 insertions(+), 41 deletions(-)
 rename client/components/Parts/Dialogs/{Confirm.tsx => OneButton.tsx} (82%)
 create mode 100644 client/components/Parts/Dialogs/TwoButton.tsx

diff --git a/client/components/Application/Dialogs/AdjustFile.tsx b/client/components/Application/Dialogs/AdjustFile.tsx
index 1556f6fa8..fc498e8f9 100644
--- a/client/components/Application/Dialogs/AdjustFile.tsx
+++ b/client/components/Application/Dialogs/AdjustFile.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Box from '@mui/material/Box'
 import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import ConfirmDialog from '../../Parts/Dialogs/OneButton'
 import SelectField from '../../Parts/Fields/Select'
 import InputField from '../../Parts/Fields/Input'
 import * as store from '@client/store'
diff --git a/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx b/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
index f87bba4fe..a954adbba 100644
--- a/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
+++ b/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
@@ -1,5 +1,5 @@
 import DangerousIcon from '@mui/icons-material/Dangerous'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import ConfirmDialog from '../../Parts/Dialogs/OneButton'
 import * as store from '@client/store'
 
 export default function CloseWithUnsavedChangesDialog() {
diff --git a/client/components/Application/Dialogs/Config.tsx b/client/components/Application/Dialogs/Config.tsx
index 37c1515a8..041452ea7 100644
--- a/client/components/Application/Dialogs/Config.tsx
+++ b/client/components/Application/Dialogs/Config.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Box from '@mui/material/Box'
 import SaveIcon from '@mui/icons-material/Save'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import ConfirmDialog from '../../Parts/Dialogs/OneButton'
 import ConfigEditor from '../../Editors/Config'
 import * as store from '@client/store'
 
diff --git a/client/components/Application/Dialogs/Create.tsx b/client/components/Application/Dialogs/Create.tsx
index 88a8db890..5a214ce92 100644
--- a/client/components/Application/Dialogs/Create.tsx
+++ b/client/components/Application/Dialogs/Create.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Box from '@mui/material/Box'
 import LinearProgress from '@mui/material/LinearProgress'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import ConfirmDialog from '../../Parts/Dialogs/OneButton'
 import MultilineField from '../../Parts/Fields/Multiline'
 import InputField from '../../Parts/Fields/Input'
 import Columns from '../../Parts/Grids/Columns'
diff --git a/client/components/Application/Dialogs/DeleteFilesFolders.tsx b/client/components/Application/Dialogs/DeleteFilesFolders.tsx
index 18c288a60..32d3ff4d0 100644
--- a/client/components/Application/Dialogs/DeleteFilesFolders.tsx
+++ b/client/components/Application/Dialogs/DeleteFilesFolders.tsx
@@ -1,4 +1,4 @@
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import TwoButtonDialog from '../../Parts/Dialogs/TwoButton'
 import * as store from '@client/store'
 
 export default function DeleteFilesFoldersDialog() {
@@ -22,7 +22,7 @@ export default function DeleteFilesFoldersDialog() {
   if (!path) return null
 
   return (
-    <ConfirmDialog
+    <TwoButtonDialog
       open={true}
       title="Delete File"
       description={
@@ -30,7 +30,7 @@ export default function DeleteFilesFoldersDialog() {
           ? 'Are you sure you want to delete these elements?'
           : `Are you sure you want to delete this ${isFolder ? 'folder' : 'file'}?`
       }
-      label="Yes"
+      label="Delete"
       cancelLabel="No"
       onCancel={store.closeDialog}
       onConfirm={async () => {
diff --git a/client/components/Application/Dialogs/IndexFiles.tsx b/client/components/Application/Dialogs/IndexFiles.tsx
index 948721e07..1f22f56de 100644
--- a/client/components/Application/Dialogs/IndexFiles.tsx
+++ b/client/components/Application/Dialogs/IndexFiles.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import DeleteIcon from '@mui/icons-material/Delete'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import ConfirmDialog from '../../Parts/Dialogs/OneButton'
 import LinearSensor from '../../Parts/Sensors/Linear'
 import * as store from '@client/store'
 import { client } from '@client/client'
diff --git a/client/components/Application/Dialogs/Publish.tsx b/client/components/Application/Dialogs/Publish.tsx
index 5f140892c..1a327999f 100644
--- a/client/components/Application/Dialogs/Publish.tsx
+++ b/client/components/Application/Dialogs/Publish.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'
 import Link from '@mui/material/Link'
 import LinearProgress from '@mui/material/LinearProgress'
 import CheckIcon from '@mui/icons-material/Check'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import ConfirmDialog from '../../Parts/Dialogs/OneButton'
 import PortalEditor from '../../Editors/Portal'
 import * as helpers from '../../../helpers'
 import * as types from '../../../types'
diff --git a/client/components/Application/Dialogs/UnsavedChanges.tsx b/client/components/Application/Dialogs/UnsavedChanges.tsx
index 75361f41f..0f69fb43f 100644
--- a/client/components/Application/Dialogs/UnsavedChanges.tsx
+++ b/client/components/Application/Dialogs/UnsavedChanges.tsx
@@ -1,5 +1,5 @@
 import DangerousIcon from '@mui/icons-material/Dangerous'
-import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import TwoButtonDialog from '../../Parts/Dialogs/TwoButton'
 import * as store from '@client/store'
 
 export default function UnsavedChangesDialog() {
@@ -14,7 +14,7 @@ export default function UnsavedChangesDialog() {
   }
 
   return (
-    <ConfirmDialog
+    <TwoButtonDialog
       open={true}
       title="Unsaved Changes"
       cancelLabel="Discard"
diff --git a/client/components/Parts/Buttons/SimpleButton.tsx b/client/components/Parts/Buttons/SimpleButton.tsx
index 6e7af2061..cc2342f32 100644
--- a/client/components/Parts/Buttons/SimpleButton.tsx
+++ b/client/components/Parts/Buttons/SimpleButton.tsx
@@ -7,19 +7,19 @@ interface SimpleButtonProps extends ButtonProps {
 }
 
 export default function SimpleButton(props: SimpleButtonProps) {
-  const { label, small, ...others } = props
+  const { label, ...others } = props
+
+  const buttonTextColor = props.color === 'OKFNWhite' ? 'gray': 'white'
   return (
     <Button
       fullWidth={!props.small}
       color={props.color}
       {...others}
     >
-      {small ? (
-        <Typography sx={{ fontWeight: 300, textTransform: 'capitalize' }}>
+      {(
+        <Typography sx={{ textTransform: 'capitalize', fontWeight: 600, color: buttonTextColor }}>
           {label}
         </Typography>
-      ) : (
-        label
       )}
     </Button>
   )
diff --git a/client/components/Parts/Dialogs/Input.tsx b/client/components/Parts/Dialogs/Input.tsx
index b5fd4743e..b4b35260b 100644
--- a/client/components/Parts/Dialogs/Input.tsx
+++ b/client/components/Parts/Dialogs/Input.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import InputAdornment from '@mui/material/InputAdornment'
 import TextField from '@mui/material/TextField'
-import ConfirmDialog, { ConfirmDialogProps } from './Confirm'
+import OneButtonDialog, { ConfirmDialogProps } from './OneButton'
 
 export interface InputDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'> {
   value?: string
@@ -19,11 +19,7 @@ export default function InputDialog(props: InputDialogProps) {
 
   const handleConfirm = () => onConfirm && onConfirm(value)
   return (
-    <ConfirmDialog
-      {...rest}
-      onConfirm={handleConfirm}
-      disabled={props.disabled || !value}
-    >
+    <OneButtonDialog {...rest} onConfirm={handleConfirm} disabled={!value}>
       <TextField
         error={!!errorMessage}
         helperText={errorMessage || ' '}
@@ -42,8 +38,21 @@ export default function InputDialog(props: InputDialogProps) {
             <InputAdornment position="start">{prefix}</InputAdornment>
           ) : undefined,
         }}
+        sx={{ marginBottom: 1,
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: 'gray',
+            },
+            '&:hover fieldset': {
+              borderColor: '#00D1FF',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: '#00D1FF',
+            },
+          },
+         }}
       />
       {props.children}
-    </ConfirmDialog>
+    </OneButtonDialog>
   )
 }
diff --git a/client/components/Parts/Dialogs/Confirm.tsx b/client/components/Parts/Dialogs/OneButton.tsx
similarity index 82%
rename from client/components/Parts/Dialogs/Confirm.tsx
rename to client/components/Parts/Dialogs/OneButton.tsx
index 4b8e1dc3e..8acb1f549 100644
--- a/client/components/Parts/Dialogs/Confirm.tsx
+++ b/client/components/Parts/Dialogs/OneButton.tsx
@@ -5,7 +5,6 @@ import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
 import SimpleButton from '../Buttons/SimpleButton'
-import Columns from '../Grids/Columns'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 
@@ -66,7 +65,7 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
           paddingBottom: 1,
           marginBottom: 2,
           borderBottom: 'solid 1px #ddd',
-          backgroundColor: '#fafafa',
+          backgroundColor: (theme) => theme.palette.OKFNGray100.main,
         }}
       >
         {props.title || 'Dialog'}
@@ -83,18 +82,17 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
           </Box>
         )}
       </DialogContent>
-      <Box sx={{ paddingX: 3, paddingY: 1 }}>
-        <Columns spacing={2}>
-          <SimpleButton
-            fullWidth
-            label={props.label || 'Confirm'}
-            sx={{ my: 0.5 }}
-            onClick={handleConfirm}
-            aria-label="accept"
-            variant="contained"
-            disabled={props.disabled || props.loading}
-          />
-        </Columns>
+      <Box sx={{ paddingX: 3, paddingY: 2, display: 'flex', justifyContent: 'flex-end' }}>
+        <SimpleButton
+          fullWidth
+          label={props.label || 'Confirm'}
+          sx={{ my: 0.5 }}
+          onClick={handleConfirm}
+          aria-label="accept"
+          variant="contained"
+          color={ props.label === 'Delete' ? 'OKFNRed500' : 'OKFNBlack' }
+          disabled={props.disabled || props.loading}
+        />
       </Box>
     </Dialog>
   )
diff --git a/client/components/Parts/Dialogs/Pick.tsx b/client/components/Parts/Dialogs/Pick.tsx
index 91e2615fb..687924ada 100644
--- a/client/components/Parts/Dialogs/Pick.tsx
+++ b/client/components/Parts/Dialogs/Pick.tsx
@@ -7,7 +7,7 @@ import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Checkbox from '@mui/material/Checkbox'
 import Divider from '@mui/material/Divider'
-import ConfirmDialog, { ConfirmDialogProps } from './Confirm'
+import ConfirmDialog, { ConfirmDialogProps } from './OneButton'
 
 interface PickDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'> {
   items: string[]
diff --git a/client/components/Parts/Dialogs/TwoButton.tsx b/client/components/Parts/Dialogs/TwoButton.tsx
new file mode 100644
index 000000000..1683349d2
--- /dev/null
+++ b/client/components/Parts/Dialogs/TwoButton.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react'
+import LinearProgress from '@mui/material/LinearProgress'
+import Box from '@mui/material/Box'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import SimpleButton from '../Buttons/SimpleButton'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+
+export interface ConfirmDialogProps {
+  open?: boolean
+  title?: string
+  description?: string
+  Icon?: React.ElementType
+  label?: string
+  cancelLabel?: string
+  loading?: boolean
+  disabled?: boolean
+  maxWidth?: 'md' | 'xl'
+  onCancel?: () => void
+  onConfirm?: () => void
+  ctrlEnter?: boolean
+  children?: React.ReactNode
+  disableClosing?: boolean
+}
+
+export default function ConfirmDialog(props: ConfirmDialogProps) {
+  const handleCancel = () => props.onCancel && props.onCancel()
+  const handleConfirm = () => props.onConfirm && props.onConfirm()
+
+  const handleClose = () => {
+    if (props.loading) return
+    if (props.disableClosing) return
+    handleCancel()
+  }
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth={props.maxWidth}
+      open={!!props.open}
+      onClose={handleClose}
+      aria-labelledby="dialog-title"
+      aria-describedby="dialog-description"
+      onKeyDown={(event) => {
+        if ((!props.ctrlEnter || event.ctrlKey) && event.key === 'Enter') handleConfirm()
+      }}
+    >
+      <IconButton
+        aria-label="close"
+        onClick={handleClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogTitle
+        id="dialog-title"
+        sx={{
+          paddingBottom: 1,
+          marginBottom: 2,
+          borderBottom: 'solid 1px #ddd',
+          backgroundColor: (theme) => theme.palette.OKFNGray100.main,
+        }}
+      >
+        {props.title || 'Dialog'}
+      </DialogTitle>
+      <DialogContent sx={{ paddingTop: 0, paddingBottom: 0 }}>
+        {props.description && (
+          <Box sx={{ marginBottom: 1, opacity: 0.6 }}>{props.description}</Box>
+        )}
+        {props.children}
+        {props.loading && (
+          <Box sx={{ paddingY: 1, marginY: 1 }}>
+            Loading
+            <LinearProgress />
+          </Box>
+        )}
+      </DialogContent>
+      <Box sx={{ paddingX: 3, paddingY: 2, display: 'flex', justifyContent: 'flex-end' }}>
+          { props.cancelLabel ? (
+            <Box sx={{ paddingRight: '12px' }}>
+              <SimpleButton
+                small
+                label={'Cancel'}
+                sx={{ my: 0.5 }}
+                onClick={handleCancel}
+                aria-label="cancel"
+                variant="contained"
+                disabled={props.disabled || props.loading}
+                color="OKFNWhite"
+              />
+            </Box>
+            ) : null }
+          <SimpleButton
+            small
+            label={props.label || 'Confirm'}
+            sx={{ my: 0.5 }}
+            onClick={handleConfirm}
+            aria-label="accept"
+            variant="contained"
+            color={ props.label === 'Delete' ? 'OKFNRed500' : 'OKFNBlack' }
+            disabled={props.disabled || props.loading}
+          />
+      </Box>
+    </Dialog>
+  )
+}
diff --git a/client/components/Parts/Grids/Columns.tsx b/client/components/Parts/Grids/Columns.tsx
index 3bdf76929..52127e188 100644
--- a/client/components/Parts/Grids/Columns.tsx
+++ b/client/components/Parts/Grids/Columns.tsx
@@ -12,9 +12,15 @@ interface ColumnsProps {
 
 export default function Columns(props: React.PropsWithChildren<ColumnsProps>) {
   const columns = props.columns || 12
+
+  // In conditional rendering props.children still returns an array that includes the 
+  // null value. This ensures that the null value is removed from the array
+  const childrenNoNull = React.Children.toArray(props.children).filter( (element: React.ReactNode) => element)
+
   const defaultWidth = Math.round(
-    columns / React.Children.count(props.children)
+    columns / React.Children.count(childrenNoNull)
   ) as GridSize
+
   return (
     <Grid
       container
@@ -22,7 +28,7 @@ export default function Columns(props: React.PropsWithChildren<ColumnsProps>) {
       columnSpacing={props.spacing}
       sx={{ height: props.height }}
     >
-      {React.Children.map(props.children, (child, index) => (
+      {React.Children.map(childrenNoNull, (child, index) => (
         <Grid item key={index} md={props.layout ? props.layout[index] : defaultWidth}>
           {child}
         </Grid>
diff --git a/client/themes.ts b/client/themes.ts
index 811d9b307..b8e2f513d 100644
--- a/client/themes.ts
+++ b/client/themes.ts
@@ -10,6 +10,8 @@ declare module '@mui/material/styles' {
     OKFNRed400: SimplePaletteColorOptions
     OKFNRed500: SimplePaletteColorOptions
     OKFNGreenBlue: SimplePaletteColorOptions
+    OKFNBlack: SimplePaletteColorOptions
+    OKFNWhite: SimplePaletteColorOptions
   }
   interface Palette extends CustomPalette {}
   interface PaletteOptions extends CustomPalette {}
@@ -25,6 +27,8 @@ declare module '@mui/material/Button' {
     OKFNRed400: true
     OKFNRed500: true
     OKFNGreenBlue: true
+    OKFNBlack: true
+    OKFNWhite: true
   }
 }
 
@@ -62,7 +66,7 @@ export const DEFAULT = createTheme({
       main: '#4C5564',
     },
     OKFNGray100: {
-      main: '#F4F4F$',
+      main: '#F4F4F4',
     },
     OKFNGray500: {
       main: '#717879',
@@ -83,5 +87,11 @@ export const DEFAULT = createTheme({
     OKFNGreenBlue: {
       main: '#56C4A3',
     },
+    OKFNBlack: {
+      main: '#000000',
+    },
+    OKFNWhite: {
+      main: '#FFFFFF',
+    },
   },
 })

From 723cc4bc6460203db1df970f80dfef5f47cef7b1 Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Tue, 15 Oct 2024 19:08:16 +0200
Subject: [PATCH 3/5] Adjust CloseWithUnsavedChanges dialog to new Dialogs

---
 .../Application/Dialogs/CloseWithUnsavedChanges.tsx         | 6 +++---
 client/components/Application/Dialogs/UnsavedChanges.tsx    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx b/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
index a954adbba..f164b4e38 100644
--- a/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
+++ b/client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx
@@ -1,5 +1,5 @@
 import DangerousIcon from '@mui/icons-material/Dangerous'
-import ConfirmDialog from '../../Parts/Dialogs/OneButton'
+import TwoButtonDialog from '../../Parts/Dialogs/TwoButton'
 import * as store from '@client/store'
 
 export default function CloseWithUnsavedChangesDialog() {
@@ -14,13 +14,13 @@ export default function CloseWithUnsavedChangesDialog() {
   }
 
   return (
-    <ConfirmDialog
+    <TwoButtonDialog
       open={true}
       title="Unsaved Changes"
       cancelLabel="Discard"
       label="Save"
       Icon={DangerousIcon}
-      description="There are unsaved changes. Please click Save or Discard"
+      description="There are unsaved changes."
       onCancel={onDiscard}
       onConfirm={onSave}
       disableClosing={true}
diff --git a/client/components/Application/Dialogs/UnsavedChanges.tsx b/client/components/Application/Dialogs/UnsavedChanges.tsx
index 0f69fb43f..9334ab70d 100644
--- a/client/components/Application/Dialogs/UnsavedChanges.tsx
+++ b/client/components/Application/Dialogs/UnsavedChanges.tsx
@@ -20,7 +20,7 @@ export default function UnsavedChangesDialog() {
       cancelLabel="Discard"
       label="Save"
       Icon={DangerousIcon}
-      description="There are unsaved changes. Please click Save or Discard"
+      description="There are unsaved changes."
       onCancel={onDiscard}
       onConfirm={onSave}
     />

From 21ad35b9592428f36cbbc98c40d2c705d60bd55e Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Sun, 20 Oct 2024 17:59:36 +0200
Subject: [PATCH 4/5] Fix dialog names and adjust colors in dialogs

---
 client/components/Parts/Buttons/SimpleButton.tsx | 3 ++-
 client/components/Parts/Dialogs/Input.tsx        | 4 ++--
 client/components/Parts/Dialogs/OneButton.tsx    | 6 +++---
 client/components/Parts/Dialogs/TwoButton.tsx    | 4 ++--
 client/themes.ts                                 | 5 +++++
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/components/Parts/Buttons/SimpleButton.tsx b/client/components/Parts/Buttons/SimpleButton.tsx
index cc2342f32..d5e4449c7 100644
--- a/client/components/Parts/Buttons/SimpleButton.tsx
+++ b/client/components/Parts/Buttons/SimpleButton.tsx
@@ -15,9 +15,10 @@ export default function SimpleButton(props: SimpleButtonProps) {
       fullWidth={!props.small}
       color={props.color}
       {...others}
+      sx={{ padding: '14px 24px', borderRadius: '9px', border: props.label === 'Cancel' ? '1px solid #D3D7D8' : 0, boxShadow: 'none' }}
     >
       {(
-        <Typography sx={{ textTransform: 'capitalize', fontWeight: 600, color: buttonTextColor }}>
+        <Typography sx={{ textTransform: 'capitalize', fontWeight: 700, color: (theme) => props.disabled ? theme.palette.OKFNGray700.main : buttonTextColor, }}>
           {label}
         </Typography>
       )}
diff --git a/client/components/Parts/Dialogs/Input.tsx b/client/components/Parts/Dialogs/Input.tsx
index b4b35260b..da8335676 100644
--- a/client/components/Parts/Dialogs/Input.tsx
+++ b/client/components/Parts/Dialogs/Input.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import InputAdornment from '@mui/material/InputAdornment'
 import TextField from '@mui/material/TextField'
-import OneButtonDialog, { ConfirmDialogProps } from './OneButton'
+import OneButtonDialog, { OneButtonDialogProps } from './OneButton'
 
-export interface InputDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'> {
+export interface InputDialogProps extends Omit<OneButtonDialogProps, 'onConfirm'> {
   value?: string
   prefix?: string
   placholder?: string
diff --git a/client/components/Parts/Dialogs/OneButton.tsx b/client/components/Parts/Dialogs/OneButton.tsx
index 8acb1f549..2fb3c8c14 100644
--- a/client/components/Parts/Dialogs/OneButton.tsx
+++ b/client/components/Parts/Dialogs/OneButton.tsx
@@ -8,7 +8,7 @@ import SimpleButton from '../Buttons/SimpleButton'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 
-export interface ConfirmDialogProps {
+export interface OneButtonDialogProps {
   open?: boolean
   title?: string
   description?: string
@@ -25,7 +25,7 @@ export interface ConfirmDialogProps {
   disableClosing?: boolean
 }
 
-export default function ConfirmDialog(props: ConfirmDialogProps) {
+export default function OneButtonDialog(props: OneButtonDialogProps) {
   const handleCancel = () => props.onCancel && props.onCancel()
   const handleConfirm = () => props.onConfirm && props.onConfirm()
 
@@ -72,7 +72,7 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
       </DialogTitle>
       <DialogContent sx={{ paddingTop: 0, paddingBottom: 0 }}>
         {props.description && (
-          <Box sx={{ marginBottom: 1, opacity: 0.6 }}>{props.description}</Box>
+          <Box sx={{ marginBottom: 0, opacity: 0.6 }}>{props.description}</Box>
         )}
         {props.children}
         {props.loading && (
diff --git a/client/components/Parts/Dialogs/TwoButton.tsx b/client/components/Parts/Dialogs/TwoButton.tsx
index 1683349d2..901ffd0a9 100644
--- a/client/components/Parts/Dialogs/TwoButton.tsx
+++ b/client/components/Parts/Dialogs/TwoButton.tsx
@@ -8,7 +8,7 @@ import SimpleButton from '../Buttons/SimpleButton'
 import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 
-export interface ConfirmDialogProps {
+export interface TwoButtonDialogProps {
   open?: boolean
   title?: string
   description?: string
@@ -25,7 +25,7 @@ export interface ConfirmDialogProps {
   disableClosing?: boolean
 }
 
-export default function ConfirmDialog(props: ConfirmDialogProps) {
+export default function ConfirmDialog(props: TwoButtonDialogProps) {
   const handleCancel = () => props.onCancel && props.onCancel()
   const handleConfirm = () => props.onConfirm && props.onConfirm()
 
diff --git a/client/themes.ts b/client/themes.ts
index b8e2f513d..ec679c8d6 100644
--- a/client/themes.ts
+++ b/client/themes.ts
@@ -12,6 +12,7 @@ declare module '@mui/material/styles' {
     OKFNGreenBlue: SimplePaletteColorOptions
     OKFNBlack: SimplePaletteColorOptions
     OKFNWhite: SimplePaletteColorOptions
+    OKFNGray700: SimplePaletteColorOptions
   }
   interface Palette extends CustomPalette {}
   interface PaletteOptions extends CustomPalette {}
@@ -29,6 +30,7 @@ declare module '@mui/material/Button' {
     OKFNGreenBlue: true
     OKFNBlack: true
     OKFNWhite: true
+    OKFNGray700: true
   }
 }
 
@@ -74,6 +76,9 @@ export const DEFAULT = createTheme({
     OKFNCoolGray400: {
       main: '#9CA2AE',
     },
+    OKFNGray700: {
+      main: '#3F4345',
+    },
     // OKFN Blue
     OKFNBlue: {
       main: '#00D1FF',

From 69337544a5ee86cdd46abd93ce1682dbf65d66ae Mon Sep 17 00:00:00 2001
From: gtzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Mon, 21 Oct 2024 16:19:02 +0200
Subject: [PATCH 5/5] Fix import

---
 client/components/Parts/Dialogs/Pick.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/Parts/Dialogs/Pick.tsx b/client/components/Parts/Dialogs/Pick.tsx
index 687924ada..ab75033a0 100644
--- a/client/components/Parts/Dialogs/Pick.tsx
+++ b/client/components/Parts/Dialogs/Pick.tsx
@@ -7,9 +7,9 @@ import ListItemText from '@mui/material/ListItemText'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Checkbox from '@mui/material/Checkbox'
 import Divider from '@mui/material/Divider'
-import ConfirmDialog, { ConfirmDialogProps } from './OneButton'
+import ConfirmDialog, { OneButtonDialogProps } from './OneButton'
 
-interface PickDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'> {
+interface PickDialogProps extends Omit<OneButtonDialogProps, 'onConfirm'> {
   items: string[]
   onConfirm: (items: string[]) => void
 }