maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use marketplace colors in icons

Browse source
This commit is contained in:
Kimmo Puputti 2017-11-24 09:15:52 +02:00
parent 0cf33068d9
commit c093adb249
4 changed files with 36 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/IconKeys/IconKeys.css Normal file
View file

@ -0,0 +1,5 @@
@import '../../marketplace.css';
.strokeMarketplaceColor {
stroke: var(--marketplaceColor);
}

4
src/components/IconKeys/IconKeys.js
View file

@ -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

13
src/components/IconKeysSuccess/IconKeysSuccess.css Normal file
View file

@ -0,0 +1,13 @@
@import '../../marketplace.css';
.strokeMarketplaceColor {
stroke: var(--marketplaceColor);
}
.fillSuccessColor {
fill: var(--successColor);
}
.strokeLightColor {
stroke: var(--matterColorLight);
}

21
src/components/IconKeysSuccess/IconKeysSuccess.js
View file

@ -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"