upcoming: [DI-20929] - Updated styling

linode · Dec 9, 2024 · af2f296 · af2f296
1 parent 48c186b
commit af2f296
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
@@ -74,8 +74,8 @@ export const CloudPulseDashboardLanding = () => {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12}>
-        <Paper>
-          <Box display={'flex'} flexDirection={'column'}>
+        <Paper sx={{ padding: 0 }}>
+          <Box display="flex" flexDirection="column">
             <GlobalFilters
               handleAnyFilterChange={onFilterChange}
               handleDashboardChange={onDashboardChange}

diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
@@ -38,7 +38,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
       dashboardId
     );
 
-    const [filterValue, setFilterValue] = React.useState<FilterData>({
+    const [filterData, setFilterData] = React.useState<FilterData>({
       id: {},
       label: {},
     });
@@ -58,7 +58,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
 
     const onFilterChange = React.useCallback(
       (filterKey: string, value: FilterValueType, labels: string[]) => {
-        setFilterValue((prev) => {
+        setFilterData((prev) => {
           return {
             id: {
               ...prev.id,
@@ -112,7 +112,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
     const isFilterBuilderNeeded = checkIfFilterBuilderNeeded(dashboard);
     const isMandatoryFiltersSelected = checkMandatoryFiltersSelected({
       dashboardObj: dashboard,
-      filterValue: filterValue.id,
+      filterValue: filterData.id,
       resource,
       timeDuration,
     });
@@ -170,7 +170,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
           <CloudPulseDashboard
             {...getDashboardProperties({
               dashboardObj: dashboard,
-              filterValue: filterValue.id,
+              filterValue: filterData.id,
               resource,
               timeDuration,
             })}

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilter.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilter.tsx
@@ -13,14 +13,17 @@ export const CloudPulseAppliedFilter = (
 
   return (
     <Box
+      sx={{
+        overflowX: 'hidden',
+        overflowY: 'auto',
+      }}
       data-testid="applied-filter"
       display="flex"
       flexDirection={{ sm: 'row', xs: 'column' }}
       flexWrap={{ sm: 'wrap' }}
       maxHeight="70px"
       mb={2}
       mx={3}
-      overflow="auto"
       pb={2}
       rowGap={1.5}
     >
@@ -38,15 +41,15 @@ export const CloudPulseAppliedFilter = (
             {filterValue.map((value, index) => {
               return (
                 <Chip
-                  sx={{
-                    backgroundColor: '#f0f7ff',
-                    color: '#3d3d42',
+                  sx={(theme) => ({
+                    backgroundColor: theme.tokens.color.Ultramarine[10],
+                    color: theme.tokens.color.Neutrals.Black,
                     fontSize: '14px',
                     mr: index === filterValue.length - 1 ? 4 : 1,
                     px: 1,
                     py: 0.5,
-                    width: { sm: 'fit-content', xs: '100%' },
-                  }}
+                    width: { sm: 'fit-content', xs: '98%' },
+                  })}
                   key={`${label} ${value}`}
                   label={value}
                 />

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx
@@ -68,7 +68,7 @@ export interface CloudPulseCustomSelectProps {
    * The callback function , that will be called on a filter change
    * @param filterKey - The filterKey of the component
    * @param value - The selected filter value
-   * @param labels - Lables of the selected filter value
+   * @param labels - Labels of the selected filter value
    */
   handleSelectionChange: (
     filterKey: string,

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
@@ -229,8 +229,10 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
     );
 
     const toggleShowFilter = () => {
-      setShowFilter((showFilterPrev) => !showFilterPrev);
-      handleToggleAppliedFilter(showFilter);
+      setShowFilter((showFilterPrev) => {
+        handleToggleAppliedFilter(showFilterPrev);
+        return !showFilterPrev;
+      });
     };
 
     const RenderFilters = React.useCallback(() => {
@@ -328,6 +330,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
           item
           maxHeight={theme.spacing(23)}
           overflow={'auto'}
+          pr={{ sm: 0, xs: 2 }}
           rowGap={theme.spacing(2)}
           xs={12}
         >