refactor

lifeparticle · Sep 18, 2023 · 45985e3 · 45985e3
1 parent 75b3319
commit 45985e3
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 45 deletions.
diff --git a/ui/src/pages/Colors/ShadesAndTints/components/Colors/Colors.module.scss b/ui/src/pages/Colors/ShadesAndTints/components/Colors/Colors.module.scss
@@ -2,6 +2,12 @@
 	display: flex;
 	flex-direction: column;
 
+	&__title {
+		display: flex;
+		align-items: center;
+		gap: var(--bt-size-10);
+	}
+
 	&__list {
 		display: flex;
 		flex-direction: column;

diff --git a/ui/src/pages/Colors/ShadesAndTints/components/Colors/index.tsx b/ui/src/pages/Colors/ShadesAndTints/components/Colors/index.tsx
@@ -1,19 +1,22 @@
-import { Card, Tag } from "antd";
+import { Card, Spin, Tag } from "antd";
 import { getTextColor } from "lib/utils/helper";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
 import { ExtendedColorsProps } from "pages/Colors/ShadesAndTints/utils/types";
 import styles from "./Colors.module.scss";
 
-const Colors: React.FC<ExtendedColorsProps> = ({
-	colors,
-	isPending,
-	title,
-	type,
-}) => {
+const Colors: React.FC<ExtendedColorsProps> = ({ colors, isPending, type }) => {
 	if (colors.length === 0) return null;
+
+	const cardTitle = (
+		<div className={styles.colors__title}>
+			{`${type}`}
+			{isPending && <Spin size="small" />}
+		</div>
+	);
+
 	return (
-		<Card className={styles.colors} title={isPending ? title : type}>
+		<Card className={styles.colors} title={cardTitle}>
 			<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
@@ -71,18 +71,8 @@ const ShadesAndTints: React.FC = () => {
 				tints={tints}
 			/>
 			<PageGrid>
-				<Colors
-					colors={shades}
-					isPending={isPending}
-					title="Generating shades..."
-					type="Shades"
-				/>
-				<Colors
-					colors={tints}
-					isPending={isPending}
-					title="Generating tints..."
-					type="Tints"
-				/>
+				<Colors colors={shades} isPending={isPending} type="Shades" />
+				<Colors colors={tints} isPending={isPending} type="Tints" />
 			</PageGrid>
 		</div>
 	);

diff --git a/ui/src/pages/Colors/ShadesAndTints/utils/types.ts b/ui/src/pages/Colors/ShadesAndTints/utils/types.ts
@@ -24,7 +24,6 @@ interface ColorInputsProps {
 
 interface ExtendedColorsProps extends ColorsProps {
 	isPending: boolean;
-	title: string;
 	type: string;
 }
 

diff --git a/ui/src/pages/Data/Avatar/index.tsx b/ui/src/pages/Data/Avatar/index.tsx
@@ -18,9 +18,10 @@ import {
 import InputGrid from "components/Layouts/InputGrid";
 import style from "./Avatar.module.scss";
 import DropdownDownloadButton from "components/General/DropdownDownloadButton";
+import Warning from "components/General/Warning";
 
 const Avatar = () => {
-	const [text, setText] = useState<string>("BT");
+	const [text, setText] = useState<string>("");
 	const [avatarFont, setAvatarFont] = useState(FONTS[0].value);
 	const [textColor, setTextColor] = useState<string>(
 		"rgba(255, 255, 255, 1)"
@@ -142,27 +143,35 @@ const Avatar = () => {
 			</Card>
 
 			<Card className={style.avatar__output}>
-				<Space direction="vertical" align="center" size={"large"}>
-					<AntAvatar
-						ref={domEl}
-						size={avatarSize}
-						shape={shapeType as "circle" | "square"}
-						style={{
-							backgroundColor: bgColor,
-							color: textColor,
-							borderRadius:
-								shapeType === "custom"
-									? `${customBorderRadius}px`
-									: "",
-							fontSize,
-							fontFamily: avatarFont,
-						}}
-					>
-						{text}
-					</AntAvatar>
-
-					<DropdownDownloadButton handleDownload={onButtonClick} />
-				</Space>
+				{text.length > 0 ? (
+					<Space direction="vertical" align="center" size={"large"}>
+						<AntAvatar
+							ref={domEl}
+							size={avatarSize}
+							shape={shapeType as "circle" | "square"}
+							style={{
+								backgroundColor: bgColor,
+								color: textColor,
+								borderRadius:
+									shapeType === "custom"
+										? `${customBorderRadius}px`
+										: "",
+								fontSize,
+								fontFamily: avatarFont,
+							}}
+						>
+							{text}
+						</AntAvatar>
+						<DropdownDownloadButton
+							handleDownload={onButtonClick}
+						/>
+					</Space>
+				) : (
+					<Warning
+						text="There is no text for generating Avatar, please provide text
+					first."
+					/>
+				)}
 			</Card>
 		</PageGrid>
 	);

diff --git a/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss b/ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss
@@ -8,5 +8,13 @@
 	&__editor {
 		flex: 1;
 		overflow: auto;
+		position: relative;
+
+		&__spinner {
+			position: absolute;
+			top: 5%;
+			left: 1%;
+			z-index: 10;
+		}
 	}
 }
diff --git a/ui/src/pages/Markdown/MdTableGenerator/index.tsx b/ui/src/pages/Markdown/MdTableGenerator/index.tsx
@@ -1,5 +1,5 @@
 import MDEditor from "@uiw/react-md-editor";
-import { Card, Form, Space } from "antd";
+import { Card, Form, Space, Spin } from "antd";
 import { useContext, useState, useTransition } from "react";
 import { generateTable } from "./util/utils";
 import { ResponsiveInputWithLabel } from "components/General/FormComponents";
@@ -76,8 +76,13 @@ const TableGenerator: React.FC = () => {
 				className={style.md__editor}
 				data-color-mode={isDarkMode ? "dark" : "light"}
 			>
+				{isPending && (
+					<div className={style.md__editor__spinner}>
+						<Spin />
+					</div>
+				)}
 				<MDEditor
-					value={isPending ? "Generating table..." : output}
+					value={output}
 					onChange={(val) => setOutput(val || "")}
 					height="100%"
 					style={{ fontSize: "52" }}