update changes

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

@@ -4,6 +4,25 @@
 		position: absolute;
 		top: var(--bt-size-16);
 		right: var(--bt-size-10);
+		z-index: 10;
+
+		&__success {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 2px 6px;
+			border: 1px solid green;
+			border-radius: var(--bt-size-5);
+		}
+
+		&__failed {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 2px 6px;
+			border: 1px solid red;
+			border-radius: var(--bt-size-5);
+		}
 
 		button {
 			display: flex;

ui/src/components/General/TextareaWithValidation/components/ValidateStatus.tsx

@@ -1,28 +1,31 @@
-import { Space } from "antd";
+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 { ResponsiveButton } from "components/General/FormComponents";
+import { ValidateStatusPropsType } from "./utils/types";
 
-interface ValidateStatusProps {
-	status: string;
-}
-
-const ValidateStatus: React.FC<ValidateStatusProps> = ({ status }) => {
+const ValidateStatus: React.FC<ValidateStatusPropsType> = ({ status }) => {
 	if (status.length === 0) {
 		return null;
 	}
 
+	const {
+		token: { colorBgContainer },
+	} = theme.useToken();
+
 	return (
-		<Space className={style.textareaContainer__validator}>
+		<Space
+			className={style.textareaContainer__validator}
+			style={{ backgroundColor: colorBgContainer }}
+		>
 			{status === "valid" ? (
-				<ResponsiveButton size="small" style={{ borderColor: "green" }}>
+				<span className={style.textareaContainer__validator__success}>
 					<Icon name="Check" color="green" />
-				</ResponsiveButton>
+				</span>
 			) : (
-				<ResponsiveButton size="small" danger>
-					<Icon name="X" />
-				</ResponsiveButton>
+				<span className={style.textareaContainer__validator__failed}>
+					<Icon name="X" color="red" />
+				</span>
 			)}
 		</Space>
 	);

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

@@ -0,0 +1,5 @@
+interface ValidateStatusPropsType {
+	status: string;
+}
+
+export type { ValidateStatusPropsType };

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

@@ -12,7 +12,7 @@ const TextareaWithValidation: React.FC<TextareaWithValidationProps> = (
 	return (
 		<div className={style.textareaContainer}>
 			<Form.Item label={label}>
-				<TextArea data-gramm={false} {...textareaProps} />
+				<TextArea data-gramm={false} {...textareaProps} allowClear />
 			</Form.Item>
 
 			<ValidationStatus status={status} />

ui/src/pages/About/About.module.scss

@@ -33,7 +33,7 @@
 
 		&_img {
 			width: 100%;
-			min-height: 250px;
+			height: 250px;
 		}
 	}
 

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

@@ -1,8 +1,7 @@
 .br {
 	&__input,
 	&__output {
-		min-height: 500px;
-		max-height: 500px;
+		height: 100%;
 	}
 	&__output {
 		display: flex;

ui/src/pages/CSS/BorderRadius/index.tsx

@@ -51,16 +51,16 @@ const BorderRadius = () => {
 								setValue={(e) => setBorderColor(e.target.value)}
 								setColor={setBorderColor}
 							/>
-							<Form.Item label="Border style">
-								<ResponsiveSelectWithLabel
-									value={borderStyle}
-									defaultActiveFirstOption
-									onSelect={(_, option) =>
-										setBorderStyle(option.value)
-									}
-									options={BORDER_STYLES}
-								/>
-							</Form.Item>
+
+							<ResponsiveSelectWithLabel
+								label="Border style"
+								value={borderStyle}
+								defaultActiveFirstOption
+								onSelect={(_, option) =>
+									setBorderStyle(option.value)
+								}
+								options={BORDER_STYLES}
+							/>
 						</InputGrid>
 
 						<ResponsiveSegementWithLabel
@@ -146,7 +146,7 @@ const BorderRadius = () => {
 					</Form>
 				</Card>
 
-				<Card className={style.br__output}>
+				<Card className={style.br__output} style={{ overflow: "auto" }}>
 					<Space direction="vertical">
 						<img
 							src={about}

ui/src/pages/Colors/ColorPicker/components/DisplayColor/index.tsx

@@ -4,6 +4,7 @@ import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
 import { classNames, getTextColor, isTransparent } from "lib/utils/helper";
 import { DisplayColorProps } from "pages/Colors/ColorPicker/utils/types";
+import { useSearchParams } from "react-router-dom";
 
 const { Title } = Typography;
 
@@ -14,6 +15,9 @@ const DisplayColor: React.FC<DisplayColorProps> = ({
 	value,
 	format,
 }) => {
+	const colorSearchParams = useSearchParams();
+	const color = colorSearchParams?.[0].get("color");
+
 	const isLabelMatchingFormat = label.toLocaleLowerCase() === format;
 	const backgroundColor = isLabelMatchingFormat ? value : "";
 	const textColor = isLabelMatchingFormat ? getTextColor(value) : "";
@@ -24,15 +28,18 @@ const DisplayColor: React.FC<DisplayColorProps> = ({
 		isTransparent(backgroundColor) ? style.cd__checkered : undefined
 	);
 
+	const containerStyle = {
+		backgroundColor: color ? backgroundColor : "#fff",
+		border: color ? border : "1px solid #ddd",
+	};
+
+	const titleStyle = {
+		color: color ? textColor : "#000",
+	};
+
 	return (
-		<div
-			className={classes}
-			style={{
-				backgroundColor,
-				border,
-			}}
-		>
-			<Title level={5} style={{ color: textColor }}>
+		<div className={classes} style={containerStyle}>
+			<Title level={5} style={titleStyle}>
 				{customLabel}: {customValue}
 			</Title>
 			<Clipboard text={value} clipboardComponent={ClipboardButton} />

ui/src/pages/Converter/Base64/index.tsx

@@ -1,12 +1,11 @@
-import { Card, Form, Space, Input } from "antd";
+import { Card, Form, Input } from "antd";
 import { useEffect, useState } from "react";
 import { Buffer } from "buffer";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
 import { isBase64Valid } from "./utils/helper";
 import TextareaWithValidation from "components/General/TextareaWithValidation";
 import PageGrid from "components/Layouts/PageGrid";
-import { ResponsiveButton } from "components/General/FormComponents";
 
 const { TextArea } = Input;
 
@@ -24,9 +23,6 @@ const Base64: React.FC = () => {
 		}
 	};
 
-	const IS_INPUT_EMPTY = input.length === 0;
-	const IS_RESULT_EMPTY = result.length === 0;
-
 	useEffect(() => {
 		setStatus(isBase64Valid(result));
 	}, [result]);
@@ -45,22 +41,14 @@ const Base64: React.FC = () => {
 							placeholder="Input"
 							rows={4}
 							data-gramm={false}
+							allowClear
 						/>
 					</Form.Item>
 
-					<Space>
-						<ResponsiveButton
-							disabled={IS_INPUT_EMPTY}
-							onClick={() => setInput("")}
-							role="clear_text"
-						>
-							Clear
-						</ResponsiveButton>
-						<Clipboard
-							text={input}
-							clipboardComponent={ClipboardButton}
-						/>
-					</Space>
+					<Clipboard
+						text={input}
+						clipboardComponent={ClipboardButton}
+					/>
 				</Form>
 			</Card>
 
@@ -79,19 +67,10 @@ const Base64: React.FC = () => {
 						label="Base64 output"
 					/>
 
-					<Space>
-						<ResponsiveButton
-							disabled={IS_RESULT_EMPTY}
-							onClick={() => setResult("")}
-							role="clear_base64"
-						>
-							Clear
-						</ResponsiveButton>
-						<Clipboard
-							text={result}
-							clipboardComponent={ClipboardButton}
-						/>
-					</Space>
+					<Clipboard
+						text={result}
+						clipboardComponent={ClipboardButton}
+					/>
 				</Form>
 			</Card>
 		</PageGrid>

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

@@ -72,6 +72,7 @@ const ImageGeneratorFromColors: React.FC = () => {
 							}
 							value={value}
 							data-gramm={false}
+							allowClear
 						/>
 					</Form.Item>
 				</Card>

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

@@ -54,6 +54,7 @@ const Sorting: React.FC = () => {
 								setInput(event.currentTarget.value);
 							}}
 							data-gramm={false}
+							allowClear
 						/>
 					</Form.Item>
 				</Card>

ui/src/pages/Markdown/MarkdownEditor/MarkdownEditor.module.scss

@@ -1,5 +1,5 @@
 .me {
-	height: calc(100dvh - 75px);
+	height: var(--bt-full-page-height);
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;

ui/src/pages/Markdown/MdTableGenerator/MdTableGenerator.module.scss

@@ -1,5 +1,5 @@
 .md {
-	height: calc(100dvh - 75px);
+	height: var(--bt-full-page-height);
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;

ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss

@@ -3,7 +3,7 @@
 
 	&__output,
 	&__input {
-		height: calc(100dvh - 75px);
+		height: var(--bt-full-page-height);
 	}
 
 	&__output {

ui/src/styles/sizes.css

@@ -3,6 +3,8 @@
 	--bt-converter-width: 800px;
 	--bt-card-height: 279px;
 
+	--bt-full-page-height: calc(100dvh - 75px);
+
 	--bt-size-minus-1: -1px;
 	--bt-size-minus-25: -25px;