chore: tweak setting styles

web/src/components/MemoEditor/Editor/index.tsx

@@ -145,9 +145,14 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
   }, []);
 
   return (
-    <div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-300", className)}>
+    <div
+      className={classNames(
+        "flex flex-col justify-start items-start relative w-full h-auto max-h-[256px] bg-inherit dark:text-gray-300",
+        className,
+      )}
+    >
       <textarea
-        className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
+        className="w-full h-full my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
         rows={1}
         placeholder={placeholder}
         ref={editorRef}

web/src/components/Settings/MemberSection.tsx

@@ -147,13 +147,13 @@ const MemberSection = () => {
   return (
     <div className="w-full flex flex-col gap-2 pt-2 pb-4">
       <p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.member-section.create-a-member")}</p>
-      <div className="w-full flex flex-col justify-start items-start gap-2">
+      <div className="w-auto flex flex-col justify-start items-start gap-2 border rounded-md py-2 px-3 dark:border-zinc-700">
         <div className="flex flex-col justify-start items-start gap-1">
-          <span className="text-sm">{t("common.username")}</span>
+          <span>{t("common.username")}</span>
           <Input type="text" placeholder={t("common.username")} value={state.creatingUser.username} onChange={handleUsernameInputChange} />
         </div>
         <div className="flex flex-col justify-start items-start gap-1">
-          <span className="text-sm">{t("common.password")}</span>
+          <span>{t("common.password")}</span>
           <Input
             type="password"
             placeholder={t("common.password")}
@@ -162,8 +162,8 @@ const MemberSection = () => {
           />
         </div>
         <div className="flex flex-col justify-start items-start gap-1">
-          <span className="text-sm">{t("common.role")}</span>
-          <RadioGroup size="sm" orientation="horizontal" defaultValue={User_Role.USER} onChange={handleUserRoleInputChange}>
+          <span>{t("common.role")}</span>
+          <RadioGroup orientation="horizontal" defaultValue={User_Role.USER} onChange={handleUserRoleInputChange}>
             <Radio value={User_Role.USER} label="User" />
             <Radio value={User_Role.ADMIN} label="Admin" />
           </RadioGroup>

web/src/components/Settings/PreferencesSection.tsx

@@ -103,10 +103,10 @@ const PreferencesSection = () => {
         </Select>
       </div>
 
-      <Divider className="!mt-3 !my-4" />
+      <Divider className="!my-3" />
 
-      <div className="w-full flex flex-col justify-start items-start">
-        <div className="mb-2 w-full flex flex-row justify-between items-center">
+      <div className="space-y-2 border rounded-md py-2 px-3 dark:border-zinc-700">
+        <div className="w-full flex flex-row justify-between items-center">
           <div className="w-auto flex items-center">
             <span className="mr-1">{t("setting.preference-section.telegram-user-id")}</span>
           </div>
@@ -126,7 +126,7 @@ const PreferencesSection = () => {
         />
         <div className="w-full">
           <Link
-            className="text-gray-500 text-sm inline-flex flex-row justify-start items-center mt-2 hover:underline hover:text-blue-600"
+            className="text-gray-500 text-sm inline-flex flex-row justify-start items-center hover:underline hover:text-blue-600"
             to="https://usememos.com/docs/integration/telegram-bot"
             target="_blank"
           >
@@ -136,7 +136,7 @@ const PreferencesSection = () => {
         </div>
       </div>
 
-      <Divider className="!my-4" />
+      <Divider className="!my-3" />
 
       <WebhookSection />
     </div>

web/src/components/Settings/SystemSection.tsx

@@ -221,48 +221,23 @@ const SystemSection = () => {
         </div>
         <Button onClick={handleUpdateCustomizedProfileButtonClick}>{t("common.edit")}</Button>
       </div>
-      <p className="font-medium text-gray-700 dark:text-gray-500">{t("common.settings")}</p>
+      <p className="font-medium text-gray-700 dark:text-gray-500">General</p>
       <div className="w-full flex flex-row justify-between items-center">
-        <span className="normal-text">{t("setting.system-section.allow-user-signup")}</span>
+        <span className="mr-1">{t("setting.system-section.allow-user-signup")}</span>
         <Switch checked={!workspaceGeneralSetting.disallowSignup} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span className="normal-text">{t("setting.system-section.disable-password-login")}</span>
+        <span className="mr-1">{t("setting.system-section.disable-password-login")}</span>
         <Switch
           checked={workspaceGeneralSetting.disallowPasswordLogin}
           onChange={(event) => handleDisablePasswordLoginChanged(event.target.checked)}
         />
       </div>
-      <div className="w-full flex flex-row justify-between items-center">
-        <span className="normal-text">{t("setting.system-section.disable-public-memos")}</span>
-        <Switch checked={state.disablePublicMemos} onChange={(event) => handleDisablePublicMemosChanged(event.target.checked)} />
-      </div>
-      <div className="w-full flex flex-row justify-between items-center">
-        <span className="normal-text">{t("setting.system-section.display-with-updated-time")}</span>
-        <Switch checked={state.memoDisplayWithUpdatedTs} onChange={(event) => handleMemoDisplayWithUpdatedTs(event.target.checked)} />
-      </div>
-      <div className="w-full flex flex-row justify-between items-center">
-        <div className="flex flex-row items-center">
-          <span className="text-sm mr-1">{t("setting.system-section.max-upload-size")}</span>
-          <Tooltip title={t("setting.system-section.max-upload-size-hint")} placement="top">
-            <Icon.HelpCircle className="w-4 h-auto" />
-          </Tooltip>
-        </div>
-        <Input
-          className="w-16"
-          sx={{
-            fontFamily: "monospace",
-          }}
-          defaultValue={state.maxUploadSizeMiB}
-          onFocus={handleMaxUploadSizeFocus}
-          onChange={handleMaxUploadSizeChanged}
-        />
-      </div>
-      <Divider className="!mt-3 !my-4" />
+      <div className="space-y-2 border rounded-md py-2 px-3 dark:border-zinc-700">
         <div className="w-full flex flex-row justify-between items-center">
           <div className="flex flex-row items-center">
             <div className="w-auto flex items-center">
-            <span className="text-sm mr-1">Instance URL</span>
+              <span className="mr-1">Instance URL</span>
             </div>
           </div>
           <Button variant="outlined" color="neutral" onClick={handleSaveInstanceUrl}>
@@ -281,7 +256,7 @@ const SystemSection = () => {
         />
         <div className="w-full">
           <Link
-          className="text-gray-500 text-sm inline-flex flex-row justify-start items-center mt-2 hover:underline hover:text-blue-600"
+            className="text-gray-500 text-sm inline-flex flex-row justify-start items-center hover:underline hover:text-blue-600"
             to="https://usememos.com/docs/advanced-settings/seo"
             target="_blank"
           >
@@ -289,38 +264,8 @@ const SystemSection = () => {
             <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
           </Link>
         </div>
-      <Divider className="!mt-3 !my-4" />
-      <div className="w-full flex flex-row justify-between items-center">
-        <div className="flex flex-row items-center">
-          <div className="w-auto flex items-center">
-            <span className="text-sm mr-1">{t("setting.system-section.telegram-bot-token")}</span>
-          </div>
       </div>
-        <Button variant="outlined" color="neutral" onClick={handleSaveTelegramBotToken}>
-          {t("common.save")}
-        </Button>
-      </div>
-      <Input
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        placeholder={t("setting.system-section.telegram-bot-token-placeholder")}
-        value={telegramBotToken}
-        onChange={(event) => handleTelegramBotTokenChanged(event.target.value)}
-      />
-      <div className="w-full">
-        <Link
-          className="text-gray-500 text-sm inline-flex flex-row justify-start items-center mt-2 hover:underline hover:text-blue-600"
-          to="https://usememos.com/docs/integration/telegram-bot"
-          target="_blank"
-        >
-          {t("common.learn-more")}
-          <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
-        </Link>
-      </div>
-      <Divider className="!mt-3 !my-4" />
+      <div className="space-y-2 border rounded-md py-2 px-3 dark:border-zinc-700">
         <div className="w-full flex flex-row justify-between items-center">
           <span className="normal-text">{t("setting.system-section.additional-style")}</span>
           <Button variant="outlined" color="neutral" onClick={handleSaveAdditionalStyle}>
@@ -339,7 +284,7 @@ const SystemSection = () => {
           value={workspaceGeneralSetting.additionalStyle}
           onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
         />
-      <div className="w-full flex flex-row justify-between items-center mt-2">
+        <div className="w-full flex flex-row justify-between items-center">
           <span className="normal-text">{t("setting.system-section.additional-script")}</span>
           <Button variant="outlined" color="neutral" onClick={handleSaveAdditionalScript}>
             {t("common.save")}
@@ -360,7 +305,7 @@ const SystemSection = () => {
         />
         <div className="w-full">
           <Link
-          className="text-gray-500 text-sm flex flex-row justify-start items-center mt-2 hover:underline hover:text-blue-600"
+            className="text-gray-500 text-sm flex flex-row justify-start items-center hover:underline hover:text-blue-600"
             to="https://usememos.com/docs/advanced-settings/custom-style-and-script"
             target="_blank"
           >
@@ -369,6 +314,66 @@ const SystemSection = () => {
           </Link>
         </div>
       </div>
+      <Divider className="!my-3" />
+      <p className="font-medium text-gray-700 dark:text-gray-500">Others</p>
+      <div className="w-full flex flex-row justify-between items-center">
+        <span className="normal-text">{t("setting.system-section.disable-public-memos")}</span>
+        <Switch checked={state.disablePublicMemos} onChange={(event) => handleDisablePublicMemosChanged(event.target.checked)} />
+      </div>
+      <div className="w-full flex flex-row justify-between items-center">
+        <span className="normal-text">{t("setting.system-section.display-with-updated-time")}</span>
+        <Switch checked={state.memoDisplayWithUpdatedTs} onChange={(event) => handleMemoDisplayWithUpdatedTs(event.target.checked)} />
+      </div>
+      <div className="w-full flex flex-row justify-between items-center">
+        <div className="flex flex-row items-center">
+          <span className="text-sm mr-1">{t("setting.system-section.max-upload-size")}</span>
+          <Tooltip title={t("setting.system-section.max-upload-size-hint")} placement="top">
+            <Icon.HelpCircle className="w-4 h-auto" />
+          </Tooltip>
+        </div>
+        <Input
+          className="w-16"
+          sx={{
+            fontFamily: "monospace",
+          }}
+          defaultValue={state.maxUploadSizeMiB}
+          onFocus={handleMaxUploadSizeFocus}
+          onChange={handleMaxUploadSizeChanged}
+        />
+      </div>
+      <div className="space-y-2 border rounded-md py-2 px-3 dark:border-zinc-700">
+        <div className="w-full flex flex-row justify-between items-center">
+          <div className="flex flex-row items-center">
+            <div className="w-auto flex items-center">
+              <span className="mr-1">{t("setting.system-section.telegram-bot-token")}</span>
+            </div>
+          </div>
+          <Button variant="outlined" color="neutral" onClick={handleSaveTelegramBotToken}>
+            {t("common.save")}
+          </Button>
+        </div>
+        <Input
+          className="w-full"
+          sx={{
+            fontFamily: "monospace",
+            fontSize: "14px",
+          }}
+          placeholder={t("setting.system-section.telegram-bot-token-placeholder")}
+          value={telegramBotToken}
+          onChange={(event) => handleTelegramBotTokenChanged(event.target.value)}
+        />
+        <div className="w-full">
+          <Link
+            className="text-gray-500 text-sm inline-flex flex-row justify-start items-center hover:underline hover:text-blue-600"
+            to="https://usememos.com/docs/integration/telegram-bot"
+            target="_blank"
+          >
+            {t("common.learn-more")}
+            <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
+          </Link>
+        </div>
+      </div>
+    </div>
   );
 };