From 589bdd5a11f9fa813f580d5959b3ac279ecd40a4 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 12 Aug 2020 10:25:41 -0300
Subject: [PATCH] :lipstick: update styling for dropdown with <IconButton />
 component

---
 client/components/Dropdown.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 5da1fe70..b0dfe0b2 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
     background-color: ${prop('Button.hover.background')};
     color: ${prop('Button.hover.foreground')};
 
-    & button, & a {
-      color: ${prop('Button.hover.foreground')};
-    }
+    * { color: ${prop('Button.hover.foreground')}; }
   }
 
   li {
@@ -48,17 +46,21 @@ const DropdownWrapper = styled.ul`
     align-items: center;
 
     & button,
+    & button span,
     & a {
       color: ${prop('primaryTextColor')};
       width: 100%;
       text-align: left;
+      justify-content: left;
       padding: ${remSize(8)} ${remSize(16)};
     }
+
+    & button span { padding: 0px }
   }
 `;
 
 // TODO: Add Icon to the left of the items in the menu
-const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
+// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
 
 const Dropdown = ({ items, align }) => (
   <DropdownWrapper align={align} >
@@ -67,7 +69,7 @@ const Dropdown = ({ items, align }) => (
       title, icon, href, action
     }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
-        {MaybeIcon(icon, `Navigate to ${title}`)}
+        {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
         {href
           ? <IconButton to={href}>{title}</IconButton>
           : <IconButton onClick={() => action()}>{title}</IconButton>}