refactor: update proxy page proxy item display style

also list proxies in "GLOBAL" group which fixes #74

6 files changed, 39 insertions, 67 deletions

diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index 57f3657..008cc30 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -1,23 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { useStoreState } from 'm/store';
 
-import Icon from 'c/Icon';
 import ProxyLatency from 'c/ProxyLatency';
 
-import globe from 's/globe.svg';
-import ss from 's/ss.svg';
-import vmess from 's/vmess.svg';
-import auto from 's/auto.svg';
-import fallback from 's/fallback.svg';
-import direct from 's/direct.svg';
-import http from 's/http.svg';
-import group from 's/group.svg';
-
 import s0 from './Proxy.module.css';
 
 import { getDelay, getProxies } from 'd/proxies';
 
+/*
 const colors = {
   Direct: '#408b43',
   Fallback: '#3483e8',
@@ -28,18 +20,7 @@ const colors = {
   URLTest: '#3483e8',
   Http: '#d3782d'
 };
-
-const icons = {
-  Direct: direct.id,
-  Fallback: fallback.id,
-  // TOOD Reject
-  Selector: group.id,
-  Shadowsocks: ss.id,
-  Socks5: globe.id,
-  Http: http.id,
-  URLTest: auto.id,
-  Vmess: vmess.id
-};
+*/
 
 const mapStateToProps = s => {
   return {
@@ -52,16 +33,14 @@ function Proxy({ now, name }) {
   const { proxies, delay } = useStoreState(mapStateToProps);
   const latency = delay[name];
   const proxy = proxies[name];
-  const color = now ? colors[proxy.type] : '#555';
-  const iconId = icons[proxy.type];
 
   return (
-    <div className={s0.proxy}>
-      <div className={s0.iconWrapper} style={{ color }}>
-        <Icon id={iconId} width={70} height={70} />
+    <div className={cx(s0.proxy, { [s0.now]: now })}>
+      <div className={s0.proxyName}>{name}</div>
+      <div className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
+        {proxy.type}
       </div>
-      <div className={s0.proxyDetail}>
-        <div className={s0.proxyName}>{name}</div>
+      <div className={s0.proxyLatencyWrap}>
         {latency ? <ProxyLatency latency={latency} /> : null}
       </div>
     </div>
diff --git a/src/components/Proxy.module.css b/src/components/Proxy.module.css
index df6fcae..03f8b2e 100644
--- a/src/components/Proxy.module.css
+++ b/src/components/Proxy.module.css
@@ -1,32 +1,28 @@
 .proxy {
   position: relative;
-  height: 90px;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: var(--color-bg-proxy-selected);
+  &.now {
+    background-color: var(--color-focus-blue);
+    color: #ddd;
+  }
 }
 
-.iconWrapper {
-  position: absolute;
-  bottom: 0;
-  left: 20%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.proxyDetail {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
+.proxyType {
+  font-family: var(--font-mono);
 }
 
 .proxyName {
   width: 100%;
-  padding-right: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 10px 0;
+  margin-bottom: 5px;
   font-size: 1.1em;
 }
+
+.proxyLatencyWrap {
+  height: 30px;
+  display: flex;
+  align-items: flex-end;
+}
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index a0d6da9..337b09b 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useActions, useStoreState } from 'm/store';
@@ -13,20 +13,11 @@ const mapStateToProps = s => ({
   proxies: getProxies(s)
 });
 
-// should move this to sth like constants.js
-// const userProxyTypes = ['Shadowsocks', 'Vmess', 'Socks5'];
 export default function ProxyGroup({ name }) {
   const { proxies } = useStoreState(mapStateToProps);
   const actions = useActions({ switchProxy });
   const group = proxies[name];
-  const { all, now } = group;
-  const list = useMemo(() => {
-    const a = now ? [now] : [];
-    if (all) {
-      all.forEach(i => i !== now && a.push(i));
-    }
-    return a;
-  }, [all, now]);
+  const { all } = group;
 
   return (
     <div className={s0.group}>
@@ -37,7 +28,7 @@ export default function ProxyGroup({ name }) {
         </h2>
       </div>
       <div className={s0.list}>
-        {list.map(proxyName => {
+        {all.map(proxyName => {
           const isSelectable = group.type === 'Selector';
           const proxyClassName = cx(s0.proxy, {
             [s0.proxySelectable]: isSelectable
diff --git a/src/components/ProxyGroup.module.css b/src/components/ProxyGroup.module.css
index ec52279..a7cce49 100644
--- a/src/components/ProxyGroup.module.css
+++ b/src/components/ProxyGroup.module.css
@@ -17,13 +17,15 @@
 }
 
 .proxy {
-  width: 300px;
-  padding: 10px 5px;
+  max-width: 280px;
+  min-width: 150px;
+  margin: 10px;
   transition: transform 0.2s ease-in-out;
+
   &.proxySelectable {
     cursor: pointer;
     &:hover {
-      transform: scale(1.1);
+      transform: translateY(-2px);
     }
   }
 }
diff --git a/src/components/ProxyLatency.module.css b/src/components/ProxyLatency.module.css
index aee0864..bfd856b 100644
--- a/src/components/ProxyLatency.module.css
+++ b/src/components/ProxyLatency.module.css
@@ -1,6 +1,5 @@
 .proxyLatency {
   border-radius: 20px;
-  margin: 10px 0;
   padding: 3px 0;
   color: #eee;
 }
diff --git a/src/components/Root.css b/src/components/Root.css
index f7c3ab3..c08c538 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -59,6 +59,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  --font-mono: 'Roboto Mono', Menlo, monospace;
+  --color-focus-blue: #1a73e8;
+}
+
 body {
   font-family: 'Merriweather Sans', -apple-system, BlinkMacSystemFont, Segoe UI,
     Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
@@ -66,8 +71,6 @@ body {
     sans-serif;
   margin: 0;
   padding: 0;
-
-  --color-focus-blue: #1a73e8;
 }
 
 body,
@@ -84,6 +87,7 @@ body.dark {
   --color-icon: #c7c7c7;
   --color-btn-bg: #232323;
   --color-btn-fg: #bebebe;
+  --color-bg-proxy-selected: #303030;
 }
 
 body.light {
@@ -99,4 +103,5 @@ body.light {
   --color-icon: #5b5b5b;
   --color-btn-bg: #f4f4f4;
   --color-btn-fg: #101010;
+  --color-bg-proxy-selected: #cfcfcf;
 }