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

new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js

@@ -24,8 +24,8 @@ export default {
     alignItems: 'center',
     justifyContent: 'end'
   },
-  billInput:{
+  billInput: {
-    width:'100%'
+    width: '100%'
   },
   suffix: {
     paddingLeft: spacer * 2

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 {
+import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
-  P,
-  Info2,
-  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}>
+      <div className={classes.rowWrapper}>
-        <Info2>Contact information</Info2>
+        <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}>
+        <div className={classes.rowWrapper}>
-          <P>Info card enabled?</P>
+          <H4>Info card</H4>
-          <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>
           {!editing && (
             <div className={classes.transparentButton}>
               <button onClick={() => setEditing(true)}>

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'
+    }
   }
 }
 

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}>
+      <div className={classes.rowWrapper}>
-        <Info2>Terms &amp; Conditions</Info2>
+        <H4>Terms &amp; Conditions</H4>
       </div>
       <div className={classes.section}>
         <div className={classes.enable}>