fix: removed nested logic on css

new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js

@@ -101,7 +101,7 @@ const MachineDetailsRow = ({ it: machine, onActionSuccess }) => {
               <Label>Statuses</Label>
               <ul className={classes.list}>
                 {machine.statuses.map((status, index) => (
-                  <li key={index}>
+                  <li className={classes.item} key={index}>
                     <Status status={status} />
                   </li>
                 ))}
@@ -113,8 +113,9 @@ const MachineDetailsRow = ({ it: machine, onActionSuccess }) => {
                 {machine.statuses
                   .map(article)
                   .map(({ label, article }, index) => (
-                    <li key={index}>
+                    <li className={classes.item} key={index}>
                       <a
+                        className={classes.link}
                         target="_blank"
                         rel="noopener noreferrer"
                         href={article}>

new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js

@@ -35,15 +35,15 @@ const machineDetailsStyles = {
   list: {
     padding: 0,
     margin: 0,
-    listStyle: 'none',
-    '& > li': {
+    listStyle: 'none'
+  },
+  item: {
     height: spacer * 3,
-      marginBottom: spacer * 1.5,
-      '& > a, & > a:visited': {
+    marginBottom: spacer * 1.5
+  },
+  link: {
     color: primaryColor,
     textDecoration: 'none'
-      }
-    }
   },
   divider: {
     margin: '0 1rem'