From e9a45042e4c04e18afed823fa81b29f6cc57812e Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 27 Mar 2018 13:05:18 +0300
Subject: [PATCH] Define svg colors in css

---
 src/components/FieldCheckbox/FieldCheckbox.js    |  1 -
 src/components/Logo/IconLogo.js                  |  1 -
 src/components/Logo/Logo.css                     |  7 +++++++
 src/components/Logo/Logo.js                      |  7 +++++--
 src/containers/CheckoutPage/CheckoutPage.css     |  4 ++++
 src/containers/CheckoutPage/LogoIcon.js          |  1 -
 src/containers/PasswordRecoveryPage/DoorIcon.css | 10 ++++++++++
 src/containers/PasswordRecoveryPage/DoorIcon.js  | 10 +++++-----
 8 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Logo/Logo.css
 create mode 100644 src/containers/PasswordRecoveryPage/DoorIcon.css

diff --git a/src/components/FieldCheckbox/FieldCheckbox.js b/src/components/FieldCheckbox/FieldCheckbox.js
index a1231c2d..aeb92a2f 100644
--- a/src/components/FieldCheckbox/FieldCheckbox.js
+++ b/src/components/FieldCheckbox/FieldCheckbox.js
@@ -12,7 +12,6 @@ const IconCheckbox = props => {
         <g transform="translate(2 2)">
           <path
             className={css.checked}
-            fill="#C0392B"
             d="M9.9992985 1.5048549l-.0194517 6.9993137C9.977549 9.3309651 9.3066522 10 8.4798526 10H1.5001008c-.8284271 0-1.5-.6715729-1.5-1.5l-.000121-7c0-.8284271.6715728-1.5 1.5-1.5h.000121l6.9993246.0006862c.8284272.000067 1.4999458.671694 1.499879 1.5001211a1.5002208 1.5002208 0 0 1-.0000059.0040476z"
           />
           <path
diff --git a/src/components/Logo/IconLogo.js b/src/components/Logo/IconLogo.js
index bf090fce..149c5eae 100644
--- a/src/components/Logo/IconLogo.js
+++ b/src/components/Logo/IconLogo.js
@@ -15,7 +15,6 @@ const IconLogo = props => {
     >
       <path
         d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-        fill="#C0392B"
         fillRule="evenodd"
       />
     </svg>
diff --git a/src/components/Logo/Logo.css b/src/components/Logo/Logo.css
new file mode 100644
index 00000000..8bde39bc
--- /dev/null
+++ b/src/components/Logo/Logo.css
@@ -0,0 +1,7 @@
+@import '../../marketplace.css';
+
+.logoMobile {
+  & path {
+    fill: var(--marketplaceColor);
+  }
+}
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
index bf9582d3..743d2e96 100644
--- a/src/components/Logo/Logo.js
+++ b/src/components/Logo/Logo.js
@@ -1,18 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import config from '../../config';
+import classNames from 'classnames';
 
+import config from '../../config';
 import IconLogo from './IconLogo';
 import LogoImage from './saunatime-logo.png';
+import css from './Logo.css';
 
 const Logo = props => {
   const { className, format, ...rest } = props;
+  const mobileClasses = classNames(css.logoMobile, className);
 
   if (format === 'desktop') {
     return <img className={className} src={LogoImage} alt={config.siteTitle} {...rest} />;
   }
 
-  return <IconLogo className={className} {...rest} />;
+  return <IconLogo className={mobileClasses} {...rest} />;
 };
 
 const { oneOf, string } = PropTypes;
diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css
index eddd8716..a1a6886b 100644
--- a/src/containers/CheckoutPage/CheckoutPage.css
+++ b/src/containers/CheckoutPage/CheckoutPage.css
@@ -45,6 +45,10 @@
 .logoMobile {
   display: block;
 
+  & path {
+    fill: var(--marketplaceColor);
+  }
+
   @media (--viewportLarge) {
     display: none;
   }
diff --git a/src/containers/CheckoutPage/LogoIcon.js b/src/containers/CheckoutPage/LogoIcon.js
index 15424b7a..c07df269 100644
--- a/src/containers/CheckoutPage/LogoIcon.js
+++ b/src/containers/CheckoutPage/LogoIcon.js
@@ -16,7 +16,6 @@ const LogoIcon = props => {
       >
         <path
           d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-          fill="#C0392B"
           fillRule="evenodd"
         />
       </svg>
diff --git a/src/containers/PasswordRecoveryPage/DoorIcon.css b/src/containers/PasswordRecoveryPage/DoorIcon.css
new file mode 100644
index 00000000..471c5840
--- /dev/null
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.css
@@ -0,0 +1,10 @@
+@import '../../marketplace.css';
+
+.stroke {
+  stroke: var(--marketplaceColor);
+}
+
+.strokeAndFill {
+  stroke: var(--marketplaceColor);
+  fill: var(--marketplaceColor);
+}
diff --git a/src/containers/PasswordRecoveryPage/DoorIcon.js b/src/containers/PasswordRecoveryPage/DoorIcon.js
index 6281f9de..4bbf3b85 100644
--- a/src/containers/PasswordRecoveryPage/DoorIcon.js
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import css from './DoorIcon.css';
 
 const DoorIcon = props => {
   const { className } = props;
@@ -13,15 +14,14 @@ const DoorIcon = props => {
     >
       <g strokeWidth="2.5" fill="none" fillRule="evenodd" strokeLinejoin="round">
         <path
-          stroke="#C0392B"
-          fill="#C0392B"
+          className={css.strokeAndFill}
           strokeLinecap="round"
           d="M28.182 42.364H50V26H28.182z"
         />
         <path d="M39.09 38v-4.364" stroke="#FFF" strokeLinecap="round" />
         <path
+          className={css.stroke}
           d="M31.455 26v-2.455c0-4.067 3.176-7.363 7.09-7.363 3.915 0 7.09 3.296 7.09 7.363V26"
-          stroke="#C0392B"
           strokeLinecap="round"
         />
         <path
@@ -29,13 +29,13 @@ const DoorIcon = props => {
           stroke="#FFF"
         />
         <path
-          stroke="#C0392B"
+          className={css.stroke}
           strokeLinecap="round"
           d="M23.818 7.455h19.637V14M43.455 47.818v4.364H23.818M2 52.798l21.818 4.838V2L2 6.838z"
         />
         <path
+          className={css.stroke}
           d="M19.455 30.91c0 2.107-1.71 3.817-3.82 3.817-2.106 0-3.817-1.71-3.817-3.818 0-2.11 1.71-3.82 3.818-3.82s3.82 1.71 3.82 3.82z"
-          stroke="#C0392B"
           strokeLinecap="round"
         />
       </g>