style(console,phrases): update selector styles (#6702)

* style(console,phrases): update selector styles update selector styles and content * style(console): adjust font size adjust font size
logto-io · Oct 22, 2024 · 05e610a · 05e610a
1 parent 8b8320b
commit 05e610a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx b/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import {
   type Application,
   type SsoConnectorWithProviderConfig,
@@ -178,7 +179,14 @@ function ConfigForm({
                     )}
                     options={applications.map((application) => ({
                       value: application.id,
-                      title: `${application.name} (${application.type}, ID: ${application.id})`,
+                      title: (
+                        <span>
+                          {application.name}
+                          <span className={styles.applicationDetails}>
+                            ({t(`guide.categories.${application.type}`)}, ID: {application.id})
+                          </span>
+                        </span>
+                      ),
                     }))}
                     value={value}
                     error={emptyApplicationsError ?? errors.config?.defaultApplicationId?.message}
@@ -215,7 +223,7 @@ function ConfigForm({
                             }_title`
                           )}
                         </div>
-                        <div>
+                        <div className={styles.radioCardBody}>
                           {t(
                             `enterprise_sso_details.idp_initiated_auth_config.auto_authentication_${
                               value ? 'enabled' : 'disabled'
@@ -315,3 +323,4 @@ function ConfigForm({
 }
 
 export default ConfigForm;
+/* eslint-enable max-lines */
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/index.module.scss
@@ -9,15 +9,23 @@
   }
 }
 
+.applicationDetails {
+  margin-inline-start: _.unit(2);
+  color: var(--color-text-secondary);
+}
+
 .radioCardTitle {
   font: var(--font-label-2);
   padding-inline-end: _.unit(5);
   margin-bottom: _.unit(2);
 }
 
+.radioCardBody {
+  color: var(--color-text-secondary);
+}
+
 .radioCardFooter {
   margin-top: _.unit(4);
-  font: var(--font-body-3);
   color: var(--color-text-secondary);
 }
 
@@ -32,5 +40,5 @@
 }
 
 div[class*='radio'][class*='disabled'] {
-  color: var(--color-text);
+  color: inherit;
 }
diff --git a/packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts b/packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts
@@ -88,15 +88,14 @@ const enterprise_sso_details = {
       'No applications found. Please add one in the <a>Applications</a> section.',
     empty_applications_placeholder: 'No applications',
     authentication_type: 'Authentication type',
-    auto_authentication_disabled_title: 'Redirect to SP-initiated SSO (Recommended)',
+    auto_authentication_disabled_title: 'Redirect to client for SP-initiated SSO',
     auto_authentication_disabled_description:
-      'Redirect users to the client-side application to initiate a secure SP-initiated OIDC authentication.  This will prevent the CSRF attack and increase the security of the authentication process.',
+      'Recommended. Redirect users to the client-side application to initiate a secure SP-initiated OIDC authentication.  This will prevent the CSRF attacks.',
     auto_authentication_enabled_title: 'Directly sign in using the IdP-initiated SSO',
     auto_authentication_enabled_description:
-      'Sign in directly using IdP-initiated SSO authentication. After successful sign-in, users will be redirected to the specified Redirect URI with the authorization code. (Without state and PKCE validation)',
-    auto_authentication_disabled_app:
-      'For traditional web applications and single-page applications (SPA)',
-    auto_authentication_enabled_app: 'For traditional web applications only',
+      'After successful sign-in, users will be redirected to the specified Redirect URI with the authorization code (Without state and PKCE validation).',
+    auto_authentication_disabled_app: 'For traditional web app, single-page app (SPA)',
+    auto_authentication_enabled_app: 'For traditional web app',
     idp_initiated_auth_callback_uri: 'Client callback URI',
     idp_initiated_auth_callback_uri_tooltip:
       'The client callback URI to initiate a SP-initiated SSO authentication flow. An ssoConnectorId will be appended to the URI as a query parameter. (e.g., https://your.domain/sso/callback?connectorId={{ssoConnectorId}})',