chore: update setting dialog style (#1125)

web/src/components/CreateIdentityProviderDialog.tsx

 import { useEffect, useState } from "react";
-import { Alert, Button, Divider, Input, Radio, RadioGroup, Typography } from "@mui/joy";
+import { Button, Divider, Input, Radio, RadioGroup, Typography } from "@mui/joy";
 import * as api from "../helpers/api";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { absolutifyLink } from "../helpers/utils";
@@ -207,13 +207,13 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="dialog-header-container !w-96">
+      <div className="dialog-header-container">
         <p className="title-text">{isCreating ? "Create SSO" : "Update SSO"}</p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X />
         </button>
       </div>
-      <div className="dialog-content-container">
+      <div className="dialog-content-container w-full max-w-[24rem]">
         {isCreating && (
           <>
             <Typography className="!mb-1" level="body2">
@@ -276,9 +276,10 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
         {type === "OAUTH2" && (
           <>
             {isCreating && (
-              <Alert variant="outlined" color="neutral" className="w-full mb-2">
-                Redirect URL: {absolutifyLink("/auth/callback")}
-              </Alert>
+              <p className="border rounded-md p-2 text-sm w-full mb-2 break-all">
+                Redirect URL: {absolutifyLink("/auth/callback")}{" "}
+                RedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirectRedirect
+              </p>
             )}
             <Typography className="!mb-1" level="body2">
               Client ID<span className="text-red-600">*</span>

web/src/components/SettingDialog.tsx

+import { Option, Select } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGlobalStore, useUserStore } from "../store/module";
@@ -14,7 +15,7 @@ import "../less/setting-dialog.less";
 
 type Props = DialogProps;
 
-type SettingSection = "my-account" | "preferences" | "member" | "system" | "storage" | "sso";
+type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";
 
 interface State {
   selectedSection: SettingSection;
@@ -29,6 +30,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
   const [state, setState] = useState<State>({
     selectedSection: "my-account",
   });
+  const isHost = user?.role === "HOST";
 
   const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
     setState({
@@ -36,6 +38,14 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
     });
   };
 
+  const getSettingSectionList = () => {
+    let settingList: SettingSection[] = ["my-account", "preference"];
+    if (isHost) {
+      settingList = settingList.concat(["member", "system", "storage", "sso"]);
+    }
+    return settingList;
+  };
+
   return (
     <div className="dialog-content-container">
       <button className="btn close-btn" onClick={destroy}>
@@ -51,13 +61,13 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
             <Icon.User className="w-4 h-auto mr-2 opacity-80" /> {t("setting.my-account")}
           </span>
           <span
-            onClick={() => handleSectionSelectorItemClick("preferences")}
-            className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`}
+            onClick={() => handleSectionSelectorItemClick("preference")}
+            className={`section-item ${state.selectedSection === "preference" ? "selected" : ""}`}
           >
             <Icon.Cog className="w-4 h-auto mr-2 opacity-80" /> {t("setting.preference")}
           </span>
         </div>
-        {user?.role === "HOST" ? (
+        {isHost ? (
           <>
             <span className="section-title">{t("common.admin")}</span>
             <div className="section-items-container">
@@ -86,7 +96,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
                   onClick={() => handleSectionSelectorItemClick("sso")}
                   className={`section-item ${state.selectedSection === "sso" ? "selected" : ""}`}
                 >
-                  <Icon.Key className="w-4 h-auto mr-2 opacity-80" /> SSO <BetaBadge />
+                  <Icon.Key className="w-4 h-auto mr-2 opacity-80" /> {t("setting.sso")} <BetaBadge />
                 </span>
               )}
             </div>
@@ -94,9 +104,20 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
         ) : null}
       </div>
       <div className="section-content-container">
+        <Select
+          className="block sm:!hidden"
+          value={state.selectedSection}
+          onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)}
+        >
+          {getSettingSectionList().map((settingSection) => (
+            <Option key={settingSection} value={settingSection}>
+              {t(`setting.${settingSection}`)}
+            </Option>
+          ))}
+        </Select>
         {state.selectedSection === "my-account" ? (
           <MyAccountSection />
-        ) : state.selectedSection === "preferences" ? (
+        ) : state.selectedSection === "preference" ? (
           <PreferencesSection />
         ) : state.selectedSection === "member" ? (
           <MemberSection />

web/src/less/setting-dialog.less

@@ -2,17 +2,17 @@
   @apply px-4;
 
   > .dialog-container {
-    @apply w-180 max-w-full mb-8 p-0;
+    @apply w-180 max-w-full h-full sm:h-auto mb-8 p-0;
 
     > .dialog-content-container {
-      @apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0 hide-scrollbar;
+      @apply flex flex-row justify-start items-start relative w-full h-full overflow-y-scroll p-0 hide-scrollbar;
 
       > .close-btn {
         @apply z-1 flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 dark:hover:bg-zinc-700 hover:shadow;
       }
 
       > .section-selector-container {
-        @apply w-full sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700 flex flex-col justify-start items-start;
+        @apply hidden sm:flex flex-col justify-start items-start sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700;
 
         > .section-title {
           @apply text-sm mt-2 sm:mt-4 first:mt-4 mb-1 font-mono text-gray-400;
@@ -36,7 +36,7 @@
       }
 
       > .section-content-container {
-        @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll hide-scrollbar;
+        @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;
 
         > .section-container {
           @apply flex flex-col justify-start items-start w-full my-2;

web/src/locales/en.json

@@ -152,10 +152,11 @@
   "setting": {
     "my-account": "My Account",
     "preference": "Preference",
-    "storage": "Storage",
     "member": "Member",
     "member-list": "Member list",
     "system": "System",
+    "storage": "Storage",
+    "sso": "SSO",
     "account-section": {
       "title": "Account Information",
       "update-information": "Update Information",