refactor

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,
 }) => {

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 };

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>

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 };

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 };

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} />
 	) : (

ui/src/components/General/FormComponents/utils/types.ts

@@ -4,15 +4,15 @@ interface Option {
 	label: string;
 }
 
-interface SelectComponentPropsType {
+interface SelectComponentProps {
 	label?: string;
 	value?: string;
 	defaultActiveFirstOption?: boolean;
 	onSelect?: (value: string, option: Option) => void;
 	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,
 };

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,

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

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 };

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;
 	}

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 };

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 (

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 };

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 (

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 };

ui/src/pages/CSS/SvgFormatter/SvgFormatter.module.scss

@@ -7,6 +7,7 @@
 
 		&__code {
 			min-height: 335px;
+			display: grid;
 		}
 	}
 }

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>
 	);
 };

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}

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