From da7cc04268a1a6543cedcd0812935962842ce653 Mon Sep 17 00:00:00 2001
From: Liordino Neto <liordinoneto@gmail.com>
Date: Fri, 9 Oct 2020 17:18:15 -0300
Subject: [PATCH] fix: removed nested logic on css

---
 .../pages/Maintenance/MachineDetailsCard.js    |  5 +++--
 .../Maintenance/MachineDetailsCard.styles.js   | 18 +++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js
index 9f2ee18b..febfab8f 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js
+++ b/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}>
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
index c375d80a..00ac1ab8 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
+++ b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
@@ -35,15 +35,15 @@ const machineDetailsStyles = {
   list: {
     padding: 0,
     margin: 0,
-    listStyle: 'none',
-    '& > li': {
-      height: spacer * 3,
-      marginBottom: spacer * 1.5,
-      '& > a, & > a:visited': {
-        color: primaryColor,
-        textDecoration: 'none'
-      }
-    }
+    listStyle: 'none'
+  },
+  item: {
+    height: spacer * 3,
+    marginBottom: spacer * 1.5
+  },
+  link: {
+    color: primaryColor,
+    textDecoration: 'none'
   },
   divider: {
     margin: '0 1rem'