refactor: remove accent color on sidebar icons

src/components/SvgActivity.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-function SvgActivity({ isActive }) {
+function SvgActivity() {
-  const stroke = isActive ? '#000' : 'currentColor';
   return (
     <svg
       width="28"
@@ -17,26 +15,10 @@ function SvgActivity({ isActive }) {
         strokeLinejoin="round"
         strokeWidth="2"
       >
-        <path
+        <path d="M24 14h-4l-3 9-6-18-3 9H4" stroke="currentColor" />
-          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' }}
-        />
       </g>
     </svg>
   );
 }
 
-SvgActivity.propTypes = {
-  isActive: PropTypes.bool
-};
-
 export default SvgActivity;

src/components/SvgCommand.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-export default function SvgCommand({ isActive }) {
+export default function SvgCommand() {
-  const stroke = isActive ? '#000' : 'currentColor';
   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}
+          stroke="currentColor"
-          style={{ transition: 'all 1s' }}
         />
       </g>
     </svg>
   );
 }
-
-SvgCommand.propTypes = {
-  isActive: PropTypes.bool
-};

src/components/SvgFile.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-export default function SvgFile({ isActive }) {
+export default function SvgFile() {
-  const stroke = isActive ? '#000' : 'currentColor';
   return (
     <svg
       width="28"
@@ -17,16 +15,7 @@ export default function SvgFile({ isActive }) {
         strokeLinejoin="round"
         strokeWidth="2"
       >
-        <path
+        <g stroke="currentColor">
-          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' }}>
           <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
-};

src/components/SvgGlobe.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-export default function SvgGlobe({ isActive }) {
+export default function SvgGlobe() {
-  const stroke = isActive ? '#000' : 'currentColor';
   return (
     <svg
       width="28"
@@ -17,23 +15,7 @@ export default function SvgGlobe({ isActive }) {
         strokeLinejoin="round"
         strokeWidth="2"
       >
-        <circle
+        <g transform="translate(4 4)" stroke="currentColor">
-          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' }}
-        >
           <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
-};

src/components/SvgSettings.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-export default function SvgSettings({ isActive }) {
+export default function SvgSettings() {
-  const stroke = isActive ? '#000' : 'currentColor';
   return (
     <svg
       width="28"
@@ -17,23 +15,7 @@ export default function SvgSettings({ isActive }) {
         strokeLinejoin="round"
         strokeWidth="2"
       >
-        <g
+        <g transform="translate(3 3)" stroke="currentColor">
-          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' }}
-        >
           <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
-};

src/index.template.ejs

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