add

ui/src/components/General/DropdownDownloadButton/index.tsx

@@ -17,11 +17,11 @@ const DropdownDownloadButton: React.FC<DropdownDownloadButtonPropsType> = ({
 
 	const items: MenuProps["items"] = [
 		{
-			label: "Download Jpeg",
+			label: "Download JPEG",
 			key: imageType.jpeg,
 		},
 		{
-			label: "Download Png",
+			label: "Download PNG",
 			key: imageType.png,
 		},
 	];
@@ -43,6 +43,4 @@ const DropdownDownloadButton: React.FC<DropdownDownloadButtonPropsType> = ({
 	);
 };
 
-export { imageType };
-
 export default DropdownDownloadButton;

ui/src/components/General/FormComponents/index.tsx

@@ -41,7 +41,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
 	children,
 	...props
 }) => {
-	return <Dropdown.Button {...props}>Download</Dropdown.Button>;
+	return <Dropdown.Button {...props}>{children}</Dropdown.Button>;
 };
 const ResponsiveSelectWithLabel = withLabelSize(ResponsiveSelect);
 const ResponsiveSegementWithLabel = withLabelSize(ResponsiveSegment);

ui/src/components/General/Warning/Warning.module.scss

@@ -2,15 +2,8 @@
 
 /* Style for the Warning component */
 .warning {
-	display: flex; /* Use flexbox to center content */
-	align-items: center; /* Center vertically */
-	justify-content: center; /* Center horizontally */
-	height: auto; /* Allow the component to adjust its height based on content */
-	padding: 16px; /* Add padding for spacing */
-	// background-color: #ffec3d; /* Set background color */
-	// color: #000; /* Set text color */
-	// border: 1px solid #f0d500; /* Add a border */
-	border-radius: 4px; /* Add border-radius for rounded corners */
-	font-size: 16px; /* Set font size */
-	text-align: center; /* Center text */
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }

ui/src/components/General/Warning/index.tsx

@@ -5,13 +5,11 @@ import style from "./Warning.module.scss";
 const Warning: React.FC<WarningProps> = ({ text }) => {
 	return (
 		<div className={style.warning}>
-			<div>
-				<span>
-					<Icon name="AlertTriangle" size={30} />
-				</span>
+			<span>
+				<Icon name="AlertTriangle" size={30} />
+			</span>
 
-				<p>{text}</p>
-			</div>
+			<p>{text}</p>
 		</div>
 	);
 };

ui/src/pages/Data/Avatar/index.tsx

@@ -1,13 +1,5 @@
-import { saveAs } from "file-saver";
-import { toPng, toJpeg, toSvg } from "html-to-image";
-import {
-	Card,
-	Form,
-	Slider,
-	Avatar as AntAvatar,
-	Space,
-	MenuProps,
-} from "antd";
+import { toPng, toJpeg } from "html-to-image";
+import { Card, Form, Slider, Avatar as AntAvatar, Space } from "antd";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import WebFont from "webfontloader";
 import {
@@ -25,9 +17,7 @@ import {
 } from "./utils/constants";
 import InputGrid from "components/Layouts/InputGrid";
 import style from "./Avatar.module.scss";
-import DropdownDownloadButton, {
-	imageType,
-} from "components/General/DropdownDownloadButton";
+import DropdownDownloadButton from "components/General/DropdownDownloadButton";
 
 const Avatar = () => {
 	const [text, setText] = useState<string>("BT");
@@ -49,14 +39,18 @@ const Avatar = () => {
 		if (!domEl.current || text.length === 0) return;
 		let dataUrl;
 
-		if (ext === imageType.jpeg) {
+		if (ext === ".jpeg") {
 			dataUrl = await toJpeg(domEl.current);
 		} else {
 			dataUrl = await toPng(domEl.current);
 		}
 
-		const blob = await fetch(dataUrl).then((res) => res.blob());
-		saveAs(blob, `image-${Date.now()}${ext}`);
+		const a = document.createElement("a");
+		a.download = `image-${Date.now()}${ext}`;
+		a.href = dataUrl;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
 	};
 
 	// Load the selected font when it changes

ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss

@@ -11,7 +11,7 @@
 	}
 
 	&__background {
-		background: url("../../../assets/grid.svg") repeat;
+		background: url("../../../assets/grid_back.svg") repeat;
 		position: absolute;
 		inset: 0;
 	}