From 7f7cb27df139d6ca73031789539ea2ba2f2ecb77 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Mon, 6 Jun 2022 00:02:54 +0800
Subject: Make button slightly bigger than before

---
 src/components/Button.module.scss         | 10 +++++-----
 src/components/Button.tsx                 | 10 ++++------
 src/components/rules/RuleProviderItem.tsx | 12 ++++--------
 src/components/shared/RotateIcon.tsx      |  2 +-
 4 files changed, 14 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
index 3046d0c..710d3ad 100644
--- a/src/components/Button.module.scss
+++ b/src/components/Button.module.scss
@@ -23,16 +23,16 @@
     transform: scale(0.97);
   }
 
-  font-size: 0.85em;
-  padding: 4px 7px;
-  @media (--breakpoint-not-small) {
-    font-size: 1em;
-    padding: 6px 12px;
+  padding: 10px 13px;
+
+  &.circular {
+    padding: 8px;
   }
 
   &.minimal {
     border-color: transparent;
     background: none;
+    padding: 6px 12px;
     &:focus {
       border-color: var(--color-focus-blue);
     }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1725d1b..8125edc 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -17,7 +17,7 @@ type ButtonProps = {
   isLoading?: boolean;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
   disabled?: boolean;
-  kind?: 'primary' | 'minimal';
+  kind?: 'primary' | 'minimal' | 'circular';
   className?: string;
   title?: string;
 } & ButtonInternalProps;
@@ -36,7 +36,7 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
     ...restProps
   } = props;
   const internalProps = { children, label, text, start };
-  const internalOnClick = useCallback(
+  const internalOnClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
     (e) => {
       if (isLoading) return;
       onClick && onClick(e);
@@ -45,7 +45,7 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
   );
   const btnClassName = cx(
     s0.btn,
-    { [s0.minimal]: kind === 'minimal' },
+    { [s0.minimal]: kind === 'minimal', [s0.circular]: kind === 'circular' },
     className
   );
   return (
@@ -76,9 +76,7 @@ function ButtonInternal({ children, label, text, start }: ButtonInternalProps) {
   return (
     <>
       {start ? (
-        <span className={s0.btnStart}>
-          {typeof start === 'function' ? start() : start}
-        </span>
+        <span className={s0.btnStart}>{typeof start === 'function' ? start() : start}</span>
       ) : null}
       {children || label || text}
     </>
diff --git a/src/components/rules/RuleProviderItem.tsx b/src/components/rules/RuleProviderItem.tsx
index fe4610e..fc88ae1 100644
--- a/src/components/rules/RuleProviderItem.tsx
+++ b/src/components/rules/RuleProviderItem.tsx
@@ -16,24 +16,20 @@ export function RuleProviderItem({
   ruleCount,
   apiConfig,
 }) {
-  const [onClickRefreshButton, isRefreshing] = useUpdateRuleProviderItem(
-    name,
-    apiConfig
-  );
+  const [onClickRefreshButton, isRefreshing] = useUpdateRuleProviderItem(name, apiConfig);
   const timeAgo = formatDistance(new Date(updatedAt), new Date());
   return (
     <div className={s.RuleProviderItem}>
       <span className={s.left}>{idx}</span>
       <div className={s.middle}>
         <SectionNameType name={name} type={`${vehicleType} / ${behavior}`} />
-        <div className={s.gray}>
-          {ruleCount < 2 ? `${ruleCount} rule` : `${ruleCount} rules`}
-        </div>
+        <div className={s.gray}>{ruleCount < 2 ? `${ruleCount} rule` : `${ruleCount} rules`}</div>
         <small className={s.gray}>Updated {timeAgo} ago</small>
       </div>
       <span className={s.refreshButtonWrapper}>
-        <Button onClick={onClickRefreshButton} disabled={isRefreshing}>
+        <Button onClick={onClickRefreshButton} disabled={isRefreshing} kind="circular">
           <RotateIcon isRotating={isRefreshing} />
+          <span className="visually-hidden">Refresh</span>
         </Button>
       </span>
     </div>
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
index 7e3ceae..d9dcbd9 100644
--- a/src/components/shared/RotateIcon.tsx
+++ b/src/components/shared/RotateIcon.tsx
@@ -10,7 +10,7 @@ export function RotateIcon({ isRotating }: { isRotating: boolean }) {
   });
   return (
     <span className={cls}>
-      <RotateCw width={16} />
+      <RotateCw size={16} />
     </span>
   );
 }
-- 
cgit v1.3.1