fix: remove .btnStart unexpected margin-right

9 files changed, 145 insertions, 131 deletions

diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
index b46d79c..675a931 100644
--- a/src/components/Button.module.scss
+++ b/src/components/Button.module.scss
@@ -48,8 +48,14 @@
   opacity: 0.5;
 }
 
+.btnInternal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 4px;
+}
+
 .btnStart {
-  margin-right: 5px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1725d1b..9bd0d61 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -43,11 +43,7 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
     },
     [isLoading, onClick]
   );
-  const btnClassName = cx(
-    s0.btn,
-    { [s0.minimal]: kind === 'minimal' },
-    className
-  );
+  const btnClassName = cx(s0.btn, { [s0.minimal]: kind === 'minimal' }, className);
   return (
     <button
       className={btnClassName}
@@ -74,14 +70,12 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
 
 function ButtonInternal({ children, label, text, start }: ButtonInternalProps) {
   return (
-    <>
-      {start ? (
-        <span className={s0.btnStart}>
-          {typeof start === 'function' ? start() : start}
-        </span>
-      ) : null}
+    <div className={s0.btnInternal}>
+      {start && (
+        <span className={s0.btnStart}>{typeof start === 'function' ? start() : start}</span>
+      )}
       {children || label || text}
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index aff87ee..8e25258 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -1,5 +1,4 @@
 .proxy {
-  margin: 3px;
   padding: 5px;
   position: relative;
   border-radius: 8px;
@@ -15,9 +14,7 @@
     border: 1px solid var(--color-focus-blue);
   }
 
-  max-width: 200px;
   @media (--breakpoint-not-small) {
-    min-width: 200px;
     border-radius: 10px;
     padding: 10px;
   }
@@ -42,7 +39,6 @@
 .proxyType {
   font-family: var(--font-mono);
   font-size: 0.6em;
-  margin-right: 3px;
   @media (--breakpoint-not-small) {
     font-size: 0.7em;
   }
@@ -68,9 +64,6 @@
   width: 100%;
   margin-bottom: 5px;
   font-size: 0.85em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   @media (--breakpoint-not-small) {
     font-size: 0.85em;
   }
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index 3fe10f7..2214280 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -1,7 +1,7 @@
+import { TooltipPopup, useTooltip } from '@reach/tooltip';
 import cx from 'clsx';
 import * as React from 'react';
 import { keyCodes } from 'src/misc/keycode';
-import { TooltipPopup, useTooltip } from '@reach/tooltip';
 
 import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies';
 import { connect } from '../StateProvider';
@@ -42,7 +42,7 @@ function getProxyDotBackgroundColor(
   latency: {
     number?: number;
   },
-    proxyType: string,
+  proxyType: string
 ) {
   if (NonProxyTypes.indexOf(proxyType) > -1) {
     return 'linear-gradient(135deg, white 15%, #999 15% 30%, white 30% 45%, #999 45% 60%, white 60% 75%, #999 75% 90%, white 90% 100%)';
@@ -61,19 +61,8 @@ type ProxyProps = {
   onClick?: (proxyName: string) => unknown;
 };
 
-function ProxySmallImpl({
-  now,
-  name,
-  proxy,
-  latency,
-  isSelectable,
-  onClick,
-}: ProxyProps) {
-  const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type), [
-    latency,
-    proxy,
-
-  ]);
+function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyProps) {
+  const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type), [latency, proxy]);
   const title = useMemo(() => {
     let ret = name;
     if (latency && typeof latency.number === 'number') {
@@ -141,26 +130,33 @@ function ProxyNameTooltip({ children, label, 'aria-label': ariaLabel }) {
   );
 }
 
-function ProxyImpl({
-  now,
-  name,
-  proxy,
-  latency,
-  isSelectable,
-  onClick,
-}: ProxyProps) {
+function ProxyImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyProps) {
   const color = useMemo(() => getLabelColor(latency), [latency]);
   const doSelect = React.useCallback(() => {
     isSelectable && onClick && onClick(name);
   }, [name, onClick, isSelectable]);
-    function formatUdpType (t: boolean) {
-        if (!t) return '';
-        return 'UDP';
-    }
-    function formatTfo (t: boolean) {
-        if (!t) return '';
-        return <div className='s0.udpType'><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2962" width="10" height="10"><path d="M648.093513 719.209284l-1.492609-40.940127 31.046263-26.739021c202.73892-174.805813 284.022131-385.860697 255.70521-561.306199-176.938111-28.786027-389.698834 51.857494-563.907604 254.511123l-26.31256 30.619803-40.38573-0.938211c-60.557271-1.407317-111.903014 12.79379-162.822297 47.0385l189.561318 127.084977-37.95491 68.489421c-9.126237 16.461343-0.554398 53.307457 29.084549 82.818465 29.5963 29.511008 67.380626 38.381369 83.287571 29.852176l68.318836-36.760822 127.639376 191.267156c36.163779-52.11337 50.450177-103.629696 48.189941-165.039887zM994.336107 16.105249l10.490908 2.686696 2.64405 10.405615c47.46496 178.089552-1.023503 451.492838-274.170913 686.898568 4.051367 111.263324-35.396151 200.222809-127.255561 291.741051l-15.779008 15.693715-145.934494-218.731157c-51.217805 27.59194-128.790816 10.405616-183.93205-44.522388-55.226525-55.013296-72.41285-132.287785-43.498885-184.529093L0.002773 430.325513l15.736362-15.65107c89.300652-88.959484 178.64395-128.108481 289.011709-125.549722C539.730114 15.806727 815.56422-31.061189 994.336107 16.105249zM214.93844 805.098259c28.572797 28.572797 22.346486 79.49208-12.537914 114.376479C156.428175 965.489735 34.034254 986.002445 34.034254 986.002445s25.331704-127.084978 66.612998-168.323627c34.8844-34.8844 85.633099-41.281295 114.291188-12.580559zM661.01524 298.549479a63.968948 63.968948 0 1 0 0 127.937897 63.968948 63.968948 0 0 0 0-127.937897z" p-id="2963"></path></svg></div>;
-    }
+  function formatUdpType(t: boolean) {
+    if (!t) return '';
+    return 'UDP';
+  }
+  function formatTfo(t: boolean) {
+    if (!t) return '';
+    return (
+      <svg
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="2962"
+        width="10"
+        height="10"
+      >
+        <path
+          d="M648.093513 719.209284l-1.492609-40.940127 31.046263-26.739021c202.73892-174.805813 284.022131-385.860697 255.70521-561.306199-176.938111-28.786027-389.698834 51.857494-563.907604 254.511123l-26.31256 30.619803-40.38573-0.938211c-60.557271-1.407317-111.903014 12.79379-162.822297 47.0385l189.561318 127.084977-37.95491 68.489421c-9.126237 16.461343-0.554398 53.307457 29.084549 82.818465 29.5963 29.511008 67.380626 38.381369 83.287571 29.852176l68.318836-36.760822 127.639376 191.267156c36.163779-52.11337 50.450177-103.629696 48.189941-165.039887zM994.336107 16.105249l10.490908 2.686696 2.64405 10.405615c47.46496 178.089552-1.023503 451.492838-274.170913 686.898568 4.051367 111.263324-35.396151 200.222809-127.255561 291.741051l-15.779008 15.693715-145.934494-218.731157c-51.217805 27.59194-128.790816 10.405616-183.93205-44.522388-55.226525-55.013296-72.41285-132.287785-43.498885-184.529093L0.002773 430.325513l15.736362-15.65107c89.300652-88.959484 178.64395-128.108481 289.011709-125.549722C539.730114 15.806727 815.56422-31.061189 994.336107 16.105249zM214.93844 805.098259c28.572797 28.572797 22.346486 79.49208-12.537914 114.376479C156.428175 965.489735 34.034254 986.002445 34.034254 986.002445s25.331704-127.084978 66.612998-168.323627c34.8844-34.8844 85.633099-41.281295 114.291188-12.580559zM661.01524 298.549479a63.968948 63.968948 0 1 0 0 127.937897 63.968948 63.968948 0 0 0 0-127.937897z"
+          p-id="2963"
+        />
+      </svg>
+    );
+  }
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
       if (e.keyCode === keyCodes.Enter) {
@@ -183,22 +179,27 @@ function ProxyImpl({
       className={className}
       onClick={doSelect}
       onKeyDown={handleKeyDown}
-      role={isSelectable ? 'menuitem' : ''}
+      role={isSelectable && 'menuitem'}
     >
-     <div className={`${s0.proxyName} ${s0.row}`}>
-        <ProxyNameTooltip label={name} aria-label={'proxy name: ' + name}>
+      <div className={cx(s0.proxyName, s0.row)}>
+        <ProxyNameTooltip label={name} aria-label={`proxy name: ${name}`}>
           <span>{name}</span>
         </ProxyNameTooltip>
-              <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>{formatTfo(proxy.tfo)}{formatUdpType(proxy.udp)}</span>
-              
+        <span className={s0.proxyType} style={{ paddingLeft: 4, opacity: now ? 0.6 : 0.2 }}>
+          {formatUdpType(proxy.udp)}
+        </span>
       </div>
+
       <div className={s0.row}>
-              <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
-                  {formatProxyType(proxy.type)}
-              </span>
-        {latency && latency.number ? (
-                  <ProxyLatency number={latency.number} color={color} />
-        ) : null}
+        <div className={s0.row}>
+          <span className={s0.proxyType} style={{ paddingRight: 4, opacity: now ? 0.6 : 0.2 }}>
+            {formatProxyType(proxy.type)}
+          </span>
+
+          {formatTfo(proxy.tfo)}
+        </div>
+
+        {latency && latency.number ? <ProxyLatency number={latency.number} color={color} /> : null}
       </div>
     </div>
   );
diff --git a/src/components/proxies/ProxyList.module.scss b/src/components/proxies/ProxyList.module.scss
index 1814929..d62f9b2 100644
--- a/src/components/proxies/ProxyList.module.scss
+++ b/src/components/proxies/ProxyList.module.scss
@@ -1,13 +1,18 @@
 .list {
   margin: 8px 0;
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -3px;
-}
-
-.listSummaryView {
-  margin: 8px 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 13px);
   grid-gap: 10px;
 }
+
+.detail {
+  grid-template-columns: repeat(auto-fill, 160px);
+
+
+  @media (--breakpoint-not-small) {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+}
+
+.summary {
+  grid-template-columns: repeat(auto-fill, 12px);
+}
\ No newline at end of file
diff --git a/src/components/proxies/ProxyList.tsx b/src/components/proxies/ProxyList.tsx
index a86bb88..913e49b 100644
--- a/src/components/proxies/ProxyList.tsx
+++ b/src/components/proxies/ProxyList.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import * as React from 'react';
 
 import { Proxy, ProxySmall } from './Proxy';
@@ -11,16 +12,11 @@ type ProxyListProps = {
   show?: boolean;
 };
 
-export function ProxyList({
-  all,
-  now,
-  isSelectable,
-  itemOnTapCallback,
-}: ProxyListProps) {
+export function ProxyList({ all, now, isSelectable, itemOnTapCallback }: ProxyListProps) {
   const proxies = all;
 
   return (
-    <div className={s.list}>
+    <div className={cx(s.list, s.detail)}>
       {proxies.map((proxyName) => {
         return (
           <Proxy
@@ -43,7 +39,7 @@ export function ProxyListSummaryView({
   itemOnTapCallback,
 }: ProxyListProps) {
   return (
-    <div className={s.listSummaryView}>
+    <div className={cx(s.list, s.summary)}>
       {all.map((proxyName) => {
         return (
           <ProxySmall
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index 6f3047a..fe2f38e 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -11,7 +11,7 @@ import {
   getClashAPIConfig,
   getCollapsibleIsOpen,
   getHideUnavailableProxies,
-  getProxySortBy
+  getProxySortBy,
 } from 'src/store/app';
 import { getDelay, healthcheckProviderByName } from 'src/store/proxies';
 import { DelayMapping, SubscriptionInfo } from 'src/store/types';
@@ -38,24 +38,19 @@ type Props = {
 };
 
 function ProxyProviderImpl({
-                             name,
-                             proxies: all,
-                             delay,
-                             hideUnavailableProxies,
-                             proxySortBy,
-                             vehicleType,
-                             updatedAt,
-                             subscriptionInfo,
-                             isOpen,
-                             dispatch,
-                             apiConfig
-                           }: Props) {
-  const proxies = useFilteredAndSorted(
-    all,
-    delay,
-    hideUnavailableProxies,
-    proxySortBy
-  );
+  name,
+  proxies: all,
+  delay,
+  hideUnavailableProxies,
+  proxySortBy,
+  vehicleType,
+  updatedAt,
+  subscriptionInfo,
+  isOpen,
+  dispatch,
+  apiConfig,
+}: Props) {
+  const proxies = useFilteredAndSorted(all, delay, hideUnavailableProxies, proxySortBy);
   const [isHealthcheckLoading, setIsHealthcheckLoading] = useState(false);
 
   const updateProvider = useUpdateProviderItem({ dispatch, apiConfig, name });
@@ -67,7 +62,7 @@ function ProxyProviderImpl({
   }, [apiConfig, dispatch, name, setIsHealthcheckLoading]);
 
   const {
-    app: { updateCollapsibleIsOpen }
+    app: { updateCollapsibleIsOpen },
   } = useStoreActions();
 
   const toggle = useCallback(() => {
@@ -75,16 +70,25 @@ function ProxyProviderImpl({
   }, [isOpen, updateCollapsibleIsOpen, name]);
 
   const timeAgo = formatDistance(new Date(updatedAt), new Date());
-  const total = subscriptionInfo ? formatBytes(subscriptionInfo.Total):0;
-    const unused = subscriptionInfo ? formatBytes(subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload) : 0;
-    const percentage = subscriptionInfo ? (((subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload) / subscriptionInfo.Total) * 100).toFixed(2) : 0;
+  const total = subscriptionInfo ? formatBytes(subscriptionInfo.Total) : 0;
+  const unused = subscriptionInfo
+    ? formatBytes(subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload)
+    : 0;
+  const percentage = subscriptionInfo
+    ? (
+        ((subscriptionInfo.Total - subscriptionInfo.Download - subscriptionInfo.Upload) /
+          subscriptionInfo.Total) *
+        100
+      ).toFixed(2)
+    : 0;
   const expireStr = () => {
     if (subscriptionInfo.Expire === 0) {
       return 'Null';
     }
-    const expire = new Date(subscriptionInfo.Expire*1000);
+    const expire = new Date(subscriptionInfo.Expire * 1000);
     const getYear = expire.getFullYear() + '-';
-    const getMonth = (expire.getMonth() + 1 < 10 ? '0' + (expire.getMonth() + 1) : expire.getMonth() + 1) + '-';
+    const getMonth =
+      (expire.getMonth() + 1 < 10 ? '0' + (expire.getMonth() + 1) : expire.getMonth() + 1) + '-';
     const getDate = expire.getDate() + ' ';
     return getYear + getMonth + getDate;
   };
@@ -98,22 +102,21 @@ function ProxyProviderImpl({
           isOpen={isOpen}
           qty={proxies.length}
         />
+        <Button kind="minimal" start={<Refresh />} onClick={updateProvider} />
         <Button
-          kind='minimal'
-          start={<Refresh />}
-          onClick={updateProvider} />
-        <Button
-          kind='minimal'
+          kind="minimal"
           start={<Zap size={16} />}
           onClick={healthcheckProvider}
           isLoading={isHealthcheckLoading}
         />
       </div>
-      {
-        subscriptionInfo && <div className={s.updatedAt}>
-                  <small>{unused} / {total} ( { percentage }% ) &nbsp;&nbsp; Expire: {expireStr()} </small>
+      {subscriptionInfo && (
+        <div className={s.updatedAt}>
+          <small>
+            {unused} / {total} ( {percentage}% ) &nbsp;&nbsp; Expire: {expireStr()}{' '}
+          </small>
         </div>
-      }
+      )}
       <div className={s.updatedAt}>
         <small>Updated {timeAgo} ago</small>
       </div>
@@ -121,9 +124,9 @@ function ProxyProviderImpl({
       <Collapsible isOpen={isOpen}>
         <ProxyList all={proxies} />
         <div className={s.actionFooter}>
-          <Button text='Update' start={<Refresh />} onClick={updateProvider} />
+          <Button text="Update" start={<Refresh />} onClick={updateProvider} />
           <Button
-            text='Health Check'
+            text="Health Check"
             start={<Zap size={16} />}
             onClick={healthcheckProvider}
             isLoading={isHealthcheckLoading}
@@ -140,11 +143,11 @@ function ProxyProviderImpl({
 
 const button = {
   rest: { scale: 1 },
-  pressed: { scale: 0.95 }
+  pressed: { scale: 0.95 },
 };
 const arrow = {
   rest: { rotate: 0 },
-  hover: { rotate: 360, transition: { duration: 0.3 } }
+  hover: { rotate: 360, transition: { duration: 0.3 } },
 };
 
 function formatBytes(bytes, decimals = 2) {
@@ -162,11 +165,11 @@ function Refresh() {
     <motion.div
       className={s.refresh}
       variants={button}
-      initial='rest'
-      whileHover='hover'
-      whileTap='pressed'
+      initial="rest"
+      whileHover="hover"
+      whileTap="pressed"
     >
-      <motion.div className='flexCenter' variants={arrow}>
+      <motion.div className="flexCenter" variants={arrow}>
         <RotateCw size={16} />
       </motion.div>
     </motion.div>
@@ -187,7 +190,7 @@ const mapState = (s, { proxies, name }) => {
     delay,
     hideUnavailableProxies,
     proxySortBy,
-    isOpen: collapsibleIsOpen[`proxyProvider:${name}`]
+    isOpen: collapsibleIsOpen[`proxyProvider:${name}`],
   };
 };
 
diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss
index 2cc0d0b..289b694 100644
--- a/src/components/shared/Basic.module.scss
+++ b/src/components/shared/Basic.module.scss
@@ -36,10 +36,7 @@ h2.sectionNameType {
  *
  */
 
-:root[data-theme='light'] {
-  /*
-     * --loading-dot-{dot-index}-{dot-keyframe-phase}
-     */
+@mixin light {
   --loading-dot-1-1: rgba(0, 0, 0, 0.1);
   --loading-dot-1-2: rgba(0, 0, 0, 0.5);
   --loading-dot-1-3: rgba(0, 0, 0, 0.3);
@@ -50,7 +47,8 @@ h2.sectionNameType {
   --loading-dot-3-2: rgba(0, 0, 0, 0.3);
   --loading-dot-3-3: rgba(0, 0, 0, 0.1);
 }
-:root[data-theme='dark'] {
+
+@mixin dark {
   --loading-dot-1-1: rgba(255, 255, 255, 0.5);
   --loading-dot-1-2: rgba(255, 255, 255, 0.1);
   --loading-dot-1-3: rgba(255, 255, 255, 0.3);
@@ -62,6 +60,27 @@ h2.sectionNameType {
   --loading-dot-3-3: rgba(255, 255, 255, 0.5);
 }
 
+:root[data-theme='auto'] {
+  @media (prefers-color-scheme: dark) {
+    @include dark;
+    color-scheme: dark;
+  }
+  @media (prefers-color-scheme: light) {
+    @include light;
+    color-scheme: light;
+  }
+}
+
+:root[data-theme='dark'] {
+  @include dark;
+  color-scheme: dark;
+}
+
+:root[data-theme='light'] {
+  @include light;
+  color-scheme: light;
+}
+
 .loadingDot,
 .loadingDot:before,
 .loadingDot:after {
diff --git a/src/components/shared/ThemeSwitcher.module.scss b/src/components/shared/ThemeSwitcher.module.scss
index c5de126..d2f296a 100644
--- a/src/components/shared/ThemeSwitcher.module.scss
+++ b/src/components/shared/ThemeSwitcher.module.scss
@@ -10,8 +10,6 @@
   outline: none;
   padding: 5px;
   color: var(--color-text);
-  border-radius: 100%;
-  border: 1px solid transparent;
 }
 .iconWrapper:hover {
   opacity: 0.6;
@@ -48,9 +46,8 @@
   }
   .iconWrapper {
     pointer-events: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    width: 100%;
+    height: 100%;
     position: absolute;
     left: 0;
     top: 0;