chore: remove unnecessary hover effects and adjust styles & adjust layout Overview

7 files changed, 52 insertions, 49 deletions

diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
index 5bb68be..5dd6733 100644
--- a/src/components/Button.module.scss
+++ b/src/components/Button.module.scss
@@ -26,10 +26,6 @@
     transform: translateY(-1px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }
-  &:active {
-    transform: scale(0.97);
-    box-shadow: none;
-  }
 
   font-size: 0.75em;
   padding: 4px 7px;
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss
index 2d73535..aab6324 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.scss
@@ -74,7 +74,6 @@
   &:hover {
     background-color: rgba(176, 206, 255, 0.221);
     color: var(--color-focus-blue);
-    transform: translateX(2px);
   }
 
   @media (--breakpoint-not-small) {
@@ -110,10 +109,6 @@
   }
 }
 
-.row:hover svg {
-  transform: scale(1.06);
-}
-
 .rowActive {
   background: linear-gradient(135deg, #60a5fa 0%, var(--color-focus-blue) 100%);
   color: #fff;
diff --git a/src/components/Sparkline.module.scss b/src/components/Sparkline.module.scss
index bb52657..bc60060 100644
--- a/src/components/Sparkline.module.scss
+++ b/src/components/Sparkline.module.scss
@@ -1,5 +1,5 @@
 .sparkline {
   width: 100%;
-  height: 40px;
+  height: 10vh;
   margin-top: auto;
 }
diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss
index e0e3271..85281e2 100644
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.scss
@@ -1,10 +1,28 @@
 .TrafficNow {
   color: var(--color-text);
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  grid-gap: 20px;
+  display: flex;
+  flex-direction: column;  grid-gap: 20px;
+  gap: 20px;
   padding: 10px 0;
 
+.overview {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+
+    & > div:nth-child(3) {
+      grid-column: 1 / -1;
+    }
+
+    @media (min-width: 768px) {
+      grid-template-columns: 1fr 1fr 1fr;
+
+      & > div:nth-child(3) {
+        grid-column: auto;
+      }
+    }
+  }
+
   .sec {
     padding: 20px;
     background-color: var(--color-bg-card);
@@ -17,7 +35,6 @@
     min-height: 140px;
 
     &:hover {
-      transform: translateY(-2px);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
 
diff --git a/src/components/TrafficNow.tsx b/src/components/TrafficNow.tsx
index 5d48aab..34acb1e 100644
--- a/src/components/TrafficNow.tsx
+++ b/src/components/TrafficNow.tsx
@@ -27,18 +27,28 @@ export default function TrafficNow({ apiConfig, selectedChartStyleIndex }: Props
 
   return (
     <div className={s0.TrafficNow}>
-      <div className={s0.sec}>
-        <div className={s0.header}>
-          <Cpu size={16} />
-          <span>{t('Memory Usage')}</span>
+      <div className={s0.overview}>
+        <div className={s0.sec}>
+          <div className={s0.header}>
+            <Activity size={16} />
+            <span>{t('Download Total')}</span>
+          </div>
+          <div className={s0.value}>{dlTotal}</div>
+        </div>
+        <div className={s0.sec}>
+          <div className={s0.header}>
+            <Zap size={16} />
+            <span>{t('Upload Total')}</span>
+          </div>
+          <div className={s0.value}>{upTotal}</div>
+        </div>
+        <div className={s0.sec}>
+          <div className={s0.header}>
+            <LinkIcon size={16} />
+            <span>{t('Active Connections')}</span>
+          </div>
+          <div className={s0.value}>{connNumber}</div>
         </div>
-        <div className={s0.value}>{mUsage}</div>
-        <Sparkline
-          data={memory.inuse}
-          labels={memory.labels}
-          type="inuse"
-          styleIndex={selectedChartStyleIndex}
-        />
       </div>
 
       <div className={s0.sec}>
@@ -70,26 +80,16 @@ export default function TrafficNow({ apiConfig, selectedChartStyleIndex }: Props
 
       <div className={s0.sec}>
         <div className={s0.header}>
-          <Activity size={16} />
-          <span>{t('Download Total')}</span>
-        </div>
-        <div className={s0.value}>{dlTotal}</div>
-      </div>
-
-      <div className={s0.sec}>
-        <div className={s0.header}>
-          <Zap size={16} />
-          <span>{t('Upload Total')}</span>
-        </div>
-        <div className={s0.value}>{upTotal}</div>
-      </div>
-
-      <div className={s0.sec}>
-        <div className={s0.header}>
-          <LinkIcon size={16} />
-          <span>{t('Active Connections')}</span>
+          <Cpu size={16} />
+          <span>{t('Memory Usage')}</span>
         </div>
-        <div className={s0.value}>{connNumber}</div>
+        <div className={s0.value}>{mUsage}</div>
+        <Sparkline
+          data={memory.inuse}
+          labels={memory.labels}
+          type="inuse"
+          styleIndex={selectedChartStyleIndex}
+        />{' '}
       </div>
     </div>
   );
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 60c589f..7bc37dd 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -20,7 +20,6 @@
   }
 
   &:hover {
-    transform: translateY(-2px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     z-index: 1;
   }
diff --git a/src/components/proxies/ProxyGroup.module.scss b/src/components/proxies/ProxyGroup.module.scss
index 06a061f..19529cf 100644
--- a/src/components/proxies/ProxyGroup.module.scss
+++ b/src/components/proxies/ProxyGroup.module.scss
@@ -9,10 +9,6 @@
   border-radius: 12px;
   box-shadow: var(--shadow-card);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    border-color: var(--color-focus-blue);
-  }
 }
 
 .zapWrapper {