From c093adb249cfce99cd5cd294f0f0e3d1c83cae06 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Fri, 24 Nov 2017 09:15:52 +0200
Subject: [PATCH] Use marketplace colors in icons

---
 src/components/IconKeys/IconKeys.css          |  5 +++++
 src/components/IconKeys/IconKeys.js           |  4 +++-
 .../IconKeysSuccess/IconKeysSuccess.css       | 13 ++++++++++++
 .../IconKeysSuccess/IconKeysSuccess.js        | 21 +++++++++++++------
 4 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 src/components/IconKeys/IconKeys.css
 create mode 100644 src/components/IconKeysSuccess/IconKeysSuccess.css

diff --git a/src/components/IconKeys/IconKeys.css b/src/components/IconKeys/IconKeys.css
new file mode 100644
index 00000000..924e619b
--- /dev/null
+++ b/src/components/IconKeys/IconKeys.css
@@ -0,0 +1,5 @@
+@import '../../marketplace.css';
+
+.strokeMarketplaceColor {
+  stroke: var(--marketplaceColor);
+}
diff --git a/src/components/IconKeys/IconKeys.js b/src/components/IconKeys/IconKeys.js
index 0339b3e7..7bbc4a7b 100644
--- a/src/components/IconKeys/IconKeys.js
+++ b/src/components/IconKeys/IconKeys.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import css from './IconKeys.css';
+
 const IconKeys = props => {
   const { className } = props;
   return (
@@ -20,7 +22,7 @@ const IconKeys = props => {
         strokeLinecap="round"
         strokeLinejoin="round"
       >
-        <g transform="translate(-538.000000, -240.000000)" stroke="#C0392B">
+        <g className={css.strokeMarketplaceColor} transform="translate(-538.000000, -240.000000)">
           <g transform="translate(540.000000, 242.000000)">
             <g>
               <path
diff --git a/src/components/IconKeysSuccess/IconKeysSuccess.css b/src/components/IconKeysSuccess/IconKeysSuccess.css
new file mode 100644
index 00000000..6f45c0fc
--- /dev/null
+++ b/src/components/IconKeysSuccess/IconKeysSuccess.css
@@ -0,0 +1,13 @@
+@import '../../marketplace.css';
+
+.strokeMarketplaceColor {
+  stroke: var(--marketplaceColor);
+}
+
+.fillSuccessColor {
+  fill: var(--successColor);
+}
+
+.strokeLightColor {
+  stroke: var(--matterColorLight);
+}
diff --git a/src/components/IconKeysSuccess/IconKeysSuccess.js b/src/components/IconKeysSuccess/IconKeysSuccess.js
index dc6f086e..b88259ab 100644
--- a/src/components/IconKeysSuccess/IconKeysSuccess.js
+++ b/src/components/IconKeysSuccess/IconKeysSuccess.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './IconKeysSuccess.css';
 
 const IconKeysSuccess = props => {
   const { className } = props;
@@ -7,36 +10,42 @@ const IconKeysSuccess = props => {
     <svg className={className} width="52" height="60" xmlns="http://www.w3.org/2000/svg">
       <g transform="translate(2 2)" fill="none" fillRule="evenodd">
         <path
+          className={css.strokeMarketplaceColor}
           d="M25 19.6C25 12.6 19.4 7 12.5 7 5.5 7 0 12.7 0 19.6c0 5.8 3.8 10.7 9 12.2v2.8L7 37 9 39v2.3L7 43.8 9 46v3.5l3.5 3.5 3.4-3.5V31.8c5.2-1.5 9-6.4 9-12.2z"
-          stroke="#C0392B"
           strokeWidth="2.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
+          className={css.strokeMarketplaceColor}
           d="M16 15.5c0 2-1.6 3.5-3.5 3.5-2 0-3.5-1.6-3.5-3.5 0-2 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5z"
-          stroke="#C0392B"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
+          className={css.strokeMarketplaceColor}
           d="M16 33.5c4 2.2 8.6 2.2 12.5 0l2.5 2.2V39h3.5l1 1.3v3.4h3.2L41 46h5v-4.8L33.4 28.7c2.7-4.8 2-11-2-15-3-3-7-4-10.7-3.6"
-          stroke="#C0392B"
           strokeWidth="2.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
+          className={css.strokeMarketplaceColor}
           d="M13 15V4.6C13 2 15 0 17.5 0S22 2 22 4.6v5.2"
-          stroke="#C0392B"
           strokeWidth="2.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
-        <circle stroke="#FFF" strokeWidth="2" fill="#2ECC71" cx="35.5" cy="43.5" r="13.5" />
+        <circle
+          className={classNames(css.strokeLightColor, css.fillSuccessColor)}
+          strokeWidth="2"
+          cx="35.5"
+          cy="43.5"
+          r="13.5"
+        />
         <path
-          stroke="#FFF"
+          className={css.strokeLightColor}
           strokeWidth="2.5"
           strokeLinecap="round"
           strokeLinejoin="round"