style: new layout for proxy item

also:

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

3 files changed, 23 insertions, 8 deletions

diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index d1959d0..3d22ade 100644
--- a/src/components/Proxy.js
+++ b/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>
diff --git a/src/components/Proxy.module.scss b/src/components/Proxy.module.scss
index b7f0c8b..df6fcae 100644
--- a/src/components/Proxy.module.scss
+++ b/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;
 }
diff --git a/src/components/ProxyGroup.module.scss b/src/components/ProxyGroup.module.scss
index dd01018..f5218ea 100644
--- a/src/components/ProxyGroup.module.scss
+++ b/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;