diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 605ad84..a9cdceb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,43 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -76,7 +111,7 @@
"git-widget-placeholder": "main",
"ignore.virus.scanning.warn.message": "true",
"kotlin-language-version-configured": "true",
- "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/assets",
+ "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/.github",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
@@ -109,11 +144,11 @@
+
-
@@ -255,14 +290,8 @@
-
-
-
- 1719358195260
-
-
-
- 1719358195260
+
+
@@ -648,7 +677,15 @@
1740324274955
-
+
+
+ 1740460017596
+
+
+
+ 1740460017596
+
+
@@ -680,7 +717,6 @@
-
@@ -705,7 +741,8 @@
-
+
+
diff --git a/README.md b/README.md
index a6f0502..deeb5e5 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
-
-OmniTools
+
[//]: # ([](https://hub.docker.com/r/iib0011/omni-tools))
@@ -100,7 +99,7 @@ npm run test
npm run test:e2e
```
-[//]: # (
)
+
## 🤝 Looking to contribute?
diff --git a/package-lock.json b/package-lock.json
index 7e73af7..355ad14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,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",
@@ -1472,6 +1473,29 @@
"deprecated": "Use @eslint/object-schema instead",
"dev": true
},
+ "node_modules/@iconify/react": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.2.0.tgz",
+ "integrity": "sha512-7Sdjrqq3fkkQNks9SY3adGC37NQTHsBJL2PRKlQd455PoDi9s+Es9AUTY+vGLFOYs5yO9w9yCE42pmxCwG26WA==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@iconify/types": "^2.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/cyberalien"
+ },
+ "peerDependencies": {
+ "react": ">=16"
+ }
+ },
+ "node_modules/@iconify/types": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+ "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
diff --git a/package.json b/package.json
index d0722d3..35798dc 100644
--- a/package.json
+++ b/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",
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index b149588..827cb37 100644
--- a/scripts/create-tool.mjs
+++ b/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("', '")}'],
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a120149..9f226a3 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -75,7 +75,8 @@ export default function Hero() {
...params.InputProps,
endAdornment: ,
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' }
}}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 6e8e0e0..0afaff7 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -50,9 +50,18 @@ const Navbar: React.FC = () => {
return (
-
+
![]()
navigate('/')}
style={{ cursor: 'pointer' }}
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index c6d529d..0de8e49 100644
--- a/src/components/ToolHeader.tsx
+++ b/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 (
-
-
-
@@ -34,7 +51,7 @@ function ToolLinks() {
}
export default function ToolHeader({
- image,
+ icon,
title,
description,
type
@@ -60,10 +77,18 @@ export default function ToolHeader({
- {image && (
+ {icon && (
- 
+
)}
diff --git a/src/components/ToolLayout.tsx b/src/components/ToolLayout.tsx
index 4737ea1..2099737 100644
--- a/src/components/ToolLayout.tsx
+++ b/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' }}
>
{`${title} - Omni Tools`}
@@ -44,7 +46,7 @@ export default function ToolLayout({
{children}
diff --git a/src/components/input/ToolFileInput.tsx b/src/components/input/ToolFileInput.tsx
index 9f13675..e1287d0 100644
--- a/src/components/input/ToolFileInput.tsx
+++ b/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 ? (
diff --git a/src/components/input/ToolTextInput.tsx b/src/components/input/ToolTextInput.tsx
index 6222db6..319c942 100644
--- a/src/components/input/ToolTextInput.tsx
+++ b/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'
+ }}
/>
{preview && (
diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx
index 9baf4cc..1d85720 100644
--- a/src/components/result/ToolTextResult.tsx
+++ b/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' }}
/>
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
index a9455c0..b5bc07e 100644
--- a/src/config/uiConfig.ts
+++ b/src/config/uiConfig.ts
@@ -1,2 +1,8 @@
export const globalInputHeight = 300;
export const globalDescriptionFontSize = 12;
+export const categoriesColors: string[] = [
+ '#8FBC5D',
+ '#3CB6E2',
+ '#FFD400',
+ '#AB6993'
+];
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index ba122b0..38c65e0 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -5,7 +5,7 @@ import Categories from './Categories';
export default function Home() {
return (
+
{getToolsByCategory()
.find(({ type }) => type === categoryName)
- ?.tools?.map((tool) => (
+ ?.tools?.map((tool, index) => (
- 
+
{tool.name}
diff --git a/src/pages/tools/image/png/change-colors-in-png/meta.ts b/src/pages/tools/image/png/change-colors-in-png/meta.ts
index bdf461c..d2e92ef 100644
--- a/src/pages/tools/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/tools/image/png/change-colors-in-png/meta.ts
@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
-import image from '@assets/image.png';
export const tool = defineTool('png', {
name: 'Change colors in png',
path: 'change-colors-in-png',
- image,
+ icon: 'cil:color-fill',
description:
"World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
shortDescription: 'Quickly swap colors in a PNG image',
diff --git a/src/pages/tools/image/png/compress-png/meta.ts b/src/pages/tools/image/png/compress-png/meta.ts
index 7dbafb6..1e84c1f 100644
--- a/src/pages/tools/image/png/compress-png/meta.ts
+++ b/src/pages/tools/image/png/compress-png/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('png', {
name: 'Compress png',
path: 'compress-png',
- // image,
+ icon: 'material-symbols-light:compress',
description:
'This is a program that compresses PNG pictures. As soon as you paste your PNG picture in the input area, the program will compress it and show the result in the output area. In the options, you can adjust the compression level, as well as find the old and new picture file sizes.',
shortDescription: 'Quicly compress a PNG',
diff --git a/src/pages/tools/image/png/convert-jgp-to-png/meta.ts b/src/pages/tools/image/png/convert-jgp-to-png/meta.ts
index abcb39d..b7c8da7 100644
--- a/src/pages/tools/image/png/convert-jgp-to-png/meta.ts
+++ b/src/pages/tools/image/png/convert-jgp-to-png/meta.ts
@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
-import image from '@assets/image.png';
export const tool = defineTool('png', {
name: 'Convert JPG to PNG',
path: 'convert-jgp-to-png',
- image,
+ icon: 'ph:file-jpg-thin',
description:
'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
shortDescription: 'Quickly convert your JPG images to PNG',
diff --git a/src/pages/tools/image/png/create-transparent/meta.ts b/src/pages/tools/image/png/create-transparent/meta.ts
index af2daf3..3ee1a9a 100644
--- a/src/pages/tools/image/png/create-transparent/meta.ts
+++ b/src/pages/tools/image/png/create-transparent/meta.ts
@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
-import image from '@assets/image.png';
export const tool = defineTool('png', {
name: 'Create transparent PNG',
path: 'create-transparent',
- image,
+ icon: 'mdi:circle-transparent',
shortDescription: 'Quickly make a PNG image transparent',
description:
"World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",
diff --git a/src/pages/tools/list/find-most-popular/meta.ts b/src/pages/tools/list/find-most-popular/meta.ts
index f973acb..4a03c7c 100644
--- a/src/pages/tools/list/find-most-popular/meta.ts
+++ b/src/pages/tools/list/find-most-popular/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Find most popular',
path: 'find-most-popular',
- // image,
+ icon: 'material-symbols-light:query-stats',
description: '',
shortDescription: '',
keywords: ['find', 'most', 'popular'],
diff --git a/src/pages/tools/list/find-unique/meta.ts b/src/pages/tools/list/find-unique/meta.ts
index aba8456..ee38e9d 100644
--- a/src/pages/tools/list/find-unique/meta.ts
+++ b/src/pages/tools/list/find-unique/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Find unique',
path: 'find-unique',
- // image,
+ icon: 'mynaui:one',
description: '',
shortDescription: '',
keywords: ['find', 'unique'],
diff --git a/src/pages/tools/list/group/meta.ts b/src/pages/tools/list/group/meta.ts
index 84bda84..0391c0a 100644
--- a/src/pages/tools/list/group/meta.ts
+++ b/src/pages/tools/list/group/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Group',
path: 'group',
- // image,
+ icon: 'pajamas:group',
description: '',
shortDescription: '',
keywords: ['group'],
diff --git a/src/pages/tools/list/reverse/meta.ts b/src/pages/tools/list/reverse/meta.ts
index 3500928..127f810 100644
--- a/src/pages/tools/list/reverse/meta.ts
+++ b/src/pages/tools/list/reverse/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Reverse',
path: 'reverse',
- // image,
+ icon: 'proicons:reverse',
description: '',
shortDescription: '',
keywords: ['reverse'],
diff --git a/src/pages/tools/list/rotate/meta.ts b/src/pages/tools/list/rotate/meta.ts
index 07ddfd6..6086301 100644
--- a/src/pages/tools/list/rotate/meta.ts
+++ b/src/pages/tools/list/rotate/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Rotate',
path: 'rotate',
- // image,
+ icon: 'material-symbols-light:rotate-right',
description: '',
shortDescription: '',
keywords: ['rotate'],
diff --git a/src/pages/tools/list/shuffle/meta.ts b/src/pages/tools/list/shuffle/meta.ts
index e193363..c94be06 100644
--- a/src/pages/tools/list/shuffle/meta.ts
+++ b/src/pages/tools/list/shuffle/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Shuffle',
path: 'shuffle',
- // image,
+ icon: 'material-symbols-light:shuffle',
description: '',
shortDescription: '',
keywords: ['shuffle'],
diff --git a/src/pages/tools/list/sort/meta.ts b/src/pages/tools/list/sort/meta.ts
index 536aa24..b2e7cfc 100644
--- a/src/pages/tools/list/sort/meta.ts
+++ b/src/pages/tools/list/sort/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Sort',
path: 'sort',
- // image,
+ icon: 'basil:sort-outline',
description:
'This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.',
shortDescription: 'Quickly sort a list',
diff --git a/src/pages/tools/list/unwrap/meta.ts b/src/pages/tools/list/unwrap/meta.ts
index c526721..9ae3652 100644
--- a/src/pages/tools/list/unwrap/meta.ts
+++ b/src/pages/tools/list/unwrap/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Unwrap',
path: 'unwrap',
- // image,
+ icon: 'mdi:unwrap',
description: '',
shortDescription: '',
keywords: ['unwrap'],
diff --git a/src/pages/tools/number/generate/meta.ts b/src/pages/tools/number/generate/meta.ts
index 1c85aee..a58e227 100644
--- a/src/pages/tools/number/generate/meta.ts
+++ b/src/pages/tools/number/generate/meta.ts
@@ -6,7 +6,7 @@ export const tool = defineTool('number', {
name: 'Generate numbers',
path: 'generate',
shortDescription: 'Quickly calculate a list of integers in your browser',
- // image,
+ icon: 'lsicon:number-filled',
description:
'Quickly calculate a list of integers in your browser. To get your list, just specify the first integer, change value and total count in the options below, and this utility will generate that many integers',
keywords: ['generate'],
diff --git a/src/pages/tools/number/sum/meta.ts b/src/pages/tools/number/sum/meta.ts
index fc96799..02de1f1 100644
--- a/src/pages/tools/number/sum/meta.ts
+++ b/src/pages/tools/number/sum/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('number', {
name: 'Number Sum Calculator',
path: 'sum',
- // image,
+ icon: 'fluent:autosum-20-regular',
description:
'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
shortDescription: 'Quickly sum numbers',
diff --git a/src/pages/tools/string/join/meta.ts b/src/pages/tools/string/join/meta.ts
index aedfe3f..ce895b4 100644
--- a/src/pages/tools/string/join/meta.ts
+++ b/src/pages/tools/string/join/meta.ts
@@ -1,11 +1,10 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
-import image from '@assets/text.png';
export const tool = defineTool('string', {
path: 'join',
name: 'Text Joiner',
- image,
+ icon: 'tabler:arrows-join',
description:
"World's Simplest Text Tool World's simplest browser-based utility for joining text. Load your text in the input form on the left and you'll automatically get merged text on the right. Powerful, free, and fast. Load text – get joined lines",
shortDescription: 'Quickly merge texts',
diff --git a/src/pages/tools/string/split/meta.ts b/src/pages/tools/string/split/meta.ts
index 01acca2..1cd519b 100644
--- a/src/pages/tools/string/split/meta.ts
+++ b/src/pages/tools/string/split/meta.ts
@@ -5,7 +5,7 @@ import image from '@assets/text.png';
export const tool = defineTool('string', {
path: 'split',
name: 'Text splitter',
- image,
+ icon: 'material-symbols-light:arrow-split',
description:
"World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
shortDescription: 'Quickly split a text',
diff --git a/src/pages/tools/string/to-morse/meta.ts b/src/pages/tools/string/to-morse/meta.ts
index 78774f5..71aa30f 100644
--- a/src/pages/tools/string/to-morse/meta.ts
+++ b/src/pages/tools/string/to-morse/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'String To morse',
path: 'to-morse',
- // image,
+ icon: 'arcticons:morse',
description:
"World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
shortDescription: 'Quickly encode text to morse',
diff --git a/src/pages/tools/video/gif/change-speed/meta.ts b/src/pages/tools/video/gif/change-speed/meta.ts
index 3abe82a..4beca99 100644
--- a/src/pages/tools/video/gif/change-speed/meta.ts
+++ b/src/pages/tools/video/gif/change-speed/meta.ts
@@ -5,7 +5,7 @@ import { lazy } from 'react';
export const tool = defineTool('gif', {
name: 'Change speed',
path: 'change-speed',
- // image,
+ icon: 'material-symbols-light:speed-outline',
description:
'This online utility lets you change the speed of a GIF animation. You can speed it up or slow it down. You can set the same constant delay between all frames or change the delays of individual frames. You can also play both the input and output GIFs at the same time and compare their speeds',
shortDescription: 'Quickly change GIF speed',
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 360a5c7..3c146cc 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -1,11 +1,12 @@
import ToolLayout from '../components/ToolLayout';
import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
+import { IconifyIcon } from '@iconify/react';
interface ToolOptions {
path: string;
component: LazyExoticComponent>>;
keywords: string[];
- image?: string;
+ icon?: IconifyIcon | string;
name: string;
description: string;
shortDescription: string;
@@ -19,7 +20,7 @@ export interface DefinedTool {
name: string;
description: string;
shortDescription: string;
- image?: string;
+ icon?: IconifyIcon | string;
keywords: string[];
component: () => JSX.Element;
}
@@ -29,7 +30,7 @@ export const defineTool = (
options: ToolOptions
): DefinedTool => {
const {
- image,
+ icon,
path,
name,
description,
@@ -42,7 +43,7 @@ export const defineTool = (
type: basePath,
path: `${basePath}/${path}`,
name,
- image,
+ icon,
description,
shortDescription,
keywords,
@@ -51,7 +52,7 @@ export const defineTool = (