Adapt dialogs to new design

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}

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'

client/components/Application/Dialogs/CloseWithUnsavedChanges.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 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}

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'
 

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'

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,15 +22,15 @@ export default function DeleteFilesFoldersDialog() {
   if (!path) return null
 
   return (
-    <ConfirmDialog
+    <TwoButtonDialog
       open={true}
       title="Delete File"
       description={
         selectedMultiplePaths
           ? '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 () => {

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'

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'

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,13 +14,13 @@ export default function UnsavedChangesDialog() {
   }
 
   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}
     />

client/components/Parts/Buttons/SimpleButton.tsx

@@ -7,19 +7,20 @@ 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}
+      sx={{ padding: '14px 24px', borderRadius: '9px', border: props.label === 'Cancel' ? '1px solid #D3D7D8' : 0, boxShadow: 'none' }}
     >
-      {small ? (
-        <Typography sx={{ fontWeight: 300, textTransform: 'capitalize' }}>
+      {(
+        <Typography sx={{ textTransform: 'capitalize', fontWeight: 700, color: (theme) => props.disabled ? theme.palette.OKFNGray700.main : buttonTextColor, }}>
           {label}
         </Typography>
-      ) : (
-        label
       )}
     </Button>
   )

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 ConfirmDialog, { ConfirmDialogProps } from './Confirm'
+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
@@ -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>
   )
 }

client/components/Parts/Dialogs/OneButton.tsx

@@ -0,0 +1,99 @@
+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 OneButtonDialogProps {
+  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 OneButtonDialog(props: OneButtonDialogProps) {
+  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: 0, 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' }}>
+        <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>
+  )
+}

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 './Confirm'
+import ConfirmDialog, { OneButtonDialogProps } from './OneButton'
 
-interface PickDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'> {
+interface PickDialogProps extends Omit<OneButtonDialogProps, 'onConfirm'> {
   items: string[]
   onConfirm: (items: string[]) => void
 }