feat: ui changes

README.md

@@ -1,5 +1,4 @@
-<p align="center"><img src="src/assets/logo.png" width="80"></p>
-<h1 align="center">OmniTools</h1>
+<p align="center"><img src="src/assets/logo.png" width="150"></p>
 
 [//]: # ([![Docker Pulls]&#40;https://img.shields.io/docker/pulls/iib0011/omni-tools&#41;]&#40;https://hub.docker.com/r/iib0011/omni-tools&#41;)
 
@@ -100,7 +99,7 @@ npm run test
 npm run test:e2e
 ```
 
-[//]: # (<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">)
+<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">
 
 ## 🤝 Looking to contribute?
 

package.json

@@ -54,6 +54,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@iconify/react": "^5.2.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@types/color": "^3.0.6",

scripts/create-tool.mjs

@@ -92,12 +92,11 @@ createToolFile(
   `
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-// import image from '@assets/text.png';
 
 export const tool = defineTool('${type}', {
   name: '${toolNameTitleCase}',
   path: '${toolName}',
-  // image,
+  icon: '',
   description: '',
   shortDescription: '',
   keywords: ['${toolName.split('-').join("', '")}'],

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,29 +3,46 @@ 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;
 }
 
 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 && (