From e9a45042e4c04e18afed823fa81b29f6cc57812e Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 27 Mar 2018 13:05:18 +0300 Subject: [PATCH 1/3] 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 => { { > 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 {config.siteTitle}; } - return ; + return ; }; 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 => { > 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 => { > { stroke="#FFF" /> From 4ed729a17dfbcdaa4c81853ed42d32d31bb63072 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 27 Mar 2018 14:06:25 +0300 Subject: [PATCH 2/3] Define inline svg color in css --- src/components/TabNav/TabNav.css | 4 ++-- src/marketplace.css | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css index d75f0318..ad2e1be2 100644 --- a/src/components/TabNav/TabNav.css +++ b/src/components/TabNav/TabNav.css @@ -41,7 +41,7 @@ border-bottom-color: transparent; transition: var(--transitionStyleButton); - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */ &:hover { @@ -59,7 +59,7 @@ margin-top: 0; &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: right center; } } diff --git a/src/marketplace.css b/src/marketplace.css index d29cbc65..57ec63b3 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -51,6 +51,9 @@ --matterColorLightTransparent: rgba(255, 255, 255, 0.65); + /* Used with inline CSS SVGs */ + --marketplaceColorEncoded: %23c0392b; + /* ================ Spacing unites ================ */ /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */ From ed1559f52391fbe5eb45a022b2bff699eb26ffa3 Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Mon, 2 Apr 2018 10:02:16 +0300 Subject: [PATCH 3/3] Update docs Add a notion about the encoded color value. --- docs/colors-and-icons.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/colors-and-icons.md b/docs/colors-and-icons.md index 7a061d3b..c1cbaa3e 100644 --- a/docs/colors-and-icons.md +++ b/docs/colors-and-icons.md @@ -12,9 +12,13 @@ change the color variables: --marketplaceColorLight: #ff4c38; --marketplaceColorDark: #8c291e; ``` +and +```css +--marketplaceColorEncoded: %23c0392b; +``` -N.B. search also from files color code `c0392b`. Some icons and background-images with data-URL are -using it directly. +N.B. search also from files for the color code `c0392b`. It's used directly in a few places like +some icons, the 500 error page and map configurations. ## Icons