chore: tweak sso docs

frontend/locales/en.json

@@ -52,7 +52,7 @@
   },
   "filter": {
     "all": "All",
-    "mine": "Mine",
+    "personal": "Personal",
     "compact-mode": "Compact mode",
     "order-by": "Order by",
     "direction": "Direction"

frontend/locales/zh.json

@@ -49,7 +49,7 @@
   },
   "filter": {
     "all": "所有",
-    "mine": "我的",
+    "personal": "我的",
     "compact-mode": "紧凑模式",
     "order-by": "排序方式",
     "direction": "方向"

frontend/web/src/components/CreateIdentityProviderDrawer.tsx

@@ -152,6 +152,7 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
             </div>
           </div>
           <Divider className="!mb-3" />
+          <p className="font-medium mb-2">Identity provider information</p>
           {isCreating && (
             <p className="shadow-sm rounded-md py-1 px-2 bg-zinc-100 dark:bg-zinc-900 text-sm w-full mb-2 break-all">
               <span className="opacity-60">Redirect URL</span>
@@ -244,6 +245,7 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
             </div>
           </div>
           <Divider className="!mb-3" />
+          <p className="font-medium mb-2">Field mapping</p>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Identifier <span className="text-red-600">*</span>

frontend/web/src/components/Header.tsx

@@ -1,4 +1,3 @@
-import { Avatar } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
@@ -38,7 +37,8 @@ const Header: React.FC = () => {
             </Link>
             {[PlanType.PRO, PlanType.ENTERPRISE].includes(profile.plan) && (
               <span className="ml-1 text-xs px-1.5 leading-5 border rounded-full bg-blue-600 border-blue-700 text-white shadow dark:opacity-70">
-                {profile.plan}
+                {/* PRO or ENT */}
+                {profile.plan.substring(0, 3)}
               </span>
             )}
             {shouldShowRouterSwitch && (
@@ -74,13 +74,12 @@ const Header: React.FC = () => {
               </>
             )}
           </div>
-          <div className="relative flex-shrink-0">
+          <div className="relative shrink-0">
             <Dropdown
               trigger={
                 <button className="flex flex-row justify-end items-center cursor-pointer">
-                  <Avatar size="sm" variant="plain" />
-                  <span className="dark:text-gray-400">{currentUser.nickname}</span>
-                  <Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
+                  <span className="dark:text-gray-400 max-w-20 truncate">{currentUser.nickname}</span>
+                  <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600 dark:text-gray-400" />
                 </button>
               }
               actionsClassName="!w-32"

frontend/web/src/components/ShortcutsNavigator.tsx

@@ -35,7 +35,7 @@ const ShortcutsNavigator = () => {
         onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
       >
         <Icon.User className="w-4 h-auto mr-1" />
-        <span className="font-normal">{t("filter.mine")}</span>
+        <span className="font-normal">{t("filter.personal")}</span>
       </button>
       {Array.from(sortedTagMap.keys()).map((tag) => (
         <button

frontend/web/src/components/setting/SSOSection.tsx

@@ -54,9 +54,17 @@ const SSOSection = () => {
     <>
       <div className="w-full flex flex-col gap-2 pt-2 pb-4">
         <div className="w-full flex flex-row justify-between items-center gap-1">
-          <div className="flex flex-row items-center gap-1">
+          <div className="flex flex-row justify-start items-center">
             <span className="font-medium dark:text-gray-400">SSO</span>
             <FeatureBadge className="w-5 h-auto ml-1 text-blue-600" feature={FeatureType.SSO} />
+            <a
+              className="text-blue-600 text-sm hover:underline flex flex-row justify-center items-center ml-2"
+              href="https://github.com/yourselfhosted/slash/blob/main/docs/getting-started/sso.md"
+              target="_blank"
+            >
+              <span>Learn more</span>
+              <Icon.ExternalLink className="ml-1 w-4 h-auto inline" />
+            </a>
           </div>
           <Button
             variant="outlined"

frontend/web/src/pages/SubscriptionSetting.tsx

@@ -27,7 +27,7 @@ const SubscriptionSetting: React.FC = () => {
         licenseKey,
       });
       if (subscription) {
-        toast.success(`Welcome to Slash-${stringifyPlanType(subscription.plan)}🎉`);
+        toast.success(`Welcome to Slash ${stringifyPlanType(subscription.plan)}🎉`);
       }
     } catch (error: any) {
       toast.error(error.details);