From 68468927dd3bfa322fe01a8b36446e4326198976 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 24 Feb 2024 11:01:57 +0800
Subject: [PATCH] chore: tweak setting styles

---
 .../components/MemoEditor/Editor/index.tsx    |   9 +-
 web/src/components/Settings/MemberSection.tsx |  10 +-
 .../Settings/PreferencesSection.tsx           |  10 +-
 web/src/components/Settings/SystemSection.tsx | 223 +++++++++---------
 4 files changed, 131 insertions(+), 121 deletions(-)

diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
index 80175d0d2..0b82591ff 100644
--- a/web/src/components/MemoEditor/Editor/index.tsx
+++ b/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}
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index 1b69bb2ab..c513ef08f 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/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>
diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx
index a5a3c5033..ed030741c 100644
--- a/web/src/components/Settings/PreferencesSection.tsx
+++ b/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>
diff --git a/web/src/components/Settings/SystemSection.tsx b/web/src/components/Settings/SystemSection.tsx
index 02c4b29b5..f22a20f38 100644
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@@ -221,18 +221,101 @@ 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="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">Instance URL</span>
+            </div>
+          </div>
+          <Button variant="outlined" color="neutral" onClick={handleSaveInstanceUrl}>
+            {t("common.save")}
+          </Button>
+        </div>
+        <Input
+          className="w-full"
+          sx={{
+            fontFamily: "monospace",
+            fontSize: "14px",
+          }}
+          placeholder={"Should be started with http:// or https://"}
+          value={workspaceGeneralSetting.instanceUrl}
+          onChange={(event) => handleInstanceUrlChanged(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/advanced-settings/seo"
+            target="_blank"
+          >
+            {t("common.learn-more")}
+            <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
+          </Link>
+        </div>
+      </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">
+          <span className="normal-text">{t("setting.system-section.additional-style")}</span>
+          <Button variant="outlined" color="neutral" onClick={handleSaveAdditionalStyle}>
+            {t("common.save")}
+          </Button>
+        </div>
+        <Textarea
+          className="w-full"
+          sx={{
+            fontFamily: "monospace",
+            fontSize: "14px",
+          }}
+          minRows={2}
+          maxRows={4}
+          placeholder={t("setting.system-section.additional-style-placeholder")}
+          value={workspaceGeneralSetting.additionalStyle}
+          onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
+        />
+        <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")}
+          </Button>
+        </div>
+        <Textarea
+          className="w-full"
+          color="neutral"
+          sx={{
+            fontFamily: "monospace",
+            fontSize: "14px",
+          }}
+          minRows={2}
+          maxRows={4}
+          placeholder={t("setting.system-section.additional-script-placeholder")}
+          value={workspaceGeneralSetting.additionalScript}
+          onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
+        />
+        <div className="w-full">
+          <Link
+            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"
+          >
+            {t("common.learn-more")}
+            <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
+          </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)} />
@@ -258,115 +341,37 @@ const SystemSection = () => {
           onChange={handleMaxUploadSizeChanged}
         />
       </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">Instance URL</span>
+      <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>
-        <Button variant="outlined" color="neutral" onClick={handleSaveInstanceUrl}>
-          {t("common.save")}
-        </Button>
-      </div>
-      <Input
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        placeholder={"Should be started with http:// or https://"}
-        value={workspaceGeneralSetting.instanceUrl}
-        onChange={(event) => handleInstanceUrlChanged(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/advanced-settings/seo"
-          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="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>
+        <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>
-        <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="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}>
-          {t("common.save")}
-        </Button>
-      </div>
-      <Textarea
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        minRows={2}
-        maxRows={4}
-        placeholder={t("setting.system-section.additional-style-placeholder")}
-        value={workspaceGeneralSetting.additionalStyle}
-        onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
-      />
-      <div className="w-full flex flex-row justify-between items-center mt-2">
-        <span className="normal-text">{t("setting.system-section.additional-script")}</span>
-        <Button variant="outlined" color="neutral" onClick={handleSaveAdditionalScript}>
-          {t("common.save")}
-        </Button>
-      </div>
-      <Textarea
-        className="w-full"
-        color="neutral"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        minRows={2}
-        maxRows={4}
-        placeholder={t("setting.system-section.additional-script-placeholder")}
-        value={workspaceGeneralSetting.additionalScript}
-        onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
-      />
-      <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"
-          to="https://usememos.com/docs/advanced-settings/custom-style-and-script"
-          target="_blank"
-        >
-          {t("common.learn-more")}
-          <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
-        </Link>
       </div>
     </div>
   );