From e1321227162f3607c4bf783da5a05a6b7f322d24 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Sat, 28 Oct 2023 20:27:24 +0600 Subject: [PATCH] update slider and fix some UI Changes --- ui/package.json | 1 + .../ColorPickerWithInput.module.scss | 3 +- .../withPageTitle/withPageTitle.module.scss | 2 +- ui/src/pages/About/About.module.scss | 13 +++ ui/src/pages/About/components/Features.tsx | 95 ++++++++++--------- ui/src/pages/About/components/Support.tsx | 7 +- ui/src/pages/About/index.tsx | 2 +- .../ImageGeneratorFromColors.test.tsx | 7 +- ui/src/styles/global.css | 3 - ui/yarn.lock | 23 ++++- 10 files changed, 97 insertions(+), 59 deletions(-) diff --git a/ui/package.json b/ui/package.json index b5bd30e4..618e1c61 100644 --- 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 index a75de812..25a3579f 100644 --- 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 index 05eba770..51df8ffb 100644 --- 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 index b8641d34..0f37748f 100644 --- 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 index 7d480a62..91545933 100644 --- 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 ( - Features} bordered> - - {FEATURE_DATA.map((feature, index) => ( - openLink(feature.link)}> - - {index} - {feature.name} - - - } - actions={[ - - {feature.library.map((lib) => { - return ( - + {FEATURE_DATA.map((feature, index) => ( + openLink(feature.link)}> + + {index} - {feature.name} + + + } + actions={[ + + {feature.library.map((lib) => { + return ( + + - - {lib.name} - - - ); - })} - , - ]} - > - {feature.fullDescription.length > 0 - ? feature.fullDescription - : feature.shortDescription} -
-
- - ))} - - + {lib.name} + + + ); + })} + , + ]} + > + {feature.fullDescription.length > 0 + ? feature.fullDescription + : feature.shortDescription} +
+
+ + ))} + ); }; diff --git a/ui/src/pages/About/components/Support.tsx b/ui/src/pages/About/components/Support.tsx index e9690c63..8fca8573 100644 --- 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{" "} {" "} ? 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 index fa34c776..c2edf3c4 100644 --- a/ui/src/pages/About/index.tsx +++ b/ui/src/pages/About/index.tsx @@ -54,7 +54,7 @@ const About = () => { - + diff --git a/ui/src/pages/Generator/Image/__tests__/ImageGeneratorFromColors.test.tsx b/ui/src/pages/Generator/Image/__tests__/ImageGeneratorFromColors.test.tsx index 7bafc61b..3bc729ba 100644 --- 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 index bcfd38bf..ad6a5640 100644 --- 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 index b3f87f3c..287d4758 100644 --- 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"