fix: machine status layout bugs

fix: reboot icon looks cropped

fix: confirm dialog layout

fix: Status chip background colors

fix: detailed machine status layout

fix: machine detailed status layout

fix: machine status article links, status chip size

fix: confirmDialog for all machine actions

fix: confirm dialog on every action. reload when success

fix: verbose input label

fix: display software version and machine model

fix: eslint fixes

fix: removed machine version and update button

fix: get machines statuses from ping

chore: removed the support articles until they're ready

fix: reset value and error states when closing the confirm dialog

fix: removed unused info from the machine table

styles: fixed styles in the machine details card

chore: moved styles to another file

fix: fixed the version gql property

new-lamassu-admin/src/components/Status.js

@@ -11,7 +11,8 @@ import {
   spring3,
   smallestFontSize,
   inputFontFamily,
-  spacer
+  spacer,
+  linen
 } from '../styling/variables'
 
 const colors = {
@@ -22,7 +23,7 @@ const colors = {
 
 const backgroundColors = {
   error: mistyRose,
-  warning: mistyRose,
+  warning: linen,
   success: spring3
 }
 
@@ -40,21 +41,15 @@ const useStyles = makeStyles({
     fontSize: smallestFontSize,
     fontWeight: inputFontWeight,
     fontFamily: inputFontFamily,
-    padding: [[spacer / 2, spacer]],
+    paddingRight: spacer / 2,
+    paddingLeft: spacer / 2,
     color: ({ type }) => colors[type]
   }
 })
 
-const Status = ({ status, className }) => {
+const Status = ({ status }) => {
   const classes = useStyles({ type: status.type })
-  return (
-    <Chip
-      type={status.type}
-      label={status.label}
-      className={className ?? null}
-      classes={classes}
-    />
-  )
+  return <Chip type={status.type} label={status.label} classes={classes} />
 }
 
 const MainStatus = ({ statuses }) => {
@@ -65,7 +60,7 @@ const MainStatus = ({ statuses }) => {
   const plus = { label: `+${statuses.length - 1}`, type: mainStatus.type }
 
   return (
-    <div style={{ marginLeft: -3 }}>
+    <div>
       <Status status={mainStatus} />
       {statuses.length > 1 && <Status status={plus} />}
     </div>