From c8615b2e467437c9d3cd3d22ce0a764fdb081223 Mon Sep 17 00:00:00 2001
From: vmangalr <vmangalr@akamai.com>
Date: Wed, 18 Sep 2024 10:50:47 +0530
Subject: [PATCH] upcoming: [DI-20800] - Use theme spacing wherever applicable

---
 .../Dashboard/CloudPulseDashboardLanding.tsx         |  6 ++++--
 .../features/CloudPulse/Overview/GlobalFilters.tsx   | 12 +++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
index 3907346f617..9c4ee4abd05 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper } from '@mui/material';
+import { Grid, Paper, useTheme } from '@mui/material';
 import * as React from 'react';
 
 import CloudPulseIcon from 'src/assets/icons/entityIcons/monitor.svg';
@@ -52,6 +52,8 @@ export const CloudPulseDashboardLanding = () => {
 
   const { isLoading } = useLoadUserPreferences();
 
+  const theme = useTheme();
+
   /**
    * Takes an error message as input and renders a placeholder with the error message
    * @param errorMessage {string} - Error message which will be displayed
@@ -131,7 +133,7 @@ export const CloudPulseDashboardLanding = () => {
   }
 
   return (
-    <Grid container paddingTop={1} spacing={2}>
+    <Grid container paddingTop={theme.spacing(1)} spacing={theme.spacing(2)}>
       <Grid item xs={12}>
         <Paper>
           <GlobalFilters
diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
index 3c4575dce41..564fc903089 100644
--- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
+++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
@@ -75,13 +75,19 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
 
   return (
     <Grid container>
-      <Grid container item m={3} rowGap={1} xs={12}>
+      <Grid
+        container
+        item
+        m={theme.spacing(3)}
+        rowGap={theme.spacing(1)}
+        xs={12}
+      >
         <Grid
-          columnSpacing={2}
+          columnSpacing={theme.spacing(2)}
           container
           item
           justifyContent="space-between"
-          rowSpacing={2}
+          rowSpacing={theme.spacing(2)}
         >
           <Grid display={'flex'} item md={4} sm={5} xs={12}>
             <CloudPulseDashboardSelect