help

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

@@ -8,13 +8,13 @@ import {
 	Dropdown,
 } from "antd";
 import React from "react";
-import withLabelSize from "components/Hoc/withLabelSize";
+import withLabelSize from "components/Hoc/withLabelSize/withLabelSize";
 import {
 	InputComponentProps,
 	SegmentComponentProps,
 	SelectComponentProps,
 } from "./utils/types";
-import withSize from "components/Hoc/withSize";
+import withSize from "components/Hoc/withSize/withSize";
 import { DropdownButtonProps } from "antd/es/dropdown";
 
 const ResponsiveSelect: React.FC<SelectComponentProps> = (props) => {

ui/src/components/General/HelpIcon/components/Help/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+interface indexProps {
+	text: string;
+}
+
+const Help: React.FC<indexProps> = ({ text }) => {
+	return <h1>{text}</h1>;
+};
+
+export default Help;

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

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Button, Modal } from "antd";
+import Icon from "components/General/Icon";
+import Help from "./components/Help";
+
+const HelpIcon: React.FC<{ helpText: string }> = ({ helpText }) => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const showModal = () => {
+		setIsModalOpen(true);
+	};
+
+	const closeModal = () => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<>
+			<Button
+				size="small"
+				key="Github"
+				type="default"
+				shape="circle"
+				icon={<Icon name="Info" size={15} />}
+				onClick={showModal}
+			/>
+			<Modal
+				title="Help"
+				open={isModalOpen}
+				footer={null}
+				keyboard={true}
+				maskClosable={true}
+				onCancel={closeModal}
+			>
+				<Help text={helpText} />
+			</Modal>
+		</>
+	);
+};
+
+export default HelpIcon;

ui/src/components/Hoc/withPageTitle/utils/constants.ts

@@ -0,0 +1,9 @@
+import { routesById } from "pages/Routes/utils/constant";
+
+const PAGES = ["About", "Feedback", "Newsfeed"];
+
+const HELP = {
+	[routesById.colorpicker.id]: "colorpicker",
+	[routesById.shadesandtints.id]: "shadesandtints",
+};
+export { PAGES, HELP };

ui/src/components/Hoc/withPageTitle/utils/hooks.ts

@@ -0,0 +1,17 @@
+import { routes } from "pages/Routes/utils/constant";
+import { useLocation } from "react-router-dom";
+import { HELP } from "./constants";
+
+const usePageTitle = () => {
+	const { pathname } = useLocation();
+	const page = routes.find((route) => route.path === pathname) || {
+		title: "Page Not Found",
+		description: "",
+		id: "",
+	};
+
+	const { title, description, id } = page;
+	return [title, description, HELP[id] || ""];
+};
+
+export default usePageTitle;

ui/src/components/Hoc/withPageTitle.tsx → ui/src/components/Hoc/withPageTitle/withPageTitle.tsx

@@ -1,18 +1,26 @@
 import Text from "components/General/Text/Text";
-import usePageTitle from "components/Hoc/utils/hooks/usePageTitle";
 import style from "./withpagetitle.module.scss";
+import HelpIcon from "components/General/HelpIcon";
+import { Space } from "antd";
+import { PAGES } from "./utils/constants";
+import usePageTitle from "./utils/hooks";
 
 const withPageTitle = <T extends object>(
 	WrappedComponent: React.ComponentType<T>
 ) => {
 	const WithPageTitle = (props: T) => {
-		const [title, description] = usePageTitle();
+		const [title, description, helpText] = usePageTitle();
 
 		return (
 			<div className={title === "Home" ? "" : style.withpagetitle}>
 				{title !== "Home" && (
 					<>
-						<Text text={title} level={3} />
+						<Space align="center">
+							<Text text={title} level={3} />
+							{helpText && !PAGES.includes(title) && (
+								<HelpIcon helpText={helpText} />
+							)}
+						</Space>
 						<Text text={description} level={5} />
 						<br />
 					</>

ui/src/pages/Routes/index.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Route, Routes as RRDRoutes } from "react-router-dom";
-import withPageTitle from "components/Hoc/withPageTitle";
+import withPageTitle from "components/Hoc/withPageTitle/withPageTitle";
 import { routes } from "./utils/constant";
 import { Spin } from "antd";