feat(pci-load-balancer): review design

ref: DTCORE-2846 Signed-off-by: Yoann Fievez <[email protected]>
ovh · Nov 15, 2024 · f13210c · f13210c
1 parent 2cc2cd4
commit f13210c
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 27 deletions.
diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/Listeners.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/Listeners.page.tsx
@@ -1,4 +1,4 @@
-import { Links } from '@ovh-ux/manager-react-components';
+import { Headers, Links } from '@ovh-ux/manager-react-components';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
 import { OsdsText } from '@ovhcloud/ods-components/react';
@@ -14,15 +14,9 @@ export default function Listeners() {
 
   return (
     <div>
-      <OsdsText
-        size={ODS_TEXT_SIZE._600}
-        level={ODS_TEXT_LEVEL.heading}
-        color={ODS_THEME_COLOR_INTENT.text}
-      >
-        {t('octavia_load_balancer_listeners_title')}
-      </OsdsText>
+      <Headers title={t('octavia_load_balancer_listeners_title')} />
 
-      <div className="my-8">
+      <div>
         <OsdsText
           className="block"
           size={ODS_TEXT_SIZE._400}

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/list/List.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/list/List.page.tsx
@@ -69,7 +69,7 @@ export default function ListenerList() {
       <div className="sm:flex items-center justify-between mt-4">
         <OsdsButton
           size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.stroked}
+          variant={ODS_BUTTON_VARIANT.flat}
           color={ODS_THEME_COLOR_INTENT.primary}
           className="xs:mb-0.5 sm:mb-0"
           onClick={() => {
@@ -80,7 +80,7 @@ export default function ListenerList() {
           <OsdsIcon
             size={ODS_ICON_SIZE.xs}
             name={ODS_ICON_NAME.PLUS}
-            className="mr-2"
+            className="mr-2 bg-white"
             color={ODS_THEME_COLOR_INTENT.primary}
           />
           {t('octavia_load_balancer_listeners_add_button')}

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/log/Streams.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/log/Streams.page.tsx
@@ -89,7 +89,7 @@ export default function StreamsPage() {
         className="mt-4"
         color={ODS_THEME_COLOR_INTENT.primary}
         size={ODS_BUTTON_SIZE.sm}
-        variant={ODS_BUTTON_VARIANT.stroked}
+        variant={ODS_BUTTON_VARIANT.flat}
         onClick={() => {
           gotoAddDataStream();
         }}
@@ -99,6 +99,7 @@ export default function StreamsPage() {
           <OsdsIcon
             name={ODS_ICON_NAME.ADD}
             size={ODS_ICON_SIZE.xxs}
+            className="bg-white"
             color={ODS_THEME_COLOR_INTENT.primary}
           />
         </span>

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/Pools.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/Pools.page.tsx
@@ -1,4 +1,4 @@
-import { Links } from '@ovh-ux/manager-react-components';
+import { Headers, Links } from '@ovh-ux/manager-react-components';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
 import { OsdsText } from '@ovhcloud/ods-components/react';
@@ -14,15 +14,9 @@ export default function Pools() {
 
   return (
     <div>
-      <OsdsText
-        size={ODS_TEXT_SIZE._600}
-        level={ODS_TEXT_LEVEL.heading}
-        color={ODS_THEME_COLOR_INTENT.text}
-      >
-        {t('octavia_load_balancer_pools_title')}
-      </OsdsText>
+      <Headers title={t('octavia_load_balancer_pools_title')} />
 
-      <div className="my-8">
+      <div>
         <OsdsText
           className="block"
           size={ODS_TEXT_SIZE._400}

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/list/List.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/list/List.page.tsx
@@ -69,7 +69,7 @@ export default function PoolList() {
       <div className="sm:flex items-center justify-between mt-4">
         <OsdsButton
           size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.stroked}
+          variant={ODS_BUTTON_VARIANT.flat}
           color={ODS_THEME_COLOR_INTENT.primary}
           className="xs:mb-0.5 sm:mb-0"
           onClick={() => {
@@ -80,7 +80,7 @@ export default function PoolList() {
           <OsdsIcon
             size={ODS_ICON_SIZE.xs}
             name={ODS_ICON_NAME.PLUS}
-            className="mr-2"
+            className="mr-2 bg-white"
             color={ODS_THEME_COLOR_INTENT.primary}
           />
           {t('octavia_load_balancer_pools_add_button')}

diff --git a/packages/manager/apps/pci-load-balancer/src/pages/listing/Listing.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/listing/Listing.page.tsx
@@ -83,7 +83,7 @@ export default function ListingPage() {
       <div className="sm:flex items-center justify-between mt-4">
         <OsdsButton
           size={ODS_BUTTON_SIZE.sm}
-          variant={ODS_BUTTON_VARIANT.stroked}
+          variant={ODS_BUTTON_VARIANT.flat}
           color={ODS_THEME_COLOR_INTENT.primary}
           className="xs:mb-0.5 sm:mb-0"
           onClick={() => {
@@ -94,7 +94,7 @@ export default function ListingPage() {
           <OsdsIcon
             size={ODS_ICON_SIZE.xs}
             name={ODS_ICON_NAME.PLUS}
-            className="mr-2"
+            className="mr-2 bg-white"
             color={ODS_THEME_COLOR_INTENT.primary}
           />
           {t('octavia_load_balancers_add_button')}

diff --git a/...es/manager/modules/manager-pci-common/src/components/shape-input/ShapeInput.component.tsx b/...es/manager/modules/manager-pci-common/src/components/shape-input/ShapeInput.component.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import isEqual from 'lodash.isequal';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { AccordionComponent } from '../accordion/Accordion.component';
 import { DefaultItemLabelComponent } from './default-components/item-label';
 import { DefaultStackLabelComponent } from './default-components/stack-label';

diff --git a/...odules/manager-pci-common/src/components/shape-input/default-components/default-shape.tsx b/...odules/manager-pci-common/src/components/shape-input/default-components/default-shape.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { GHOST_BUTTON_CLASS } from '../constants';
 
 export const DefaultShapeComponent = ({

diff --git a/.../modules/manager-pci-common/src/components/shape-input/default-components/group-label.tsx b/.../modules/manager-pci-common/src/components/shape-input/default-components/group-label.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const DefaultGroupLabelComponent = ({
   groupName,
   isGroupSelected,

diff --git a/...r/modules/manager-pci-common/src/components/shape-input/default-components/item-label.tsx b/...r/modules/manager-pci-common/src/components/shape-input/default-components/item-label.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const DefaultItemLabelComponent = ({
   item,
   isItemSelected,

diff --git a/.../modules/manager-pci-common/src/components/shape-input/default-components/stack-label.tsx b/.../modules/manager-pci-common/src/components/shape-input/default-components/stack-label.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const DefaultStackLabelComponent = ({
   stackKey,
   isStackSelected,

diff --git a/.../modules/manager-pci-common/src/components/shape-input/default-components/stack-title.tsx b/.../modules/manager-pci-common/src/components/shape-input/default-components/stack-title.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const DefaultStackTitleComponent = ({
   stackKey,
 }: {