chore: upgrade vanilla v4 MAASENG-2086 (#5087)

* fix: stepper center align text
* update overview card top padding
* fix secondary navigation top padding

package.json

@@ -73,7 +73,7 @@
     "redux-saga": "1.2.2",
     "typed-redux-saga": "1.5.0",
     "typescript": "5.1.3",
-    "vanilla-framework": "3.11.1",
+    "vanilla-framework": "4.0.0",
     "yup": "0.32.11"
   },
   "devDependencies": {

src/app/base/components/AppSideNavigation/_index.scss

@@ -85,7 +85,7 @@
       font-size: #{map-get($font-sizes, h4)}rem;
       line-height: map-get($line-heights, x-small);
       margin-bottom: 1.25rem !important;
-      padding-top: 0.051rem !important;
+      padding-top: 0 !important;
       margin-left: 2rem !important;
       @media only screen and (min-width: ($breakpoint-small + 1)) {
         margin-left: 2.5rem !important;

src/app/base/components/SecondaryNavigation/SecondaryNavigation.tsx

@@ -110,7 +110,7 @@ export const SecondaryNavigation = ({
         className={`p-side-navigation__drawer is-maas-${theme}--accent u-padding-top--medium`}
       >
         <h2
-          className="p-side-navigation__title p-heading--4 p-panel__logo-name"
+          className="p-side-navigation__title p-heading--4 p-panel__logo-name u-no-padding--top"
           data-testid="section-header-title"
         >
           {title}

src/app/base/components/SectionHeader/_index.scss

@@ -5,6 +5,7 @@
 
   .section-header__title {
     margin: 0 $sph--large $spv--large 0;
+    padding-top: 0.051rem;
   }
 
   .section-header__subtitle {

src/app/base/components/Stepper/_index.scss

@@ -19,6 +19,7 @@
       margin-bottom: $spv--x-small;
 
       &::before {
+        text-align: center;
         background-color: $color-light;
       }
 

src/app/base/components/node/OverviewCard/ControllerStatusCard/ControllerStatusCard.tsx

@@ -128,7 +128,7 @@ const ControllerStatusCard = ({ controller }: Props): JSX.Element => {
   return (
     <>
       <div className="overview-card__status" data-testid="controller-status">
-        <strong className="p-muted-heading">Overview</strong>
+        <strong className="p-muted-heading u-no-padding--top">Overview</strong>
         <h4 className="u-no-margin--bottom">
           {controller.node_type_display}&nbsp;
           {controller.versions && (

src/app/base/components/node/OverviewCard/CpuCard/CpuCard.tsx

@@ -34,7 +34,9 @@ const CpuCard = ({ node, setSidePanelContent }: Props): JSX.Element => (
   <>
     <div className="overview-card__cpu">
       <div className="u-flex--between">
-        <strong className="p-muted-heading u-no-margin--bottom">CPU</strong>
+        <strong className="p-muted-heading u-no-margin--bottom u-no-padding--top">
+          CPU
+        </strong>
         <small className="u-no-margin--bottom u-text--muted">
           {node.architecture}
         </small>

src/app/base/components/node/OverviewCard/MachineStatusCard/MachineStatusCard.tsx

@@ -61,7 +61,7 @@ const MachineStatusCard = ({ machine }: Props): JSX.Element => {
   return (
     <>
       <div className="overview-card__status" data-testid="machine-status">
-        <strong className="p-muted-heading u-flex--between u-no-margin--bottom">
+        <strong className="p-muted-heading u-flex--between u-no-margin--bottom u-no-padding--top">
           {isVM(machine, machineTags)
             ? "Virtual Machine Status"
             : "Machine Status"}

src/app/base/components/node/OverviewCard/MemoryCard/MemoryCard.tsx

@@ -13,7 +13,7 @@ type Props = {
 const MemoryCard = ({ node, setSidePanelContent }: Props): JSX.Element => (
   <>
     <div className="overview-card__memory">
-      <strong className="p-muted-heading u-flex--between u-no-margin--bottom">
+      <strong className="p-muted-heading u-flex--between u-no-margin--bottom u-no-padding--top">
         Memory
       </strong>
       <h4 className="u-no-margin--bottom">

src/app/base/components/node/OverviewCard/StorageCard/StorageCard.tsx

@@ -17,7 +17,7 @@ type Props = {
 const StorageCard = ({ node, setSidePanelContent }: Props): JSX.Element => (
   <>
     <div className="overview-card__storage">
-      <strong className="p-muted-heading u-flex--between u-no-margin--bottom">
+      <strong className="p-muted-heading u-flex--between u-no-margin--bottom u-no-padding--top">
         Storage
       </strong>
       <h4 className="u-no-margin--bottom">