fix the Search Icons component + adds a few design tweaks

mui · Jan 30, 2024 · 272f916 · 272f916
1 parent 4e79715
commit 272f916
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import MuiPaper from '@mui/material/Paper';
 import copy from 'clipboard-copy';
+import Box from '@mui/material/Box';
 import InputBase from '@mui/material/InputBase';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
@@ -114,15 +115,16 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
   boxSizing: 'content-box',
   cursor: 'pointer',
   color: theme.palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
+  border: '1px solid transparent',
+  borderRadius: '12px',
   transition: theme.transitions.create(['background-color', 'box-shadow'], {
     duration: theme.transitions.duration.shortest,
   }),
   padding: theme.spacing(2),
   margin: theme.spacing(0.5, 0),
   '&:hover': {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1],
+    backgroundColor: theme.palette.background.default,
+    borderColor: theme.palette.primary.light,
   },
 }));
 
@@ -208,9 +210,8 @@ const Title = styled(Typography)(({ theme }) => ({
   },
 }));
 
-const CanvasComponent = styled('div')(({ theme }) => ({
+const CanvasComponent = styled(Box)(({ theme }) => ({
   fontSize: 210,
-  marginTop: theme.spacing(2),
   color: theme.palette.text.primary,
   backgroundSize: '30px 30px',
   backgroundColor: 'transparent',
@@ -225,7 +226,7 @@ const FontSizeComponent = styled('span')(({ theme }) => ({
   margin: theme.spacing(2),
 }));
 
-const ContextComponent = styled('div', {
+const ContextComponent = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'contextColor',
 })(({ theme, contextColor }) => ({
   margin: theme.spacing(0.5),
@@ -270,7 +271,20 @@ const DialogDetails = React.memo(function DialogDetails(props) {
   };
 
   return (
-    <Dialog fullWidth maxWidth="sm" open={open} onClose={handleClose}>
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      open={open}
+      onClose={handleClose}
+      sx={{
+        '& .MuiDialog-paper': {
+          borderRadius: 2.5,
+          backgroundImage: 'none',
+          border: '1px solid',
+          borderColor: 'divider',
+        },
+      }}
+    >
       {selectedIcon ? (
         <React.Fragment>
           <DialogTitle>
@@ -369,7 +383,7 @@ const DialogDetails = React.memo(function DialogDetails(props) {
               </Grid>
             </Grid>
           </DialogContent>
-          <DialogActions>
+          <DialogActions sx={{ borderTop: '1px solid', borderColor: 'divider' }}>
             <Button onClick={handleClose}>{t('close')}</Button>
           </DialogActions>
         </React.Fragment>
@@ -394,22 +408,21 @@ const Form = styled('form')({
 const Paper = styled(MuiPaper)(({ theme }) => ({
   position: 'sticky',
   top: 80,
-  padding: '2px 4px',
   display: 'flex',
   alignItems: 'center',
   marginBottom: theme.spacing(2),
   width: '100%',
   borderRadius: '12px',
   border: '1px solid',
   borderColor: theme.palette.divider,
+  boxShadow: 'none',
 }));
 
 function formatNumber(value) {
   return new Intl.NumberFormat('en-US').format(value);
 }
 
 const Input = styled(InputBase)({
-  marginLeft: 8,
   flex: 1,
 });
 
@@ -523,7 +536,7 @@ export default function SearchIcons() {
   );
 
   return (
-    <Grid container sx={{ minHeight: 500, my: 2 }}>
+    <Grid container sx={{ minHeight: 500 }}>
       <Grid item xs={12} sm={3}>
         <Form>
           <Typography fontWeight={500} sx={{ mb: 1 }}>