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/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,11 +207,10 @@ const ContactInfo = () => {
 
   return (
     <>
-      <div className={classes.header}>
+      <div className={classes.rowWrapper}>
-        <Info2>Contact information</Info2>
+        <H4>Contact information</H4>
       </div>
-      <div className={classes.section}>
+      <div className={classes.rowWrapper}>
-        <div className={classes.switchRow}>
         <P>Info card enabled?</P>
         <div className={classes.switch}>
           <Switch
@@ -232,8 +224,9 @@ const ContactInfo = () => {
           <Label2>{info.active ? 'Yes' : 'No'}</Label2>
         </div>
       </div>
-        <div className={classes.header}>
+      <div className={classes.section}>
-          <Info2>Info card</Info2>
+        <div className={classes.rowWrapper}>
+          <H4>Info card</H4>
           {!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}>