chore: proxy card style

5 files changed, 70 insertions, 37 deletions

diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx
index 8b701e1..7a3cc6a 100644
--- a/src/components/CollapsibleSectionHeader.tsx
+++ b/src/components/CollapsibleSectionHeader.tsx
@@ -1,8 +1,5 @@
-import cx from 'clsx';
 import * as React from 'react';
-import { ChevronDown } from 'react-feather';
 
-import Button from './Button';
 import s from './CollapsibleSectionHeader.module.scss';
 import { SectionNameType } from './shared/Basic';
 
@@ -14,7 +11,7 @@ type Props = {
   isOpen?: boolean;
 };
 
-export default function Header({ name, type, toggle, isOpen, qty }: Props) {
+export default function Header({ name, type, toggle, qty }: Props) {
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
       e.preventDefault();
@@ -38,12 +35,6 @@ export default function Header({ name, type, toggle, isOpen, qty }: Props) {
       </div>
 
       {typeof qty === 'number' ? <span className={s.qty}>{qty}</span> : null}
-
-      <Button kind="minimal" onClick={toggle} className={s.btn} title="Toggle collapsible section">
-        <span className={cx(s.arrow, { [s.isOpen]: isOpen })}>
-          <ChevronDown size={20} />
-        </span>
-      </Button>
     </div>
   );
 }
diff --git a/src/components/proxies/ProxyGroup.module.scss b/src/components/proxies/ProxyGroup.module.scss
index f1e81d5..16fcba6 100644
--- a/src/components/proxies/ProxyGroup.module.scss
+++ b/src/components/proxies/ProxyGroup.module.scss
@@ -16,3 +16,17 @@
   align-items: center;
   justify-content: center;
 }
+
+.arrow {
+  display: inline-flex;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+
+  &.isOpen {
+    transform: rotate(180deg);
+  }
+
+  &:focus {
+    outline: var(--color-focus-blue) solid 1px;
+  }
+}
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index b5c34f7..bb79564 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -1,5 +1,6 @@
+import cx from 'clsx';
 import * as React from 'react';
-import { Zap } from 'react-feather';
+import { ChevronDown, Zap } from 'react-feather';
 import { useQuery } from 'react-query';
 
 import * as proxiesAPI from '~/api/proxies';
@@ -87,22 +88,28 @@ function ProxyGroupImpl({
 
   return (
     <div className={s0.group}>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <CollapsibleSectionHeader
-          name={name}
-          type={type}
-          toggle={toggle}
-          qty={all.length}
-          isOpen={isOpen}
-        />
-        <Button
-          title="Test latency"
-          kind="minimal"
-          onClick={testLatency}
-          isLoading={isTestingLatency}
-        >
-          <ZapWrapper />
-        </Button>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <CollapsibleSectionHeader name={name} type={type} toggle={toggle} qty={all.length} />
+        <div style={{ display: 'flex' }}>
+          <Button
+            title="Test latency"
+            kind="minimal"
+            onClick={testLatency}
+            isLoading={isTestingLatency}
+          >
+            <ZapWrapper />
+          </Button>
+          <Button
+            kind="minimal"
+            onClick={toggle}
+            className={s0.btn}
+            title="Toggle collapsible section"
+          >
+            <span className={cx(s0.arrow, { [s0.isOpen]: isOpen })}>
+              <ChevronDown size={20} />
+            </span>
+          </Button>
+        </div>
       </div>
       {createElement(isOpen ? ProxyList : ProxyListSummaryView, {
         all,
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index 9817ba6..3d6e1e9 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -1,11 +1,13 @@
+import cx from 'clsx';
 import { formatDistance } from 'date-fns';
 import * as React from 'react';
-import { RotateCw, Zap } from 'react-feather';
+import { ChevronDown, RotateCw, Zap } from 'react-feather';
 
 import Button from '~/components/Button';
 import Collapsible from '~/components/Collapsible';
 import CollapsibleSectionHeader from '~/components/CollapsibleSectionHeader';
 import { useUpdateProviderItem } from '~/components/proxies/proxies.hooks';
+import s0 from '~/components/proxies/ProxyGroup.module.scss';
 import { connect, useStoreActions } from '~/components/StateProvider';
 import { framerMotionResouce } from '~/misc/motion';
 import {
@@ -94,7 +96,14 @@ function ProxyProviderImpl({
   };
   return (
     <div className={s.body}>
-      <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+        }}
+      >
         <CollapsibleSectionHeader
           name={name}
           toggle={toggle}
@@ -102,13 +111,25 @@ function ProxyProviderImpl({
           isOpen={isOpen}
           qty={proxies.length}
         />
-        <Button kind="minimal" start={<Refresh />} onClick={updateProvider} />
-        <Button
-          kind="minimal"
-          start={<Zap size={16} />}
-          onClick={healthcheckProvider}
-          isLoading={isHealthcheckLoading}
-        />
+        <div style={{ display: 'flex' }}>
+          <Button
+            kind="minimal"
+            onClick={toggle}
+            className={s0.btn}
+            title="Toggle collapsible section"
+          >
+            <span className={cx(s0.arrow, { [s0.isOpen]: isOpen })}>
+              <ChevronDown size={20} />
+            </span>
+          </Button>
+          <Button kind="minimal" start={<Refresh />} onClick={updateProvider} />
+          <Button
+            kind="minimal"
+            start={<Zap size={16} />}
+            onClick={healthcheckProvider}
+            isLoading={isHealthcheckLoading}
+          />
+        </div>
       </div>
       {subscriptionInfo && (
         <div className={s.updatedAt}>
diff --git a/src/components/shared/Basic.tsx b/src/components/shared/Basic.tsx
index c2ced0f..7071938 100644
--- a/src/components/shared/Basic.tsx
+++ b/src/components/shared/Basic.tsx
@@ -5,7 +5,7 @@ import s from './Basic.module.scss';
 export function SectionNameType({ name, type }) {
   return (
     <h2 className={s.sectionNameType}>
-      <span>{name}</span>
+      <span style={{ marginRight: 5 }}>{name}</span>
       <span>{type}</span>
     </h2>
   );