chore: update help button style (#1656)

web/src/components/Settings/SSOSection.tsx

@@ -43,11 +43,11 @@ const SSOSection = () => {
 
   return (
     <div className="section-container">
-      <div className="mb-2 w-full flex flex-row justify-start items-center">
-        <span className="font-mono text-sm text-gray-400 mr-2">{t("setting.sso-section.sso-list")}</span>
+      <div className="mb-2 w-full flex flex-row justify-start items-center gap-1">
+        <span className="font-mono text-sm text-gray-400">{t("setting.sso-section.sso-list")}</span>
         <HelpButton icon="help" url="https://usememos.com/docs/keycloak" />
         <button
-          className="btn-normal px-2 py-0 leading-7"
+          className="btn-normal px-2 py-0 ml-1"
           onClick={() => showCreateIdentityProviderDialog(undefined, fetchIdentityProviderList)}
         >
           {t("common.create")}

web/src/components/Settings/StorageSection.tsx

@@ -76,10 +76,10 @@ const StorageSection = () => {
         ))}
       </Select>
       <Divider />
-      <div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
-        <span className="font-mono text-sm text-gray-400 mr-2">{t("setting.storage-section.storage-services-list")}</span>
+      <div className="mt-4 mb-2 w-full flex flex-row justify-start items-center gap-1">
+        <span className="font-mono text-sm text-gray-400">{t("setting.storage-section.storage-services-list")}</span>
         <HelpButton className="btn" icon="info" url="https://usememos.com/docs/storage" />
-        <button className="btn-normal px-2 py-0 leading-7" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
+        <button className="btn-normal px-2 py-0 ml-1" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
           {t("common.create")}
         </button>
       </div>

web/src/components/Settings/SystemSection.tsx

@@ -231,9 +231,9 @@ const SystemSection = () => {
         <Switch checked={state.disablePublicMemos} onChange={(event) => handleDisablePublicMemosChanged(event.target.checked)} />
       </div>
       <div className="form-label">
-        <div className="flex flex-row">
-          <span className="normal-text">{t("setting.system-section.max-upload-size")}</span>
-          <HelpButton icon="info" hint={t("setting.system-section.max-upload-size-hint")} hintPlacement="left" />
+        <div className="flex flex-row items-center">
+          <span className="normal-text mr-1">{t("setting.system-section.max-upload-size")}</span>
+          <HelpButton icon="info" hint={t("setting.system-section.max-upload-size-hint")} />
         </div>
         <Input
           className="w-16"
@@ -247,8 +247,8 @@ const SystemSection = () => {
       </div>
       <Divider className="!mt-3 !my-4" />
       <div className="form-label">
-        <div className="flex flex-row">
-          <span className="normal-text">{t("setting.system-section.openai-api-key")}</span>
+        <div className="flex flex-row items-center">
+          <span className="normal-text mr-1">{t("setting.system-section.openai-api-key")}</span>
           <HelpButton hint={t("setting.system-section.openai-api-key-description")} url="https://platform.openai.com/account/api-keys" />
         </div>
         <Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>

web/src/components/kit/HelpButton.tsx

@@ -174,7 +174,7 @@ const HelpButton = (props: HelpProps): JSX.Element => {
   const { t } = useTranslation();
   const color = props.color ?? "neutral";
   const variant = props.variant ?? "plain";
-  const className = props.className ?? "!-mt-1";
+  const className = props.className ?? "";
   const hintPlacement = props.hintPlacement ?? "top";
   const iconButtonSize = "sm";
 
@@ -232,12 +232,12 @@ const HelpButton = (props: HelpProps): JSX.Element => {
   const sizePx = (() => {
     switch (props.size) {
       case "sm":
-        return 16;
+        return 14;
       case "lg":
-        return 48;
+        return 18;
       case "md":
       default:
-        return 24;
+        return 16;
     }
   })();