fix(*): fix onboarding layout in manager component and kms

REF: TAPC-832 Signed-off-by: Vincent BONMARCHAND <vincent.bonmarchand.ext@corp.ovh.com>
ovh · Jun 24, 2024 · 8359b83 · 8359b83
1 parent f3a8243
commit 8359b83
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx b/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx
@@ -29,7 +29,6 @@ export type OnboardingLayoutProps = PropsWithChildren<{
   orderButtonLabel: string;
   orderHref?: string;
   description?: React.ReactNode;
-  additionalDescriptions?: string[];
   moreInfoHref?: string;
   moreInfoButtonLabel?: string;
   onOrderButtonClick?: () => void;
@@ -46,7 +45,6 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
   hideHeadingSection,
   title,
   description,
-  additionalDescriptions,
   orderHref,
   orderButtonLabel,
   moreInfoHref,
@@ -83,25 +81,14 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
           {description && (
             <OsdsText
               level={ODS_TEXT_LEVEL.body}
-              size={ODS_TEXT_SIZE._800}
+              size={ODS_TEXT_SIZE._400}
               color={ODS_TEXT_COLOR_INTENT.text}
-              className="block text-center mb-4"
+              className="block text-center mb-4 max-w-4xl"
             >
               {description}
             </OsdsText>
-          )}{' '}
-          {additionalDescriptions?.map((desc) => (
-            <OsdsText
-              level={ODS_TEXT_LEVEL.body}
-              size={ODS_TEXT_SIZE._800}
-              color={ODS_TEXT_COLOR_INTENT.text}
-              className="block text-center mb-4"
-              key={desc}
-            >
-              {desc}
-            </OsdsText>
-          ))}
-          <div className="flex  sm:py-8 xs:w-full xs:flex-col sm:items-center sm:flex-row w-full justify-center">
+          )}
+          <div className="flex sm:py-8 xs:w-full xs:flex-col sm:items-center sm:flex-row w-full justify-center">
             <OsdsButton
               inline
               color={ODS_THEME_COLOR_INTENT.primary}

diff --git a/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx b/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx
@@ -1,5 +1,11 @@
 import { OnboardingLayout } from '@ovhcloud/manager-components';
 import React from 'react';
+import {
+  ODS_TEXT_LEVEL,
+  ODS_TEXT_SIZE,
+  ODS_TEXT_COLOR_INTENT,
+} from '@ovhcloud/ods-components';
+import { OsdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import useGuideUtils from '@/hooks/guide/useGuideUtils';
@@ -10,13 +16,23 @@ export default function Onboarding() {
   const { t } = useTranslation('key-management-service/onboarding');
   const navigate = useNavigate();
   const guideLinks = useGuideUtils();
+  const descriptionsKeys = ['description', 'description_secondary'];
 
   return (
     <OnboardingLayout
       title={t('title')}
       img={{ src: onboardingImgSrc }}
-      description={t('description')}
-      additionalDescriptions={[t('description_secondary')]}
+      description={descriptionsKeys.map((descKey) => (
+        <OsdsText
+          level={ODS_TEXT_LEVEL.body}
+          size={ODS_TEXT_SIZE._800}
+          color={ODS_TEXT_COLOR_INTENT.text}
+          className="block text-center mb-4"
+          key={descKey}
+        >
+          {t(descKey)}
+        </OsdsText>
+      ))}
       orderButtonLabel={t('orderButtonLabel')}
       onOrderButtonClick={() =>
         navigate(ROUTES_URLS.createKeyManagementService)