From 39db0eb4fdccaefbc33643d618a136238d102207 Mon Sep 17 00:00:00 2001
From: lifeparticle <mahbubzaman17@gmail.com>
Date: Mon, 18 Sep 2023 17:54:53 +1000
Subject: [PATCH] refactor

---
 ui/public/mime/data.json                      | 76 +++++++++++++++++++
 .../General/CodeHighlightWithCopy/index.tsx   |  4 +-
 .../CodeHighlightWithCopy/utils/types.ts      |  4 +-
 .../General/DropdownDownloadButton/index.tsx  | 39 +++-------
 .../DropdownDownloadButton/utils/constants.ts | 19 +++++
 .../DropdownDownloadButton/utils/types.ts     |  4 +-
 .../General/FormComponents/index.tsx          | 12 +--
 .../General/FormComponents/utils/types.ts     | 16 ++--
 .../components/NotificationList.tsx           |  4 +-
 .../components/General/Notification/index.tsx |  4 +-
 .../General/Notification/utils/types.ts       |  6 +-
 .../components/ValidateStatus.tsx             |  4 +-
 .../components/utils/types.ts                 |  4 +-
 ui/src/components/Layouts/InputGrid/index.tsx |  4 +-
 .../Layouts/InputGrid/utils/types.ts          |  4 +-
 ui/src/components/Layouts/PageGrid/index.tsx  |  4 +-
 .../Layouts/PageGrid/utils/types.ts           |  4 +-
 .../CSS/SvgFormatter/SvgFormatter.module.scss |  1 +
 ui/src/pages/CSS/SvgFormatter/index.tsx       | 42 ++++++----
 .../components/ColorInputs/index.tsx          | 10 +--
 .../components/Colors/index.tsx               |  2 +-
 ui/src/pages/Colors/ShadesAndTints/index.tsx  | 25 +++---
 .../Colors/ShadesAndTints/utils/types.ts      |  4 +-
 .../JsonToTypescript.module.scss              | 12 ++-
 .../Converter/JsonToTypescript/index.tsx      | 16 ++--
 .../Data/DataGenerator/components/Output.tsx  |  4 +-
 .../pages/Data/DataGenerator/utils/types.ts   |  4 +-
 .../ImageGeneratorFromColors.module.scss      | 24 +++---
 .../Data/ImageGeneratorFromColors/index.tsx   | 16 ++--
 ui/src/pages/Data/QRcode/index.tsx            |  7 +-
 .../Mimetype/components/MimeSearchResult.tsx  |  4 +-
 .../Mimetype/components/SearchBar.tsx         |  4 +-
 .../pages/Information/Mimetype/utils/types.ts |  4 +-
 .../TableOfContent/TableOfContent.module.scss |  1 +
 .../pages/Markdown/TableOfContent/index.tsx   | 34 +++++----
 ui/src/pages/Routes/index.tsx                 |  5 +-
 ui/src/pages/Routes/utils/constant.tsx        |  4 +-
 ui/src/pages/Text/TextEditor/index.tsx        |  8 +-
 38 files changed, 272 insertions(+), 171 deletions(-)
 create mode 100644 ui/src/components/General/DropdownDownloadButton/utils/constants.ts

diff --git a/ui/public/mime/data.json b/ui/public/mime/data.json
index 6e526f6a..c4f4bf8f 100644
--- a/ui/public/mime/data.json
+++ b/ui/public/mime/data.json
@@ -1,80 +1,96 @@
 [
 	{
+		"key": ".aac",
 		"name": ".aac",
 		"example": "AAC audio",
 		"code": { "content-type": "audio/aac" }
 	},
 	{
+		"key": ".abw",
 		"name": ".abw",
 		"example": "AbiWord document",
 		"code": { "content-type": "application/x-abiword" }
 	},
 	{
+		"key": ".arc",
 		"name": ".arc",
 		"example": "Archive document (multiple files embedded)",
 		"code": { "content-type": "application/x-freearc" }
 	},
 	{
+		"key": ".avif",
 		"name": ".avif",
 		"example": "AVIF image",
 		"code": { "content-type": "image/avif" }
 	},
 	{
+		"key": ".avi",
 		"name": ".avi",
 		"example": "AVI: Audio Video Interleave",
 		"code": { "content-type": "video/x-msvideo" }
 	},
 	{
+		"key": ".azw",
 		"name": ".azw",
 		"example": "Amazon Kindle eBook format",
 		"code": { "content-type": "application/vnd.amazon.ebook" }
 	},
 	{
+		"key": ".bin",
 		"name": ".bin",
 		"example": "Any kind of binary data",
 		"code": { "content-type": "application/octet-stream" }
 	},
 	{
+		"key": ".bmp",
 		"name": ".bmp",
 		"example": "Windows OS/2 Bitmap Graphics",
 		"code": { "content-type": "image/bmp" }
 	},
 	{
+		"key": ".bz",
 		"name": ".bz",
 		"example": "BZip archive",
 		"code": { "content-type": "application/x-bzip" }
 	},
 	{
+		"key": ".bz2",
 		"name": ".bz2",
 		"example": "BZip2 archive",
 		"code": { "content-type": "application/x-bzip2" }
 	},
 	{
+		"key": ".cda",
 		"name": ".cda",
 		"example": "CD audio",
 		"code": { "content-type": "application/x-cdf" }
 	},
 	{
+		"key": ".csh",
 		"name": ".csh",
 		"example": "C-Shell script",
 		"code": { "content-type": "application/x-csh" }
 	},
 	{
+		"key": ".css",
 		"name": ".css",
 		"example": "Cascading Style Sheets (CSS)",
 		"code": { "content-type": "text/css" }
 	},
 	{
+		"key": ".csv",
 		"name": ".csv",
 		"example": "Comma-separated values (CSV)",
 		"code": { "content-type": "text/csv" }
 	},
 	{
+		"key": ".doc",
 		"name": ".doc",
 		"example": "Microsoft Word",
 		"code": { "content-type": "application/msword" }
 	},
 	{
+		"key": ".docx",
 		"name": ".docx",
 		"example": "Microsoft Word (OpenXML)",
 		"code": {
@@ -82,61 +98,73 @@
 		}
 	},
 	{
+		"key": ".eot",
 		"name": ".eot",
 		"example": "MS Embedded OpenType fonts",
 		"code": { "content-type": "application/vnd.ms-fontobject" }
 	},
 	{
+		"key": ".epub",
 		"name": ".epub",
 		"example": "Electronic publication (EPUB)",
 		"code": { "content-type": "application/epub+zip" }
 	},
 	{
+		"key": ".gz",
 		"name": ".gz",
 		"example": "GZip Compressed Archive",
 		"code": { "content-type": "application/gzip" }
 	},
 	{
+		"key": ".gif",
 		"name": ".gif",
 		"example": "Graphics Interchange Format (GIF)",
 		"code": { "content-type": "image/gif" }
 	},
 	{
+		"key": ".htm",
 		"name": ".htm",
 		"example": "HyperText Markup Language (HTML)",
 		"code": { "content-type": "text/html" }
 	},
 	{
+		"key": ".html",
 		"name": ".html",
 		"example": "HyperText Markup Language (HTML)",
 		"code": { "content-type": "text/html" }
 	},
 	{
+		"key": ".ico",
 		"name": ".ico",
 		"example": "Icon format",
 		"code": { "content-type": "image/vnd.microsoft.icon" }
 	},
 	{
+		"key": ".ics",
 		"name": ".ics",
 		"example": "iCalendar format",
 		"code": { "content-type": "text/calendar" }
 	},
 	{
+		"key": ".jar",
 		"name": ".jar",
 		"example": "Java Archive (JAR)",
 		"code": { "content-type": "application/java-archive" }
 	},
 	{
+		"key": ".jpeg",
 		"name": ".jpeg",
 		"example": "JPEG images",
 		"code": { "content-type": "image/jpeg" }
 	},
 	{
+		"key": ".jpg",
 		"name": ".jpg",
 		"example": "JPEG images",
 		"code": { "content-type": "image/jpeg" }
 	},
 	{
+		"key": ".js",
 		"name": ".js",
 		"example": "JavaScript",
 		"code": {
@@ -144,51 +172,61 @@
 		}
 	},
 	{
+		"key": ".json",
 		"name": ".json",
 		"example": "JSON format",
 		"code": { "content-type": "application/json" }
 	},
 	{
+		"key": ".jsonld",
 		"name": ".jsonld",
 		"example": "JSON-LD format",
 		"code": { "content-type": "application/ld+json" }
 	},
 	{
+		"key": ".mid",
 		"name": ".mid",
 		"example": "Musical Instrument Digital Interface (MIDI)",
 		"code": { "content-type": "audio/midi, audio/x-midi" }
 	},
 	{
+		"key": ".midi",
 		"name": ".midi",
 		"example": "Musical Instrument Digital Interface (MIDI)",
 		"code": { "content-type": "audio/midi, audio/x-midi" }
 	},
 	{
+		"key": ".mjs",
 		"name": ".mjs",
 		"example": "JavaScript module",
 		"code": { "content-type": "text/javascript" }
 	},
 	{
+		"key": ".mp3",
 		"name": ".mp3",
 		"example": "MP3 audio",
 		"code": { "content-type": "audio/mpeg" }
 	},
 	{
+		"key": ".mp4",
 		"name": ".mp4",
 		"example": "MP4 video",
 		"code": { "content-type": "video/mp4" }
 	},
 	{
+		"key": ".mpeg",
 		"name": ".mpeg",
 		"example": "MPEG Video",
 		"code": { "content-type": "video/mpeg" }
 	},
 	{
+		"key": ".mpkg",
 		"name": ".mpkg",
 		"example": "Apple Installer Package",
 		"code": { "content-type": "application/vnd.apple.installer+xml" }
 	},
 	{
+		"key": ".odp",
 		"name": ".odp",
 		"example": "OpenDocument presentation document",
 		"code": {
@@ -196,6 +234,7 @@
 		}
 	},
 	{
+		"key": ".ods",
 		"name": ".ods",
 		"example": "OpenDocument spreadsheet document",
 		"code": {
@@ -203,56 +242,67 @@
 		}
 	},
 	{
+		"key": ".odt",
 		"name": ".odt",
 		"example": "OpenDocument text document",
 		"code": { "content-type": "application/vnd.oasis.opendocument.text" }
 	},
 	{
+		"key": ".oga",
 		"name": ".oga",
 		"example": "OGG audio",
 		"code": { "content-type": "audio/ogg" }
 	},
 	{
+		"key": ".ogv",
 		"name": ".ogv",
 		"example": "OGG video",
 		"code": { "content-type": "video/ogg" }
 	},
 	{
+		"key": ".ogx",
 		"name": ".ogx",
 		"example": "OGG",
 		"code": { "content-type": "application/ogg" }
 	},
 	{
+		"key": ".opus",
 		"name": ".opus",
 		"example": "Opus audio",
 		"code": { "content-type": "audio/opus" }
 	},
 	{
+		"key": ".otf",
 		"name": ".otf",
 		"example": "OpenType font",
 		"code": { "content-type": "font/otf" }
 	},
 	{
+		"key": ".png",
 		"name": ".png",
 		"example": "Portable Network Graphics",
 		"code": { "content-type": "image/png" }
 	},
 	{
+		"key": ".pdf",
 		"name": ".pdf",
 		"example": "Adobe Portable Document Format (PDF)",
 		"code": { "content-type": "application/pdf" }
 	},
 	{
+		"key": ".php",
 		"name": ".php",
 		"example": "Hypertext Preprocessor (Personal Home Page)",
 		"code": { "content-type": "application/x-httpd-php" }
 	},
 	{
+		"key": ".ppt",
 		"name": ".ppt",
 		"example": "Microsoft PowerPoint",
 		"code": { "content-type": "application/vnd.ms-powerpoint" }
 	},
 	{
+		"key": ".pptx",
 		"name": ".pptx",
 		"example": "Microsoft PowerPoint (OpenXML)",
 		"code": {
@@ -260,101 +310,121 @@
 		}
 	},
 	{
+		"key": ".rar",
 		"name": ".rar",
 		"example": "RAR archive",
 		"code": { "content-type": "application/vnd.rar" }
 	},
 	{
+		"key": ".rtf",
 		"name": ".rtf",
 		"example": "Rich Text Format (RTF)",
 		"code": { "content-type": "application/rtf" }
 	},
 	{
+		"key": ".sh",
 		"name": ".sh",
 		"example": "Bourne shell script",
 		"code": { "content-type": "application/x-sh" }
 	},
 	{
+		"key": ".svg",
 		"name": ".svg",
 		"example": "Scalable Vector Graphics (SVG)",
 		"code": { "content-type": "image/svg+xml" }
 	},
 	{
+		"key": ".tar",
 		"name": ".tar",
 		"example": "Tape Archive (TAR)",
 		"code": { "content-type": "application/x-tar" }
 	},
 	{
+		"key": ".tif",
 		"name": ".tif",
 		"example": "Tagged Image File Format (TIFF)",
 		"code": { "content-type": "image/tiff" }
 	},
 	{
+		"key": ".tiff",
 		"name": ".tiff",
 		"example": "Tagged Image File Format (TIFF)",
 		"code": { "content-type": "image/tiff" }
 	},
 	{
+		"key": ".ts",
 		"name": ".ts",
 		"example": "MPEG transport stream",
 		"code": { "content-type": "video/mp2t" }
 	},
 	{
+		"key": ".ttf",
 		"name": ".ttf",
 		"example": "TrueType Font",
 		"code": { "content-type": "font/ttf" }
 	},
 	{
+		"key": ".txt",
 		"name": ".txt",
 		"example": "Text, (generally ASCII or ISO 8859-n)",
 		"code": { "content-type": "text/plain" }
 	},
 	{
+		"key": ".vsd",
 		"name": ".vsd",
 		"example": "Microsoft Visio",
 		"code": { "content-type": "application/vnd.visio" }
 	},
 	{
+		"key": ".wav",
 		"name": ".wav",
 		"example": "Waveform Audio Format",
 		"code": { "content-type": "audio/wav" }
 	},
 	{
+		"key": ".weba",
 		"name": ".weba",
 		"example": "WEBM audio",
 		"code": { "content-type": "audio/webm" }
 	},
 	{
+		"key": ".webm",
 		"name": ".webm",
 		"example": "WEBM video",
 		"code": { "content-type": "video/webm" }
 	},
 	{
+		"key": ".webp",
 		"name": ".webp",
 		"example": "WEBP image",
 		"code": { "content-type": "image/webp" }
 	},
 	{
+		"key": ".woff",
 		"name": ".woff",
 		"example": "Web Open Font Format (WOFF)",
 		"code": { "content-type": "font/woff" }
 	},
 	{
+		"key": ".woff2",
 		"name": ".woff2",
 		"example": "Web Open Font Format (WOFF)",
 		"code": { "content-type": "font/woff2" }
 	},
 	{
+		"key": ".xhtml",
 		"name": ".xhtml",
 		"example": "XHTML",
 		"code": { "content-type": "application/xhtml+xml" }
 	},
 	{
+		"key": ".xls",
 		"name": ".xls",
 		"example": "Microsoft Excel",
 		"code": { "content-type": "application/vnd.ms-excel" }
 	},
 	{
+		"key": ".xlsx",
 		"name": ".xlsx",
 		"example": "Microsoft Excel (OpenXML)",
 		"code": {
@@ -362,6 +432,7 @@
 		}
 	},
 	{
+		"key": ".xml",
 		"name": ".xml",
 		"example": "XML",
 		"code": {
@@ -369,16 +440,19 @@
 		}
 	},
 	{
+		"key": ".xul",
 		"name": ".xul",
 		"example": "XUL",
 		"code": { "content-type": "application/vnd.mozilla.xul+xml" }
 	},
 	{
+		"key": ".zip",
 		"name": ".zip",
 		"example": "ZIP archive",
 		"code": { "content-type": "application/zip" }
 	},
 	{
+		"key": ".3gp",
 		"name": ".3gp",
 		"example": "3GPP audio/video container",
 		"code": {
@@ -386,6 +460,7 @@
 		}
 	},
 	{
+		"key": ".3g2",
 		"name": ".3g2",
 		"example": "3GPP2 audio/video container",
 		"code": {
@@ -393,6 +468,7 @@
 		}
 	},
 	{
+		"key": ".7z",
 		"name": ".7z",
 		"example": "7-zip archive",
 		"code": { "content-type": "application/x-7z-compressed" }
diff --git a/ui/src/components/General/CodeHighlightWithCopy/index.tsx b/ui/src/components/General/CodeHighlightWithCopy/index.tsx
index b4af6481..aef4f781 100644
--- a/ui/src/components/General/CodeHighlightWithCopy/index.tsx
+++ b/ui/src/components/General/CodeHighlightWithCopy/index.tsx
@@ -7,10 +7,10 @@ import {
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { useContext } from "react";
 import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
-import { CodeHighlightWithCopyPropsType } from "./utils/types";
+import { CodeHighlightWithCopyProps } from "./utils/types";
 import style from "./CodeHighlightwithCopy.module.scss";
 
-const CodeHighlightWithCopy: React.FC<CodeHighlightWithCopyPropsType> = ({
+const CodeHighlightWithCopy: React.FC<CodeHighlightWithCopyProps> = ({
 	codeString,
 	language,
 }) => {
diff --git a/ui/src/components/General/CodeHighlightWithCopy/utils/types.ts b/ui/src/components/General/CodeHighlightWithCopy/utils/types.ts
index b92b3b28..a2847164 100644
--- a/ui/src/components/General/CodeHighlightWithCopy/utils/types.ts
+++ b/ui/src/components/General/CodeHighlightWithCopy/utils/types.ts
@@ -1,6 +1,6 @@
-interface CodeHighlightWithCopyPropsType {
+interface CodeHighlightWithCopyProps {
 	codeString: string;
 	language: string;
 }
 
-export type { CodeHighlightWithCopyPropsType };
+export type { CodeHighlightWithCopyProps };
diff --git a/ui/src/components/General/DropdownDownloadButton/index.tsx b/ui/src/components/General/DropdownDownloadButton/index.tsx
index 3851048c..a419d4b2 100644
--- a/ui/src/components/General/DropdownDownloadButton/index.tsx
+++ b/ui/src/components/General/DropdownDownloadButton/index.tsx
@@ -1,42 +1,23 @@
-import { MenuProps } from "antd";
 import React from "react";
 import { ResponsiveDropdownButton } from "components/General/FormComponents";
 import Icon from "components/General/Icon";
-import { DropdownDownloadButtonPropsType } from "./utils/types";
-const imageType = {
-	jpeg: ".jpeg",
-	png: ".png",
-};
+import { DropdownDownloadButtonProps } from "./utils/types";
+import { IMAGE_TYPE, items } from "./utils/constants";
 
-const DropdownDownloadButton: React.FC<DropdownDownloadButtonPropsType> = ({
+const DropdownDownloadButton: React.FC<DropdownDownloadButtonProps> = ({
 	handleDownload,
 }) => {
-	const handleMenuClick: MenuProps["onClick"] = (e) => {
-		handleDownload(e.key);
-	};
-
-	const items: MenuProps["items"] = [
-		{
-			label: "Download JPEG",
-			key: imageType.jpeg,
-		},
-		{
-			label: "Download PNG",
-			key: imageType.png,
-		},
-	];
-
-	const menuProps = {
-		items,
-		onClick: handleMenuClick,
-	};
-
 	return (
 		<ResponsiveDropdownButton
-			menu={menuProps}
+			menu={{
+				items,
+				onClick: (e) => {
+					handleDownload(e.key);
+				},
+			}}
 			icon={<Icon name="ChevronDown" />}
 			placement="top"
-			onClick={() => handleDownload(imageType.png)}
+			onClick={() => handleDownload(IMAGE_TYPE.png)}
 		>
 			Download
 		</ResponsiveDropdownButton>
diff --git a/ui/src/components/General/DropdownDownloadButton/utils/constants.ts b/ui/src/components/General/DropdownDownloadButton/utils/constants.ts
new file mode 100644
index 00000000..94b284ad
--- /dev/null
+++ b/ui/src/components/General/DropdownDownloadButton/utils/constants.ts
@@ -0,0 +1,19 @@
+import { MenuProps } from "antd";
+
+const IMAGE_TYPE = {
+	jpeg: ".jpeg",
+	png: ".png",
+};
+
+const items: MenuProps["items"] = [
+	{
+		label: "Download JPEG",
+		key: IMAGE_TYPE.jpeg,
+	},
+	{
+		label: "Download PNG",
+		key: IMAGE_TYPE.png,
+	},
+];
+
+export { IMAGE_TYPE, items };
diff --git a/ui/src/components/General/DropdownDownloadButton/utils/types.ts b/ui/src/components/General/DropdownDownloadButton/utils/types.ts
index bc0f32ec..28174a29 100644
--- a/ui/src/components/General/DropdownDownloadButton/utils/types.ts
+++ b/ui/src/components/General/DropdownDownloadButton/utils/types.ts
@@ -1,5 +1,5 @@
-interface DropdownDownloadButtonPropsType {
+interface DropdownDownloadButtonProps {
 	handleDownload: (val: string) => void;
 }
 
-export type { DropdownDownloadButtonPropsType };
+export type { DropdownDownloadButtonProps };
diff --git a/ui/src/components/General/FormComponents/index.tsx b/ui/src/components/General/FormComponents/index.tsx
index f0e5161a..09d8db53 100644
--- a/ui/src/components/General/FormComponents/index.tsx
+++ b/ui/src/components/General/FormComponents/index.tsx
@@ -10,22 +10,22 @@ import {
 import React from "react";
 import withLabelSize from "components/Hoc/withLabelSize";
 import {
-	InputComponentPropsType,
-	SegmentComponentPropsType,
-	SelectComponentPropsType,
+	InputComponentProps,
+	SegmentComponentProps,
+	SelectComponentProps,
 } from "./utils/types";
 import withSize from "components/Hoc/withSize";
 import { DropdownButtonProps } from "antd/es/dropdown";
 
-const ResponsiveSelect: React.FC<SelectComponentPropsType> = (props) => {
+const ResponsiveSelect: React.FC<SelectComponentProps> = (props) => {
 	return <Select {...props} />;
 };
 
-const ResponsiveSegment: React.FC<SegmentComponentPropsType> = (props) => {
+const ResponsiveSegment: React.FC<SegmentComponentProps> = (props) => {
 	return <Segmented {...props} />;
 };
 
-const ResponsiveInput: React.FC<InputComponentPropsType> = (props) => {
+const ResponsiveInput: React.FC<InputComponentProps> = (props) => {
 	return props.type === "number" ? (
 		<InputNumber style={{ width: "100%" }} {...props} />
 	) : (
diff --git a/ui/src/components/General/FormComponents/utils/types.ts b/ui/src/components/General/FormComponents/utils/types.ts
index 317f9bff..8bb54fcb 100644
--- a/ui/src/components/General/FormComponents/utils/types.ts
+++ b/ui/src/components/General/FormComponents/utils/types.ts
@@ -4,7 +4,7 @@ interface Option {
 	label: string;
 }
 
-interface SelectComponentPropsType {
+interface SelectComponentProps {
 	label?: string;
 	value?: string;
 	defaultActiveFirstOption?: boolean;
@@ -12,7 +12,7 @@ interface SelectComponentPropsType {
 	options: Option[];
 }
 
-interface SegmentComponentPropsType {
+interface SegmentComponentProps {
 	label?: string;
 	value: string;
 	onChange: (value: string | number) => void;
@@ -31,7 +31,7 @@ type TextType = {
 	onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-type InputComponentPropsType = {
+type InputComponentProps = {
 	label: string;
 	precision?: number;
 	min?: number;
@@ -44,7 +44,7 @@ type InputComponentPropsType = {
 	style?: React.CSSProperties;
 } & (NumberType | TextType);
 
-interface ButtonPropsType {
+interface ButtonProps {
 	children?: React.ReactNode;
 	disabled?: boolean;
 	onClick?: () => void;
@@ -54,8 +54,8 @@ interface ButtonPropsType {
 }
 
 export type {
-	SegmentComponentPropsType,
-	SelectComponentPropsType,
-	InputComponentPropsType,
-	ButtonPropsType,
+	SegmentComponentProps,
+	SelectComponentProps,
+	InputComponentProps,
+	ButtonProps,
 };
diff --git a/ui/src/components/General/Notification/components/NotificationList.tsx b/ui/src/components/General/Notification/components/NotificationList.tsx
index 034743a6..2feb8630 100644
--- a/ui/src/components/General/Notification/components/NotificationList.tsx
+++ b/ui/src/components/General/Notification/components/NotificationList.tsx
@@ -3,10 +3,10 @@ import { Button, Skeleton } from "antd";
 import { Typography, Tag, Dropdown } from "antd";
 import Icon from "components/General/Icon";
 import { classNames } from "lib/utils/helper";
-import { NotificationListPropsType } from "components/General/Notification/utils/types";
+import { NotificationListProps } from "components/General/Notification/utils/types";
 const { Title } = Typography;
 
-const NotificationList: React.FC<NotificationListPropsType> = ({
+const NotificationList: React.FC<NotificationListProps> = ({
 	notifications,
 	colorText,
 	isLoading,
diff --git a/ui/src/components/General/Notification/index.tsx b/ui/src/components/General/Notification/index.tsx
index 012a48e1..05694a5a 100644
--- a/ui/src/components/General/Notification/index.tsx
+++ b/ui/src/components/General/Notification/index.tsx
@@ -6,11 +6,11 @@ import {
 } from "./utils/constants";
 import useGetNotifications from "lib/utils/hooks/useGetNotifications";
 import NotificationList from "./components/NotificationList";
-import { NotificationPropsType } from "./utils/types";
+import { NotificationProps } from "./utils/types";
 import { getLocalstorageValue, setLocalstorageValue } from "lib/utils/helper";
 import { compareDate } from "./utils/helper";
 
-const Notification: React.FC<NotificationPropsType> = ({ colorText }) => {
+const Notification: React.FC<NotificationProps> = ({ colorText }) => {
 	const { notifications, isLoading, isError } = useGetNotifications(
 		NOTIFICATION_KEY,
 		NOTIFICATION_URL
diff --git a/ui/src/components/General/Notification/utils/types.ts b/ui/src/components/General/Notification/utils/types.ts
index 38e183c3..fb154257 100644
--- a/ui/src/components/General/Notification/utils/types.ts
+++ b/ui/src/components/General/Notification/utils/types.ts
@@ -4,11 +4,11 @@ interface Markdown {
 	features: string[];
 }
 
-interface NotificationPropsType {
+interface NotificationProps {
 	colorText: string;
 }
 
-interface NotificationListPropsType {
+interface NotificationListProps {
 	notifications: Markdown[] | undefined;
 	showRedFlag: boolean;
 	colorText: string;
@@ -17,4 +17,4 @@ interface NotificationListPropsType {
 	handleRedFlagNotification: () => void;
 }
 
-export type { Markdown, NotificationPropsType, NotificationListPropsType };
+export type { Markdown, NotificationProps, NotificationListProps };
diff --git a/ui/src/components/General/TextareaWithValidation/components/ValidateStatus.tsx b/ui/src/components/General/TextareaWithValidation/components/ValidateStatus.tsx
index b2737be5..434f96cb 100644
--- a/ui/src/components/General/TextareaWithValidation/components/ValidateStatus.tsx
+++ b/ui/src/components/General/TextareaWithValidation/components/ValidateStatus.tsx
@@ -2,9 +2,9 @@ import { Space, theme } from "antd";
 import React from "react";
 import style from "components/General/TextareaWithValidation/TextareaWithValidation.module.scss";
 import Icon from "components/General/Icon";
-import { ValidateStatusPropsType } from "./utils/types";
+import { ValidateStatusProps } from "./utils/types";
 
-const ValidateStatus: React.FC<ValidateStatusPropsType> = ({ status }) => {
+const ValidateStatus: React.FC<ValidateStatusProps> = ({ status }) => {
 	if (status.length === 0) {
 		return null;
 	}
diff --git a/ui/src/components/General/TextareaWithValidation/components/utils/types.ts b/ui/src/components/General/TextareaWithValidation/components/utils/types.ts
index dc61df94..b3846ee0 100644
--- a/ui/src/components/General/TextareaWithValidation/components/utils/types.ts
+++ b/ui/src/components/General/TextareaWithValidation/components/utils/types.ts
@@ -1,5 +1,5 @@
-interface ValidateStatusPropsType {
+interface ValidateStatusProps {
 	status: string;
 }
 
-export type { ValidateStatusPropsType };
+export type { ValidateStatusProps };
diff --git a/ui/src/components/Layouts/InputGrid/index.tsx b/ui/src/components/Layouts/InputGrid/index.tsx
index 486a265d..2606441e 100644
--- a/ui/src/components/Layouts/InputGrid/index.tsx
+++ b/ui/src/components/Layouts/InputGrid/index.tsx
@@ -1,8 +1,8 @@
 import { Col, Row } from "antd";
 import React from "react";
-import { InputGridPropsType } from "./utils/types";
+import { InputGridProps } from "./utils/types";
 
-const InputGrid: React.FC<InputGridPropsType> = ({ children, className }) => {
+const InputGrid: React.FC<InputGridProps> = ({ children, className }) => {
 	const [children1, children2] = React.Children.toArray(children);
 
 	return (
diff --git a/ui/src/components/Layouts/InputGrid/utils/types.ts b/ui/src/components/Layouts/InputGrid/utils/types.ts
index cc66c1a5..b3b147aa 100644
--- a/ui/src/components/Layouts/InputGrid/utils/types.ts
+++ b/ui/src/components/Layouts/InputGrid/utils/types.ts
@@ -1,6 +1,6 @@
-interface InputGridPropsType {
+interface InputGridProps {
 	children: React.ReactNode;
 	className?: string;
 }
 
-export type { InputGridPropsType };
+export type { InputGridProps };
diff --git a/ui/src/components/Layouts/PageGrid/index.tsx b/ui/src/components/Layouts/PageGrid/index.tsx
index ff85a1b9..fe499a16 100644
--- a/ui/src/components/Layouts/PageGrid/index.tsx
+++ b/ui/src/components/Layouts/PageGrid/index.tsx
@@ -1,8 +1,8 @@
 import { Col, Row } from "antd";
 import React from "react";
-import { PageGridPropsType } from "./utils/types";
+import { PageGridProps } from "./utils/types";
 
-const PageGrid: React.FC<PageGridPropsType> = ({ children, className }) => {
+const PageGrid: React.FC<PageGridProps> = ({ children, className }) => {
 	const [children1, children2] = React.Children.toArray(children);
 
 	return (
diff --git a/ui/src/components/Layouts/PageGrid/utils/types.ts b/ui/src/components/Layouts/PageGrid/utils/types.ts
index 77e79ee3..972020ae 100644
--- a/ui/src/components/Layouts/PageGrid/utils/types.ts
+++ b/ui/src/components/Layouts/PageGrid/utils/types.ts
@@ -1,6 +1,6 @@
-interface PageGridPropsType {
+interface PageGridProps {
 	children: React.ReactNode;
 	className?: string;
 }
 
-export type { PageGridPropsType };
+export type { PageGridProps };
diff --git a/ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss b/ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss
index 1c345795..76d69a37 100644
--- a/ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss
+++ b/ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss
@@ -7,6 +7,7 @@
 
 		&__code {
 			min-height: 335px;
+			display: grid;
 		}
 	}
 }
diff --git a/ui/src/pages/CSS/SvgFormatter/index.tsx b/ui/src/pages/CSS/SvgFormatter/index.tsx
index d11d18e6..1a766d80 100644
--- a/ui/src/pages/CSS/SvgFormatter/index.tsx
+++ b/ui/src/pages/CSS/SvgFormatter/index.tsx
@@ -4,6 +4,7 @@ import PageGrid from "components/Layouts/PageGrid";
 import React, { ChangeEvent, useState } from "react";
 import { combineSVGPaths } from "./utils/helper";
 import style from "./SvgFormatter.module.scss";
+import Warning from "components/General/Warning";
 
 const { TextArea } = Input;
 
@@ -36,27 +37,40 @@ const SvgFormatter: React.FC = () => {
 					</Form>
 				</Card>
 
-				{inputSVG && (
-					<Card>
+				<Card>
+					{inputSVG.length > 0 ? (
 						<div dangerouslySetInnerHTML={{ __html: inputSVG }} />
-					</Card>
-				)}
+					) : (
+						<Warning text="There is no data for SVG, please provide data first." />
+					)}
+				</Card>
 			</div>
 
-			{inputSVG && outputSVG && (
-				<div className={style.svgformatter__right}>
-					<Card className={style.svgformatter__right__code}>
+			<div className={style.svgformatter__right}>
+				<Card className={style.svgformatter__right__code}>
+					{outputSVG.length > 0 &&
+					outputSVG !== "Error combining SVG paths." ? (
 						<CodeHighlightWithCopy
 							language="css"
-							codeString={outputSVG}
+							codeString={
+								outputSVG.split(">").slice(0, -1).join(">\n") +
+								">" +
+								outputSVG.split(">").slice(-1)
+							}
 						/>
-					</Card>
-
-					<Card>
+					) : (
+						<Warning text="There is no data for SVG, please provide data first." />
+					)}
+				</Card>
+				<Card>
+					{outputSVG.length > 0 &&
+					outputSVG !== "Error combining SVG paths." ? (
 						<div dangerouslySetInnerHTML={{ __html: outputSVG }} />
-					</Card>
-				</div>
-			)}
+					) : (
+						<Warning text="There is no data for SVG, please provide data first." />
+					)}
+				</Card>
+			</div>
 		</PageGrid>
 	);
 };
diff --git a/ui/src/pages/Colors/ShadesAndTints/components/ColorInputs/index.tsx b/ui/src/pages/Colors/ShadesAndTints/components/ColorInputs/index.tsx
index ed32793a..a70adc2c 100644
--- a/ui/src/pages/Colors/ShadesAndTints/components/ColorInputs/index.tsx
+++ b/ui/src/pages/Colors/ShadesAndTints/components/ColorInputs/index.tsx
@@ -25,9 +25,9 @@ import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 const ColorInputs: React.FC<ColorInputsProps> = ({
 	color,
 	handleColorChange,
-	handleNumberOfShadesChange,
+	handlePercentageChange,
 	setColor,
-	numberOfShades,
+	percentage,
 	handleOutputFormatChange,
 	option,
 	shades,
@@ -61,9 +61,9 @@ const ColorInputs: React.FC<ColorInputsProps> = ({
 						label="Color"
 					/>
 					<ResponsiveInputWithLabel
-						value={numberOfShades}
-						label="Shades"
-						onChange={handleNumberOfShadesChange}
+						value={percentage}
+						label="Percentage"
+						onChange={handlePercentageChange}
 						placeholder="Shades"
 						precision={0}
 						step={1}
diff --git a/ui/src/pages/Colors/ShadesAndTints/components/Colors/index.tsx b/ui/src/pages/Colors/ShadesAndTints/components/Colors/index.tsx
index 2311e23b..72e5b518 100644
--- a/ui/src/pages/Colors/ShadesAndTints/components/Colors/index.tsx
+++ b/ui/src/pages/Colors/ShadesAndTints/components/Colors/index.tsx
@@ -16,7 +16,7 @@ const Colors: React.FC<ExtendedColorsProps> = ({ colors, isPending, type }) => {
 	);
 
 	return (
-		<Card className={styles.colors} title={cardTitle}>
+		<Card className={styles.colors} title={cardTitle} extra={colors.length}>
 			<div className={styles.colors__list}>
 				{colors.map((color, index) => (
 					<Card
diff --git a/ui/src/pages/Colors/ShadesAndTints/index.tsx b/ui/src/pages/Colors/ShadesAndTints/index.tsx
index b3e15b27..75a55e73 100644
--- a/ui/src/pages/Colors/ShadesAndTints/index.tsx
+++ b/ui/src/pages/Colors/ShadesAndTints/index.tsx
@@ -16,7 +16,7 @@ import useUrlParams from "lib/utils/hooks/useUrlParams";
 const ShadesAndTints: React.FC = () => {
 	const [params, updateUrlParam, searchParams] = useUrlParams({
 		color: DEFAULT_COLOR,
-		numShades: DEFAULT_NUM_SHADES,
+		percentage: DEFAULT_NUM_SHADES,
 	});
 
 	const [color, setColor] = useState(
@@ -24,8 +24,8 @@ const ShadesAndTints: React.FC = () => {
 	);
 	const [shades, setShades] = useState<string[]>([]);
 	const [tints, setTints] = useState<string[]>([]);
-	const [numberOfShades, setNumberOfShades] = useState(
-		Number(searchParams.get("numShades")) || Number(params.numShades)
+	const [percentage, setPercentage] = useState(
+		Number(searchParams.get("percentage")) || Number(params.percentage)
 	);
 
 	const [option, setOption] = useState<SelectOption>(OUTPUT_FORMAT[0]);
@@ -33,7 +33,7 @@ const ShadesAndTints: React.FC = () => {
 
 	const resetInputs = () => {
 		setColor(DEFAULT_COLOR);
-		setNumberOfShades(DEFAULT_NUM_SHADES);
+		setPercentage(DEFAULT_NUM_SHADES);
 	};
 
 	useCombinedKeyPress(resetInputs, ["ControlLeft", "KeyE"]);
@@ -41,30 +41,25 @@ const ShadesAndTints: React.FC = () => {
 
 	useEffect(() => {
 		startTransition(() => {
-			const { shades, tints } = generateShadesForColor(
-				color,
-				numberOfShades
-			);
+			const { shades, tints } = generateShadesForColor(color, percentage);
 			setShades(shades);
 			setTints(tints);
 		});
-	}, [color, numberOfShades]);
+	}, [color, percentage]);
 
 	useEffect(() => {
 		updateUrlParam("color", color);
-		updateUrlParam("numShades", String(numberOfShades));
-	}, [color, numberOfShades]);
+		updateUrlParam("percentage", String(percentage));
+	}, [color, percentage]);
 
 	return (
 		<div className={styles.st}>
 			<ColorInputs
 				color={color}
 				handleColorChange={(e) => setColor(e.target.value)}
-				handleNumberOfShadesChange={(num) =>
-					num && setNumberOfShades(num)
-				}
+				handlePercentageChange={(num) => num && setPercentage(num)}
 				setColor={setColor}
-				numberOfShades={numberOfShades}
+				percentage={percentage}
 				handleOutputFormatChange={setOption}
 				option={option}
 				shades={shades}
diff --git a/ui/src/pages/Colors/ShadesAndTints/utils/types.ts b/ui/src/pages/Colors/ShadesAndTints/utils/types.ts
index 9eac402c..c21f21e7 100644
--- a/ui/src/pages/Colors/ShadesAndTints/utils/types.ts
+++ b/ui/src/pages/Colors/ShadesAndTints/utils/types.ts
@@ -13,9 +13,9 @@ interface ColorsProps {
 interface ColorInputsProps {
 	color: string;
 	handleColorChange: (event: ChangeEvent<HTMLInputElement>) => void;
-	handleNumberOfShadesChange: (value: number | null) => void;
+	handlePercentageChange: (value: number | null) => void;
 	setColor: (color: string) => void;
-	numberOfShades: number;
+	percentage: number;
 	handleOutputFormatChange: (option: SelectOption) => void;
 	option: SelectOption;
 	shades: string[];
diff --git a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
index 663e3c7b..d9a661da 100644
--- a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
+++ b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
@@ -1,4 +1,12 @@
 .json {
-	display: flex;
-	flex-direction: column;
+	&__input {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__output {
+		min-height: 424px;
+		display: flex;
+		flex-direction: column;
+	}
 }
diff --git a/ui/src/pages/Converter/JsonToTypescript/index.tsx b/ui/src/pages/Converter/JsonToTypescript/index.tsx
index 91094246..759e19eb 100644
--- a/ui/src/pages/Converter/JsonToTypescript/index.tsx
+++ b/ui/src/pages/Converter/JsonToTypescript/index.tsx
@@ -10,6 +10,7 @@ import {
 	ResponsiveButton,
 	ResponsiveInputWithLabel,
 } from "components/General/FormComponents";
+import Warning from "components/General/Warning";
 
 const JsonToTypescript: React.FC = () => {
 	const [json, setJson] = useState("");
@@ -39,13 +40,14 @@ const JsonToTypescript: React.FC = () => {
 	}, [json]);
 
 	return (
-		<PageGrid>
-			<Card className={style.json}>
+		<PageGrid className={style.json}>
+			<Card className={style.json__input}>
 				<Form layout="vertical">
 					<TextareaWithValidation
 						value={json}
 						onChange={(e) => {
 							setJson(e.target.value);
+							setInterfaces([]);
 						}}
 						label="JSON Input"
 						placeholder="JSON"
@@ -72,14 +74,16 @@ const JsonToTypescript: React.FC = () => {
 				</Form>
 			</Card>
 
-			{interfaces.length > 0 && (
-				<Card>
+			<Card>
+				{interfaces.toString().length > 0 ? (
 					<CodeHighlightWithCopy
 						codeString={interfaces.toString().replace(/,/g, "\n\n")}
 						language="typescript"
 					/>
-				</Card>
-			)}
+				) : (
+					<Warning text="There is no data for JSON, please provide data first." />
+				)}
+			</Card>
 		</PageGrid>
 	);
 };
diff --git a/ui/src/pages/Data/DataGenerator/components/Output.tsx b/ui/src/pages/Data/DataGenerator/components/Output.tsx
index 42bcd935..4d2865bb 100644
--- a/ui/src/pages/Data/DataGenerator/components/Output.tsx
+++ b/ui/src/pages/Data/DataGenerator/components/Output.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { Tabs, type TabsProps } from "antd";
 import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
-import { OutputPropsType } from "pages/Data/DataGenerator/utils/types";
+import { OutputProps } from "pages/Data/DataGenerator/utils/types";
 
-const Output: React.FC<OutputPropsType> = ({ json, sql }) => {
+const Output: React.FC<OutputProps> = ({ json, sql }) => {
 	const items: TabsProps["items"] = [
 		{
 			key: "1",
diff --git a/ui/src/pages/Data/DataGenerator/utils/types.ts b/ui/src/pages/Data/DataGenerator/utils/types.ts
index 0fcbd630..7658df46 100644
--- a/ui/src/pages/Data/DataGenerator/utils/types.ts
+++ b/ui/src/pages/Data/DataGenerator/utils/types.ts
@@ -1,6 +1,6 @@
-interface OutputPropsType {
+interface OutputProps {
 	sql: string;
 	json: string;
 }
 
-export type { OutputPropsType };
+export type { OutputProps };
diff --git a/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss b/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
index 7090c15c..c428f4b5 100644
--- a/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
+++ b/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
@@ -7,28 +7,22 @@
 		grid-column: 1 / -1;
 		margin-top: var(--bt-size-16);
 		position: relative;
-		background-color: rgba(255, 255, 255, 0.212);
+		background: url("/src/assets/grid.svg") repeat, rgba(92, 92, 92, 0.2);
 	}
 
-	&__background {
-		background: url("/src/assets/grid.svg") repeat;
-		position: absolute;
-		inset: 0;
-	}
-
-	&__image__container {
+	&__images {
 		display: flex;
 		flex-wrap: wrap;
 		gap: var(--bt-size-16);
 		position: relative;
-	}
 
-	&__image {
-		display: flex;
-		flex-direction: column;
-		gap: var(--bt-size-16);
-		&__title {
-			text-align: center;
+		&_image {
+			display: flex;
+			flex-direction: column;
+			gap: var(--bt-size-16);
+			&__title {
+				text-align: center;
+			}
 		}
 	}
 }
diff --git a/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx b/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx
index 9b5923f6..fba8afd1 100644
--- a/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx
+++ b/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx
@@ -13,6 +13,7 @@ import {
 	ResponsiveInputWithLabel,
 } from "components/General/FormComponents";
 import InputGrid from "components/Layouts/InputGrid";
+import Warning from "components/General/Warning";
 
 const { TextArea } = Input;
 
@@ -117,15 +118,14 @@ const ImageGeneratorFromColors: React.FC = () => {
 				</Card>
 			</PageGrid>
 
-			{colors.length > 0 && (
-				<Card className={style.igfc__colors}>
-					<div className={style.igfc__background}></div>
-					<div className={style.igfc__image__container}>
+			<Card className={style.igfc__colors}>
+				{colors.length > 0 ? (
+					<div className={style.igfc__images}>
 						{colors.map((color: string) => {
 							return (
 								<Space
 									key={color}
-									className={style.igfc__image}
+									className={style.igfc__images_image}
 								>
 									<div
 										ref={(ref) => {
@@ -147,8 +147,10 @@ const ImageGeneratorFromColors: React.FC = () => {
 							);
 						})}
 					</div>
-				</Card>
-			)}
+				) : (
+					<Warning text="There is no data for Iamge, please provide data first." />
+				)}
+			</Card>
 		</Form>
 	);
 };
diff --git a/ui/src/pages/Data/QRcode/index.tsx b/ui/src/pages/Data/QRcode/index.tsx
index 9752a98d..25f6543b 100644
--- a/ui/src/pages/Data/QRcode/index.tsx
+++ b/ui/src/pages/Data/QRcode/index.tsx
@@ -47,7 +47,12 @@ const QRcode: React.FC = () => {
 			</Card>
 			<Card className={style.qrcode__output}>
 				{value.length > 0 ? (
-					<Space direction="vertical" align="center" size={"large"}>
+					<Space
+						direction="vertical"
+						align="center"
+						size={"large"}
+						id="myqrcode"
+					>
 						<QRCode value={value} />
 						<DropdownDownloadButton
 							handleDownload={downloadQRCode}
diff --git a/ui/src/pages/Information/Mimetype/components/MimeSearchResult.tsx b/ui/src/pages/Information/Mimetype/components/MimeSearchResult.tsx
index 0620d8bd..56f2e0cf 100644
--- a/ui/src/pages/Information/Mimetype/components/MimeSearchResult.tsx
+++ b/ui/src/pages/Information/Mimetype/components/MimeSearchResult.tsx
@@ -2,11 +2,11 @@ import { Card, Table } from "antd";
 import React from "react";
 import MimeSearch from "./SearchBar";
 import { MIME_COLUMNS } from "pages/Information/Mimetype/utils/constants";
-import { MimeSearchResultPropsType } from "pages/Information/Mimetype/utils/types";
+import { MimeSearchResultProps } from "pages/Information/Mimetype/utils/types";
 import { useSearchParams } from "react-router-dom";
 import { filteredMimeType } from "pages/Information/Mimetype/utils/helper";
 
-const MimeSearchResult: React.FC<MimeSearchResultPropsType> = ({
+const MimeSearchResult: React.FC<MimeSearchResultProps> = ({
 	data,
 	isError,
 	isLoading,
diff --git a/ui/src/pages/Information/Mimetype/components/SearchBar.tsx b/ui/src/pages/Information/Mimetype/components/SearchBar.tsx
index bc7fcb7d..0ee437c7 100644
--- a/ui/src/pages/Information/Mimetype/components/SearchBar.tsx
+++ b/ui/src/pages/Information/Mimetype/components/SearchBar.tsx
@@ -23,9 +23,9 @@ const MimeSearch: React.FC = () => {
 	return (
 		<Form layout="vertical">
 			<ResponsiveInputWithLabel
-				label="Search bar"
+				label="Search Table"
 				type="text"
-				placeholder="Search by Mimetype..."
+				placeholder="Search by Name or Content-type..."
 				value={searchQuery}
 				onChange={handleSearchChange}
 			/>
diff --git a/ui/src/pages/Information/Mimetype/utils/types.ts b/ui/src/pages/Information/Mimetype/utils/types.ts
index afe5a723..3e2e0054 100644
--- a/ui/src/pages/Information/Mimetype/utils/types.ts
+++ b/ui/src/pages/Information/Mimetype/utils/types.ts
@@ -4,10 +4,10 @@ interface MimeTableDataType {
 	code: { "content-type": string };
 }
 
-interface MimeSearchResultPropsType {
+interface MimeSearchResultProps {
 	data: MimeTableDataType[];
 	isLoading: boolean;
 	isError: boolean;
 }
 
-export type { MimeTableDataType, MimeSearchResultPropsType };
+export type { MimeTableDataType, MimeSearchResultProps };
diff --git a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
index 91013512..da51aa47 100644
--- a/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
+++ b/ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss
@@ -7,6 +7,7 @@
 	}
 
 	&__output {
+		display: grid;
 		&_form {
 			display: grid;
 			gap: var(--bt-size-30);
diff --git a/ui/src/pages/Markdown/TableOfContent/index.tsx b/ui/src/pages/Markdown/TableOfContent/index.tsx
index 7aad7465..c4582561 100644
--- a/ui/src/pages/Markdown/TableOfContent/index.tsx
+++ b/ui/src/pages/Markdown/TableOfContent/index.tsx
@@ -10,6 +10,7 @@ import { ResponsiveInputWithLabel } from "components/General/FormComponents";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
 import PageGrid from "components/Layouts/PageGrid";
+import Warning from "components/General/Warning";
 const { TextArea } = Input;
 
 const TableOfContent: React.FC = () => {
@@ -130,22 +131,25 @@ const TableOfContent: React.FC = () => {
 			</Card>
 
 			<Card className={style.toc__output}>
-				<Form layout="vertical" className={style.toc__output_form}>
-					<Clipboard
-						text={tableOfContents}
-						clipboardComponent={ClipboardButton}
-					/>
-
-					<Form.Item label="Output">
-						<TextArea
-							value={tableOfContents}
-							style={{
-								height: "calc(100dvh - 290px)",
-							}}
-							autoSize={false}
+				{tableOfContents.length > 0 ? (
+					<Form layout="vertical" className={style.toc__output_form}>
+						<Clipboard
+							text={tableOfContents}
+							clipboardComponent={ClipboardButton}
 						/>
-					</Form.Item>
-				</Form>
+						<Form.Item label="Output">
+							<TextArea
+								value={tableOfContents}
+								style={{
+									height: "calc(100vh - 290px)", // corrected "100dvh" to "100vh"
+								}}
+								autoSize={false}
+							/>
+						</Form.Item>
+					</Form>
+				) : (
+					<Warning text="There is no data for TOC, please provide data first." />
+				)}
 			</Card>
 		</PageGrid>
 	);
diff --git a/ui/src/pages/Routes/index.tsx b/ui/src/pages/Routes/index.tsx
index 011a1e06..95849050 100644
--- a/ui/src/pages/Routes/index.tsx
+++ b/ui/src/pages/Routes/index.tsx
@@ -2,14 +2,13 @@ import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Route, Routes as RRDRoutes } from "react-router-dom";
 import withPageTitle from "components/Hoc/withPageTitle";
-import Text from "components/General/Text/Text";
-import { API_LOADING } from "lib/utils/constants";
 import { routes } from "./utils/constant";
+import { Spin } from "antd";
 
 const Routes: React.FC = () => {
 	return (
 		<ErrorBoundary fallback={<p>Something went wrong</p>}>
-			<Suspense fallback={<Text text={API_LOADING} />}>
+			<Suspense fallback={<Spin />}>
 				<RRDRoutes>
 					{routes.map((route) => (
 						<Route
diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx
index 10b33820..63780e89 100644
--- a/ui/src/pages/Routes/utils/constant.tsx
+++ b/ui/src/pages/Routes/utils/constant.tsx
@@ -235,7 +235,7 @@ const routes: Route[] = [
 	{
 		path: "/",
 		title: "",
-		description: "Welcome home!",
+		description: "",
 		component: Home,
 	},
 	{
@@ -253,7 +253,7 @@ const routes: Route[] = [
 	{
 		path: "*",
 		title: "Page Not Found",
-		description: "Oops! We've seemed to misplace this page.",
+		description: "",
 		component: PageNotFound,
 	},
 ];
diff --git a/ui/src/pages/Text/TextEditor/index.tsx b/ui/src/pages/Text/TextEditor/index.tsx
index f57a40e6..2a7d9115 100644
--- a/ui/src/pages/Text/TextEditor/index.tsx
+++ b/ui/src/pages/Text/TextEditor/index.tsx
@@ -1,11 +1,9 @@
 import React, { useRef, useContext, useState } from "react";
-import { Col, Row } from "antd";
+import { Col, Row, Spin } from "antd";
 import { Editor } from "@tinymce/tinymce-react";
 import { Editor as TinyMCEEditor } from "tinymce";
 import style from "./TextEditor.module.scss";
 import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
-import { API_LOADING } from "lib/utils/constants";
-import Text from "components/General/Text/Text";
 
 const TextEditor: React.FC = () => {
 	const { isDarkMode } = useContext(DarkModeContext);
@@ -27,7 +25,7 @@ const TextEditor: React.FC = () => {
 		<div className={style.te}>
 			<Row gutter={[16, 16]}>
 				<Col xs={24} lg={24}>
-					{isLoading ? <Text text={API_LOADING} /> : null}
+					{isLoading ? <Spin /> : null}
 					<Editor
 						onEditorChange={(_, editor) => {
 							const wordcount = editor.plugins.wordcount;
@@ -44,7 +42,7 @@ const TextEditor: React.FC = () => {
 						}}
 						initialValue=""
 						init={{
-							height: "calc(100dvh - 98px)",
+							height: "calc(100dvh - 135px)",
 							wordcount_countcharacters: true,
 							menubar: true,
 							resize: false,