add footer and update ui

ui/CHANGELOG.md

@@ -1,3 +1,9 @@
+### [5.0.0] - 2023-09-14
+
+-   Add QR code generator
+-   Add SVG formatter
+-   Fix css for UI
+
 ### [4.9.2] - 2023-09-06
 
 -   Add avatar generator

ui/src/components/Layouts/Menu/utils/constants.ts

@@ -9,6 +9,7 @@ export const MENU_ITEMS = [
 		name: "Newsfeed",
 		icon: "Newspaper",
 		show: true,
+		url: "/newsfeed",
 		children: [],
 	},
 	{
@@ -51,7 +52,7 @@ export const MENU_ITEMS = [
 				name: "Svg Formatter",
 				url: "/css/svg-formatter",
 				icon: "Command",
-				show: IN_DEVELOPMENT,
+				show: true,
 			},
 		],
 	},
@@ -259,7 +260,7 @@ const ITEMS: MenuProps["items"] = [
 	...MENU_ITEMS.filter((rootItem) => rootItem.show).map((item) => {
 		return getItem(
 			item.name,
-			item.name as React.Key,
+			item?.url ?? (item.name as React.Key),
 			item.icon as IconName,
 			item.children.length > 0
 				? item.children

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

@@ -0,0 +1,19 @@
+.footer {
+	margin-top: var(--bt-size-20);
+	padding: var(--bt-size-10);
+	border-top: 1px dashed #969696;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	&__left {
+		display: flex;
+		align-items: center;
+
+		ul {
+			list-style-type: none;
+			display: flex;
+			gap: var(--bt-size-10);
+		}
+	}
+}

ui/src/pages/About/components/Footer.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import style from "./Footer.module.scss";
+import Icon from "components/General/Icon";
+import { Typography } from "antd";
+import { ResponsiveButton } from "components/General/FormComponents";
+
+const Footer: React.FC = () => {
+	return (
+		<div className={style.footer}>
+			<div className={style.footer__left}>
+				<Typography.Text>&copy; 2023 Binarytree.</Typography.Text>
+
+				<ul>
+					<li>
+						<a
+							href="https://github.com/lifeparticle/binarytree/blob/main/CODE_OF_CONDUCT.md"
+							target="_blank"
+						>
+							Code of Conduct
+						</a>
+					</li>
+
+					<li>
+						<a href="#">Privacy policy</a>
+					</li>
+					<li>
+						<a href="#">Terms </a>
+					</li>
+				</ul>
+			</div>
+
+			<ResponsiveButton
+				key="Github"
+				type="default"
+				shape="circle"
+				icon={<Icon name="Github" />}
+				onClick={() =>
+					window.open(
+						"https://github.com/lifeparticle/binarytree",
+						"_blank",
+						"noopener"
+					)
+				}
+			/>
+		</div>
+	);
+};
+
+export default Footer;

ui/src/pages/About/index.tsx

@@ -8,16 +8,14 @@ import {
 	OTHER_COLUMNS,
 	OTHER_DATA,
 } from "./utils/constants";
-import { Card, List, Table, Typography, Layout } from "antd";
+import { Card, List, Table, Typography } from "antd";
 import style from "./About.module.scss";
-import Icon from "components/General/Icon";
 import about from "assets/about.jpg";
-import { ResponsiveButton } from "components/General/FormComponents";
-const { Footer } = Layout;
+import Footer from "./components/Footer";
 
 const About = () => {
 	return (
-		<Layout>
+		<>
 			<Card
 				className={style.about}
 				title="Binary Tree"
@@ -106,33 +104,11 @@ const About = () => {
 							</List.Item>
 						)}
 					/>
-
-					<div className={style.about__socials}>
-						<ResponsiveButton
-							key="Github"
-							type="default"
-							shape="circle"
-							icon={<Icon name="Github" />}
-							onClick={() =>
-								window.open(
-									"https://github.com/lifeparticle/binarytree",
-									"_blank",
-									"noopener"
-								)
-							}
-						/>
-					</div>
 				</div>
 			</Card>
-			<Footer>
-				<a
-					href="https://github.com/lifeparticle/binarytree/blob/main/CODE_OF_CONDUCT.md"
-					target="_blank"
-				>
-					Code of Conduct
-				</a>
-			</Footer>
-		</Layout>
+
+			<Footer />
+		</>
 	);
 };
 

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

@@ -1,4 +1,8 @@
 .br {
+	display: flex;
+	flex-direction: column;
+	gap: var(--bt-size-20);
+
 	&__input,
 	&__output {
 		height: 100%;

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

@@ -47,8 +47,8 @@ const BorderRadius = () => {
 	};
 
 	return (
-		<>
-			<PageGrid className={style.br}>
+		<div className={style.br}>
+			<PageGrid>
 				<Card className={style.br__input}>
 					<Form layout="vertical">
 						<InputGrid>
@@ -206,13 +206,13 @@ const BorderRadius = () => {
 					</Space>
 				</Card>
 			</PageGrid>
-			<Card style={{ marginTop: "20px" }}>
+			<Card>
 				<CodeHighlightWithCopy
 					codeString={generateCSSCodeString()}
 					language="css"
 				/>
 			</Card>
-		</>
+		</div>
 	);
 };
 

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

@@ -0,0 +1,12 @@
+.svgformatter {
+	&__left,
+	&__right {
+		display: flex;
+		flex-direction: column;
+		gap: var(--bt-size-20);
+
+		&__code {
+			min-height: 335px;
+		}
+	}
+}

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

@@ -3,44 +3,59 @@ import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
 import PageGrid from "components/Layouts/PageGrid";
 import React, { ChangeEvent, useState } from "react";
 import { combineSVGPaths } from "./utils/helper";
+import style from "./SvgFormatter.module.scss";
 
 const { TextArea } = Input;
 
 const SvgFormatter: React.FC = () => {
-	const [value, setValue] = useState("");
+	const [inputSVG, setInputSVG] = useState("");
 	const [outputSVG, setOutputSVG] = useState<string>("");
 
 	const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
 		const newValue = e.target.value;
-		setValue(newValue);
+		setInputSVG(newValue);
 
 		const combinedSvgOutput = combineSVGPaths(newValue);
 		setOutputSVG(combinedSvgOutput);
 	};
 	return (
 		<PageGrid>
-			<Card>
-				<Form layout="vertical">
-					<Form.Item label="Svg Input">
-						<TextArea
-							placeholder="Enter svg value"
-							value={value}
-							rows={10}
-							onChange={handleChange}
-							data-gramm={false}
-							allowClear
-						/>
-					</Form.Item>
-				</Form>
-			</Card>
-
-			{outputSVG && (
+			<div className={style.svgformatter__left}>
 				<Card>
-					<CodeHighlightWithCopy
-						language="css"
-						codeString={outputSVG}
-					/>
+					<Form layout="vertical">
+						<Form.Item label="Svg Input">
+							<TextArea
+								placeholder="Enter svg value"
+								value={inputSVG}
+								rows={10}
+								onChange={handleChange}
+								data-gramm={false}
+								allowClear
+							/>
+						</Form.Item>
+					</Form>
 				</Card>
+
+				{inputSVG && (
+					<Card>
+						<div dangerouslySetInnerHTML={{ __html: inputSVG }} />
+					</Card>
+				)}
+			</div>
+
+			{inputSVG && outputSVG && (
+				<div className={style.svgformatter__right}>
+					<Card className={style.svgformatter__right__code}>
+						<CodeHighlightWithCopy
+							language="css"
+							codeString={outputSVG}
+						/>
+					</Card>
+
+					<Card>
+						<div dangerouslySetInnerHTML={{ __html: outputSVG }} />
+					</Card>
+				</div>
 			)}
 		</PageGrid>
 	);

ui/src/pages/Colors/ShadesAndTints/components/ColorInputs/index.tsx

@@ -74,6 +74,7 @@ const ColorInputs: React.FC<ColorInputsProps> = ({
 					/>
 
 					<ResponsiveSelectWithLabel
+						label="Output separator"
 						value={option.value}
 						onSelect={(_, option) =>
 							handleOutputFormatChange(option)

ui/src/pages/Routes/utils/constant.tsx

@@ -86,22 +86,22 @@ const routes: Route[] = [
 	},
 	{
 		path: "/generator/data",
-		title: "Data Generator",
+		title: "Data",
 		component: DataGenerator,
 	},
 	{
 		path: "/generator/avatar",
-		title: "Avatar Generator",
+		title: "Avatar",
 		component: Avatar,
 	},
 	{
 		path: "/generator/igfc",
-		title: "Image Generator From Colors",
+		title: "Image",
 		component: ImageGeneratorFromColors,
 	},
 	{
 		path: "/generator/qrcode",
-		title: "QR Code Generator",
+		title: "QR Code",
 		component: QRcode,
 	},
 	{