From 2a9de5ea106d3fd1f966dfe2c8cf8a34fa4193d1 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 31 Mar 2019 00:08:46 +0800
Subject: icon: using svg component for the logo

---
 src/components/ErrorBoundaryFallback.js |  4 ++--
 src/components/Logs.js                  | 15 +++++--------
 src/components/SideBar.js               |  4 ++--
 src/components/SvgYacd.js               | 38 +++++++++++++++++++++++++++++++++
 src/components/TrafficChart.js          |  2 +-
 5 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 src/components/SvgYacd.js

(limited to 'src/components')

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') {
-- 
cgit v1.3.1