Refactor/Refactoring icons

Client/public/assets/icons/documentPage/ArrowLeftIcon.tsx

@@ -0,0 +1,50 @@
+import React, { FC, SVGProps } from 'react';
+
+interface ArrowLeftIconProps extends SVGProps<SVGSVGElement> {
+	width?: number;
+	height?: number;
+	color?: string;
+	strokeWidth?: number;
+}
+
+/**
+ * A reusable SVG icon component for rendering an icon.
+ *
+ * @param {number} [width=20] - The width of the icon in pixels. Optional.
+ * @param {number} [height=20] - The height of the icon in pixels. Optional.
+ * @param {string} [color='#667085'] - The stroke color of the icon. Accepts any valid CSS color value. Optional.
+ * @param {number} [strokeWidth=1.66667] - The stroke width of the icon's path. Optional.
+ * @param {SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style`, or custom attributes.
+ *
+ * @returns {JSX.Element} A scalable vector graphic (SVG) element representing the icon.
+ */
+
+const ArrowLeftIcon: FC<ArrowLeftIconProps> = ({
+	width = 20,
+	height = 20,
+	color = '#667085',
+	strokeWidth = 1.66667,
+	...props
+}) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Arrow Left Icon"
+			role="img"
+			{...props}>
+			<path
+				d="M7.5 15L12.5 10L7.5 5"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export default ArrowLeftIcon;

Client/public/assets/icons/documentPage/AudioIcon.tsx

@@ -0,0 +1,43 @@
+import React, { FC, SVGProps } from 'react';
+
+interface AudioIconProps extends SVGProps<SVGSVGElement> {
+	width?: number;
+	height?: number;
+}
+
+/**
+ * A reusable SVG icon component for rendering an icon.
+ *
+ * @param {number} [width=25] - The width of the icon in pixels. Optional.
+ * @param {number} [height=25] - The height of the icon in pixels. Optional.
+ * @param {SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style`, or custom attributes.
+ *
+ * @returns {JSX.Element} A scalable vector graphic (SVG) element representing the icon.
+ */
+
+const AudioIcon: FC<AudioIconProps> = ({
+	width = 25,
+	height = 25,
+	...props
+}) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 25 25"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Audio Icon"
+			role="img"
+			{...props}>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M3.81557 0.581055C2.23603 0.581055 0.955566 1.86152 0.955566 3.44105V21.5544C0.955566 23.1339 2.23603 24.4144 3.81557 24.4144H21.9289C23.5084 24.4144 24.7889 23.1339 24.7889 21.5544V3.44105C24.7889 1.86152 23.5084 0.581055 21.9289 0.581055H3.81557ZM17.7546 6.54846C17.9964 6.51107 18.2432 6.59085 18.4202 6.75789C18.5972 6.92743 18.687 7.16678 18.6695 7.40862L17.9416 15.1052L17.94 15.1259C17.9331 15.2209 17.9263 15.3139 17.9216 15.4069C17.8593 16.454 16.9917 17.2842 15.9297 17.2842C14.8128 17.2842 13.9128 16.3692 13.9353 15.2473C13.9577 14.1702 14.8477 13.2976 15.9247 13.2951C16.1316 13.2951 16.3286 13.325 16.5155 13.3824L16.8646 9.5852L11.7065 10.3431L11.158 16.282C11.148 16.3792 11.143 16.4739 11.1381 16.5712C11.0807 17.6208 10.2107 18.4561 9.14612 18.4561C8.01677 18.4561 7.10432 17.5161 7.15418 16.3742C7.19906 15.342 8.03921 14.5068 9.07133 14.4694C9.2957 14.4619 9.5126 14.4918 9.71703 14.5517L10.2954 8.2613C10.3278 7.8948 10.6095 7.59811 10.9735 7.54575L17.7546 6.54846Z"
+				fill="#00BECA"
+			/>
+		</svg>
+	);
+};
+
+export default AudioIcon;

Client/public/assets/icons/documentPage/CheckedIcon.tsx

@@ -0,0 +1,54 @@
+import React, { FC, SVGProps } from 'react';
+
+interface CheckedIconProps extends SVGProps<SVGSVGElement> {
+	width?: number;
+	height?: number;
+	color?: string;
+	strokeWidth?: number;
+}
+
+/**
+ * A reusable SVG icon component for rendering an icon.
+ *
+ * @param {number} [width=20] - The width of the icon in pixels. Optional.
+ * @param {number} [height=20] - The height of the icon in pixels. Optional.
+ * @param {string} [color='white'] - The stroke color of the icon. Accepts any valid CSS color value. Optional.
+ * @param {number} [strokeWidth=2] - The stroke width of the icon's path. Optional.
+ * @param {SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style`, or custom attributes.
+ *
+ * @returns {JSX.Element} A scalable vector graphic (SVG) element representing the icon.
+ */
+
+const CheckedIcon: FC<CheckedIconProps> = ({
+	width = 20,
+	height = 20,
+	color = 'white',
+	strokeWidth = 2,
+	...props
+}) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Checked Icon"
+			role="img"
+			{...props}>
+			<path
+				d="M0 6a6 6 0 0 1 6-6h8a6 6 0 0 1 6 6v8a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V6Z"
+				fill="#175CD3"
+			/>
+			<path
+				d="M14.667 6.5 8.25 12.917 5.333 10"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export default CheckedIcon;

Client/public/assets/icons/documentPage/CopyIcon.tsx

@@ -1,12 +1,26 @@
-import React from 'react';
+import React, { FC, SVGProps } from 'react';
+interface CopyIconProps extends SVGProps<SVGSVGElement> {
+	width?: number;
+	height?: number;
+	color?: string;
+}
+
+/**
+ * A reusable SVG icon component for rendering an icon.
+ *
+ * @param {number} [width=15] - The width of the icon in pixels. Optional.
+ * @param {number} [height=15] - The height of the icon in pixels. Optional.
+ * @param {string} [color='#667085'] - The stroke color of the icon. Accepts any valid CSS color value. Optional.
+ * @param {SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style`, or custom attributes.
+ *
+ * @returns {JSX.Element} A scalable vector graphic (SVG) element representing the icon.
+ */
 
-const CopyIcon = ({
+const CopyIcon: FC<CopyIconProps> = ({
 	width = 15,
 	height = 15,
+	color = '#667085',
 	...props
-}: {
-	width?: number;
-	height?: number;
 }) => {
 	return (
 		<svg
@@ -15,15 +29,17 @@ const CopyIcon = ({
 			viewBox="0 0 14 14"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Copy Icon"
+			role="img"
 			{...props}>
 			<path
 				d="M2.8 8.8C2.24087 8.8 1.96131 8.8 1.74078 8.70866C1.44675 8.58686 1.21314 8.35325 1.09134 8.05922C1 7.83869 1 7.55913 1 7V2.92C1 2.24794 1 1.91191 1.13079 1.65521C1.24584 1.42942 1.42942 1.24584 1.65521 1.13079C1.91191 1 2.24794 1 2.92 1H7C7.55913 1 7.83869 1 8.05922 1.09134C8.35325 1.21314 8.58686 1.44675 8.70866 1.74078C8.8 1.96131 8.8 2.24087 8.8 2.8M7.12 13H11.08C11.7521 13 12.0881 13 12.3448 12.8692C12.5706 12.7542 12.7542 12.5706 12.8692 12.3448C13 12.0881 13 11.7521 13 11.08V7.12C13 6.44794 13 6.11191 12.8692 5.85521C12.7542 5.62942 12.5706 5.44584 12.3448 5.33079C12.0881 5.2 11.7521 5.2 11.08 5.2H7.12C6.44794 5.2 6.11191 5.2 5.85521 5.33079C5.62942 5.44584 5.44584 5.62942 5.33079 5.85521C5.2 6.11191 5.2 6.44794 5.2 7.12V11.08C5.2 11.7521 5.2 12.0881 5.33079 12.3448C5.44584 12.5706 5.62942 12.7542 5.85521 12.8692C6.11191 13 6.44794 13 7.12 13Z"
-				stroke="#667085"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				stroke={color}
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</svg>
 	);
 };
 
-export default CopyIcon;
+export default CopyIcon;

Client/public/assets/icons/documentPage/DOCIcon.tsx

@@ -0,0 +1,43 @@
+import React, { FC, SVGProps } from 'react';
+
+interface DOCIconProps extends SVGProps<SVGSVGElement> {
+	width?: number;
+	height?: number;
+}
+
+/**
+ * A reusable SVG icon component for rendering an icon.
+ *
+ * @param {number} [width=25] - The width of the icon in pixels. Optional.
+ * @param {number} [height=25] - The height of the icon in pixels. Optional.
+ * @param {SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style`, or custom attributes.
+ *
+ * @returns {JSX.Element} A scalable vector graphic (SVG) element representing the icon.
+ */
+
+const DOCIcon: FC<DOCIconProps> = ({
+	width = 25,
+	height = 25,
+	...props
+}) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 25 25"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="DOC Icon"
+			role="img"
+			{...props}>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M3.73207 0.496094C2.15254 0.496094 0.87207 1.77656 0.87207 3.35609V21.4694C0.87207 23.049 2.15254 24.3294 3.73207 24.3294H21.8454C23.4249 24.3294 24.7054 23.049 24.7054 21.4694V3.35609C24.7054 1.77656 23.4249 0.496094 21.8454 0.496094H3.73207ZM9.78872 16.9598C9.9198 17.0471 10.0989 17.0908 10.3262 17.0908C10.5708 17.0908 10.7587 17.0428 10.8898 16.9467C11.0296 16.8418 11.1301 16.7282 11.1913 16.6058C11.2525 16.4835 11.2874 16.4005 11.2962 16.3568L12.8036 11.4674L14.3111 16.3568C14.3286 16.4005 14.3635 16.4835 14.416 16.6058C14.4771 16.7194 14.5776 16.8287 14.7174 16.9335C14.8573 17.0384 15.0452 17.0908 15.2811 17.0908C15.5258 17.0908 15.7093 17.0471 15.8317 16.9598C15.9627 16.8724 16.0545 16.7762 16.1069 16.6714C16.1681 16.5578 16.2074 16.4748 16.2249 16.4223L18.6893 9.27828C18.7592 9.03359 18.7897 8.83697 18.781 8.6884C18.781 8.53111 18.7286 8.40002 18.6237 8.29515C18.5189 8.19029 18.3353 8.08979 18.0732 7.99367C17.8285 7.90628 17.6231 7.87132 17.4571 7.8888C17.2998 7.90628 17.1687 7.97619 17.0638 8.09853C16.9677 8.21213 16.8803 8.39128 16.8017 8.63598L15.1762 13.5123L13.7868 8.67529C13.7605 8.61413 13.7212 8.52674 13.6688 8.41313C13.6163 8.29952 13.5202 8.19466 13.3804 8.09853C13.2493 8.0024 13.0483 7.95434 12.7774 7.95434C12.5415 7.95434 12.3579 7.99803 12.2269 8.08542C12.0958 8.17281 11.9996 8.27331 11.9385 8.38691C11.886 8.50052 11.8467 8.60101 11.8205 8.6884L10.4441 13.4861L8.80559 8.62286C8.72694 8.37817 8.63518 8.19903 8.53032 8.08542C8.43419 7.97182 8.30747 7.91065 8.15018 7.9019C8.00161 7.89317 7.80499 7.92812 7.5603 8.00677C7.18453 8.12912 6.95732 8.28205 6.87867 8.46556C6.80002 8.64034 6.81749 8.91125 6.9311 9.27828L9.39546 16.4223C9.41295 16.466 9.4479 16.5447 9.50033 16.6583C9.5615 16.7719 9.65763 16.8724 9.78872 16.9598Z"
+				fill="#2684FF"
+			/>
+		</svg>
+	);
+};
+
+export default DOCIcon;

Client/public/assets/icons/documentPage/GeneralIcon.tsx

@@ -0,0 +1,54 @@
+import React, { FC, SVGProps } from 'react';
+
+interface GeneralIconProps extends SVGProps<SVGSVGElement> {
+	width?: number;
+	height?: number;
+	color?: string;
+	strokeWidth?: number;
+}
+
+/**
+ * A reusable SVG icon component for rendering an icon.
+ *
+ * @param {number} [width=25] - The width of the icon in pixels. Optional.
+ * @param {number} [height=25] - The height of the icon in pixels. Optional.
+ * @param {string} [color='white'] - The stroke color of the icon. Accepts any valid CSS color value. Optional.
+ * @param {number} [strokeWidth=1.90667] - The stroke width of the icon's path. Optional.
+ * @param {SVGProps<SVGSVGElement>} props - Additional SVG props such as `className`, `style`, or custom attributes.
+ *
+ * @returns {JSX.Element} A scalable vector graphic (SVG) element representing the icon.
+ */
+
+const GeneralIcon: FC<GeneralIconProps> = ({
+	width = 25,
+	height = 25,
+	color = 'white',
+	strokeWidth = 1.90667,
+	...props
+}) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 25 25"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="General Icon"
+			role="img"
+			{...props}>
+			<path
+				d="M.872 3.646a2.98 2.98 0 0 1 2.98-2.98h17.874a2.98 2.98 0 0 1 2.98 2.98V21.52a2.979 2.979 0 0 1-2.98 2.979H3.851a2.979 2.979 0 0 1-2.979-2.98V3.647Z"
+				fill="#BCC0D1"
+			/>
+			<path
+				d="M14.08 11.938h-3.873m1.291 2.582h-1.29m5.163-5.164h-5.164m7.746-.13v6.714c0 1.084 0 1.627-.21 2.04-.186.365-.483.661-.847.847-.414.211-.957.211-2.041.211h-4.131c-1.085 0-1.627 0-2.041-.21a1.937 1.937 0 0 1-.846-.847c-.212-.414-.212-.957-.212-2.041V9.227c0-1.085 0-1.627.212-2.041.185-.365.481-.66.846-.847.414-.21.956-.21 2.04-.21h4.132c1.085 0 1.627 0 2.04.21.365.186.662.482.847.847.211.414.211.956.211 2.04Z"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+};
+
+export default GeneralIcon;