From 988e5e41fcfe7a9a3d5d1251dbe88a34e9888637 Mon Sep 17 00:00:00 2001 From: yepMizu Date: Fri, 17 Apr 2026 22:02:52 +0545 Subject: [PATCH 1/2] Final Fix: Animation issue in Chart in certain desktop environment --- frontend/package-lock.json | 13 ++++- .../src/app/assets/images/genderEllipse.tsx | 58 +++++++++---------- 2 files changed, 40 insertions(+), 31 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5e576ba..c0e95a1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1217,6 +1217,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1581,6 +1582,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001580", "electron-to-chromium": "^1.4.648", @@ -1677,6 +1679,7 @@ "version": "4.5.1", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", + "peer": true, "dependencies": { "@kurkle/color": "^0.3.0" }, @@ -2097,6 +2100,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz", "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -2249,6 +2253,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, + "peer": true, "dependencies": { "array-includes": "^3.1.7", "array.prototype.findlastindex": "^1.2.3", @@ -2888,7 +2893,8 @@ "node_modules/gsap": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz", - "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==" + "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==", + "peer": true }, "node_modules/has-bigints": { "version": "1.0.2", @@ -3701,6 +3707,7 @@ "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz", "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==", "license": "MIT", + "peer": true, "dependencies": { "@next/env": "14.2.35", "@swc/helpers": "0.5.5", @@ -4104,6 +4111,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", @@ -4284,6 +4292,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -4304,6 +4313,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -5164,6 +5174,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/frontend/src/app/assets/images/genderEllipse.tsx b/frontend/src/app/assets/images/genderEllipse.tsx index 860d3e5..dafede0 100644 --- a/frontend/src/app/assets/images/genderEllipse.tsx +++ b/frontend/src/app/assets/images/genderEllipse.tsx @@ -16,10 +16,25 @@ export default function GenderEllipseSVG({ }): ReactElement { const [visible, setVisible] = useState({ male: true, female: true }); const [hasAnimated, setHasAnimated] = useState(false); - const [showChart, setShowChart] = useState(false); const chartRef = useRef>(null); const containerRef = useRef(null); + const data = { + labels: ["Male", "Female", "+10%"], + datasets: [ + { + data: [75, 15, 10], + backgroundColor: [ + "rgba(117, 51, 204, 0.77)", + "rgba(157, 75, 173, 1)", + "rgba(235, 140, 253, 1)", + ], + hoverBackgroundColor: ["#3B267B", "#E08CF5", "rgba(157, 75, 173, 1)"], + borderWidth: 0, + }, + ], + }; + useEffect(() => { const observer = new IntersectionObserver( (entries) => { @@ -36,14 +51,17 @@ export default function GenderEllipseSVG({ useEffect(() => { if (!hasAnimated) return; - let raf1: number, raf2: number; - raf1 = requestAnimationFrame(() => { - raf2 = requestAnimationFrame(() => setShowChart(true)); - }); - return () => { - cancelAnimationFrame(raf1); - cancelAnimationFrame(raf2); + const chart = chartRef.current; + if (!chart) return; + + chart.config.options!.animation = { + duration: 1500, + easing: "easeInOutQuart", + animateRotate: true, + animateScale: true, }; + chart.data = data; + chart.update(); }, [hasAnimated]); const handleToggle = (gender: "male" | "female") => { @@ -61,25 +79,9 @@ export default function GenderEllipseSVG({ chart.update(); }; - const data = { - labels: ["Male", "Female", "+10%"], - datasets: [ - { - data: [75, 15, 10], - backgroundColor: [ - "rgba(117, 51, 204, 0.77)", - "rgba(157, 75, 173, 1)", - "rgba(235, 140, 253, 1)", - ], - hoverBackgroundColor: ["#3B267B", "#E08CF5", "rgba(157, 75, 173, 1)"], - borderWidth: 0, - }, - ], - }; - const options: ChartOptions<"doughnut"> = { animation: { - duration: 2000, + duration: 1500, animateRotate: true, animateScale: true, }, @@ -115,11 +117,7 @@ export default function GenderEllipseSVG({ return (
- {showChart && - containerRef.current && - containerRef.current.getBoundingClientRect().width > 0 && ( - - )} +
); } \ No newline at end of file From 822cf193cf9fa6c867f6e8c4d513c6f0223a16b5 Mon Sep 17 00:00:00 2001 From: yepMizu Date: Fri, 17 Apr 2026 22:54:48 +0545 Subject: [PATCH 2/2] Change: Margin bottom --- frontend/src/app/sections/FAQ/FAQ.tsx | 2 +- frontend/src/app/sections/Tracks/TracksCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/sections/FAQ/FAQ.tsx b/frontend/src/app/sections/FAQ/FAQ.tsx index 50b9691..e334ad5 100644 --- a/frontend/src/app/sections/FAQ/FAQ.tsx +++ b/frontend/src/app/sections/FAQ/FAQ.tsx @@ -150,7 +150,7 @@ const Faq = () => {
{sections.map((section, index) => ( { headStyling: selectedTrack === "Ed-Tech" ? "gradient-bg text-magnolia active" - : "bg-violet hover:gradient-bg hover:text-magnolia transition-all duration-300", + : "bg-violet hover:gradient-bg hover:text-magnolia transition-all duration-1000", bodyStyling: "gradient-bg text-magnolia", description: "Reimagining education at DeerHack through smart, interactive, and personalized tech",