style(proxies): tweak proxy hover style

4 files changed, 16 insertions, 31 deletions

diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index 0a7421f..d1959d0 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import { useStoreState } from 'm/store';
 
 import Icon from 'c/Icon';
@@ -49,18 +48,15 @@ const mapStateToProps = s => {
   };
 };
 
-function Proxy({ now, name, isSelectable }) {
+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];
-  const proxyClassName = cx(s0.proxy, {
-    [s0.proxyNotSelectable]: !isSelectable
-  });
 
   return (
-    <div className={proxyClassName}>
+    <div className={s0.proxy}>
       <div className={s0.left} style={{ color }}>
         <Icon id={iconId} width={80} height={80} />
       </div>
@@ -73,8 +69,7 @@ function Proxy({ now, name, isSelectable }) {
 }
 Proxy.propTypes = {
   now: PropTypes.bool,
-  name: PropTypes.string,
-  isSelectable: PropTypes.bool
+  name: PropTypes.string
 };
 
 export default Proxy;
diff --git a/src/components/Proxy.module.scss b/src/components/Proxy.module.scss
index a0389e1..b7f0c8b 100644
--- a/src/components/Proxy.module.scss
+++ b/src/components/Proxy.module.scss
@@ -1,27 +1,5 @@
 .proxy {
   display: flex;
-  cursor: pointer;
-
-  svg {
-    transition: transform 0.4s ease, color 0.4s ease;
-  }
-  &:hover {
-    svg {
-      transform: scale(1.1);
-      color: #aaa;
-    }
-  }
-}
-
-.proxyNotSelectable {
-  // cursor: not-allowed;
-  cursor: auto;
-  &:hover {
-    svg {
-      transform: initial;
-      color: currentcolor;
-    }
-  }
 }
 
 .left {
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index e4ac8ac..35eb660 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { useActions, useStoreState } from 'm/store';
 
 import Proxy from 'c/Proxy';
@@ -43,9 +44,12 @@ export default function ProxyGroup2({ name }) {
       <div className={s0.list}>
         {list.map(proxyName => {
           const isSelectable = group.type === 'Selector';
+          const proxyClassName = cx(s0.proxy, {
+            [s0.proxySelectable]: isSelectable
+          });
           return (
             <div
-              className={s0.proxy}
+              className={proxyClassName}
               key={proxyName}
               onClick={() => {
                 if (!isSelectable) return;
diff --git a/src/components/ProxyGroup.module.scss b/src/components/ProxyGroup.module.scss
index 43cbdaa..017f785 100644
--- a/src/components/ProxyGroup.module.scss
+++ b/src/components/ProxyGroup.module.scss
@@ -17,4 +17,12 @@
 .proxy {
   width: 300px;
   padding: 10px 5px;
+  transition: transform 0.4s ease;
+  // transition: transform 0.4s ease, color 0.4s ease;
+  &.proxySelectable {
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
 }