refactor: remove accent color on sidebar icons
This commit is contained in:
parent
6b9635875b
commit
8d6c588913
6 changed files with 11 additions and 104 deletions
|
@ -1,8 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
function SvgActivity({ isActive }) {
|
||||
const stroke = isActive ? '#000' : 'currentColor';
|
||||
function SvgActivity() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
|
@ -17,26 +15,10 @@ function SvgActivity({ isActive }) {
|
|||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
d="M22 17h-4l-3 9L9 8l-3 9H2"
|
||||
stroke="#E1293E"
|
||||
style={{
|
||||
transition: 'all 1s',
|
||||
opacity: isActive ? '1' : '0'
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M24 14h-4l-3 9-6-18-3 9H4"
|
||||
stroke={stroke}
|
||||
style={{ transition: 'all 1s' }}
|
||||
/>
|
||||
<path d="M24 14h-4l-3 9-6-18-3 9H4" stroke="currentColor" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
SvgActivity.propTypes = {
|
||||
isActive: PropTypes.bool
|
||||
};
|
||||
|
||||
export default SvgActivity;
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function SvgCommand({ isActive }) {
|
||||
const stroke = isActive ? '#000' : 'currentColor';
|
||||
export default function SvgCommand() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
|
@ -17,25 +15,11 @@ export default function SvgCommand({ isActive }) {
|
|||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
d="M17 7a3 3 0 0 0-3 3v12a3 3 0 1 0 3-3H5a3 3 0 1 0 3 3V10a3 3 0 1 0-3 3h12a3 3 0 0 0 0-6z"
|
||||
fill="#75B24B"
|
||||
stroke="#75B24B"
|
||||
style={{
|
||||
transition: 'all 1s',
|
||||
opacity: isActive ? '1' : '0'
|
||||
}}
|
||||
/>
|
||||
<path
|
||||
d="M20 5a3 3 0 0 0-3 3v12a3 3 0 1 0 3-3H8a3 3 0 1 0 3 3V8a3 3 0 1 0-3 3h12a3 3 0 0 0 0-6z"
|
||||
stroke={stroke}
|
||||
style={{ transition: 'all 1s' }}
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
SvgCommand.propTypes = {
|
||||
isActive: PropTypes.bool
|
||||
};
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function SvgFile({ isActive }) {
|
||||
const stroke = isActive ? '#000' : 'currentColor';
|
||||
export default function SvgFile() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
|
@ -17,16 +15,7 @@ export default function SvgFile({ isActive }) {
|
|||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
d="M13 6H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V12l-6-6z"
|
||||
fill="#F29632"
|
||||
stroke="#F29632"
|
||||
style={{
|
||||
transition: 'all 1s',
|
||||
opacity: isActive ? '1' : '0'
|
||||
}}
|
||||
/>
|
||||
<g stroke={stroke} style={{ transition: 'all 1s' }}>
|
||||
<g stroke="currentColor">
|
||||
<path d="M16 4H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10l-6-6z" />
|
||||
<path d="M16 4v6h6M18 15h-8M18 19h-8M12 11h-2" />
|
||||
</g>
|
||||
|
@ -34,7 +23,3 @@ export default function SvgFile({ isActive }) {
|
|||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
SvgFile.propTypes = {
|
||||
isActive: PropTypes.bool
|
||||
};
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function SvgGlobe({ isActive }) {
|
||||
const stroke = isActive ? '#000' : 'currentColor';
|
||||
export default function SvgGlobe() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
|
@ -17,23 +15,7 @@ export default function SvgGlobe({ isActive }) {
|
|||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="10"
|
||||
transform="translate(2 6)"
|
||||
fill="#FFCB33"
|
||||
stroke="#FFCB33"
|
||||
style={{
|
||||
transition: 'all 1s',
|
||||
opacity: isActive ? '1' : '0'
|
||||
}}
|
||||
/>
|
||||
<g
|
||||
transform="translate(4 4)"
|
||||
stroke={stroke}
|
||||
style={{ transition: 'all 1s' }}
|
||||
>
|
||||
<g transform="translate(4 4)" stroke="currentColor">
|
||||
<circle cx="10" cy="10" r="10" />
|
||||
<path d="M0 10h20M10 0a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||
</g>
|
||||
|
@ -41,7 +23,3 @@ export default function SvgGlobe({ isActive }) {
|
|||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
SvgGlobe.propTypes = {
|
||||
isActive: PropTypes.bool
|
||||
};
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function SvgSettings({ isActive }) {
|
||||
const stroke = isActive ? '#000' : 'currentColor';
|
||||
export default function SvgSettings() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
|
@ -17,23 +15,7 @@ export default function SvgSettings({ isActive }) {
|
|||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<g
|
||||
transform="translate(1 4)"
|
||||
fill="#47A7EB"
|
||||
stroke="#47A7EB"
|
||||
style={{
|
||||
transition: 'all 1s',
|
||||
opacity: isActive ? '1' : '0'
|
||||
}}
|
||||
>
|
||||
<circle cx="11" cy="11" r="3" />
|
||||
<path d="M18.4 14a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V20a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 18.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 3.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V8c.26.604.852.997 1.51 1H20a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(3 3)"
|
||||
stroke={stroke}
|
||||
style={{ transition: 'all 1s' }}
|
||||
>
|
||||
<g transform="translate(3 3)" stroke="currentColor">
|
||||
<circle cx="11" cy="11" r="3" />
|
||||
<path d="M18.4 14a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V20a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 18.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 3.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V8c.26.604.852.997 1.51 1H20a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</g>
|
||||
|
@ -41,7 +23,3 @@ export default function SvgSettings({ isActive }) {
|
|||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
SvgSettings.propTypes = {
|
||||
isActive: PropTypes.bool
|
||||
};
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="theme-color" content="#202020">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="prefetch" href="https://cdn.jsdelivr.net/npm/@hsjs/fonts@0.0.1/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2">
|
||||
<link href="https://fonts.loli.net/css?family=Merriweather+Sans:400,700&display=swap" rel="stylesheet">
|
||||
<link rel="prefetch" href="https://fonts.loli.net/css?family=Merriweather+Sans:400,700&display=swap" rel="stylesheet">
|
||||
<meta property="og:image" content="https://user-images.githubusercontent.com/1166872/47304841-536f3d80-d65a-11e8-8908-1917127dafc5.png">
|
||||
<meta property="og:site_name" content="yacd">
|
||||
<meta property="og:type" content="object">
|
||||
|
|
Loading…
Reference in a new issue