fix: status alignment and font sizes

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}>
+          <div className={classes.headerWrapper}>
-            {titleIcon}
+            <div className={classes.cardHeader}>
-            <H3 className={classes.cardTitle}>{title}</H3>
+              {titleIcon}
-            <Tooltip width={304}></Tooltip>
+              <H3 className={classes.cardTitle}>{title}</H3>
+              <Tooltip width={304}></Tooltip>
+            </div>
             {state && (
               <div className={classnames(label1ClassNames)}>
                 <MainStatus statuses={[authorized]} />

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