From c919435598cd66937817ec22e967eba1da7410c2 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Tue, 25 Jun 2024 18:22:25 +0530
Subject: [PATCH] style: admin app UI & UX updates. (#4934)

---
 admin/app/ai/layout.tsx                        |  2 +-
 admin/app/ai/page.tsx                          |  3 ---
 admin/app/authentication/github/page.tsx       |  2 +-
 admin/app/authentication/gitlab/page.tsx       |  2 +-
 admin/app/authentication/google/page.tsx       |  2 +-
 admin/app/authentication/layout.tsx            |  2 +-
 admin/app/authentication/page.tsx              | 13 ++++---------
 admin/app/email/layout.tsx                     |  2 +-
 admin/app/email/page.tsx                       |  3 ---
 admin/app/general/layout.tsx                   |  2 +-
 admin/app/image/layout.tsx                     |  2 +-
 admin/app/image/page.tsx                       |  3 ---
 .../authentication/authentication-modes.tsx    | 18 +++++++++---------
 13 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/admin/app/ai/layout.tsx b/admin/app/ai/layout.tsx
index 0a0bacac1..d461a626a 100644
--- a/admin/app/ai/layout.tsx
+++ b/admin/app/ai/layout.tsx
@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "AI Settings - God Mode",
+  title: "Artificial Intelligence Settings - Plane Web",
 };
 
 export default function AILayout({ children }: { children: ReactNode }) {
diff --git a/admin/app/ai/page.tsx b/admin/app/ai/page.tsx
index 5ea7b9fde..2a0747776 100644
--- a/admin/app/ai/page.tsx
+++ b/admin/app/ai/page.tsx
@@ -3,8 +3,6 @@
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@@ -18,7 +16,6 @@ const InstanceAIPage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Artificial Intelligence - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
diff --git a/admin/app/authentication/github/page.tsx b/admin/app/authentication/github/page.tsx
index 924b9b36d..b00def973 100644
--- a/admin/app/authentication/github/page.tsx
+++ b/admin/app/authentication/github/page.tsx
@@ -63,7 +63,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
+      <PageHeader title="GitHub Authentication - Plane Web" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
diff --git a/admin/app/authentication/gitlab/page.tsx b/admin/app/authentication/gitlab/page.tsx
index cb2cfd9cd..b6441d9b7 100644
--- a/admin/app/authentication/gitlab/page.tsx
+++ b/admin/app/authentication/gitlab/page.tsx
@@ -57,7 +57,7 @@ const InstanceGitlabAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
+      <PageHeader title="GitLab Authentication - Plane Web" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
diff --git a/admin/app/authentication/google/page.tsx b/admin/app/authentication/google/page.tsx
index 79e711179..af2005e40 100644
--- a/admin/app/authentication/google/page.tsx
+++ b/admin/app/authentication/google/page.tsx
@@ -57,7 +57,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
+      <PageHeader title="Google Authentication - Plane Web" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
diff --git a/admin/app/authentication/layout.tsx b/admin/app/authentication/layout.tsx
index 64506ddb4..c5b70030d 100644
--- a/admin/app/authentication/layout.tsx
+++ b/admin/app/authentication/layout.tsx
@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "Authentication Settings - God Mode",
+  title: "Authentication Settings - Plane Web",
 };
 
 export default function AuthenticationLayout({ children }: { children: ReactNode }) {
diff --git a/admin/app/authentication/page.tsx b/admin/app/authentication/page.tsx
index 89b7385ef..d37b35978 100644
--- a/admin/app/authentication/page.tsx
+++ b/admin/app/authentication/page.tsx
@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-import { PageHeader } from "@/components/common";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -34,7 +33,7 @@ const InstanceAuthenticationPage = observer(() => {
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving configuration",
       success: {
         title: "Success",
         message: () => "Configuration saved successfully",
@@ -57,10 +56,9 @@ const InstanceAuthenticationPage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Authentication - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
+          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure authentication modes for your team and restrict sign ups to be invite only.
           </div>
@@ -68,15 +66,12 @@ const InstanceAuthenticationPage = observer(() => {
         <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className="text-lg font-medium pb-1">Sign-up configuration</div>
               <div className={cn("w-full flex items-center gap-14 rounded")}>
                 <div className="flex grow items-center gap-4">
                   <div className="grow">
-                    <div className={cn("font-medium leading-5 text-custom-text-100 text-sm")}>
-                      Allow anyone to sign up without invite
-                    </div>
+                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
                     <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
-                      Toggling this off will disable self sign ups.
+                      Toggling this off will only let users sign up when they are invited.
                     </div>
                   </div>
                 </div>
diff --git a/admin/app/email/layout.tsx b/admin/app/email/layout.tsx
index e7ab5eba8..2084af1ea 100644
--- a/admin/app/email/layout.tsx
+++ b/admin/app/email/layout.tsx
@@ -7,7 +7,7 @@ interface EmailLayoutProps {
 }
 
 export const metadata: Metadata = {
-  title: "Email Settings - God Mode",
+  title: "Email Settings - Plane Web",
 };
 
 export default function EmailLayout({ children }: EmailLayoutProps) {
diff --git a/admin/app/email/page.tsx b/admin/app/email/page.tsx
index 4e765da05..33fedc052 100644
--- a/admin/app/email/page.tsx
+++ b/admin/app/email/page.tsx
@@ -3,8 +3,6 @@
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
@@ -18,7 +16,6 @@ const InstanceEmailPage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Email - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
diff --git a/admin/app/general/layout.tsx b/admin/app/general/layout.tsx
index fabbe3640..374257daa 100644
--- a/admin/app/general/layout.tsx
+++ b/admin/app/general/layout.tsx
@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "General Settings - God Mode",
+  title: "General Settings - Plane Web",
 };
 
 export default function GeneralLayout({ children }: { children: ReactNode }) {
diff --git a/admin/app/image/layout.tsx b/admin/app/image/layout.tsx
index 62a58391b..32233e078 100644
--- a/admin/app/image/layout.tsx
+++ b/admin/app/image/layout.tsx
@@ -7,7 +7,7 @@ interface ImageLayoutProps {
 }
 
 export const metadata: Metadata = {
-  title: "Images Settings - God Mode",
+  title: "Images Settings - Plane Web",
 };
 
 export default function ImageLayout({ children }: ImageLayoutProps) {
diff --git a/admin/app/image/page.tsx b/admin/app/image/page.tsx
index 824509c5b..ade9687d5 100644
--- a/admin/app/image/page.tsx
+++ b/admin/app/image/page.tsx
@@ -3,8 +3,6 @@
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local
@@ -18,7 +16,6 @@ const InstanceImagePage = observer(() => {
 
   return (
     <>
-      <PageHeader title="Image - God Mode" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
diff --git a/admin/ce/components/authentication/authentication-modes.tsx b/admin/ce/components/authentication/authentication-modes.tsx
index 860740ae0..e0b37a146 100644
--- a/admin/ce/components/authentication/authentication-modes.tsx
+++ b/admin/ce/components/authentication/authentication-modes.tsx
@@ -39,30 +39,30 @@ export const getAuthenticationModes: (props: TGetAuthenticationModeProps) => TIn
   resolvedTheme,
 }) => [
     {
-      key: "email-codes",
-      name: "Email codes",
-      description: "Login or sign up using codes sent via emails. You need to have email setup here and enabled.",
+    key: "unique-codes",
+    name: "Unique codes",
+    description: "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
       icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
       config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
     },
     {
-      key: "password-login",
-      name: "Password based login",
-      description: "Allow members to create accounts with passwords for emails to sign in.",
+      key: "passwords-login",
+      name: "Passwords",
+      description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
       icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
       config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
     },
     {
       key: "google",
       name: "Google",
-      description: "Allow members to login or sign up to plane with their Google accounts.",
+      description: "Allow members to log in or sign up for Plane with their Google accounts.",
       icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
       config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
     },
     {
       key: "github",
-      name: "Github",
-      description: "Allow members to login or sign up to plane with their Github accounts.",
+      name: "GitHub",
+      description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
       icon: (
         <Image
           src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}