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>