udpate overview card top padding

- fix secondary navigation top padding
canonical · Aug 16, 2023 · f90b94b · f90b94b
1 parent df02c82
commit f90b94b
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 7 deletions.
diff --git a/src/app/base/components/AppSideNavigation/_index.scss b/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;

diff --git a/src/app/base/components/SecondaryNavigation/SecondaryNavigation.tsx b/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}

diff --git a/src/app/base/components/node/OverviewCard/ControllerStatusCard/ControllerStatusCard.tsx b/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 && (

diff --git a/src/app/base/components/node/OverviewCard/CpuCard/CpuCard.tsx b/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>

diff --git a/src/app/base/components/node/OverviewCard/MachineStatusCard/MachineStatusCard.tsx b/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"}

diff --git a/src/app/base/components/node/OverviewCard/MemoryCard/MemoryCard.tsx b/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">

diff --git a/src/app/base/components/node/OverviewCard/StorageCard/StorageCard.tsx b/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">