lifeparticle · lifeparticle · Oct 29, 2023 · Oct 28, 2023 · Oct 28, 2023
diff --git a/ui/package.json b/ui/package.json
@@ -51,6 +51,7 @@
 		"react-ga4": "^2.1.0",
 		"react-head": "^3.4.2",
 		"react-markdown": "6",
+		"react-responsive-carousel": "^3.2.23",
 		"react-router-dom": "^6.11.1",
 		"react-syntax-highlighter": "^15.5.0",
 		"sass": "^1.62.1",

diff --git a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss
@@ -1,6 +1,7 @@
 $cp-top: 27px;
 $cp-left: -12px;
 $cp-bg-color: rgb(68, 68, 68);
+$cp-z-index: 9999;
 
 .cpwi {
 	&__color {
@@ -16,7 +17,7 @@ $cp-bg-color: rgb(68, 68, 68);
 			border-radius: var(--bt-size-10);
 			top: $cp-top;
 			left: $cp-left;
-			z-index: var(--bt-z-index-dropdown);
+			z-index: $cp-z-index;
 			display: none;
 			position: absolute;
 		}

diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss b/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
@@ -1,5 +1,5 @@
 .withpagetitle {
-	padding: 0 var(--bt-size-10) 0 var(--bt-size-10);
+	padding: var(--bt-size-10) var(--bt-size-10);
 	&__header_title {
 		height: var(--bt-size-64);
 	}

diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
@@ -28,4 +28,17 @@
 			}
 		}
 	}
+
+	&__sponsor {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--bt-size-8);
+	}
+
+	&_slider_card {
+		@media screen and (min-width: 1240px) {
+			max-width: var(--bt-converter-width);
+			margin: 0 auto;
+		}
+	}
 }
diff --git a/ui/src/pages/About/components/Features.tsx b/ui/src/pages/About/components/Features.tsx
@@ -1,57 +1,58 @@
 import React from "react";
-import { List, Carousel, Card, Space, Tag } from "antd";
+import { Card, Space, Tag } from "antd";
 import { FEATURE_DATA } from "data/featureData";
 import { openLink } from "utils/helper-functions/string";
 
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel } from "react-responsive-carousel";
+
 const Features: React.FC = () => {
 	return (
-		<List header={<div>Features</div>} bordered>
-			<Carousel autoplay dotPosition={"bottom"}>
-				{FEATURE_DATA.map((feature, index) => (
-					<Card
-						bordered={false}
-						key={feature.key}
-						title={
-							<h5 onClick={() => openLink(feature.link)}>
-								<a>
-									{index} - {feature.name}
-								</a>
-							</h5>
-						}
-						actions={[
-							<Space>
-								{feature.library.map((lib) => {
-									return (
-										<a
-											key={lib.url}
-											href={lib.url}
-											target="_blank"
-											rel="noopener noreferrer"
+		<Carousel autoPlay={true} infiniteLoop={true}>
+			{FEATURE_DATA.map((feature, index) => (
+				<Card
+					bordered={false}
+					key={feature.key}
+					title={
+						<h5 onClick={() => openLink(feature.link)}>
+							<a>
+								{index} - {feature.name}
+							</a>
+						</h5>
+					}
+					actions={[
+						<Space>
+							{feature.library.map((lib) => {
+								return (
+									<a
+										key={lib.url}
+										href={lib.url}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<Tag
+											color={
+												lib.name === "Vanilla JS"
+													? "green"
+													: "gold"
+											}
 										>
-											<Tag
-												color={
-													lib.name === "Vanilla JS"
-														? "green"
-														: "gold"
-												}
-											>
-												{lib.name}
-											</Tag>
-										</a>
-									);
-								})}
-							</Space>,
-						]}
-					>
-						{feature.fullDescription.length > 0
-							? feature.fullDescription
-							: feature.shortDescription}
-						<br />
-						<br />
-					</Card>
-				))}
-			</Carousel>
-		</List>
+											{lib.name}
+										</Tag>
+									</a>
+								);
+							})}
+						</Space>,
+					]}
+				>
+					{feature.fullDescription.length > 0
+						? feature.fullDescription
+						: feature.shortDescription}
+					<br />
+					<br />
+				</Card>
+			))}
+		</Carousel>
 	);
 };
 

diff --git a/ui/src/pages/About/components/Support.tsx b/ui/src/pages/About/components/Support.tsx
@@ -2,6 +2,7 @@ import { Button, List, Typography } from "antd";
 import Icon from "components/General/Icon";
 import React from "react";
 import { openLink } from "utils/helper-functions/string";
+import style from "pages/About/About.module.scss";
 
 const Support: React.FC = () => {
 	return (
@@ -25,11 +26,13 @@ const APP_SUPPORT = [
 		Fancy giving this project a little love? Why not become a superstar
 		through{" "}
 		<Button
-			icon={<Icon name="Heart" className="heart" color="red" />}
 			type="primary"
+			className={style.about__sponsor}
 			onClick={() => openLink("https://github.com/sponsors/lifeparticle")}
 		>
-			GitHub Sponsors
+			<Icon name="Heart" className="heart" color="red" />
+
+			<span>GitHub Sponsors</span>
 		</Button>{" "}
 		? Whether you choose to shower us with monthly sprinkles of support or a
 		one-time generosity bomb, your backing truly counts! Remember, your

diff --git a/ui/src/pages/About/index.tsx b/ui/src/pages/About/index.tsx
@@ -54,7 +54,7 @@ const About = () => {
 				<Card className={style.about__card} bordered={false}>
 					<Values />
 				</Card>
-				<Card className={style.about__card} bordered={false}>
+				<Card className={style.about_slider_card} bordered={false}>
 					<Features />
 				</Card>
 				<Card className={style.about__card} bordered={false}>

diff --git a/ui/src/pages/Generator/Image/__tests__/ImageGeneratorFromColors.test.tsx b/ui/src/pages/Generator/Image/__tests__/ImageGeneratorFromColors.test.tsx
@@ -1,6 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, test } from "vitest";
-import user from "@testing-library/user-event";
 import ImageGeneratorFromColors from "pages/Generator/Image";
 
 describe("Image Generator component", () => {
@@ -24,7 +23,9 @@ describe("Image Generator component", () => {
 
 		const textareaElement = screen.getByRole("textbox");
 
-		await user.type(textareaElement, COLOR);
+		expect(textareaElement).toBeInTheDocument();
+
+		fireEvent.change(textareaElement, { target: { value: COLOR } });
 
 		expect(textareaElement).toHaveValue(COLOR);
 	});

diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
@@ -1,6 +1,3 @@
 .heart {
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	animation: pulse 1s infinite;
 }
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -3362,6 +3362,7 @@ __metadata:
     react-ga4: ^2.1.0
     react-head: ^3.4.2
     react-markdown: 6
+    react-responsive-carousel: ^3.2.23
     react-router-dom: ^6.11.1
     react-syntax-highlighter: ^15.5.0
     sass: ^1.62.1
@@ -8111,7 +8112,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.5.8, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -8797,6 +8798,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-easy-swipe@npm:^0.0.21":
+  version: 0.0.21
+  resolution: "react-easy-swipe@npm:0.0.21"
+  dependencies:
+    prop-types: ^15.5.8
+  checksum: 225f12a9dd410db1c790220867ab1eb58e2ef0a2bdae8541330805fc5b9905e242ab307b019f9aaed76473849a753f363baff03fa8a77e7a1860d7b41dc83ec0
+  languageName: node
+  linkType: hard
+
 "react-error-boundary@npm:^4.0.10":
   version: 4.0.11
   resolution: "react-error-boundary@npm:4.0.11"
@@ -8940,6 +8950,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-responsive-carousel@npm:^3.2.23":
+  version: 3.2.23
+  resolution: "react-responsive-carousel@npm:3.2.23"
+  dependencies:
+    classnames: ^2.2.5
+    prop-types: ^15.5.8
+    react-easy-swipe: ^0.0.21
+  checksum: 8a5b915f140a05425554a0c108c60a0b103dae49808486d39147df09c832ad712c7d7f4a66f0d0c39529ca095b4a327f0cc440d91b5f7a39ab13076931f74bd0
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.11.1":
   version: 6.15.0
   resolution: "react-router-dom@npm:6.15.0"