Make button slightly bigger than before

src/components/Button.module.scss

@@ -23,16 +23,16 @@
     transform: scale(0.97);
   }
 
-  font-size: 0.85em;
+  padding: 10px 13px;
-  padding: 4px 7px;
+
-  @media (--breakpoint-not-small) {
+  &.circular {
-    font-size: 1em;
+    padding: 8px;
-    padding: 6px 12px;
   }
 
   &.minimal {
     border-color: transparent;
     background: none;
+    padding: 6px 12px;
     &:focus {
       border-color: var(--color-focus-blue);
     }

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}>
+        <span className={s0.btnStart}>{typeof start === 'function' ? start() : start}</span>
-          {typeof start === 'function' ? start() : start}
-        </span>
       ) : null}
       {children || label || text}
     </>

src/components/rules/RuleProviderItem.tsx

@@ -16,24 +16,20 @@ export function RuleProviderItem({
   ruleCount,
   apiConfig,
 }) {
-  const [onClickRefreshButton, isRefreshing] = useUpdateRuleProviderItem(
+  const [onClickRefreshButton, isRefreshing] = useUpdateRuleProviderItem(name, apiConfig);
-    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}>
+        <div className={s.gray}>{ruleCount < 2 ? `${ruleCount} rule` : `${ruleCount} rules`}</div>
-          {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>

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>
   );
 }