Use darker color for 'arrow' icons

Applies to Dropdown component, Wizard Networks and Storage.

src/components/atoms/DropdownButton/DropdownButton.jsx

@@ -57,14 +57,14 @@ const getBackgroundColor = props => {
 }
 const getArrowColor = props => {
   if (props.disabled) {
-    return Palette.grayscale[0]
+    return Palette.grayscale[3]
   }
 
   if (props.primary) {
     return 'white'
   }
 
-  return Palette.grayscale[4]
+  return Palette.black
 }
 const getWidth = props => {
   if (props.large) {
@@ -118,8 +118,12 @@ const Wrapper = styled.div`
 const Arrow = styled.div`
   position: absolute;
   right: 8px;
-  top: 12px;
+  top: 8px;
   display: flex;
+  width: 16px;
+  height: 16px;
+  justify-content: center;
+  align-items: center;
 `
 type Props = {
   value: string,

src/components/atoms/DropdownButton/images/arrow.js

@@ -13,22 +13,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 const arrow = `<?xml version="1.0" encoding="UTF-8"?>
-  <svg width="12px" height="7px" viewBox="0 0 12 6" version="1.1" 
-  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
-      <title>Chevron-Grey</title>
-      <desc>Created with Sketch.</desc>
-      <defs></defs>
-      <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" 
-      stroke-linecap="round" stroke-linejoin="round">
-          <g id="dropdown-arrow-image" transform="translate(-171.000000, -13.000000)">
-              <g id="Icon/Chevron/Grey" transform="translate(169.000000, 8.000000)">
-                  <polyline id="Rectangle-Copy" transform="translate(8.000000, 5.500000) 
-                  rotate(-315.000000) translate(-8.000000, -5.500000) " 
-                  points="11.8890873 1.6109127 11.8890873 9.3890873 4.1109127 9.3890873"></polyline>
-              </g>
-          </g>
-      </g>
-  </svg>`
+<svg width="14px" height="8px" viewBox="0 0 14 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
+    <title>Chevron-Grey</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="dropdown-arrow-image" transform="translate(-1161.000000, -300.000000)" stroke-width="1.5">
+            <g id="Elements/Item/Wizard/Network-Copy-2" transform="translate(256.000000, 272.000000)">
+                <g id="Dropdown-Stroke-Copy-2" transform="translate(704.000000, 16.000000)">
+                    <g id="Icon/Chevron/Black" transform="translate(200.000000, 8.000000)">
+                        <polyline id="Rectangle-Copy" transform="translate(8.000000, 5.500000) rotate(-315.000000) translate(-8.000000, -5.500000) " points="11.8890873 1.6109127 11.8890873 9.3890873 4.1109127 9.3890873"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`
 
 export default arrow

src/components/organisms/WizardNetworks/images/arrow.svg

@@ -1,14 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="12px" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
-    <title>Arrow</title>
+<svg width="21px" height="14px" viewBox="0 0 21 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
+    <title>Arrow Copy 2</title>
     <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Wizard/04-Networks---List-Done" transform="translate(-711.000000, -250.000000)" stroke-width="1.5" stroke="#A4AAB5">
-            <g id="Icon/Arrow/Small" transform="translate(704.000000, 248.000000)">
-                <polyline id="Path-181-Copy-4" points="21 2.5 26 8 21 13.5"></polyline>
-                <path d="M7,8 L26,8" id="Line" transform="translate(16.500000, 8.000000) rotate(-180.000000) translate(-16.500000, -8.000000) "></path>
+    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Wizard/06-Storage" transform="translate(-710.000000, -297.000000)" stroke="#202234" stroke-width="1.5">
+            <g id="Elements/Item/Wizard/Network-Copy-2" transform="translate(256.000000, 272.000000)">
+                <g id="Icon/Arrow/Small-Black" transform="translate(448.000000, 24.000000)">
+                    <polyline id="Path-181-Copy-4" stroke-linejoin="round" points="21 2.5 26 8 21 13.5"></polyline>
+                    <path d="M7,8 L26,8" id="Line" transform="translate(16.500000, 8.000000) rotate(-180.000000) translate(-16.500000, -8.000000) "></path>
+                </g>
             </g>
         </g>
     </g>

src/components/organisms/WizardStorage/images/arrow.svg

@@ -1,15 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="12px" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
-    <title>Arrow</title>
+<svg width="21px" height="14px" viewBox="0 0 21 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
+    <title>Arrow Copy 2</title>
     <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Wizard/04-Networks---List-Done" transform="translate(-711.000000, -250.000000)" stroke-width="1.5" stroke="#A4AAB5">
-            <g id="Icon/Arrow/Small" transform="translate(704.000000, 248.000000)">
-                <polyline id="Path-181-Copy-4" points="21 2.5 26 8 21 13.5"></polyline>
-                <path d="M7,8 L26,8" id="Line" transform="translate(16.500000, 8.000000) rotate(-180.000000) translate(-16.500000, -8.000000) "></path>
+    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Wizard/06-Storage" transform="translate(-710.000000, -297.000000)" stroke="#202234" stroke-width="1.5">
+            <g id="Elements/Item/Wizard/Network-Copy-2" transform="translate(256.000000, 272.000000)">
+                <g id="Icon/Arrow/Small-Black" transform="translate(448.000000, 24.000000)">
+                    <polyline id="Path-181-Copy-4" stroke-linejoin="round" points="21 2.5 26 8 21 13.5"></polyline>
+                    <path d="M7,8 L26,8" id="Line" transform="translate(16.500000, 8.000000) rotate(-180.000000) translate(-16.500000, -8.000000) "></path>
+                </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>