style: set IconButton stroke colors to comet

fix: replaced edit buttons of the BooleanPropertiesTable component and
Contact Info and Terms & Conditions pages

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js

@@ -6,7 +6,7 @@ import React, { useState, memo } from 'react'
 import * as Yup from 'yup'
 
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { Link } from 'src/components/buttons'
+import { Link, IconButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs/formik'
 import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
 import { H4 } from 'src/components/typography'
@@ -70,11 +70,11 @@ const BooleanPropertiesTable = memo(
                   </Link>
                 </div>
               ) : (
-                <div className={classes.transparentButton}>
-                  <button disabled={disabled} onClick={() => setEditing(true)}>
-                    {disabled ? <EditIconDisabled /> : <EditIcon />}
-                  </button>
-                </div>
+                <IconButton
+                  className={classes.transparentButton}
+                  onClick={() => setEditing(true)}>
+                  {disabled ? <EditIconDisabled /> : <EditIcon />}
+                </IconButton>
               )}
             </div>
             <PromptWhenDirty />

new-lamassu-admin/src/components/buttons/IconButton.js

@@ -1,6 +1,8 @@
 import { makeStyles, IconButton as IconB } from '@material-ui/core'
 import React from 'react'
 
+import { comet } from 'src/styling/variables'
+
 const styles = {
   label: ({ size }) => ({
     width: size,
@@ -12,6 +14,15 @@ const styles = {
     },
     '&:hover': {
       backgroundColor: 'inherit'
+    },
+    '&:hover rect': {
+      stroke: comet
+    },
+    '&:hover polygon': {
+      stroke: comet
+    },
+    '&:hover path': {
+      stroke: comet
     }
   }
 }

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js

@@ -9,7 +9,7 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { Link } from 'src/components/buttons'
+import { Link, IconButton } from 'src/components/buttons'
 import Switch from 'src/components/inputs/base/Switch'
 import { TextInput } from 'src/components/inputs/formik'
 import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
@@ -210,11 +210,11 @@ const ContactInfo = ({ wizard }) => {
         <div className={classes.rowWrapper}>
           <H4>Info card</H4>
           {!editing && (
-            <div className={classes.transparentButton}>
-              <button onClick={() => setEditing(true)}>
-                <EditIcon />
-              </button>
-            </div>
+            <IconButton
+              className={classes.transparentButton}
+              onClick={() => setEditing(true)}>
+              <EditIcon />
+            </IconButton>
           )}
         </div>
         <Formik

new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js

@@ -7,16 +7,18 @@ const { p } = typographyStyles
 const styles = {
   header: {
     display: 'flex',
-    '& > p': {
-      marginTop: 0
+    alignItems: 'center',
+    position: 'relative',
+    flex: 'wrap'
+  },
+  transparentButton: {
+    '& > *': {
+      margin: 'auto 12px'
     },
-    '& > div': {
-      marginLeft: 20,
-      '& > button': {
-        border: 'none',
-        backgroundColor: 'transparent',
-        cursor: 'pointer'
-      }
+    '& button': {
+      border: 'none',
+      backgroundColor: 'transparent',
+      cursor: 'pointer'
     }
   },
   section: {

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js

@@ -9,7 +9,7 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import { Link } from 'src/components/buttons'
+import { Link, IconButton } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import { TextInput } from 'src/components/inputs/formik'
 import { H4, Info2, Info3, Label2, Label3 } from 'src/components/typography'
@@ -190,11 +190,11 @@ const TermsConditions = () => {
         <div className={classes.header}>
           <Info2>Info card</Info2>
           {!editing && (
-            <div className={classes.transparentButton}>
-              <button onClick={() => setEditing(true)}>
-                <EditIcon />
-              </button>
-            </div>
+            <IconButton
+              className={classes.transparentButton}
+              onClick={() => setEditing(true)}>
+              <EditIcon />
+            </IconButton>
           )}
         </div>
         <Formik