feat: better toolbox icons color

singuerinc · Oct 8, 2018 · a910ea1 · a910ea1
1 parent 42b0adf
commit a910ea1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/app/components/miniToolbox/MiniToolboxIcon.tsx b/app/components/miniToolbox/MiniToolboxIcon.tsx
@@ -2,12 +2,22 @@ import * as React from 'react';
 import { icons } from 'feather-icons';
 import styled from 'styled-components';
 
-const Wrapper = styled.span`
+const Wrapper = styled.span<{ active: boolean }>`
   display: flex;
+  svg {
+    stroke: ${({ active }) => (active ? 'white !important' : '#202A2D')};
+  }
 `;
 
-export const MiniToolboxIcon = ({ icon }: { icon: string }) => (
+export const MiniToolboxIcon = ({
+  icon,
+  active = false
+}: {
+  icon: string;
+  active?: boolean;
+}) => (
   <Wrapper
+    active={active}
     dangerouslySetInnerHTML={{
       __html: icons[icon].toSvg()
     }}

diff --git a/app/components/miniToolbox/MiniToolboxItem.tsx b/app/components/miniToolbox/MiniToolboxItem.tsx
@@ -5,7 +5,7 @@ import Tooltip from 'tooltip.js';
 injectGlobal`
   .tooltip {
     position: absolute;
-    background: #111;
+    background: #030F12;
     color: #eee;
     width: auto;
     border-radius: 3px;
@@ -47,18 +47,20 @@ injectGlobal`
 `;
 
 export const Element = styled.li`
-  background-color: #111;
+  background-color: #111111;
   color: #f4f4f4;
   display: inline-block;
   text-align: center;
   justify-content: center;
   padding: 6px 8px;
   margin: 0;
-  transition: background-color 300ms ease;
+  transition: background-color 100ms ease;
 
   &:hover {
     cursor: pointer;
-    background-color: #333;
+    svg {
+      stroke: #999;
+    }
   }
 `;
 

diff --git a/app/components/toolbox/ToolboxItemDumb.tsx b/app/components/toolbox/ToolboxItemDumb.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const ToolboxItemDumb = styled.li`
-  background-color: #333;
+  background-color: #111;
   display: flex;
   flex: 1 1 auto;
   text-align: center;