From cee1c54dc04428f8bf9101e8123a22dfbc6c5bd6 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 11 Jul 2024 17:06:21 +0800
Subject: [PATCH] refactor(console): improve branding experience

---
 .../ConnectorForm/BasicForm/index.tsx         |  6 +--
 .../components/ImageInputs/LogoAndFavicon.tsx |  2 +-
 .../components/ImageInputs/index.module.scss  | 15 +-----
 .../src/ds-components/Tip/TipBubble/utils.ts  |  4 +-
 .../Uploader/FileUploader/index.module.scss   |  3 +-
 .../Branding/index.module.scss                |  8 +++
 .../Branding/index.tsx                        | 50 ++++++++++++++++---
 .../ApplicationDetailsContent/index.tsx       | 14 +++---
 .../Settings/JitSettings.tsx                  |  7 +--
 .../Settings/index.module.scss                |  6 +--
 .../OrganizationDetails/Settings/index.tsx    |  4 +-
 .../PlanComparisonTable/index.tsx             |  2 +-
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/sign-in-exp/index.ts        |  7 +++
 .../admin-console/subscription/quota-table.ts |  2 +-
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../admin-console/subscription/quota-table.ts |  1 -
 .../schemas/src/seeds/sign-in-experience.ts   |  2 +-
 29 files changed, 86 insertions(+), 60 deletions(-)

diff --git a/packages/console/src/components/ConnectorForm/BasicForm/index.tsx b/packages/console/src/components/ConnectorForm/BasicForm/index.tsx
index 6fe733182..fb872a83e 100644
--- a/packages/console/src/components/ConnectorForm/BasicForm/index.tsx
+++ b/packages/console/src/components/ConnectorForm/BasicForm/index.tsx
@@ -3,7 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
 import Error from '@/assets/icons/toast-error.svg';
-import LogoInputs from '@/components/ImageInputs';
+import ImageInputs from '@/components/ImageInputs';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import FormField from '@/ds-components/FormField';
 import Select from '@/ds-components/Select';
@@ -57,7 +57,7 @@ function BasicForm({ isAllowEditTarget, isStandard, conflictConnectorName }: Pro
               {...register('name', { required: true })}
             />
           </FormField>
-          <LogoInputs
+          <ImageInputs
             uploadTitle="connectors.guide.connector_logo"
             tip={t('connectors.guide.connector_logo_tip')}
             control={control}
@@ -65,7 +65,7 @@ function BasicForm({ isAllowEditTarget, isStandard, conflictConnectorName }: Pro
             fields={Object.values(Theme).map((theme) => ({
               name: themeToField[theme],
               error: errors[themeToField[theme]],
-              type: 'app_logo',
+              type: 'connector_logo',
               theme,
             }))}
           />
diff --git a/packages/console/src/components/ImageInputs/LogoAndFavicon.tsx b/packages/console/src/components/ImageInputs/LogoAndFavicon.tsx
index fc070aec1..b60af048e 100644
--- a/packages/console/src/components/ImageInputs/LogoAndFavicon.tsx
+++ b/packages/console/src/components/ImageInputs/LogoAndFavicon.tsx
@@ -45,7 +45,7 @@ function LogoAndFavicon<FormContext extends FieldValues>({
       uploadTitle={
         <>
           {t(`sign_in_exp.branding.with_${theme}`, {
-            value: t('sign_in_exp.branding.app_logo_and_favicon'),
+            value: t(`sign_in_exp.branding.${type}_and_favicon`),
           })}
         </>
       }
diff --git a/packages/console/src/components/ImageInputs/index.module.scss b/packages/console/src/components/ImageInputs/index.module.scss
index b931a3b5c..4e24be27a 100644
--- a/packages/console/src/components/ImageInputs/index.module.scss
+++ b/packages/console/src/components/ImageInputs/index.module.scss
@@ -2,24 +2,11 @@
 
 .container {
   display: flex;
+  gap: _.unit(2);
 
   > * {
     flex: 1;
 
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-
     &.dark {
       background-color: #111;
     }
diff --git a/packages/console/src/ds-components/Tip/TipBubble/utils.ts b/packages/console/src/ds-components/Tip/TipBubble/utils.ts
index 1dace20b1..20071e539 100644
--- a/packages/console/src/ds-components/Tip/TipBubble/utils.ts
+++ b/packages/console/src/ds-components/Tip/TipBubble/utils.ts
@@ -5,11 +5,11 @@ import type { TipBubblePlacement } from '.';
 export const getVerticalOffset = (placement: TipBubblePlacement) => {
   switch (placement) {
     case 'top': {
-      return -16;
+      return -8;
     }
 
     case 'bottom': {
-      return 16;
+      return 8;
     }
 
     default: {
diff --git a/packages/console/src/ds-components/Uploader/FileUploader/index.module.scss b/packages/console/src/ds-components/Uploader/FileUploader/index.module.scss
index 0e15e5bbe..77569e882 100644
--- a/packages/console/src/ds-components/Uploader/FileUploader/index.module.scss
+++ b/packages/console/src/ds-components/Uploader/FileUploader/index.module.scss
@@ -28,7 +28,7 @@
 
     .actionDescription {
       margin-top: _.unit(1);
-      font: var(--font-body-2); // With font height to be 20px.
+      font: var(--font-body-3);
       user-select: none;
     }
   }
@@ -60,4 +60,3 @@
     border-color: var(--color-error);
   }
 }
-
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.module.scss
index f99c87282..57e7fffb7 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.module.scss
@@ -3,3 +3,11 @@
 .colors {
   margin-top: _.unit(6);
 }
+
+.darkModeTip {
+  display: flex;
+  align-items: baseline;
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  margin-top: _.unit(1);
+}
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.tsx
index d04875684..7ff5d422e 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Branding/index.tsx
@@ -1,16 +1,23 @@
-import { Theme, type Application, type ApplicationSignInExperience } from '@logto/schemas';
-import { useCallback, useEffect } from 'react';
+import { generateDarkColor } from '@logto/core-kit';
+import {
+  Theme,
+  defaultPrimaryColor,
+  type Application,
+  type ApplicationSignInExperience,
+} from '@logto/schemas';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useForm, FormProvider, Controller } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
 import DetailsForm from '@/components/DetailsForm';
 import FormCard, { FormCardSkeleton } from '@/components/FormCard';
-import LogoInputs, { themeToLogoName } from '@/components/ImageInputs';
+import ImageInputs, { themeToLogoName } from '@/components/ImageInputs';
 import LogoAndFavicon from '@/components/ImageInputs/LogoAndFavicon';
 import RequestDataError from '@/components/RequestDataError';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import { appSpecificBrandingLink, logtoThirdPartyAppBrandingLink } from '@/consts';
+import Button from '@/ds-components/Button';
 import ColorPicker from '@/ds-components/ColorPicker';
 import FormField from '@/ds-components/FormField';
 import Switch from '@/ds-components/Switch';
@@ -105,10 +112,22 @@ function Branding({ application, isActive }: Props) {
   // is valid; otherwise, directly save the form will be a no-op.
   useEffect(() => {
     if (isBrandingEnabled && Object.values(color).filter(Boolean).length === 0) {
-      setValue('color', { primaryColor: '#000000', darkPrimaryColor: '#000000' });
+      setValue('color', {
+        primaryColor: defaultPrimaryColor,
+        darkPrimaryColor: generateDarkColor(defaultPrimaryColor),
+      });
     }
   }, [color, isBrandingEnabled, setValue]);
 
+  const [primaryColor, darkPrimaryColor] = watch(['color.primaryColor', 'color.darkPrimaryColor']);
+  const calculatedDarkPrimaryColor = useMemo(() => {
+    return primaryColor && generateDarkColor(primaryColor);
+  }, [primaryColor]);
+
+  const handleResetColor = useCallback(() => {
+    setValue('color.darkPrimaryColor', calculatedDarkPrimaryColor);
+  }, [calculatedDarkPrimaryColor, setValue]);
+
   const NonThirdPartyBrandingForm = useCallback(
     () => (
       <>
@@ -153,10 +172,29 @@ function Branding({ application, isActive }: Props) {
               </FormField>
             )}
           />
+          {calculatedDarkPrimaryColor !== darkPrimaryColor && (
+            <div className={styles.darkModeTip}>
+              {t('sign_in_exp.color.dark_mode_reset_tip')}
+              <Button
+                type="text"
+                size="small"
+                title="sign_in_exp.color.reset"
+                onClick={handleResetColor}
+              />
+            </div>
+          )}
         </div>
       </>
     ),
-    [control, errors.branding, register]
+    [
+      control,
+      errors.branding,
+      register,
+      calculatedDarkPrimaryColor,
+      darkPrimaryColor,
+      handleResetColor,
+      t,
+    ]
   );
 
   if (isLoading) {
@@ -193,7 +231,7 @@ function Branding({ application, isActive }: Props) {
                 <FormField title="application_details.branding.display_name">
                   <TextInput {...register('displayName')} placeholder={application.name} />
                 </FormField>
-                <LogoInputs
+                <ImageInputs
                   uploadTitle="application_details.branding.app_logo"
                   control={control}
                   register={register}
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx
index ec4edd57a..45a8ef8eb 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx
@@ -70,6 +70,12 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
   const [isDeleting, setIsDeleting] = useState(false);
   const [isDeleted, setIsDeleted] = useState(false);
   const api = useApi();
+  const hasBranding = [
+    ApplicationType.Native,
+    ApplicationType.SPA,
+    ApplicationType.Traditional,
+    ApplicationType.Protected,
+  ].includes(data.type);
 
   const onSubmit = handleSubmit(
     trySubmitSafe(async (formData) => {
@@ -189,9 +195,7 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
             {t('application_details.permissions.name')}
           </TabNavItem>
         )}
-        {[ApplicationType.Native, ApplicationType.SPA, ApplicationType.Traditional].includes(
-          data.type
-        ) && (
+        {hasBranding && (
           <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Branding}`}>
             {t('application_details.branding.name')}
           </TabNavItem>
@@ -266,9 +270,7 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P
           <Permissions application={data} />
         </TabWrapper>
       )}
-      {[ApplicationType.Native, ApplicationType.SPA, ApplicationType.Traditional].includes(
-        data.type
-      ) && (
+      {hasBranding && (
         <TabWrapper
           isActive={tab === ApplicationDetailsTabs.Branding}
           className={styles.tabContainer}
diff --git a/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx b/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx
index d27f87d79..777ac6932 100644
--- a/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx
+++ b/packages/console/src/pages/OrganizationDetails/Settings/JitSettings.tsx
@@ -1,4 +1,5 @@
 import { RoleType, type SsoConnectorWithProviderConfig } from '@logto/schemas';
+import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { Controller, type UseFormReturn } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
@@ -69,7 +70,6 @@ function JitSettings({ form }: Props) {
       description="organization_details.jit.description"
     >
       <FormField
-        className={styles.jitFormField}
         title="organization_details.jit.enterprise_sso"
         description={
           <Trans
@@ -87,7 +87,7 @@ function JitSettings({ form }: Props) {
         descriptionPosition="top"
       >
         {!allSsoConnectors?.length && (
-          <InlineNotification>
+          <InlineNotification className={styles.ssoJitContent}>
             <Trans
               i18nKey="admin_console.organization_details.jit.no_enterprise_connector_set"
               components={{ a: <TextLink to={'/' + enterpriseSso.path} /> }}
@@ -100,7 +100,7 @@ function JitSettings({ form }: Props) {
           render={({ field: { onChange, value } }) => (
             <>
               {value.length > 0 && (
-                <div className={styles.ssoConnectorList}>
+                <div className={classNames(styles.ssoJitContent, styles.ssoConnectorList)}>
                   {value.map((id) => {
                     const connector = allSsoConnectors?.find(
                       ({ id: connectorId }) => id === connectorId
@@ -130,6 +130,7 @@ function JitSettings({ form }: Props) {
               {Boolean(filteredSsoConnectors?.length) && (
                 <ActionMenu
                   buttonProps={{
+                    className: styles.ssoJitContent,
                     type: 'default',
                     size: 'medium',
                     title: 'organization_details.jit.add_enterprise_connector',
diff --git a/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss b/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
index e3064f255..9a820bd31 100644
--- a/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
+++ b/packages/console/src/pages/OrganizationDetails/Settings/index.module.scss
@@ -16,10 +16,8 @@
   }
 }
 
-.jitFormField {
-  display: flex;
-  flex-direction: column;
-  gap: _.unit(3);
+.ssoJitContent {
+  margin-top: _.unit(2);
 }
 
 .mfaWarning {
diff --git a/packages/console/src/pages/OrganizationDetails/Settings/index.tsx b/packages/console/src/pages/OrganizationDetails/Settings/index.tsx
index b3911aa15..56f672653 100644
--- a/packages/console/src/pages/OrganizationDetails/Settings/index.tsx
+++ b/packages/console/src/pages/OrganizationDetails/Settings/index.tsx
@@ -7,7 +7,7 @@ import useSWR from 'swr';
 
 import DetailsForm from '@/components/DetailsForm';
 import FormCard from '@/components/FormCard';
-import LogoInputs, { themeToLogoName } from '@/components/ImageInputs';
+import ImageInputs, { themeToLogoName } from '@/components/ImageInputs';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import { organizationLogosForExperienceLink } from '@/consts';
 import CodeEditor from '@/ds-components/CodeEditor';
@@ -107,7 +107,7 @@ function Settings() {
             {...register('description')}
           />
         </FormField>
-        <LogoInputs
+        <ImageInputs
           uploadTitle="organization_details.branding.logo"
           tip={
             <Trans
diff --git a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx
index 5781fea0c..ca95510b7 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx
@@ -85,7 +85,7 @@ function PlanComparisonTable() {
     // UI and branding
     const customDomain = t('branding.custom_domain');
     const customCss = t('branding.custom_css');
-    const appLogoAndFavicon = t('branding.app_logo_and_favicon');
+    const appLogoAndFavicon = t('branding.logo_and_favicon');
     const darkMode = t('branding.dark_mode');
     const i18n = t('branding.i18n');
 
diff --git a/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts
index 6c32bd2f5..020c226c3 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Benutzeroberfläche und Branding',
     custom_domain: 'Benutzerdefinierte Domain',
     custom_css: 'Benutzerdefiniertes CSS',
-    app_logo_and_favicon: 'App-Logo und Favicon',
     dark_mode: 'Dunkler Modus',
     i18n: 'Internationalisierung',
   },
diff --git a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts
index f8dab6be7..e2b468feb 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/index.ts
@@ -36,6 +36,7 @@ const sign_in_exp = {
     with_light: '{{value}}',
     with_dark: '{{value}} (dark)',
     app_logo_and_favicon: 'App logo and favicon',
+    company_logo_and_favicon: 'Company logo and favicon',
   },
   branding_uploads: {
     app_logo: {
@@ -56,6 +57,12 @@ const sign_in_exp = {
       url_placeholder: 'https://your.cdn.domain/logo.png',
       error: 'Organization logo: {{error}}',
     },
+    connector_logo: {
+      title: 'Upload image',
+      url: 'Connector logo URL',
+      url_placeholder: 'https://your.cdn.domain/logo.png',
+      error: 'Connector logo: {{error}}',
+    },
     favicon: {
       title: 'Favicon',
       url: 'Favicon URL',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts
index 7b37a4cd1..035bcf4d6 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,7 @@ const quota_table = {
     title: 'UI and branding',
     custom_domain: 'Custom domain',
     custom_css: 'Custom CSS',
-    app_logo_and_favicon: 'App logo and favicon',
+    logo_and_favicon: 'Logo and favicon',
     dark_mode: 'Dark mode',
     i18n: 'Internationalization',
   },
diff --git a/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts
index 6dfe19df5..622b98464 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Interfaz de usuario y branding',
     custom_domain: 'Dominio personalizado',
     custom_css: 'CSS personalizado',
-    app_logo_and_favicon: 'Logo de la aplicación y favicon',
     dark_mode: 'Modo oscuro',
     i18n: 'Internacionalización',
   },
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts
index f5bcd84cd..f113d1f81 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Interface utilisateur et branding',
     custom_domain: 'Domaine personnalisé',
     custom_css: 'CSS personnalisé',
-    app_logo_and_favicon: "Logo et favicon de l'application",
     dark_mode: 'Mode sombre',
     i18n: 'Internationalisation',
   },
diff --git a/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts
index 7e65c1410..de806d884 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'UI e branding',
     custom_domain: 'Dominio personalizzato',
     custom_css: 'CSS personalizzato',
-    app_logo_and_favicon: "Logo e favicon dell'applicazione",
     dark_mode: 'Modalità scura',
     i18n: 'Internazionalizzazione',
   },
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts
index 77435f288..0f4489942 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'UIとブランディング',
     custom_domain: 'カスタムドメイン',
     custom_css: 'カスタムCSS',
-    app_logo_and_favicon: 'アプリロゴとFavicon',
     dark_mode: 'ダークモード',
     i18n: '国際化',
   },
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts
index 267b38db1..b851fff7f 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'UI 및 브랜딩',
     custom_domain: '사용자 정의 도메인',
     custom_css: '사용자 정의 CSS',
-    app_logo_and_favicon: '앱 로고와 파비콘',
     dark_mode: '다크 모드',
     i18n: '국제화',
   },
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts
index 3201c458d..4892904c2 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Interfejs użytkownika i branding',
     custom_domain: 'Domena niestandardowa',
     custom_css: 'Niestandardowy CSS',
-    app_logo_and_favicon: 'Logo aplikacji i ikona',
     dark_mode: 'Tryb ciemny',
     i18n: 'Internacjonalizacja',
   },
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts
index 2443da100..3d71aacdb 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Interface de usuário e branding',
     custom_domain: 'Domínio personalizado',
     custom_css: 'CSS personalizado',
-    app_logo_and_favicon: 'Logotipo da aplicação e favicon',
     dark_mode: 'Modo escuro',
     i18n: 'Internacionalização',
   },
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts
index d4495134e..c17b65046 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'UI e branding',
     custom_domain: 'Domínio personalizado',
     custom_css: 'CSS personalizado',
-    app_logo_and_favicon: 'Logótipo da aplicação e favicon',
     dark_mode: 'Modo escuro',
     i18n: 'Internacionalização',
   },
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts
index 34ae40cdf..1b487eba5 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Интерфейс и брендинг',
     custom_domain: 'Пользовательский домен',
     custom_css: 'Пользовательский CSS',
-    app_logo_and_favicon: 'Логотип и фавикон приложения',
     dark_mode: 'Темный режим',
     i18n: 'Интернационализация',
   },
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts
index 3dcbba029..1f78ccd30 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: 'Kullanıcı Arayüzü ve Markalama',
     custom_domain: 'Özel alan adı',
     custom_css: 'Özel CSS',
-    app_logo_and_favicon: 'Uygulama logoları ve favicon',
     dark_mode: 'Karanlık mod',
     i18n: 'Uluslararasılaştırma',
   },
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts
index a5425d9b7..0e7364ef4 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: '界面与品牌',
     custom_domain: '自定义域名',
     custom_css: '自定义 CSS',
-    app_logo_and_favicon: '应用图标与网站图标',
     dark_mode: '深色模式',
     i18n: '国际化',
   },
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts
index d72e2ddd8..985dfe212 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: '用戶界面與品牌',
     custom_domain: '自訂網域',
     custom_css: '自訂 CSS',
-    app_logo_and_favicon: '應用程式徽標和網站圖示',
     dark_mode: '深色模式',
     i18n: '國際化',
   },
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts
index 5c2ab0b91..73dadd7b2 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts
@@ -20,7 +20,6 @@ const quota_table = {
     title: '使用者介面和品牌塑造',
     custom_domain: '自訂網域',
     custom_css: '自訂 CSS',
-    app_logo_and_favicon: '應用程式標誌和網站圖示',
     dark_mode: '深色模式',
     i18n: '國際化',
   },
diff --git a/packages/schemas/src/seeds/sign-in-experience.ts b/packages/schemas/src/seeds/sign-in-experience.ts
index d7217af52..866fe317b 100644
--- a/packages/schemas/src/seeds/sign-in-experience.ts
+++ b/packages/schemas/src/seeds/sign-in-experience.ts
@@ -6,7 +6,7 @@ import { MfaPolicy, SignInIdentifier } from '../foundations/index.js';
 
 import { adminTenantId, defaultTenantId } from './tenant.js';
 
-const defaultPrimaryColor = '#6139F6';
+export const defaultPrimaryColor = '#6139F6';
 
 export const createDefaultSignInExperience = (
   forTenantId: string,