feat(container): fix pnrv2 guided tour

ref: MANAGER-15218 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Sep 25, 2024 · 40207ac · 40207ac
1 parent 57d25df
commit 40207ac
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/...ager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.tsx b/...ager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/AssistanceLinkItem.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 export const AssistanceLinkItem: FunctionComponent<Props> = ({ node, isSelected }) => {
     return (
-        <li className={`flex px-3 align-items-center ${isSelected ? style.sidebar_menu_items_selected : ''} ${style.sidebar_menu_items}`} role="menuitem" >
+        <li className={`flex align-items-center ${isSelected ? style.sidebar_menu_items_selected : ''} ${style.sidebar_menu_items}`} role="menuitem" >
             <SidebarLink
                 handleOnClick={node.onClick}
                 node={node}

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/Assistance/index.tsx
@@ -81,13 +81,13 @@ const AssistanceSidebar: React.FC<ComponentProps<AssistanceProps>> = ({
   };
 
   if (isShort) return (
-    <OsdsPopover className='w-full fixed z-[1000] left-[0.3rem] bottom-[3rem]' id="useful-links" role="menu">
+    <OsdsPopover className='w-full fixed z-[1000] left-[0.3rem] bottom-[4rem]' id="useful-links" role="menu">
       <OsdsButton
         slot="popover-trigger"
         className='w-[4rem]'
         color={ODS_THEME_COLOR_INTENT.primary}
         variant={ODS_BUTTON_VARIANT.ghost}
-        size={ODS_BUTTON_SIZE.sm}
+        size={ODS_BUTTON_SIZE.md}
         title={t('sidebar_assistance_title')}
         contrasted
       >
@@ -105,14 +105,13 @@ const AssistanceSidebar: React.FC<ComponentProps<AssistanceProps>> = ({
   )
 
   return (
-    <ul className="mt-auto pb-3 flex-none" id="useful-links2" role="menu">
+    <ul className="mt-auto pb-3 flex-none" id="useful-links" role="menu">
       <li className="assistance_header px-3 mb-3">
         <h2 className="flex justify-between">
           <span>{t('sidebar_assistance_title')}</span>
         </h2>
       </li>
       {nodeTree.children.map((node: Node) => (
-
         <AssistanceLinkItem
           key={`assistance_${node.id}`}
           node={node}

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/StaticLink.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/StaticLink.tsx
@@ -80,10 +80,13 @@ const StaticLink: React.FC<ComponentProps<StaticLinkProps>> = ({
       )}
       {t(isShortText ? node.shortTranslation : node.translation)}
       {node.isExternal && (
-        <span
-          aria-hidden="true"
-          className={`${style.sidebar_external} oui-icon oui-icon-external-link`}
-        ></span>
+        <OsdsIcon
+          name={ODS_ICON_NAME.EXTERNAL_LINK}
+          className='ml-1'
+          contrasted
+          size={ODS_ICON_SIZE.xxs}
+          color={ODS_THEME_COLOR_INTENT.primary}
+        />
       )}
       {!isShortText && <SidebarLinkTag node={node} />}
       {!isShortText && (count as number) > 0 && (

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx
@@ -323,7 +323,7 @@ const Sidebar = (): JSX.Element => {
                 <li
                   key={node.id}
                   id={node.id}
-                  className={`${style.sidebar_menu_items} ${
+                  className={`py-1 ${style.sidebar_menu_items} ${
                     node.id === selectedNode?.id
                     ? style.sidebar_menu_items_selected
                     : ''

diff --git a/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss b/packages/manager/apps/container/src/container/nav-reshuffle/sidebar/style.module.scss
@@ -14,6 +14,7 @@ $sidebar-font-size: 0.875rem;
   background-color: $p-700;
   position: relative;
   color: white;
+  gap: 0.125rem;
 
   &_wrapper {
     display: flex;