Improve UI/UX to match current theme

recipes/src/components/Dialog/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import Dialog, {
-  DialogContent,
-  DialogFooter,
-  DialogButton
+  DialogContent
 } from '@material/react-dialog';
+import Button from 'components/Button';
 
 import '@material/react-dialog/dist/dialog.min.css';
+import './styles.scss'
 
 interface DialogProps {
   isOpen: boolean
@@ -15,31 +15,35 @@ interface DialogProps {
       onSelect: () => void,
       isDefault?: boolean
     },
-  }
+  },
   children?: React.ReactElement
 }
-const CBK_Dialog = (props: DialogProps) => {
+const CBK_Dialog = ({ isOpen, actions, children }: DialogProps) => {
   return (
     <Dialog
-      open={props.isOpen}
-      onClose={(action: string) => props.actions[action].onSelect()}
+      scrimClickAction={''}
+      escapeKeyAction={''}
+      open={isOpen}
+      onClose={(action: string) => actions[action] && actions[action].onSelect() }
+      className='cbk-dialog'
     >
-      <DialogContent>
-        {props.children}
+      <DialogContent className='cbk-dialog__content'>
+        {children}
       </DialogContent>
-      <DialogFooter>
+      <div className='cbk-dialog__footer'>
         {
-          Object.keys(props.actions).map((action, index) => (
-            <DialogButton
+          Object.keys(actions).map((action, index) => (
+            <Button
               key={index}
-              action={action}
-              isDefault={props.actions[action].isDefault}
+              outlined={!actions[action].isDefault}
+              unelevated={actions[action].isDefault}
+              onClick={actions[action].onSelect}
             >
-              {props.actions[action].label}
-            </DialogButton>
+              {actions[action].label}
+            </Button>
           ))
         }
-      </DialogFooter>
+      </div>
     </Dialog>
   )
 };

recipes/src/components/Dialog/styles.scss

@@ -0,0 +1,16 @@
+@import 'styles/_variables.scss';
+
+.cbk-dialog {
+  .mdc-dialog__surface {
+    @include solidBoxShadow();
+    border-radius: 0;
+  }
+  &__content {
+    @include button();
+  }
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: $spacing-small;
+  }
+}

recipes/src/components/RecipeForm/index.tsx

@@ -8,9 +8,10 @@ import { Input, Textarea, ControlledInput } from 'components/Input';
 
 import ImageUploader from 'components/ImageUploader';
 import Button from 'components/Button';
-import Dialog from 'components/DialogConverter';
+import DialogConverter from 'components/DialogConverter';
 import TagInput from 'components/TagInput';
 import DurationPicker from 'components/DurationPicker';
+import Dialog from 'components/Dialog';
 
 import './styles.scss';
 
@@ -96,8 +97,31 @@ const FormikTextarea = ({ label, ...props }: FormikInputProps)  => {
 const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCancel}: RecipeFormProps<T>) => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [focusLast, setFocusLast] = useState(false);
+  const [openDialog, setOpenDialog] = useState(false);
   return (
   <div>
+    <Dialog
+      isOpen={openDialog}
+      actions={{
+        cancel: {
+          label: 'cancel',
+          onSelect: () => setOpenDialog(false),
+          isDefault: false
+        },
+        accept: {
+          label: 'accept',
+          onSelect: () => {
+            setOpenDialog(false);
+            onCancel();
+          },
+          isDefault: true
+        },
+      }}
+    >
+      <div>
+        Are you sure ?
+      </div>
+    </Dialog>
     <Formik
       enableReinitialize
       initialValues={initialValues}
@@ -243,7 +267,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
                                         <div>
                                           <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}].quantity`} type='number'/>
                                           {ingredient.unit && ingredient.quantity ? (
-                                            <Dialog
+                                            <DialogConverter
                                               measure={{unit: ingredient.unit, quantity: ingredient.quantity}}
                                               onConvert={result => ingredientHelpers.replace(index, { ...ingredient, ...result })}
                                             />
@@ -336,7 +360,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
             </section>
             
             <section className='actions'>
-              <Button type='button' outlined onClick={() => onCancel()}>Cancel</Button>
+              <Button type='button' outlined onClick={() => setOpenDialog(true)}>Cancel</Button>
               <Button type='button' raised unelevated onClick={() => submitForm()}>Submit</Button>
             </section>
             </Form>