From a35dd3e77e57352404cc7d3dc27d3a783d8a8d87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Mon, 15 Nov 2021 18:18:57 +0000
Subject: [PATCH] fix: status alignment and font sizes

---
 .../Customers/components/EditableCard.js      | 20 +++++++++++--------
 .../components/EditableCard.styles.js         | 13 ++++++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
index d75f5bef..3587e5c4 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
@@ -10,7 +10,7 @@ import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { MainStatus } from 'src/components/Status'
 import { Tooltip } from 'src/components/Tooltip'
 import { ActionButton } from 'src/components/buttons'
-import { Label1, Info3, H3 } from 'src/components/typography'
+import { Label1, P, H3 } from 'src/components/typography'
 import {
   OVERRIDE_AUTHORIZED,
   OVERRIDE_REJECTED,
@@ -39,7 +39,8 @@ const fieldStyles = {
     position: 'relative',
     width: 280,
     height: 48,
-    padding: [[0, 4, 4, 0]]
+    padding: [[0, 4, 4, 0]],
+    marginTop: 2
   },
   label: {
     color: comet,
@@ -65,7 +66,8 @@ const fieldStyles = {
   editing: {
     '& > div': {
       '& > input': {
-        padding: 0
+        padding: 0,
+        fontSize: 14
       }
     }
   }
@@ -85,7 +87,7 @@ const EditableField = ({ editing, field, value, size, ...props }) => {
       {!editing && (
         <>
           <Label1 className={classes.label}>{field.label}</Label1>
-          <Info3>{value}</Info3>
+          <P>{value}</P>
         </>
       )}
       {editing && (
@@ -145,10 +147,12 @@ const EditableCard = ({
     <div>
       <Card className={classes.card}>
         <CardContent>
-          <div className={classes.cardHeader}>
-            {titleIcon}
-            <H3 className={classes.cardTitle}>{title}</H3>
-            <Tooltip width={304}></Tooltip>
+          <div className={classes.headerWrapper}>
+            <div className={classes.cardHeader}>
+              {titleIcon}
+              <H3 className={classes.cardTitle}>{title}</H3>
+              <Tooltip width={304}></Tooltip>
+            </div>
             {state && (
               <div className={classnames(label1ClassNames)}>
                 <MainStatus statuses={[authorized]} />
diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js
index db50b8ae..3ef803d2 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js
+++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js
@@ -16,20 +16,26 @@ export default {
     color: spring4
   },
   editButton: {
-    marginTop: 30,
+    marginTop: 20,
     display: 'flex',
     justifyContent: 'right'
   },
   deleteButton: {
     marginRight: 8
   },
+  headerWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    height: 40
+  },
   editingWrapper: {
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    marginTop: 20
   },
   replace: {
-    marginTop: 30,
     marginRight: 5
   },
   input: {
@@ -39,7 +45,6 @@ export default {
     marginRight: 5
   },
   editingButtons: {
-    marginTop: 30,
     display: 'flex',
     justifyContent: 'right'
   },