From 3d5ae417b826700a245850806286cde327686e10 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Sun, 17 Sep 2023 14:58:17 +0600
Subject: [PATCH 1/3] added

---
 ui/src/assets/grid.svg                        |  4 ++
 .../General/DropdownDownloadButton/index.tsx  | 48 +++++++++++++++++++
 .../DropdownDownloadButton/utils/types.ts     |  5 ++
 .../General/FormComponents/index.tsx          | 10 ++++
 ui/src/index.css                              |  5 ++
 ui/src/pages/Data/Avatar/index.tsx            | 30 ++++++++----
 .../ImageGeneratorFromColors.module.scss      | 18 +++++++
 .../Data/ImageGeneratorFromColors/index.tsx   | 11 ++++-
 ui/src/pages/Data/QRcode/index.tsx            |  9 +++-
 ui/src/pages/Data/QRcode/utils/helper.ts      |  4 +-
 10 files changed, 129 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/assets/grid.svg
 create mode 100644 ui/src/components/General/DropdownDownloadButton/index.tsx
 create mode 100644 ui/src/components/General/DropdownDownloadButton/utils/types.ts

diff --git a/ui/src/assets/grid.svg b/ui/src/assets/grid.svg
new file mode 100644
index 00000000..3fcabbb6
--- /dev/null
+++ b/ui/src/assets/grid.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#0f172a"
+  stroke-opacity="0.04">
+  <path d="M0 .5H31.5V32" />
+</svg>
diff --git a/ui/src/components/General/DropdownDownloadButton/index.tsx b/ui/src/components/General/DropdownDownloadButton/index.tsx
new file mode 100644
index 00000000..cc060260
--- /dev/null
+++ b/ui/src/components/General/DropdownDownloadButton/index.tsx
@@ -0,0 +1,48 @@
+import { MenuProps } from "antd";
+import React from "react";
+import { ResponsiveDropdownButton } from "../FormComponents";
+import Icon from "../Icon";
+import { DropdownDownloadButtonPropsType } from "./utils/types";
+const imageType = {
+	jpeg: ".jpeg",
+	png: ".png",
+};
+
+const DropdownDownloadButton: React.FC<DropdownDownloadButtonPropsType> = ({
+	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}
+			icon={<Icon name="ChevronDown" />}
+			placement="top"
+			onClick={() => handleDownload(imageType.png)}
+		>
+			Download
+		</ResponsiveDropdownButton>
+	);
+};
+
+export { imageType };
+
+export default DropdownDownloadButton;
diff --git a/ui/src/components/General/DropdownDownloadButton/utils/types.ts b/ui/src/components/General/DropdownDownloadButton/utils/types.ts
new file mode 100644
index 00000000..bc0f32ec
--- /dev/null
+++ b/ui/src/components/General/DropdownDownloadButton/utils/types.ts
@@ -0,0 +1,5 @@
+interface DropdownDownloadButtonPropsType {
+	handleDownload: (val: string) => void;
+}
+
+export type { DropdownDownloadButtonPropsType };
diff --git a/ui/src/components/General/FormComponents/index.tsx b/ui/src/components/General/FormComponents/index.tsx
index 0983dfcd..d48cf925 100644
--- a/ui/src/components/General/FormComponents/index.tsx
+++ b/ui/src/components/General/FormComponents/index.tsx
@@ -5,6 +5,7 @@ import {
 	Select,
 	Button as AntButton,
 	ButtonProps,
+	Dropdown,
 } from "antd";
 import React from "react";
 import withLabelSize from "components/Hoc/withLabelSize";
@@ -14,6 +15,7 @@ import {
 	SelectComponentPropsType,
 } from "./utils/types";
 import withSize from "components/Hoc/withSize";
+import { DropdownButtonProps } from "antd/es/dropdown";
 
 const ResponsiveSelect: React.FC<SelectComponentPropsType> = (props) => {
 	return <Select {...props} />;
@@ -35,14 +37,22 @@ const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
 	return <AntButton {...props}>{children}</AntButton>;
 };
 
+const DropdownButton: React.FC<DropdownButtonProps> = ({
+	children,
+	...props
+}) => {
+	return <Dropdown.Button {...props}>Download</Dropdown.Button>;
+};
 const ResponsiveSelectWithLabel = withLabelSize(ResponsiveSelect);
 const ResponsiveSegementWithLabel = withLabelSize(ResponsiveSegment);
 const ResponsiveInputWithLabel = withLabelSize(ResponsiveInput);
 const ResponsiveButton = withSize(Button);
+const ResponsiveDropdownButton = withSize(DropdownButton);
 
 export {
 	ResponsiveSelectWithLabel,
 	ResponsiveSegementWithLabel,
 	ResponsiveInputWithLabel,
 	ResponsiveButton,
+	ResponsiveDropdownButton,
 };
diff --git a/ui/src/index.css b/ui/src/index.css
index 50c70a17..057f71fb 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -121,3 +121,8 @@ h5 {
 	display: flex;
 	align-items: center;
 }
+
+/* collapsible menu scroll */
+.ant-menu-submenu-popup .ant-menu-vertical {
+	max-height: 300px !important;
+}
diff --git a/ui/src/pages/Data/Avatar/index.tsx b/ui/src/pages/Data/Avatar/index.tsx
index bba9213b..15f00f3d 100644
--- a/ui/src/pages/Data/Avatar/index.tsx
+++ b/ui/src/pages/Data/Avatar/index.tsx
@@ -1,10 +1,16 @@
 import { saveAs } from "file-saver";
-import { toPng } from "html-to-image";
-import { Card, Form, Slider, Avatar as AntAvatar, Space } from "antd";
+import { toPng, toJpeg, toSvg } from "html-to-image";
+import {
+	Card,
+	Form,
+	Slider,
+	Avatar as AntAvatar,
+	Space,
+	MenuProps,
+} from "antd";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import WebFont from "webfontloader";
 import {
-	ResponsiveButton,
 	ResponsiveInputWithLabel,
 	ResponsiveSegementWithLabel,
 	ResponsiveSelectWithLabel,
@@ -19,6 +25,9 @@ import {
 } from "./utils/constants";
 import InputGrid from "components/Layouts/InputGrid";
 import style from "./Avatar.module.scss";
+import DropdownDownloadButton, {
+	imageType,
+} from "components/General/DropdownDownloadButton";
 
 const Avatar = () => {
 	const [text, setText] = useState<string>("BT");
@@ -36,13 +45,18 @@ const Avatar = () => {
 
 	const domEl = useRef<HTMLDivElement>(null);
 
-	const onButtonClick = async () => {
+	const onButtonClick = async (ext: string) => {
 		if (!domEl.current || text.length === 0) return;
+		let dataUrl;
 
-		const dataUrl = await toPng(domEl.current);
+		if (ext === imageType.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()}.png`);
+		saveAs(blob, `image-${Date.now()}${ext}`);
 	};
 
 	// Load the selected font when it changes
@@ -153,9 +167,7 @@ const Avatar = () => {
 						{text}
 					</AntAvatar>
 
-					<ResponsiveButton onClick={onButtonClick}>
-						Download avatar
-					</ResponsiveButton>
+					<DropdownDownloadButton handleDownload={onButtonClick} />
 				</Space>
 			</Card>
 		</PageGrid>
diff --git a/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss b/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
index e010d25f..20485642 100644
--- a/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
+++ b/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
@@ -6,11 +6,29 @@
 	&__colors {
 		grid-column: 1 / -1;
 		margin-top: var(--bt-size-16);
+		position: relative;
+		background-color: rgba(255, 255, 255, 0.212);
+	}
+
+	&__background {
+		background: url("../../../assets/grid.svg") repeat;
+		position: absolute;
+		inset: 0;
 	}
 
 	&__image__container {
 		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;
+		}
 	}
 }
diff --git a/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx b/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx
index d8904b88..311024f4 100644
--- a/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx
+++ b/ui/src/pages/Data/ImageGeneratorFromColors/index.tsx
@@ -117,12 +117,14 @@ const ImageGeneratorFromColors: React.FC = () => {
 					</Space>
 				</Card>
 			</PageGrid>
+
 			{colors.length > 0 && (
 				<Card className={style.igfc__colors}>
+					<div className={style.igfc__background}></div>
 					<div className={style.igfc__image__container}>
 						{colors.map((color: string) => {
 							return (
-								<div key={color}>
+								<div key={color} className={style.igfc__image}>
 									<div
 										ref={(ref) => {
 											if (ref) {
@@ -136,7 +138,12 @@ const ImageGeneratorFromColors: React.FC = () => {
 											borderRadius: `${rounded}px`,
 										}}
 									/>
-									<Title level={5}>{color}</Title>
+									<Title
+										className={style.igfc__image__title}
+										level={5}
+									>
+										{color}
+									</Title>
 								</div>
 							);
 						})}
diff --git a/ui/src/pages/Data/QRcode/index.tsx b/ui/src/pages/Data/QRcode/index.tsx
index 80e10bd1..ff871df0 100644
--- a/ui/src/pages/Data/QRcode/index.tsx
+++ b/ui/src/pages/Data/QRcode/index.tsx
@@ -1,9 +1,10 @@
-import { Button, Card, Form, QRCode, Input, Badge } from "antd";
+import { Card, Form, QRCode, Input, Badge } from "antd";
 import PageGrid from "components/Layouts/PageGrid";
 import React, { useEffect, useState } from "react";
 import { detectQrData, downloadQRCode } from "./utils/helper";
 import Icon from "components/General/Icon";
 import style from "./QRcode.module.scss";
+import DropdownDownloadButton from "components/General/DropdownDownloadButton";
 
 const { TextArea } = Input;
 
@@ -52,7 +53,11 @@ const QRcode: React.FC = () => {
 							bgColor="#fff"
 							style={{ marginBottom: 16 }}
 						/>
-						<Button onClick={downloadQRCode}>Download</Button>
+						<div>
+							<DropdownDownloadButton
+								handleDownload={downloadQRCode}
+							/>
+						</div>
 					</div>
 				) : (
 					<div className={style.qrcode__output__notfound}>
diff --git a/ui/src/pages/Data/QRcode/utils/helper.ts b/ui/src/pages/Data/QRcode/utils/helper.ts
index 6264dcda..7cf6c841 100644
--- a/ui/src/pages/Data/QRcode/utils/helper.ts
+++ b/ui/src/pages/Data/QRcode/utils/helper.ts
@@ -39,14 +39,14 @@ function detectQrData(data: string) {
 	return "Mixed value";
 }
 
-const downloadQRCode = () => {
+const downloadQRCode = (ext: string) => {
 	const canvas = document
 		.getElementById("myqrcode")
 		?.querySelector<HTMLCanvasElement>("canvas");
 	if (canvas) {
 		const url = canvas.toDataURL();
 		const a = document.createElement("a");
-		a.download = "QRCode.png";
+		a.download = `QRcode${ext}`;
 		a.href = url;
 		document.body.appendChild(a);
 		a.click();

From 4c08974bc07b97848169e94939462096272b8c72 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Sun, 17 Sep 2023 16:26:27 +0600
Subject: [PATCH 2/3] add

---
 ui/src/assets/{grid.svg => grid_back.svg}     |  4 +--
 .../General/DropdownDownloadButton/index.tsx  |  6 ++---
 .../General/FormComponents/index.tsx          |  2 +-
 .../General/Warning/Warning.module.scss       | 15 +++--------
 ui/src/components/General/Warning/index.tsx   | 10 +++----
 ui/src/pages/Data/Avatar/index.tsx            | 26 +++++++------------
 .../ImageGeneratorFromColors.module.scss      |  2 +-
 7 files changed, 24 insertions(+), 41 deletions(-)
 rename ui/src/assets/{grid.svg => grid_back.svg} (57%)

diff --git a/ui/src/assets/grid.svg b/ui/src/assets/grid_back.svg
similarity index 57%
rename from ui/src/assets/grid.svg
rename to ui/src/assets/grid_back.svg
index 3fcabbb6..ddd82a68 100644
--- a/ui/src/assets/grid.svg
+++ b/ui/src/assets/grid_back.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#0f172a"
-  stroke-opacity="0.04">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#3f4555"
+  stroke-opacity="0.05">
   <path d="M0 .5H31.5V32" />
 </svg>
diff --git a/ui/src/components/General/DropdownDownloadButton/index.tsx b/ui/src/components/General/DropdownDownloadButton/index.tsx
index cc060260..d0549559 100644
--- a/ui/src/components/General/DropdownDownloadButton/index.tsx
+++ b/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;
diff --git a/ui/src/components/General/FormComponents/index.tsx b/ui/src/components/General/FormComponents/index.tsx
index d48cf925..f0e5161a 100644
--- a/ui/src/components/General/FormComponents/index.tsx
+++ b/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);
diff --git a/ui/src/components/General/Warning/Warning.module.scss b/ui/src/components/General/Warning/Warning.module.scss
index 4ab439f8..98382909 100644
--- a/ui/src/components/General/Warning/Warning.module.scss
+++ b/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;
 }
diff --git a/ui/src/components/General/Warning/index.tsx b/ui/src/components/General/Warning/index.tsx
index 7a336f56..5d5f4f50 100644
--- a/ui/src/components/General/Warning/index.tsx
+++ b/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>
 	);
 };
diff --git a/ui/src/pages/Data/Avatar/index.tsx b/ui/src/pages/Data/Avatar/index.tsx
index 15f00f3d..143bc2c3 100644
--- a/ui/src/pages/Data/Avatar/index.tsx
+++ b/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
diff --git a/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss b/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
index 20485642..116bfe42 100644
--- a/ui/src/pages/Data/ImageGeneratorFromColors/ImageGeneratorFromColors.module.scss
+++ b/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;
 	}

From 2ba2a254f9e77f4bce046b4f6ff27c3d1d144292 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Sun, 17 Sep 2023 16:37:25 +0600
Subject: [PATCH 3/3] update path fix

---
 ui/src/components/General/DropdownDownloadButton/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/General/DropdownDownloadButton/index.tsx b/ui/src/components/General/DropdownDownloadButton/index.tsx
index d0549559..3851048c 100644
--- a/ui/src/components/General/DropdownDownloadButton/index.tsx
+++ b/ui/src/components/General/DropdownDownloadButton/index.tsx
@@ -1,7 +1,7 @@
 import { MenuProps } from "antd";
 import React from "react";
-import { ResponsiveDropdownButton } from "../FormComponents";
-import Icon from "../Icon";
+import { ResponsiveDropdownButton } from "components/General/FormComponents";
+import Icon from "components/General/Icon";
 import { DropdownDownloadButtonPropsType } from "./utils/types";
 const imageType = {
 	jpeg: ".jpeg",