From 02474a0a6d4fac1d9c58da2292a3fa2d4b16d4a3 Mon Sep 17 00:00:00 2001
From: Liordino Neto <liordinoneto@gmail.com>
Date: Tue, 22 Sep 2020 18:28:12 -0300
Subject: [PATCH] fix: wrong fonts on the operator info pages (#430)

* fix: fix bug when loading the contact info page with no phone configured
or no country configured in locales

style: fixed contact info styles

style: fixes on the terms & conditions styles

* fix: re-add H4 style after merge

fix: code styling
---
 .../src/pages/Cashout/WizardStep.styles.js    |  4 +-
 .../src/pages/OperatorInfo/ContactInfo.js     | 47 ++++++++-----------
 .../pages/OperatorInfo/OperatorInfo.styles.js | 16 +++++++
 .../src/pages/OperatorInfo/TermsConditions.js |  6 +--
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js
index d2e73d03..fd74d4aa 100644
--- a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js
+++ b/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js
@@ -24,8 +24,8 @@ export default {
     alignItems: 'center',
     justifyContent: 'end'
   },
-  billInput:{
-    width:'100%'
+  billInput: {
+    width: '100%'
   },
   suffix: {
     paddingLeft: spacer * 2
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
index faaf0199..fc0c54f5 100644
--- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
@@ -13,14 +13,7 @@ import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { Link } from 'src/components/buttons'
 import Switch from 'src/components/inputs/base/Switch'
 import { TextInput, NumberInput } from 'src/components/inputs/formik'
-import {
-  P,
-  Info2,
-  Info3,
-  Label1,
-  Label2,
-  Label3
-} from 'src/components/typography'
+import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
 import { fontSize5 } from 'src/styling/variables'
@@ -174,7 +167,7 @@ const ContactInfo = () => {
               locale.country
             ).formatInternational()
           : '',
-      component: TextInput
+      component: NumberInput
     },
     {
       name: 'email',
@@ -214,26 +207,26 @@ const ContactInfo = () => {
 
   return (
     <>
-      <div className={classes.header}>
-        <Info2>Contact information</Info2>
+      <div className={classes.rowWrapper}>
+        <H4>Contact information</H4>
+      </div>
+      <div className={classes.rowWrapper}>
+        <P>Info card enabled?</P>
+        <div className={classes.switch}>
+          <Switch
+            checked={info.active}
+            onChange={event =>
+              save({
+                active: event.target.checked
+              })
+            }
+          />
+          <Label2>{info.active ? 'Yes' : 'No'}</Label2>
+        </div>
       </div>
       <div className={classes.section}>
-        <div className={classes.switchRow}>
-          <P>Info card enabled?</P>
-          <div className={classes.switch}>
-            <Switch
-              checked={info.active}
-              onChange={event =>
-                save({
-                  active: event.target.checked
-                })
-              }
-            />
-            <Label2>{info.active ? 'Yes' : 'No'}</Label2>
-          </div>
-        </div>
-        <div className={classes.header}>
-          <Info2>Info card</Info2>
+        <div className={classes.rowWrapper}>
+          <H4>Info card</H4>
           {!editing && (
             <div className={classes.transparentButton}>
               <button onClick={() => setEditing(true)}>
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
index 756b864b..accae853 100644
--- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
@@ -77,6 +77,22 @@ const contactInfoStyles = {
     display: 'flex',
     flexDirection: 'row',
     paddingLeft: 4
+  },
+  rowWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    flex: 'wrap'
+  },
+  transparentButton: {
+    '& > *': {
+      margin: 'auto 12px'
+    },
+    '& button': {
+      border: 'none',
+      backgroundColor: 'transparent',
+      cursor: 'pointer'
+    }
   }
 }
 
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
index ab5beb99..57dea39c 100644
--- a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
@@ -12,7 +12,7 @@ import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { Link } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import { TextInput } from 'src/components/inputs/formik'
-import { Info2, Info3, Label2, Label3 } from 'src/components/typography'
+import { H4, Info2, Info3, Label2, Label3 } from 'src/components/typography'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
@@ -191,8 +191,8 @@ const TermsConditions = () => {
 
   return (
     <>
-      <div className={classes.header}>
-        <Info2>Terms &amp; Conditions</Info2>
+      <div className={classes.rowWrapper}>
+        <H4>Terms &amp; Conditions</H4>
       </div>
       <div className={classes.section}>
         <div className={classes.enable}>