Revamp styles: Fix Button props types and add 'small' config for button icons. Add subtitle class styles

recipes/src/components/Button/index.tsx

@@ -3,29 +3,56 @@ import Button from '@material/react-button';
 import Icon from 'components/Icon';
 import IconButton from '@material/react-icon-button';
 
+import classnames from 'classnames';
+
 import '@material/react-button/dist/button.css';
 import '@material/react-icon-button/dist/icon-button.css'
 
+import './styles.scss';
+
 type CBKButtonProps = {
-  children: string|ReactElement,
+  children?: string|ReactElement,
   className?: string,
   unelevated?: boolean,
   raised?: boolean,
   outlined?: boolean,
   icon?: string,
-  onClick?: () => void,
+  onClick?: (e: any) => void,
+  small?: boolean,
+  type?: string
+  disabled?: boolean
+  style?: any;
 }
 
-export default function CBKButton(props: any) {
+export default function CBKButton(props: CBKButtonProps) {
   if (props.icon) {
     return (
-      <IconButton onClick={props.onClick} {...props} >
+      <IconButton
+        onClick={props.onClick}
+        unelevated={props.unelevated}
+        raised={props.raised}
+        outlined={props.outlined}
+        className={classnames({
+          'btn-small': props.small,
+        }, props.className)}
+        type={props.type}
+        disabled={props.disabled}
+        style={props.style}
+      >
         <Icon material icon={props.icon}/>
       </IconButton>
     );
   } else {
     return (
-      <Button {...props}>
+      <Button
+        disabled={props.disabled}
+        unelevated={props.unelevated}
+        raised={props.raised}
+        outlined={props.outlined}
+        className={props.className}
+        onClick={props.onClick}
+        style={props.style}
+      >
         { props.children }
       </Button>
     )

recipes/src/components/Button/styles.scss

@@ -0,0 +1,15 @@
+button.mdc-icon-button.btn-small {
+  align-self: center;
+  --mdc-ripple-fg-size: 14px;
+  --mdc-ripple-left: 5px;
+  --mdc-ripple-top: 5px;
+  width: 24px;
+  height: 24px;
+  padding: 6px;
+  font-size: 12px;
+
+  .material-icons {
+    font-size: 12px;
+  }
+
+}

recipes/src/components/DialogConverter/index.tsx

@@ -39,7 +39,6 @@ const CBKDialog = ({measure, onConvert}: DialogProps) => {
         onClick={() => setOpen(true)}
         disabled={measure.unit === ''}
         className='cbk-convert__button'
-        title='convert unit'
       ></Button>
       <Dialog
         onClose={(action) => {

recipes/src/components/RecipeForm/index.tsx

@@ -53,11 +53,11 @@ const SubrecipeForm = (props: any) => {
                 <Field name={`ingredients[${subrecipeIdx}].name`} placeholder='subrecipe name'/>
               </div>
               <Button
-                className='remove'
                 type='button'
                 icon='clear'
                 onClick={() => remove(subrecipeIdx)}
                 disabled={subrecipes.length === 1}
+                small
               ></Button>
               <span></span>
             </li>
@@ -131,9 +131,11 @@ const SubrecipeForm = (props: any) => {
                           <Field name={`ingredients[${selectedTab}].ingredients[${index}]._original`} disabled/>
                         </Cell>
                         <Cell columns={1}> 
-                          <Button type='button' icon='clear' className='remove' onClick={() => {
+                          <Button type='button' icon='clear' onClick={() => {
                             ingredientHelpers.remove(index)
-                          }} disabled={form.values.ingredients[selectedTab].ingredients.length === 1}></Button>
+                          }}
+                          disabled={form.values.ingredients[selectedTab].ingredients.length === 1}
+                          small></Button>
                         </Cell>
                       </Row>
                       <div className='ingredient-suggestions'>
@@ -244,7 +246,7 @@ const RenderForm = ({
                       <Field name={`instructions[${instructionIdx}]`}/>
                     </Cell>
                     <Cell columns={1}>
-                      <Button icon='clear' className='remove' onClick={() => remove(instructionIdx)}></Button>
+                      <Button icon='clear' onClick={() => remove(instructionIdx)} small></Button>
                     </Cell>
                   </Row>
                 ))

recipes/src/containers/Planner/index.tsx

@@ -26,8 +26,8 @@ const DisplayMeal = (dayPlan: DayPlan, meal: Meal, onRemove: typeof PlannerActio
   if (dish !== undefined) {
     return (
       <div className='meal-card'>
-        <h3>{dish.name}</h3>
-        <Button icon='clear' onClick={() => onRemove(getWeekDay(dayPlan.date), meal)}></Button>
+        <p className='subtitle-2'>{dish.name}</p>
+        <Button icon='clear' onClick={() => onRemove(getWeekDay(dayPlan.date), meal)} small></Button>
       </div>
     )
   } else {

recipes/src/styles/_fonts.scss

@@ -16,11 +16,14 @@ $font-size-xx-large: 1.5rem;
 $font-size-xxx-large: 2rem;
 $font-size-xxxx-large: 2.125rem;
 
+$letter-spacing-normal: 0.1px;
+$letter-spacing-enhanced: 0.5px;
+
 @mixin button() {
   font-size: 0.875rem;
   line-height: 2.25rem;
   font-weight: 500;
-  letter-spacing: 0.1px;
+  letter-spacing: $letter-spacing-normal;
   text-decoration: none;
   text-transform: uppercase;
 }

recipes/src/styles/app.scss

@@ -51,6 +51,13 @@ h4:after {
   margin-left: -4px;
 }
 
+.subtitle-2 {
+  font-family: $font-family-display;
+  font-size: $font-size-regular;
+  font-weight: $font-weight-bold;
+  letter-spacing: $letter-spacing-enhanced;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;