icon: using svg component for the logo

6 files changed, 48 insertions, 23 deletions

diff --git a/src/components/ErrorBoundaryFallback.js b/src/components/ErrorBoundaryFallback.js
index 5f15f4f..295d458 100644
--- a/src/components/ErrorBoundaryFallback.js
+++ b/src/components/ErrorBoundaryFallback.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Icon from 'c/Icon';
-import yacd from 's/yacd.svg';
+import SvgYacd from './SvgYacd';
 import github from 's/github.svg';
 
 import s0 from './ErrorBoundaryFallback.module.scss';
@@ -10,7 +10,7 @@ function ErrorBoundaryFallback() {
   return (
     <div className={s0.root}>
       <div className={s0.yacd}>
-        <Icon id={yacd.id} width={150} height={150} />
+        <SvgYacd width={150} height={150} />
       </div>
       <h1>Oops, something went wrong!</h1>
       <p>
diff --git a/src/components/Logs.js b/src/components/Logs.js
index 424765a..8fba941 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { useStoreState, useActions } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
 
-import Icon from 'c/Icon';
+import SvgYacd from './SvgYacd';
 import { FixedSizeList as List, areEqual } from 'react-window';
 import ContentHeader from 'c/ContentHeader';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
@@ -13,8 +13,6 @@ import { fetchLogs } from '../api/logs';
 import LogSearch from './LogSearch';
 import { getLogsForDisplay, appendLog } from 'd/logs';
 
-import yacd from 's/yacd.svg';
-
 import s0 from 'c/Logs.module.scss';
 const paddingBottom = 30;
 const colors = {
@@ -69,12 +67,9 @@ export default function Logs() {
   const { appendLog } = useActions(actions);
   const logs = useStoreState(getLogsForDisplay);
 
-  useEffect(
-    () => {
-      fetchLogs({ hostname, port, secret }, appendLog);
-    },
-    [hostname, port, secret]
-  );
+  useEffect(() => {
+    fetchLogs({ hostname, port, secret }, appendLog);
+  }, [hostname, port, secret]);
   const [refLogsContainer, containerHeight] = useRemainingViewPortHeight();
 
   return (
@@ -88,7 +83,7 @@ export default function Logs() {
             style={{ height: containerHeight - paddingBottom }}
           >
             <div className={s0.logPlaceholderIcon}>
-              <Icon id={yacd.id} width={200} height={200} />
+              <SvgYacd width={200} height={200} />
             </div>
             <div>No logs yet, hang tight...</div>
           </div>
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 792ce6f..2da6c1e 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -8,9 +8,9 @@ import { switchTheme } from 'd/app';
 
 import Icon from 'c/Icon';
 
-import yacd from 's/yacd.svg';
 import moon from 's/moon.svg';
 
+import SvgYacd from './SvgYacd';
 import SvgActivity from './SvgActivity';
 import SvgGlobe from './SvgGlobe';
 import SvgCommand from './SvgCommand';
@@ -66,7 +66,7 @@ function SideBar({ location }) {
         rel="noopener noreferrer"
       >
         <div className={s.logo}>
-          <Icon id={yacd.id} width={80} height={80} />
+          <SvgYacd width={80} height={80} />
         </div>
       </a>
 
diff --git a/src/components/SvgYacd.js b/src/components/SvgYacd.js
new file mode 100644
index 0000000..dfeada1
--- /dev/null
+++ b/src/components/SvgYacd.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function SvgYacd({ width = 320, height = 320 }) {
+  // fill="#2A477A"
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 320 320"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="none" fillRule="evenodd">
+        {/* face */}
+        <path
+          d="M71.689 53.055c9.23-1.487 25.684 27.263 41.411 56.663 18.572-8.017 71.708-7.717 93.775 0 4.714-15.612 31.96-57.405 41.626-56.663 3.992.088 13.07 31.705 23.309 94.96 2.743 16.949 7.537 47.492 14.38 91.63-42.339 17.834-84.37 26.751-126.095 26.751-41.724 0-83.756-8.917-126.095-26.751C52.973 116.244 65.536 54.047 71.689 53.055z"
+          stroke="#EEE"
+          strokeWidth="5"
+          fill="currentColor"
+        />
+        <circle fill="#EEE" cx="216.5" cy="181.5" r="14.5" />
+        <circle fill="#EEE" cx="104.553" cy="181.553" r="14.553" />
+        {/* mouth */}
+        <g stroke="#EEE" strokeLinecap="round" strokeWidth="4">
+          <path d="M175.568 218.694c-2.494 1.582-5.534 2.207-8.563 1.508-3.029-.7-5.487-2.594-7.035-5.11M143.981 218.694c2.494 1.582 5.534 2.207 8.563 1.508 3.03-.7 5.488-2.594 7.036-5.11" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+SvgYacd.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number
+};
+
+export default SvgYacd;
diff --git a/src/components/TrafficChart.js b/src/components/TrafficChart.js
index d52c9ae..84773c8 100644
--- a/src/components/TrafficChart.js
+++ b/src/components/TrafficChart.js
@@ -63,7 +63,7 @@ const commonDataSetProps = {
 };
 
 function getColorComboIndexByTheme(theme) {
-  return theme === 'dark' ? 1 : 2;
+  return theme === 'dark' ? 0 : 2;
 }
 
 function getUploadProps(theme = 'dark') {
diff --git a/src/svg/yacd.svg b/src/svg/yacd.svg
deleted file mode 100644
index b8be1ab..0000000
--- a/src/svg/yacd.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd">
-    <path d="M68.142 52.056c9.396-1.515 29.798 27.762 45.809 57.699 18.907-8.164 75.199-7.859 97.664 0 4.799-15.898 28.706-58.455 38.546-57.699 4.065.09 13.145 32.285 23.568 96.695 2.793 17.259 6.883 48.36 12.271 93.305C245.489 260.019 203.995 269 161.518 269c-42.477 0-84.983-8.981-127.518-26.944 16.497-125.657 27.878-188.99 34.142-190z" stroke="#EEE" stroke-width="5" fill="currentColor"/>
-    <circle stroke="#EEE" fill="#EEE" cx="226" cy="184" r="15"/>
-    <circle stroke="#EEE" fill="#EEE" cx="103" cy="184" r="15"/>
-    <path d="M163 214.042c2.067 0 4.637 6.54 10.108 6.54 4.567.16 5.383-1.65 7.074-1.677 1.656 0 1.818 1.174 1.818 1.677.027 2.166-5.347 3.686-8.349 3.418-7.475.101-9.703-5.451-10.651-5.451-.91 0-3.833 5.451-10.194 5.451-7.143-.113-8.799-1.471-8.799-3.099.01-.783.802-1.54 1.685-1.505 1.39-.041 4.576 1.027 7.35 1.038 3.585-.016 8.163-6.392 9.958-6.392z" fill="#FFF"/>
-  </g>
-</svg>