style: new layout for proxy item

also:

- speed up proxy item on hover scale up animation
- reduce icons stroke width

src/components/Proxy.js

@@ -57,10 +57,10 @@ function Proxy({ now, name }) {
 
   return (
     <div className={s0.proxy}>
-      <div className={s0.left} style={{ color }}>
-        <Icon id={iconId} width={80} height={80} />
+      <div className={s0.iconWrapper} style={{ color }}>
+        <Icon id={iconId} width={70} height={70} />
       </div>
-      <div className={s0.right}>
+      <div className={s0.proxyDetail}>
         <div className={s0.proxyName}>{name}</div>
         {latency ? <ProxyLatency latency={latency} /> : null}
       </div>

src/components/Proxy.module.scss

@@ -1,17 +1,32 @@
 .proxy {
-  display: flex;
+  position: relative;
+  height: 90px;
 }
 
-.left {
+.iconWrapper {
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.right {
-  padding-left: 20px;
+.proxyDetail {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
 }
 
 .proxyName {
+  width: 100%;
+  padding-right: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin: 10px 0;
+  font-size: 1.1em;
 }

src/components/ProxyGroup.module.scss

@@ -19,7 +19,7 @@
 .proxy {
   width: 300px;
   padding: 10px 5px;
-  transition: transform 0.4s ease;
+  transition: transform 0.2s ease-in-out;
   // transition: transform 0.4s ease, color 0.4s ease;
   &.proxySelectable {
     cursor: pointer;

src/svg/ss.svg

@@ -1,5 +1,5 @@
 <svg width="326" height="326" viewBox="0 0 326 326" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="7">
+  <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width="4">
     <path d="M144.176 233.92l30.67 9.576-30.67 46.467zM145.414 209.789l99.04 30.2 48.29-202.404L29.589 171.717l80.11 27.613 121.73-96.816z"/>
   </g>
 </svg>

src/svg/vmess.svg

@@ -1,5 +1,5 @@
 <svg width="326" height="326" viewBox="0 0 326 326" xmlns="http://www.w3.org/2000/svg">
-  <g stroke="currentColor" stroke-width="8" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+  <g stroke="currentColor" stroke-width="4" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
     <path d="M318.342 151.555L140.45 284.581l22.442 22.452z"/>
     <path d="M80.768 224.894l32.993 33.003 204.581-106.34z"/>
     <path d="M7.442 151.557h310.902L47.25 191.366z"/>

webpack.common.js

@@ -50,7 +50,7 @@ const cssExtractPlugin = new MiniCssExtractPlugin({
   filename: isDev ? '[name].bundle.css' : '[name].[chunkhash].css'
 });
 
-const LOCAL_IDENT_NAME_DEV = '[path]---[name]---[local]---[hash:base64:5]';
+const LOCAL_IDENT_NAME_DEV = '[path]_[name]_[local]_[hash:base64:5]';
 const LOCAL_IDENT_NAME_PROD = '[hash:base64:10]';
 const localIdentName = isDev ? LOCAL_IDENT_NAME_DEV : LOCAL_IDENT_NAME_PROD;