[data grid] Update filter panel input variant

packages/x-data-grid/src/components/panel/GridPanelContent.tsx

@@ -23,13 +23,15 @@ const GridPanelContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
   maxHeight: 400,
-});
+  padding: theme.spacing(2.5, 1.5, 2, 1),
+  gap: theme.spacing(2.5),
+}));
 
 function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> }) {
   const { className, ...other } = props;

packages/x-data-grid/src/components/panel/GridPanelFooter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, SxProps, Theme } from '@mui/system';
+import { styled, SxProps, Theme } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -24,9 +24,10 @@ const GridPanelFooterRoot = styled('div', {
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
-  padding: theme.spacing(0.5),
+  padding: theme.spacing(1),
   display: 'flex',
   justifyContent: 'space-between',
+  borderTop: `1px solid ${theme.palette.divider}`,
 }));
 
 function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> }) {

packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

@@ -146,27 +146,24 @@ const GridFilterFormRoot = styled('div', {
   overridesResolver: (props, styles) => styles.filterForm,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
   display: 'flex',
-  padding: theme.spacing(1),
+  gap: theme.spacing(1.5),
 }));
 
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
   flexShrink: 0,
-  justifyContent: 'flex-end',
-  marginRight: theme.spacing(0.5),
-  marginBottom: theme.spacing(0.2),
-}));
+  justifyContent: 'center',
+});
 
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput,
 })<{ ownerState: OwnerState }>({
-  minWidth: 55,
-  marginRight: 5,
+  minWidth: 75,
   justifyContent: 'end',
 });
 
@@ -425,7 +422,6 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
         {...other}
       >
         <FilterFormDeleteIcon
-          variant="standard"
           as={rootProps.slots.baseFormControl}
           {...baseFormControlProps}
           {...deleteIconProps}
@@ -448,7 +444,8 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
           </rootProps.slots.baseIconButton>
         </FilterFormDeleteIcon>
         <FilterFormLogicOperatorInput
-          variant="standard"
+          variant="outlined"
+          size="small"
           as={rootProps.slots.baseFormControl}
           {...baseFormControlProps}
           {...logicOperatorInputProps}
@@ -500,7 +497,8 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
           </rootProps.slots.baseSelect>
         </FilterFormLogicOperatorInput>
         <FilterFormColumnInput
-          variant="standard"
+          variant="outlined"
+          size="small"
           as={rootProps.slots.baseFormControl}
           {...baseFormControlProps}
           {...columnInputProps}
@@ -541,7 +539,8 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
           </rootProps.slots.baseSelect>
         </FilterFormColumnInput>
         <FilterFormOperatorInput
-          variant="standard"
+          variant="outlined"
+          size="small"
           as={rootProps.slots.baseFormControl}
           {...baseFormControlProps}
           {...operatorInputProps}
@@ -586,7 +585,8 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
           </rootProps.slots.baseSelect>
         </FilterFormOperatorInput>
         <FilterFormValueInput
-          variant="standard"
+          variant="outlined"
+          size="small"
           as={rootProps.slots.baseFormControl}
           {...baseFormControlProps}
           {...valueInputPropsOther}
@@ -599,6 +599,8 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
         >
           {currentOperator?.InputComponent ? (
             <currentOperator.InputComponent
+              variant="outlined"
+              size="small"
               apiRef={apiRef}
               item={item}
               applyValue={applyFilterChanges}