Improve Dialog styles. Revamp DialogConverter

recipes/src/components/Dialog/index.tsx

@@ -35,8 +35,7 @@ const CBK_Dialog = ({ isOpen, actions, children }: DialogProps) => {
           Object.keys(actions).map((action, index) => (
             <Button
               key={index}
-              outlined={!actions[action].isDefault}
-              unelevated={actions[action].isDefault}
+              outlined={actions[action].isDefault}
               onClick={actions[action].onSelect}
             >
               {actions[action].label}

recipes/src/components/DialogConverter/index.tsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-import Dialog, {
-  DialogContent,
-  DialogFooter,
-  DialogButton
-} from '@material/react-dialog';
+import Dialog from 'components/Dialog';
 import { GetMeasure, Convert, Measure } from 'services/measurements';
 import Button from 'components/Button';
 
@@ -17,10 +13,11 @@ type Data = {
 
 interface DialogProps {
   measure: Data,
-  onConvert: (result: Data) => void
+  onConvert: (result: Data) => void,
+  measureName?: string,
 }
 
-const CBKDialog = ({measure, onConvert}: DialogProps) => {
+const CBKDialog = ({measure, onConvert, measureName}: DialogProps) => {
   const { name, values } = GetMeasure(measure.unit);
   const [ isOpen, setOpen ] = useState(false);
   const [ result, setResult ] = useState({
@@ -41,18 +38,44 @@ const CBKDialog = ({measure, onConvert}: DialogProps) => {
         className='cbk-convert__button'
       ></Button>
       <Dialog
-        onClose={(action) => {
-          if (action === 'confirm') {
-            onConvert(result)
-          }
-          setOpen(false)
+        actions={{
+          cancel: {
+            label: 'cancel',
+            onSelect: () => { setOpen(false) }
+          },
+          convert: {
+            label: 'convert',
+            onSelect: () => {
+              setOpen(false);
+              onConvert(result);
+            },
+            isDefault: true
+          },
         }}
-        open={isOpen}
+        isOpen={isOpen}
       >
-        <DialogContent className='cbk-convert__dialog'>
-          <p>Converting <b>{measure.quantity + ' ' + measure.unit}</b> to:</p>
+        <div>
+          {/* <p>Converting <b>{measure.quantity + ' ' + measure.unit}</b> to:</p> */}
           <div className='cbk-convert__dialog__content'>
-            <select value={result.unit} onChange={(e) => {
+            <p>converting {measureName} </p>
+            <div className='cbk-convert__dialog__content__converter'>
+                <div>{measure.quantity}</div>
+                <div className='cbk-convert__dialog__content__converter--equal'> = </div>
+                <div>{result.quantity}</div>
+                <div>{measure.unit}</div>
+                <select value={result.unit} onChange={(e) => {
+                  convert(measure.quantity, measure.unit, e.target.value);
+                }}>
+                  {
+                    values.map(option => (
+                      <option key={option} value={option}>{option}</option>
+                    ))
+                  }
+                </select>
+            </div>
+
+
+            {/* <select value={result.unit} onChange={(e) => {
               convert(measure.quantity, measure.unit, e.target.value);
             }}>
               {
@@ -61,14 +84,10 @@ const CBKDialog = ({measure, onConvert}: DialogProps) => {
                 ))
               }
             </select>
-              {`${result.quantity} ${result.unit}`} 
+              {`${result.quantity} ${result.unit}`}  */}
           </div>
 
-        </DialogContent>
-        <DialogFooter>
-          <DialogButton action='dismiss' type='button'>cancel</DialogButton>
-          <DialogButton action='confirm' type='button'>ok</DialogButton>
-        </DialogFooter>
+        </div>
       </Dialog>
     </>
   )

recipes/src/components/DialogConverter/styles.scss

@@ -5,9 +5,38 @@
     &__content {
       display: flex;
       align-content: space-between;
-      select {
-        flex-basis: 50%;
-        margin-right: $spacing-small;
+      flex-direction: column;
+      &__converter {
+        @include box();
+        @include button();
+        color: black;
+        text-align: center;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        & > div,
+        & > select {
+          background-color: white;
+        }
+        &--equal {
+          grid-column: 2 / span 1;
+          grid-row: 1 / span 2;
+          align-self: center;
+          font-size: $font-size-xxx-large;
+        }
+        select {
+          @include button();
+          font-weight: bold;
+          text-align-last: center;
+          box-shadow: none;
+          outline: none;
+          border: 0;
+          &:focus {
+            box-shadow: none;
+            outline: none;
+            border: 0;
+          }
+        }
       }
     }
   }

recipes/src/components/RecipeForm/index.tsx

@@ -268,6 +268,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
                                           <FormikInput name={`ingredients[${selectedTab}].ingredients[${index}].quantity`} type='number'/>
                                           {ingredient.unit && ingredient.quantity ? (
                                             <DialogConverter
+                                              measureName={ingredient.name}
                                               measure={{unit: ingredient.unit, quantity: ingredient.quantity}}
                                               onConvert={result => ingredientHelpers.replace(index, { ...ingredient, ...result })}
                                             />

recipes/src/services/measurements.ts

@@ -33,11 +33,11 @@ const conversionTableDic: { [measure: string]: string[] } = {
 
 const Convert = (qty: number, from: string, to: string, measure: Measure) => {
   const toAnchor = (unit: string, amount: number) => conversionTable[measure][unit] * amount;
-  return parseFloat((toAnchor(from, qty) / toAnchor(to, 1)).toFixed(3));
+  return parseFloat((toAnchor(from, qty) / toAnchor(to, 1)).toFixed(2));
 }
 
 const GetMeasure = (unit: string): { name: string, values: string[]} => {
-  return ['mass', 'volume'].reduce((result, measure)=>{
+  return ['mass', 'volume'].reduce((result, measure) => {
     return conversionTableDic[measure].includes(unit) ? {
       name: measure,
       values: conversionTableDic[measure]

recipes/src/styles/app.scss

@@ -130,6 +130,16 @@ textarea
 	box-sizing:content-box;
 }
 
+select {
+  @include box();
+  border-width: 2px;
+}
+
+select:focus {
+  @include shadow();
+  outline: none;
+}
+
 /* 
   ##Device = Low Resolution Tablets, Mobiles 
 */