Merge pull request #116 from Olivi-9/master

update dependencies & change style in Home

9 files changed, 22 insertions, 27 deletions

diff --git a/src/components/proxies/Proxies.module.scss b/src/components/proxies/Proxies.module.scss
index 8990688..af961cf 100644
--- a/src/components/proxies/Proxies.module.scss
+++ b/src/components/proxies/Proxies.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
 
 .topBar {
   position: sticky;
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 60c589f..066026f 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
 
 .proxy {
   padding: 5px;
@@ -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 {
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index 69f2551..7b751fb 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -1,6 +1,6 @@
 import cx from 'clsx';
 import * as React from 'react';
-import { ChevronDown, Zap } from 'react-feather';
+import { ChevronDown, Zap } from '~/components/shared/FeatherIcons';
 import { useQuery } from 'react-query';
 
 import * as proxiesAPI from '~/api/proxies';
diff --git a/src/components/proxies/ProxyLatency.module.scss b/src/components/proxies/ProxyLatency.module.scss
index fce0a2e..ac39100 100644
--- a/src/components/proxies/ProxyLatency.module.scss
+++ b/src/components/proxies/ProxyLatency.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
 
 .proxyLatency {
   display: inline-flex;
diff --git a/src/components/proxies/ProxyList.module.scss b/src/components/proxies/ProxyList.module.scss
index a7e1956..f4c8d87 100644
--- a/src/components/proxies/ProxyList.module.scss
+++ b/src/components/proxies/ProxyList.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
 
 .list {
   margin: 8px 0;
diff --git a/src/components/proxies/ProxyPageFab.tsx b/src/components/proxies/ProxyPageFab.tsx
index ec78650..a8536e0 100644
--- a/src/components/proxies/ProxyPageFab.tsx
+++ b/src/components/proxies/ProxyPageFab.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Zap } from 'react-feather';
+import { Zap } from '~/components/shared/FeatherIcons';
 import { useTranslation } from 'react-i18next';
 
 import { Action, Fab, IsFetching, position as fabPosition } from '~/components/shared/Fab';
diff --git a/src/components/proxies/ProxyProvider.module.scss b/src/components/proxies/ProxyProvider.module.scss
index d222bc5..d22e50b 100644
--- a/src/components/proxies/ProxyProvider.module.scss
+++ b/src/components/proxies/ProxyProvider.module.scss
@@ -1,4 +1,4 @@
-@import '~/styles/utils/custom-media';
+@use '~/styles/utils/custom-media' as *;
 
 .updatedAt {
   margin-bottom: 12px;
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index d1f257a..47ccb8b 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -1,14 +1,14 @@
 import cx from 'clsx';
 import { formatDistance } from 'date-fns';
 import * as React from 'react';
-import { ChevronDown, RotateCw, Zap } from 'react-feather';
+import { ChevronDown, RotateCw, Zap } from '~/components/shared/FeatherIcons';
 
 import Button from '~/components/Button';
 import Collapsible from '~/components/Collapsible';
 import CollapsibleSectionHeader from '~/components/CollapsibleSectionHeader';
 import s0 from '~/components/proxies/ProxyGroup.module.scss';
 import { useStoreActions } from '~/components/StateProvider';
-import { framerMotionResouce } from '~/misc/motion';
+import { LazyMotion, domAnimation, m } from 'framer-motion';
 import { useFilteredAndSorted, useUpdateProviderItem } from '~/modules/proxies/hooks';
 import { healthcheckProviderByName } from '~/store/proxies';
 import { DelayMapping, DispatchFn, ProxiesMapping, SubscriptionInfo } from '~/store/types';
@@ -190,19 +190,19 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 function Refresh() {
-  const module = framerMotionResouce.read();
-  const motion = module.motion;
   return (
-    <motion.div
-      className={s.refresh}
-      variants={button}
-      initial="rest"
-      whileHover="hover"
-      whileTap="pressed"
-    >
-      <motion.div className="flexCenter" variants={arrow}>
-        <RotateCw size={16} />
-      </motion.div>
-    </motion.div>
+    <LazyMotion features={domAnimation}>
+      <m.div
+        className={s.refresh}
+        variants={button}
+        initial="rest"
+        whileHover="hover"
+        whileTap="pressed"
+      >
+        <m.div className="flexCenter" variants={arrow}>
+          <RotateCw size={16} />
+        </m.div>
+      </m.div>
+    </LazyMotion>
   );
 }