feat: ui changes

src/components/Hero.tsx

@@ -75,7 +75,8 @@ export default function Hero() {
               ...params.InputProps,
               endAdornment: <SearchIcon />,
               sx: {
-                borderRadius: 4
+                borderRadius: 4,
+                backgroundColor: 'white'
               }
             }}
             onChange={(event) => handleInputChange(event, event.target.value)}
@@ -114,6 +115,7 @@ export default function Hero() {
                 borderRadius: 3,
                 borderColor: 'grey',
                 borderStyle: 'solid',
+                backgroundColor: 'white',
                 cursor: 'pointer',
                 '&:hover': { backgroundColor: '#FAFAFD' }
               }}

src/components/Navbar/index.tsx

@@ -50,9 +50,18 @@ const Navbar: React.FC = () => {
   return (
     <AppBar
       position="static"
-      style={{ backgroundColor: 'white', color: 'black' }}
+      style={{
+        backgroundColor: 'white',
+        color: 'black'
+      }}
     >
-      <Toolbar sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+      <Toolbar
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          boxShadow: '0px 2px 2px #C8C9CE'
+        }}
+      >
         <img
           onClick={() => navigate('/')}
           style={{ cursor: 'pointer' }}

src/components/ToolHeader.tsx

@@ -3,11 +3,13 @@ import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
 import Grid from '@mui/material/Grid';
+import { Icon, IconifyIcon } from '@iconify/react';
+import { categoriesColors } from '../config/uiConfig';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon;
   type: string;
 }
 
@@ -15,17 +17,32 @@ function ToolLinks() {
   return (
     <Grid container spacing={2} mt={1}>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tool">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tool"
+        >
           Use This Tool
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#examples">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#examples"
+        >
           See Examples
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tour">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tour"
+        >
           Learn How to Use
         </Button>
       </Grid>
@@ -34,7 +51,7 @@ function ToolLinks() {
 }
 
 export default function ToolHeader({
-  image,
+  icon,
   title,
   description,
   type
@@ -60,10 +77,18 @@ export default function ToolHeader({
           <ToolLinks />
         </Grid>
 
-        {image && (
+        {icon && (
           <Grid item xs={12} md={4}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-              <img width={'250'} src={image} />
+              <Icon
+                icon={icon}
+                fontSize={'250'}
+                color={
+                  categoriesColors[
+                    Math.floor(Math.random() * categoriesColors.length)
+                  ]
+                }
+              />
             </Box>
           </Grid>
         )}

src/components/ToolLayout.tsx

@@ -6,17 +6,18 @@ import Separator from './Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
 import { capitalizeFirstLetter } from '../utils/string';
+import { IconifyIcon } from '@iconify/react';
 
 export default function ToolLayout({
   children,
   title,
   description,
-  image,
+  icon,
   type
 }: {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon | string;
   type: string;
   children: ReactNode;
 }) {
@@ -36,6 +37,7 @@ export default function ToolLayout({
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
+      sx={{ backgroundColor: '#F5F5FA' }}
     >
       <Helmet>
         <title>{`${title} - Omni Tools`}</title>
@@ -44,7 +46,7 @@ export default function ToolLayout({
         <ToolHeader
           title={title}
           description={description}
-          image={image}
+          icon={icon}
           type={type}
         />
         {children}

src/components/input/ToolFileInput.tsx

@@ -83,7 +83,8 @@ export default function ToolFileInput({
           height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
-          boxShadow: '5'
+          boxShadow: '5',
+          bgcolor: 'white'
         }}
       >
         {preview ? (

src/components/input/ToolTextInput.tsx

@@ -50,7 +50,14 @@ export default function ToolTextInput({
         fullWidth
         multiline
         rows={10}
-        inputProps={{ 'data-testid': 'text-input' }}
+        sx={{
+          '&.MuiTextField-root': {
+            backgroundColor: 'white'
+          }
+        }}
+        inputProps={{
+          'data-testid': 'text-input'
+        }}
       />
       <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
       <input

src/components/result/ToolFileResult.tsx

@@ -67,7 +67,8 @@ export default function ToolFileResult({
           height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
-          boxShadow: '5'
+          boxShadow: '5',
+          bgcolor: 'white'
         }}
       >
         {preview && (

src/components/result/ToolTextResult.tsx

@@ -41,6 +41,11 @@ export default function ToolTextResult({
         value={replaceSpecialCharacters(value)}
         fullWidth
         multiline
+        sx={{
+          '&.MuiTextField-root': {
+            backgroundColor: 'white'
+          }
+        }}
         rows={10}
         inputProps={{ 'data-testid': 'text-result' }}
       />