fix: setting align

Signed-off-by: Innei <[email protected]>
RSSNext · Aug 4, 2024 · b0e86b0 · b0e86b0
1 parent 5343ab2
commit b0e86b0
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 40 deletions.
diff --git a/src/renderer/src/components/ui/button/index.tsx b/src/renderer/src/components/ui/button/index.tsx
@@ -193,42 +193,50 @@ export const StyledButton = React.forwardRef<
   React.PropsWithChildren<
     Omit<HTMLMotionProps<"button">, "children"> &
     BaseButtonProps &
-    VariantProps<typeof styledButtonVariant>
+    VariantProps<typeof styledButtonVariant> & {
+      buttonClassName?: string
+    }
   >
->(({ className, isLoading, variant, status, ...props }, ref) => {
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> =
-    React.useCallback(
-      (e) => {
-        if (isLoading || props.disabled) {
-          e.preventDefault()
-          return
-        }
+>(
+  (
+    { className, buttonClassName, isLoading, variant, status, ...props },
+    ref,
+  ) => {
+    const handleClick: React.MouseEventHandler<HTMLButtonElement> =
+      React.useCallback(
+        (e) => {
+          if (isLoading || props.disabled) {
+            e.preventDefault()
+            return
+          }
 
-        props.onClick?.(e)
-      },
-      [isLoading, props],
-    )
-  return (
-    <MotionButtonBase
-      ref={ref}
-      className={cn(
-        styledButtonVariant({
-          variant,
-          status: isLoading || props.disabled ? "disabled" : undefined,
-        }),
-        className,
-      )}
-      {...props}
-      onClick={handleClick}
-    >
-      <m.span className="center">
-        {isLoading && (
-          <m.span className="center">
-            <LoadingCircle size="small" className="center mr-2" />
-          </m.span>
+          props.onClick?.(e)
+        },
+        [isLoading, props],
+      )
+    return (
+      <MotionButtonBase
+        ref={ref}
+        className={cn(
+          styledButtonVariant({
+            variant,
+            status: isLoading || props.disabled ? "disabled" : undefined,
+          }),
+          className,
+          buttonClassName,
         )}
-        <m.span className={cn("center", className)}>{props.children}</m.span>
-      </m.span>
-    </MotionButtonBase>
-  )
-})
+        {...props}
+        onClick={handleClick}
+      >
+        <m.span className="center">
+          {isLoading && (
+            <m.span className="center">
+              <LoadingCircle size="small" className="center mr-2" />
+            </m.span>
+          )}
+          <m.span className={cn("center", className)}>{props.children}</m.span>
+        </m.span>
+      </MotionButtonBase>
+    )
+  },
+)
diff --git a/src/renderer/src/modules/settings/control.tsx b/src/renderer/src/modules/settings/control.tsx
@@ -48,7 +48,7 @@ export const SettingSwitch: Component<{
 export const SettingDescription: Component = ({ children, className }) => (
   <small
     className={cn(
-      "!mt-0 block w-4/5 text-balance text-[13px] leading-tight text-gray-400 dark:text-neutral-500",
+      "block w-4/5 text-balance text-[13px] leading-tight text-gray-400 dark:text-neutral-500",
       className,
     )}
   >
@@ -65,8 +65,8 @@ export const SettingActionItem = ({
   action: () => void
   buttonText: string
 }) => (
-  <div className={cn("mb-3 mt-4 flex items-center justify-between gap-4")}>
+  <div className={cn("relative mb-3 mt-4 flex items-center justify-between gap-4")}>
     <div className="text-sm font-medium">{label}</div>
-    <StyledButton className="text-xs" onClick={action}>{buttonText}</StyledButton>
+    <StyledButton buttonClassName="text-xs absolute right-0" onClick={action}>{buttonText}</StyledButton>
   </div>
 )
diff --git a/src/renderer/src/modules/settings/section.tsx b/src/renderer/src/modules/settings/section.tsx
@@ -41,7 +41,7 @@ export const SettingItemGroup: FC<PropsWithChildren> = ({ children }) => {
         }
         case SettingActionItem: {
           return cloneElement(child as React.ReactElement, {
-            className: "!-mt-3",
+            className: "!-mt-2",
           })
         }
         default: {