From 8e7e5f3e1c62083c1c89cbe0edef4e27b7839b79 Mon Sep 17 00:00:00 2001 From: Rajatava Das Date: Sat, 8 Aug 2026 21:00:58 +0530 Subject: [PATCH 1/5] Fixed Bugs and Lags --- app/(main)/loading.tsx | 42 +++ app/api/form/getFormAnalytics/[id]/route.ts | 11 +- app/components/Navbar.tsx | 143 +++++--- app/globals.css | 129 ++++--- app/globals.scss | 6 +- app/loading.tsx | 43 +++ package-lock.json | 71 ++-- src/authentication/Login/Login.jsx | 4 +- .../Login/styles/Login.module.scss | 226 ++++--------- src/components/Chatbot/Chatbot.jsx | 6 +- src/components/Chatbot/Chatbot.module.scss | 128 ++++--- src/components/EventCard/EventCard.jsx | 2 +- .../styles/HeroGallery.module.scss | 3 + src/components/ShareSocial/ShareSocial.jsx | 144 +++++--- .../styles/QRCodeModal.module.scss | 317 ++++-------------- .../Modals/Event/ShareModal/ShareModal.jsx | 134 ++------ .../ShareModal/styles/ShareModal.module.scss | 87 +++-- .../Modals/Profile/Admin/PreviewForm.jsx | 185 ++++++++-- .../Modals/Profile/Admin/SectionModal.jsx | 45 ++- src/layouts/Profile/Sidebar/Sidebar.jsx | 84 +++-- .../Sidebar/styles/Sidebar.module.scss | 94 ++++-- src/sections/Home/About/About.jsx | 182 ++-------- .../Home/About/styles/About.module.scss | 187 ++++------- 23 files changed, 1107 insertions(+), 1166 deletions(-) create mode 100644 app/(main)/loading.tsx create mode 100644 app/loading.tsx diff --git a/app/(main)/loading.tsx b/app/(main)/loading.tsx new file mode 100644 index 0000000..27c61d4 --- /dev/null +++ b/app/(main)/loading.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +export default function MainLoading() { + return ( +
+
+ +

+ Loading page... +

+
+ ); +} diff --git a/app/api/form/getFormAnalytics/[id]/route.ts b/app/api/form/getFormAnalytics/[id]/route.ts index f54c5e5..0f2070d 100644 --- a/app/api/form/getFormAnalytics/[id]/route.ts +++ b/app/api/form/getFormAnalytics/[id]/route.ts @@ -51,11 +51,12 @@ export async function GET( }); if (!form) return expressError(404, "Form not found"); - if (form.formAnalytics.length === 0) { - return expressError(404, "No users have registered to this form yet"); - } - - const formAnalytics = form.formAnalytics[0]; + const formAnalytics = form.formAnalytics[0] || { + count: 0, + regUserEmails: [], + teams: [], + userData: [], + }; // Registrant counts bucketed by the first word of `year` ("2nd Year" -> "2nd"). // A user with no year lands under the key "null", exactly as before: the diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 186455c..49de2fd 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -4,7 +4,8 @@ import { useState, useEffect, useRef, useContext } from "react"; import Link from "next/link"; import Image from "next/image"; import { usePathname } from "next/navigation"; -import { MdOutlineLogout } from "react-icons/md"; +import { MdOutlineLogout, MdChevronRight } from "react-icons/md"; +import { motion, AnimatePresence } from "framer-motion"; import AuthContext from "@/src/context/AuthContext"; import defaultImg from "@/src/assets/images/defaultImg.jpg"; @@ -196,59 +197,95 @@ export default function Navbar() {
{/* Dynamic Island Expandable Content (Mobile Only) */} -
-
- {navLinks.map((link) => { - const isActive = checkIsActive(link.href); - return ( - - {link.label} - - ); - })} + + {mobileOpen && ( + +
+ {navLinks.map((link) => { + const isActive = checkIsActive(link.href); + return ( + setMobileOpen(false)} + > + {link.label} + + ); + })} -
- {!authCtx.isLoading && authCtx.isLoggedIn ? ( - <> - setMobileOpen(false)} - > - {/* eslint-disable-next-line @next/next/no-img-element */} - - {authCtx.user.name || "Profile"} - - - - ) : ( - - Login → - - )} -
-
-
+
+ {!authCtx.isLoading && authCtx.isLoggedIn ? ( + <> + setMobileOpen(false)} + style={{ marginBottom: "0.5rem" }} + > +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + + {authCtx.user.name || "Profile"} +
+ + + + + ) : ( + setMobileOpen(false)} + > + Login → + + )} +
+
+ + )} + diff --git a/app/globals.css b/app/globals.css index 07f23d7..6678bb2 100644 --- a/app/globals.css +++ b/app/globals.css @@ -188,7 +188,7 @@ main>div { /* ─── Navbar Styles ──────────────────────────────────────────────── */ .fed-navbar-wrapper { position: fixed; - top: 1.25rem; + top: 1.5rem; left: 0; right: 0; z-index: 999; @@ -206,37 +206,86 @@ main>div { .fed-navbar { pointer-events: auto; - background: rgba(18, 18, 18, 0.85); + background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 9999px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 18px; width: 100%; max-width: 880px; - padding: 0.5rem 0.75rem; - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); - transition: max-width 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.45s ease, padding 0.45s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.45s ease, transform 0.45s ease; + padding: 0.45rem 1rem; + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1); + transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; } @media (max-width: 767px) { + .fed-navbar-wrapper { + top: 1.15rem; + padding: 0 0.85rem; + } + .fed-navbar { - border-radius: 28px; + border-radius: 18px; + padding: 0.55rem 1.1rem; + max-width: calc(100vw - 1.7rem); + background: rgba(8, 8, 8, 0.94); + } + + .fed-navbar-row { + min-height: 38px; + align-items: center; + } + + .fed-brand-link { + display: inline-flex; + align-items: center; + gap: 0.65rem; + line-height: 1; + } + + .fed-logo-badge { + width: 34px; + height: 34px; + } + + .fed-logo-text { + font-size: 1.1rem; + line-height: 1; + display: inline-flex; + align-items: center; + } + + .fed-mobile-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + height: 34px; + } + + .hamburger-button { + width: 34px; + height: 34px; + padding: 0; + margin: 0; + display: inline-flex; + align-items: center; + justify-content: center; } } .fed-navbar--scrolled { max-width: 1140px; - padding: 0.55rem 1.25rem; - background: rgba(14, 14, 14, 0.94); + padding: 0.45rem 1.2rem; + background: rgba(8, 8, 8, 0.96); border-color: rgba(255, 255, 255, 0.16); - box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .fed-navbar--dynamic-island { - border-radius: 28px !important; - background: rgba(16, 16, 16, 0.96) !important; + border-radius: 20px !important; + background: rgba(10, 10, 10, 0.96) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important; padding: 0.65rem 1rem 1rem 1rem !important; backdrop-filter: blur(32px) saturate(2) !important; @@ -388,34 +437,20 @@ main>div { } .fed-mobile-menu-container { - display: block; + width: 100%; overflow: hidden; - transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); -} - -.fed-mobile-menu--open { - max-height: 460px; - opacity: 1; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); -} - -.fed-mobile-menu--closed { - max-height: 0; - opacity: 0; - margin-top: 0; - padding-top: 0; - border-top: 0; - pointer-events: none; + margin: 0; + padding: 0; } .fed-mobile-menu-list { display: flex; flex-direction: column; gap: 0.75rem; + margin-top: 0.85rem; + padding-top: 0.85rem; padding-bottom: 0.5rem; - margin-top: 0.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); } .clay-nav-item { @@ -928,30 +963,40 @@ main>div { /* ─── Hamburger & Mobile UI ─────────────────────────────────────── */ .hamburger-button { - width: 42px; - height: 42px; + width: 36px; + height: 36px; border-radius: 9999px; background: transparent; border: none; - display: flex; + display: inline-flex; align-items: center; justify-content: center; color: #ffffff; transition: background 0.2s ease, transform 0.2s ease; cursor: pointer; + padding: 0; + margin: 0; + line-height: 0; } -.hamburger-button:hover { - background: transparent; +.hamburger-button:hover, +.hamburger-button:active, +.hamburger-button:focus { + background: transparent !important; + box-shadow: none !important; + outline: none !important; } .hamburger { display: flex; flex-direction: column; - gap: 5px; + gap: 4px; width: 20px; - height: 16px; + height: 14px; justify-content: center; + align-items: center; + margin: 0 auto; + box-sizing: border-box; } .hamburger span { @@ -1210,6 +1255,7 @@ main>div { animation-delay: 0.5s; opacity: 0; } + /* ─── Signed-in avatar in the navbar ──────────────────────────────── * Replaces the Login pill once a session is restored, matching what the * previous navbar did. Sized to the pill's height so swapping between the @@ -1271,9 +1317,10 @@ main>div { * Applies only below the tablet breakpoint, so the compact desktop styling of * the admin forms is untouched. */ @media (max-width: 768px) { + input, select, textarea { font-size: 16px; } -} +} \ No newline at end of file diff --git a/app/globals.scss b/app/globals.scss index 4ebc7d0..a9d52f3 100644 --- a/app/globals.scss +++ b/app/globals.scss @@ -321,8 +321,12 @@ body { flex-direction: column; justify-content: center; align-items: center; - background-color: $page-color; + min-height: 100vh; + width: 100%; + background: radial-gradient(circle at 50% 35%, rgba(255, 85, 0, 0.15) 0%, #090909 75%); overflow: hidden; + position: relative; + padding: 2rem 1rem; } .pageExt { diff --git a/app/loading.tsx b/app/loading.tsx new file mode 100644 index 0000000..511c1aa --- /dev/null +++ b/app/loading.tsx @@ -0,0 +1,43 @@ +import React from "react"; + +export default function Loading() { + return ( +
+
+ +

+ Loading FED KIIT... +

+
+ ); +} diff --git a/package-lock.json b/package-lock.json index 133e274..e9ef779 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2110,7 +2110,7 @@ "version": "6.19.3", "resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.19.3.tgz", "integrity": "sha512-CBPT44BjlQxEt8kiMEauji2WHTDoVBOKl7UlewXmUgBPnr/oPRZC3psci5chJnYmH0ivEIog2OU9PGWoki3DLQ==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "dependencies": { "c12": "3.1.0", @@ -2123,14 +2123,14 @@ "version": "6.19.3", "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.19.3.tgz", "integrity": "sha512-ljkJ+SgpXNktLG0Q/n4JGYCkKf0f8oYLyjImS2I8e2q2WCfdRRtWER062ZV/ixaNP2M2VKlWXVJiGzZaUgbKZw==", - "devOptional": true, + "dev": true, "license": "Apache-2.0" }, "node_modules/@prisma/engines": { "version": "6.19.3", "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.19.3.tgz", "integrity": "sha512-RSYxtlYFl5pJ8ZePgMv0lZ9IzVCOdTPOegrs2qcbAEFrBI1G33h6wyC9kjQvo0DnYEhEVY0X4LsuFHXLKQk88g==", - "devOptional": true, + "dev": true, "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { @@ -2144,14 +2144,14 @@ "version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7", "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7.tgz", "integrity": "sha512-03bgb1VD5gvuumNf+7fVGBzfpJPjmqV423l/WxsWk2cNQ42JD0/SsFBPhN6z8iAvdHs07/7ei77SKu7aZfq8bA==", - "devOptional": true, + "dev": true, "license": "Apache-2.0" }, "node_modules/@prisma/fetch-engine": { "version": "6.19.3", "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.19.3.tgz", "integrity": "sha512-tKtl/qco9Nt7LU5iKhpultD8O4vMCZcU2CHjNTnRrL1QvSUr5W/GcyFPjNL87GtRrwBc7ubXXD9xy4EvLvt8JA==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "dependencies": { "@prisma/debug": "6.19.3", @@ -2163,7 +2163,7 @@ "version": "6.19.3", "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.19.3.tgz", "integrity": "sha512-xFj1VcJ1N3MKooOQAGO0W5tsd0W2QzIvW7DD7c/8H14Zmp4jseeWAITm+w2LLoLrlhoHdPPh0NMZ8mfL6puoHA==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "dependencies": { "@prisma/debug": "6.19.3" @@ -2196,7 +2196,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@swc/helpers": { @@ -2585,6 +2585,7 @@ "version": "19.2.17", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz", "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==", + "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -3797,7 +3798,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz", "integrity": "sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "chokidar": "^4.0.3", @@ -3980,7 +3981,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "readdirp": "^4.0.1" @@ -3996,7 +3997,7 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz", "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "consola": "^3.2.3" @@ -4094,14 +4095,14 @@ "version": "0.2.4", "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz", "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/consola": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz", "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": "^14.18.0 || >=16.10.0" @@ -4301,7 +4302,7 @@ "version": "7.1.5", "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz", "integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==", - "devOptional": true, + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=16.0.0" @@ -4347,7 +4348,7 @@ "version": "6.1.7", "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz", "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/delayed-stream": { @@ -4372,7 +4373,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz", "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/detect-element-overflow": { @@ -4443,7 +4444,7 @@ "version": "16.6.1", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz", "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==", - "devOptional": true, + "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=12" @@ -4479,7 +4480,7 @@ "version": "3.21.0", "resolved": "https://registry.npmjs.org/effect/-/effect-3.21.0.tgz", "integrity": "sha512-PPN80qRokCd1f015IANNhrwOnLO7GrrMQfk4/lnZRE/8j7UPWrNNjPV0uBrZutI/nHzernbW+J0hdqQysHiSnQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@standard-schema/spec": "^1.0.0", @@ -4504,7 +4505,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/empathic/-/empathic-2.0.0.tgz", "integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=14" @@ -5170,7 +5171,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz", "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/extend": { @@ -5183,7 +5184,7 @@ "version": "3.23.2", "resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.23.2.tgz", "integrity": "sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==", - "devOptional": true, + "dev": true, "funding": [ { "type": "individual", @@ -5627,7 +5628,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz", "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "citty": "^0.1.6", @@ -6528,7 +6529,7 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", - "devOptional": true, + "dev": true, "license": "MIT", "bin": { "jiti": "lib/jiti-cli.mjs" @@ -8014,7 +8015,7 @@ "version": "1.6.7", "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz", "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/node-releases": { @@ -8031,7 +8032,7 @@ "version": "0.6.9", "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.9.tgz", "integrity": "sha512-zxlE2yvSWZWmHcNdT3+5zV2lrCogeE9YOklHrR3dFjqutq5wO7GFDYLFDRXLsYnJzwvy/im9fYoxePvS0VTW0w==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "citty": "^0.2.2", @@ -8049,7 +8050,7 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.2.tgz", "integrity": "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/object-assign": { @@ -8178,7 +8179,7 @@ "version": "2.0.11", "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz", "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/optionator": { @@ -8344,14 +8345,14 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/perfect-debounce": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz", "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/picocolors": { @@ -8377,7 +8378,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz", "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "confbox": "^0.2.4", @@ -8467,7 +8468,7 @@ "version": "6.19.3", "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.19.3.tgz", "integrity": "sha512-++ZJ0ijLrDJF6hNB4t4uxg2br3fC4H9Yc9tcbjr2fcNFP3rh/SBNrAgjhsqBU4Ght8JPrVofG/ZkXfnSfnYsFg==", - "devOptional": true, + "dev": true, "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { @@ -8533,7 +8534,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz", "integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==", - "devOptional": true, + "dev": true, "funding": [ { "type": "individual", @@ -8580,7 +8581,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz", "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "defu": "^6.1.4", @@ -8990,7 +8991,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">= 14.18.0" @@ -9928,7 +9929,7 @@ "version": "1.2.4", "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz", "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=18" @@ -10155,7 +10156,7 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/src/authentication/Login/Login.jsx b/src/authentication/Login/Login.jsx index b0f9a71..a28db69 100644 --- a/src/authentication/Login/Login.jsx +++ b/src/authentication/Login/Login.jsx @@ -159,7 +159,7 @@ const Login = () => { style={{ paddingTop: "10px", background: "var(--primary)", - width: "20%", + width: "max-content", WebkitBackgroundClip: "text", color: "transparent", }} @@ -218,7 +218,7 @@ const Login = () => { style={{ fontSize: "0.7rem", cursor: "pointer", - width: "40%", + width: "max-content", marginLeft: "0.4rem", background: "var(--primary)", WebkitBackgroundClip: "text", diff --git a/src/authentication/Login/styles/Login.module.scss b/src/authentication/Login/styles/Login.module.scss index 182b815..285fb10 100644 --- a/src/authentication/Login/styles/Login.module.scss +++ b/src/authentication/Login/styles/Login.module.scss @@ -1,195 +1,105 @@ .container { - background-color: #2f2f2f90; - border: 1px solid #ffffff61; - border-radius: 10px; - background: linear-gradient(90deg, rgba(32, 32, 32, 0.16) -11.52%, rgba(37, 37, 37, 0.22) 106.29%); - padding: 15px; - justify-content: center; - align-items: center; - width: 30rem; + position: relative; + z-index: 10; + background: rgba(18, 18, 18, 0.85); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 20px; + padding: 2.25rem; + width: 100%; + max-width: 480px; + margin: auto; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12); display: flex; - flex-direction: row; - margin-top: 20%; -} -.form{ - width: auto; - padding-left: 0; - padding-right: 0; -} + flex-direction: column; + transition: border-color 0.3s ease, box-shadow 0.3s ease; -.container:hover{ - border: 1px solid #ffffff70; - box-shadow: 2px 3px #94949470; + &:hover { + border-color: rgba(255, 85, 0, 0.3); + box-shadow: 0 24px 60px rgba(255, 85, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); + } } -.container h1 { - color: #ff6b00; - font-size: 1.3rem; - margin-top: -1rem; + +.form { + width: 100%; + display: flex; + flex-direction: column; + gap: 0.5rem; } + .login { width: 100%; - height: 26rem; display: flex; flex-direction: column; justify-content: center; - // margin-right: 3%; -} -.sideImage { - width: 100%; - - height: 32rem; - object-fit: cover; - border-radius: 10px; - background-color: #949494; - width: 28rem; - margin-left: auto; } .circle { - height: 25rem; - width: 25rem; - background-color: rgba(255, 92, 0, 0.19); - filter: blur(100px); + height: 22rem; + width: 22rem; + background-color: rgba(255, 85, 0, 0.14); + filter: blur(90px); position: absolute; - top: 20%; - left: -12%; + top: 15%; + left: -8%; border-radius: 50%; - overflow: hidden; + pointer-events: none; z-index: 0; } .circle1 { - height: 25rem; - width: 25rem; - background-color: rgba(255, 92, 0, 0.19); + height: 22rem; + width: 22rem; + background-color: rgba(255, 85, 0, 0.14); + filter: blur(90px); position: absolute; - - top: 5%; - right: -5%; + bottom: 15%; + right: -8%; border-radius: 50%; - filter: blur(100px); - // overflow: hidden; + pointer-events: none; + z-index: 0; } .ArrowBackIcon { - position: absolute; - top: 5%; - left: 30px; - color: #fff; + position: fixed; + top: 1.5rem; + left: 1.5rem; + color: #ffffff; cursor: pointer; -} - -.divider{ - height: 2px; - width: 5rem; - border-radius: 15px 15px; - background-color: #7c7a7a90; -} - -@media (max-width: 800px) { - - .sideImage { - display: none; - } - .login { - width: 100%; - } - - .circle { - height: 18rem; - width: 18rem; - top: 30%; - left: -15%; - z-index: 0; - } - - .circle1 { - height: 18rem; - width: 18rem; - top: 5%; - right: -15%; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.2s ease; - // overflow: hidden; + &:hover { + background: rgba(255, 85, 0, 0.2); + color: #ff5500; } } -@media (max-width: 1100px) { - .container { - width: 28rem; - } - - .login { - width: 100%; - } - - .circle { - height: 22rem; - width: 22rem; - top: 30%; - left: -15%; - z-index: 0; - } - - .circle1 { - height: 20rem; - width: 20rem; - top: 5%; - right: -15%; - - // overflow: hidden; - } +.divider { + height: 1px; + flex: 1; + background-color: rgba(255, 255, 255, 0.12); } -@media (max-width: 800px) { - .circle { - height: 15rem; - width: 8rem; - top: 30%; - left: 0%; - z-index: 0; - } - - .circle1 { - height: 15rem; - width: 10rem; - top: 10%; - right: -10%; - - // overflow: hidden; - } -} @media (max-width: 500px) { .container { - flex-direction: column; - width: 90vw; - margin-top: 40%; - } - .sideImage { - display: none; - } - .login { - width: 100%; - } - - .circle { - height: 15rem; - width: 8rem; - top: 30%; - left: 0%; - z-index: 0; - } - - .circle1 { - height: 15rem; - width: 10rem; - top: 10%; - right: -0%; - - // overflow: hidden; + padding: 1.5rem; + border-radius: 16px; } .ArrowBackIcon { - top: 2%; - left:4% + top: 1rem; + left: 1rem; + width: 36px; + height: 36px; } -} +} \ No newline at end of file diff --git a/src/components/Chatbot/Chatbot.jsx b/src/components/Chatbot/Chatbot.jsx index 8816dbe..6f2170a 100644 --- a/src/components/Chatbot/Chatbot.jsx +++ b/src/components/Chatbot/Chatbot.jsx @@ -72,9 +72,9 @@ const Chatbot = () => { // Suggested prompts const suggestedPrompts = [ "What is FED?", - "Who is the president?", - "Tell me about FED events", - "Show me FED blogs" + "Who is the President of FED?", + "Show me the Upcoming Events", + "Show me FED Insights" ]; // Navigation patterns - FIXED: /Blog not /Blogs diff --git a/src/components/Chatbot/Chatbot.module.scss b/src/components/Chatbot/Chatbot.module.scss index 810442e..42aae49 100644 --- a/src/components/Chatbot/Chatbot.module.scss +++ b/src/components/Chatbot/Chatbot.module.scss @@ -548,55 +548,66 @@ $border-radius-medium: 16px; .inputArea { display: flex; - align-items: center; // Vertically align input and buttons - padding: 10px $spacing-md; // Reduced vertical padding - background: linear-gradient(135deg, rgba(28, 28, 28, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%); + align-items: center; + padding: 12px 14px; + background: #25252a; border-radius: 0 0 24px 24px; - border-top: 1px solid $border-subtle; - gap: $spacing-sm; - backdrop-filter: blur(12px); + border-top: 1px solid rgba(255, 255, 255, 0.1); + gap: 10px; + width: 100%; + box-sizing: border-box; } .messageInput { flex: 1; - height: 44px; // Match mic and send button height - padding: 0 18px; - border: 1px solid $border-subtle; - border-radius: 14px; - background: rgba(255, 255, 255, 0.08); - color: $light-text; - font-size: 0.9rem; - font-family: 'Open Sans', sans-serif; - transition: all $transition-fast; + min-width: 0; + height: 44px; + margin: 0; + padding: 0 16px; + box-sizing: border-box; + border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 16px; + background: rgba(255, 255, 255, 0.07); + color: #ffffff; + font-size: 0.88rem; + line-height: normal; + font-family: inherit; + transition: all 0.2s ease; &::placeholder { - color: rgba(255, 255, 255, 0.4); + color: rgba(255, 255, 255, 0.45); + font-size: 0.85rem; + line-height: normal; } &:focus { outline: none; background: rgba(255, 255, 255, 0.12); - border-color: rgba(255, 190, 11, 0.5); - box-shadow: 0 0 0 3px rgba(255, 190, 11, 0.1); + border-color: #ff5500; + box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.25); } } .voiceButton { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 12px; + flex-shrink: 0; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 14px; width: 44px; height: 44px; + margin: 0; + padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; - color: $light-text; - transition: all $transition-fast; + color: #ffffff; + box-sizing: border-box; + transition: all 0.2s ease; &:hover { - background: rgba(255, 255, 255, 0.15); - transform: translateY(-2px); + background: rgba(255, 255, 255, 0.16); + border-color: rgba(255, 255, 255, 0.25); } &:active { @@ -604,30 +615,34 @@ $border-radius-medium: 16px; } &.listening { - background: $primary-gradient; + background: linear-gradient(135deg, #ff5500 0%, #ff8a00 100%); border-color: transparent; animation: pulse 1.5s ease-in-out infinite; - box-shadow: 0 0 20px rgba(255, 140, 40, 0.5); + box-shadow: 0 0 20px rgba(255, 85, 0, 0.5); } } .sendButton { - background: $primary-gradient; - border: none; - border-radius: 12px; + flex-shrink: 0; + background: linear-gradient(135deg, #ff5500 0%, #ff8a00 100%); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 14px; width: 44px; height: 44px; + margin: 0; + padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; - color: $light-text; - transition: all $transition-fast; - box-shadow: 0 4px 12px rgba(244, 43, 3, 0.3); + color: #ffffff; + box-sizing: border-box; + transition: all 0.2s ease; + box-shadow: 0 4px 14px rgba(255, 85, 0, 0.35); &:hover:not(:disabled) { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(244, 43, 3, 0.4); + transform: translateY(-1px); + box-shadow: 0 6px 18px rgba(255, 85, 0, 0.5); } &:active:not(:disabled) { @@ -646,14 +661,16 @@ $border-radius-medium: 16px; @media (max-width: $desktop) { .chatbotContainer { - height: 65vh; + height: min(600px, 70vh); } } @media (max-width: $tablet) { .chatbotContainer { - width: calc(100% - 40px); - height: 70vh; + width: calc(100vw - 32px); + height: min(580px, 75vh); + bottom: 16px; + right: 16px; } .promptsGrid { @@ -663,18 +680,35 @@ $border-radius-medium: 16px; @media (max-width: $mobile) { .chatbotContainer { - width: calc(100% - 20px); - height: 80vh; - bottom: $spacing-sm; - right: $spacing-sm; - border-radius: $border-radius-medium; + width: calc(100vw - 24px); + height: min(560px, 80vh); + bottom: 12px; + right: 12px; + border-radius: 20px; + } + + .inputArea { + padding: 10px 10px; + gap: 6px; + border-radius: 0 0 20px 20px; + } + + .messageInput { + height: 40px; + padding: 0 12px; + font-size: 0.82rem; + } + + .voiceButton, .sendButton { + width: 40px; + height: 40px; } .chatbotToggle { - bottom: $spacing-md; - right: $spacing-md; - width: 64px; - height: 64px; + bottom: 16px; + right: 16px; + width: 60px; + height: 60px; } .message { diff --git a/src/components/EventCard/EventCard.jsx b/src/components/EventCard/EventCard.jsx index 4606785..d3399fc 100644 --- a/src/components/EventCard/EventCard.jsx +++ b/src/components/EventCard/EventCard.jsx @@ -662,7 +662,7 @@ const EventCard = (props) => { aria-label="View analytics" onClick={() => router.push("/profile/events/Analytics/" + data.id)} > -
)} diff --git a/src/components/HeroGallery/styles/HeroGallery.module.scss b/src/components/HeroGallery/styles/HeroGallery.module.scss index df23b9d..41b12b9 100644 --- a/src/components/HeroGallery/styles/HeroGallery.module.scss +++ b/src/components/HeroGallery/styles/HeroGallery.module.scss @@ -28,6 +28,7 @@ background: var(--surface-2); box-shadow: var(--depth); cursor: pointer; + -webkit-tap-highlight-color: transparent; transition: transform 0.55s var(--ease), opacity 0.45s var(--ease), @@ -135,6 +136,7 @@ cursor: pointer; overflow: hidden; box-shadow: var(--depth); + -webkit-tap-highlight-color: transparent; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), @@ -195,6 +197,7 @@ border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.28); cursor: pointer; + -webkit-tap-highlight-color: transparent; transition: width 0.3s var(--ease), background 0.3s var(--ease); diff --git a/src/components/ShareSocial/ShareSocial.jsx b/src/components/ShareSocial/ShareSocial.jsx index 720e89b..5eb3155 100644 --- a/src/components/ShareSocial/ShareSocial.jsx +++ b/src/components/ShareSocial/ShareSocial.jsx @@ -8,52 +8,57 @@ import { TwitterIcon, WhatsappShareButton, WhatsappIcon, - RedditShareButton, - RedditIcon, LinkedinShareButton, LinkedinIcon, TelegramShareButton, TelegramIcon, - EmailShareButton, - EmailIcon, } from "react-share"; +import { Copy, Check } from "lucide-react"; -/** - * Drop-in replacement for `react-share-social`'s . - * - * The original package is unmaintained, predates React 19 (it had to be - * installed with --legacy-peer-deps) and bundles an ancient jest toolchain that - * accounted for roughly half of this project's high-severity npm advisories. - * - * The props and the `style` object are kept identical — `{ root, copyContainer, - * copyUrl, title }` — so ShareModal only had to change its import, and the - * rendered panel keeps the same dark card, orange accent and round social - * icons the original produced. - */ +const XIconCustom = ({ size = 44, round = true }) => { + return ( +
+ + + +
+ ); +}; const BUTTONS = { - facebook: { Button: FacebookShareButton, Icon: FacebookIcon }, - twitter: { Button: TwitterShareButton, Icon: TwitterIcon }, - whatsapp: { Button: WhatsappShareButton, Icon: WhatsappIcon }, - reddit: { Button: RedditShareButton, Icon: RedditIcon }, - linkedin: { Button: LinkedinShareButton, Icon: LinkedinIcon }, - telegram: { Button: TelegramShareButton, Icon: TelegramIcon }, - email: { Button: EmailShareButton, Icon: EmailIcon }, + whatsapp: { Button: WhatsappShareButton, Icon: WhatsappIcon, label: "WhatsApp" }, + twitter: { Button: TwitterShareButton, Icon: XIconCustom, label: "X" }, + telegram: { Button: TelegramShareButton, Icon: TelegramIcon, label: "Telegram" }, + linkedin: { Button: LinkedinShareButton, Icon: LinkedinIcon, label: "LinkedIn" }, + facebook: { Button: FacebookShareButton, Icon: FacebookIcon, label: "Facebook" }, }; export function ShareSocial({ url = "", title, - style = {}, - socialTypes = ["facebook", "twitter", "whatsapp", "reddit", "linkedin"], + socialTypes = ["whatsapp", "twitter", "telegram", "linkedin"], onSocialButtonClicked, }) { const [copied, setCopied] = useState(false); const copy = async () => { try { - // `navigator.clipboard` needs a secure context; fall back to the legacy - // execCommand path so copying still works over plain http in dev. if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(url); } else { @@ -67,54 +72,80 @@ export function ShareSocial({ area.remove(); } setCopied(true); - setTimeout(() => setCopied(false), 1800); + setTimeout(() => setCopied(false), 2000); } catch { setCopied(false); } }; return ( -
- {title ?
{title}
: null} +
+ {title ? ( +
+ {title} +
+ ) : null} + {/* Social Media Buttons */}
{socialTypes .map((type) => [type, BUTTONS[type]]) .filter(([, entry]) => entry) - .map(([type, { Button, Icon }]) => ( + .map(([type, { Button, Icon, label }]) => ( ))}
-
+ {/* Copy URL Input Box */} +
@@ -124,18 +155,33 @@ export function ShareSocial({ type="button" onClick={copy} style={{ - marginTop: "0.5rem", - width: "100%", - padding: "0.35rem", - borderRadius: "4px", - border: "1px solid #f97507", - background: "transparent", - color: "#f97507", + display: "inline-flex", + alignItems: "center", + gap: "0.4rem", + padding: "0.55rem 1rem", + borderRadius: "8px", + border: "none", + background: copied ? "#22c55e" : "#ff5500", + color: "#ffffff", + fontWeight: 600, + fontSize: "0.8125rem", cursor: "pointer", - fontSize: "0.8rem", + transition: "all 0.2s ease", + whiteSpace: "nowrap", + boxShadow: copied + ? "0 4px 12px rgba(34, 197, 94, 0.3)" + : "0 4px 12px rgba(255, 85, 0, 0.3)", }} > - {copied ? "Copied!" : "Copy"} + {copied ? ( + <> + Copied! + + ) : ( + <> + Copy Link + + )}
diff --git a/src/features/Modals/Event/QRCodeModal/styles/QRCodeModal.module.scss b/src/features/Modals/Event/QRCodeModal/styles/QRCodeModal.module.scss index 18b8f56..5c5f8d5 100644 --- a/src/features/Modals/Event/QRCodeModal/styles/QRCodeModal.module.scss +++ b/src/features/Modals/Event/QRCodeModal/styles/QRCodeModal.module.scss @@ -1,10 +1,7 @@ .qrContainer { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 50; + inset: 0; + z-index: 9999; display: flex; justify-content: center; align-items: center; @@ -12,74 +9,71 @@ } .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(5px); + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.75); z-index: 5; } .maindiv { - z-index: 1000; - border-radius: 16px; + z-index: 10; + border-radius: 20px; padding: 2rem; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; - background: rgba(42, 42, 42, 0.95); - border: 2px solid #444; + background: var(--surface-1, #161616); + border: 1px solid var(--border, rgba(255, 255, 255, 0.15)); width: 100%; - max-width: 450px; - min-height: 400px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + max-width: 440px; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85); } .header { position: relative; display: flex; - justify-content: space-between; align-items: center; - margin-bottom: 2rem; + justify-content: center; width: 100%; + margin-bottom: 1.5rem; } .closebtn { cursor: pointer; position: absolute; right: 0; - top: 0; + top: 50%; + transform: translateY(-50%); z-index: 20; - font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.08); color: #ffffff; - transition: color 0.3s ease; - padding: 0.5rem; + transition: all 0.2s ease; &:hover { - color: #D14206; - transition: .2s linear; + background: rgba(255, 85, 0, 0.2); + color: #ff5500; } } -.title{ - font-weight:700; - margin-left:6.5rem; - font-size:1rem; - background: linear-gradient( - 260deg, - rgba(255, 190, 11, 0.84) -29.7%, - rgba(244, 43, 3, 0.84) 128.34% -); -color: transparent; --webkit-background-clip: text; -background-clip: text; +.title { + font-weight: 700; + font-size: 1.2rem; + margin: 0 auto; + text-align: center; + background: linear-gradient(135deg, #ff8a00 0%, #e52e71 100%); + color: transparent; + -webkit-background-clip: text; + background-clip: text; } - .content { flex: 1; display: flex; @@ -95,21 +89,21 @@ background-clip: text; flex-direction: column; align-items: center; gap: 1rem; - color: #f97507; + color: #ff5500; p { margin: 0; - font-size: 1rem; + font-size: 0.95rem; } } .spinner { - width: 40px; - height: 40px; - border: 3px solid rgba(249, 117, 7, 0.3); - border-top: 3px solid #f97507; + width: 38px; + height: 38px; + border: 3px solid rgba(255, 85, 0, 0.3); + border-top: 3px solid #ff5500; border-radius: 50%; - animation: spin 1s linear infinite; + animation: spin 0.8s linear infinite; } @keyframes spin { @@ -126,39 +120,41 @@ background-clip: text; p { margin: 0; - font-size: 1rem; + font-size: 0.95rem; } } .retryBtn { - background: linear-gradient(135deg, #f97507, #ff8c42); + background: linear-gradient(135deg, #ff5500, #ff8a00); border: none; - border-radius: 8px; - padding: 0.75rem 1.5rem; + border-radius: 30px; + padding: 0.65rem 1.5rem; color: white; font-weight: 600; cursor: pointer; transition: transform 0.2s ease; - + &:hover { + transform: translateY(-2px); + } } .qrContent { display: flex; flex-direction: column; align-items: center; - gap: 1.5rem; + gap: 1.25rem; width: 100%; } .qrWrapper { - padding: 1.5rem; - border-radius: 12px; + padding: 1.25rem; + border-radius: 16px; display: flex; justify-content: center; - background-color: #ffffff; align-items: center; - backdrop-filter: blur(10px); + background-color: #ffffff; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } .qrCode { @@ -170,38 +166,19 @@ background-clip: text; flex-direction: column; align-items: center; gap: 0.5rem; - background: rgba(250, 250, 250, 0.1); - padding: 1rem; - border-radius: 8px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + padding: 0.85rem 1rem; + border-radius: 12px; width: 100%; } -.codeLabel { - margin: 0; - font-size: 0.9rem; - color: #f97507; - font-weight: 600; -} - -.codeValue { - margin: 0; - font-size: 1.2rem; - font-weight: 700; - color: #f97507; - letter-spacing: 1px; - font-family: 'Courier New', monospace; - transition: color 0.2s ease; - - &:hover { - color: #ff8c42; - } -} - .instruction { margin: 0; - font-size: 0.9rem; - color: #ccc; + font-size: 0.85rem; + color: #b0b0b0; line-height: 1.4; + text-align: center; } .noCodeContainer { @@ -209,188 +186,34 @@ background-clip: text; flex-direction: column; align-items: center; gap: 1rem; - color: #ffa500; - - p { - margin: 0; - font-size: 1rem; - } -} - -.successContainer { - display: flex; - flex-direction: column; - align-items: center; - gap: 1.5rem; - color: #4CAF50; - text-align: center; - - h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; - color: #4CAF50; - } + color: #ff8a00; p { margin: 0; - font-size: 1rem; - color: #ccc; - } -} - -.successIcon { - font-size: 3rem; - color: #4CAF50; - background: rgba(76, 175, 80, 0.1); - border-radius: 50%; - width: 80px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - border: 3px solid #4CAF50; -} - -.buttonGroup { - display: flex; - gap: 1rem; - margin-top: 1rem; -} - -.okBtn { - background: linear-gradient(135deg, #4CAF50, #45a049); - border: none; - border-radius: 8px; - padding: 0.75rem 1.5rem; - color: white; - font-weight: 600; - cursor: pointer; - transition: transform 0.2s ease; - - &:hover { - transform: translateY(-2px); - } -} - -.scanNewBtn { - background: linear-gradient(135deg, #f97507, #ff8c42); - border: none; - border-radius: 8px; - padding: 0.75rem 1.5rem; - color: white; - font-weight: 600; - cursor: pointer; - transition: transform 0.2s ease; - - &:hover { - transform: translateY(-2px); - } -} - -// Responsive design -@media (max-width: 768px) { - .qrContainer { - padding: 0.5rem; - } - - .maindiv { - width: 100%; - padding: 1.5rem; - min-height: 350px; - border-radius: 12px; - } - - .title { - font-size: 1.3rem; - } - - .qrWrapper { - padding: 1rem; - } - - .qrCode { - width: 180px; - height: 180px; + font-size: 0.95rem; } } @media (max-width: 480px) { .qrContainer { - padding: 0.25rem; + padding: 0.75rem; } .maindiv { - padding: 1rem; - min-height: 320px; + padding: 1.25rem; + border-radius: 16px; } .title { - font-size: 1.2rem; - } - - .header { - margin-bottom: 1.5rem; + font-size: 1.1rem; } .qrWrapper { - padding: 0.75rem; - } - - .qrCode { - width: 160px; - height: 160px; - } - - .codeInfo { - padding: 0.75rem; - } - - .instruction { - font-size: 0.85rem; - } - - .successContainer { - gap: 1rem; - - h3 { - font-size: 1.3rem; - } - - p { - font-size: 0.9rem; - } - } - - .successIcon { - width: 60px; - height: 60px; - font-size: 2rem; - } - - .buttonGroup { - flex-direction: column; - gap: 0.75rem; - } - - .okBtn, .scanNewBtn { - padding: 0.6rem 1.2rem; - font-size: 0.9rem; - } -} - -@media (max-width: 360px) { - .maindiv { - padding: 0.75rem; - min-height: 300px; - } - - .title { - font-size: 1.1rem; + padding: 1rem; } .qrCode { - width: 140px; - height: 140px; + width: 170px !important; + height: 170px !important; } -} \ No newline at end of file +} \ No newline at end of file diff --git a/src/features/Modals/Event/ShareModal/ShareModal.jsx b/src/features/Modals/Event/ShareModal/ShareModal.jsx index 080f2fa..ea50ab4 100644 --- a/src/features/Modals/Event/ShareModal/ShareModal.jsx +++ b/src/features/Modals/Event/ShareModal/ShareModal.jsx @@ -1,127 +1,37 @@ "use client"; -import React from 'react'; -// Was `react-share-social`, which is unmaintained and pulled in ~20 of this -// project's high-severity advisories through a bundled legacy jest toolchain. -// The local component takes the same props and renders the same panel. +import React from "react"; import { ShareSocial } from "../../../../components/ShareSocial/ShareSocial"; import style from "./styles/ShareModal.module.scss"; -import { X } from 'lucide-react'; -import AOS from 'aos'; -import 'aos/dist/aos.css'; +import { X } from "lucide-react"; -const Share = (props) => { - const{onClose,urlpath,teamData}=props; - const sharestyle = { - root: { - background: 'rgba(42, 42, 42, 0.9)', - borderRadius: '10px', - border: '2px solid #444', - width: '22rem', - height: '15rem', - boxShadow: '0 6px 10px 3px rgba(24, 15, .3)', - color: '#f97507', - padding: '1rem', - position: 'relative', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - }, - copyContainer: { - border: '1px solid #f97507', - background: 'rgba(0, 0, 0, 0.4)', - borderRadius: '5px', - padding: '0.5rem', - margin: '0.5rem 0', - }, - copyUrl: { - overflowY: 'scroll', - scrollbarWidth: 'none', - msOverflowStyle: 'none', - }, - title: { - color: '#f97507', - fontStyle: 'italic', - marginBottom: '1rem', - }, - }; +const Share = ({ onClose, urlpath, teamData }) => { + const shareUrl = urlpath || teamData?.teamCode || ""; + const title = teamData?.teamName ? `Share ${teamData.teamName}` : "Share Event"; return (
-
-
- {urlpath ?
- +
); -} +}; export default Share; diff --git a/src/features/Modals/Event/ShareModal/styles/ShareModal.module.scss b/src/features/Modals/Event/ShareModal/styles/ShareModal.module.scss index 9b93bf7..24c5a44 100644 --- a/src/features/Modals/Event/ShareModal/styles/ShareModal.module.scss +++ b/src/features/Modals/Event/ShareModal/styles/ShareModal.module.scss @@ -1,48 +1,73 @@ .shareContainer { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 50; + inset: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; } .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(5px); - z-index: 5; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.75); + z-index: 1; } .maindiv { - z-index: 1000; - - border-radius: 10px; - padding: 2rem; position: relative; + z-index: 10; + width: 100%; + max-width: 440px; + background: var(--surface-1, #141414); + border: 1px solid var(--border, rgba(255, 255, 255, 0.15)); + border-radius: 20px; + padding: 1.75rem; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85); + animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes modalScaleIn { + from { + opacity: 0; + transform: scale(0.94) translateY(10px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +.modalHeader { display: flex; - justify-content: center; align-items: center; - margin-top: 9rem; + justify-content: space-between; + margin-bottom: 1.25rem; + + h3 { + margin: 0; + font-size: 1.25rem; + font-weight: 700; + color: var(--text-primary, #ffffff); + } } .closebtn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.08); + border: none; + color: var(--text-secondary, #aaaaaa); cursor: pointer; - position: absolute; - right: 2.5rem; - top: 2.4rem; - font-size: 1.2rem; - color: white; - z-index: 20; -} + transition: all 0.2s ease; -.closebtn:hover { - color: #D14206; - transition:.2s linear; + &:hover { + background: rgba(255, 85, 0, 0.2); + color: #ff5500; + } } - - diff --git a/src/features/Modals/Profile/Admin/PreviewForm.jsx b/src/features/Modals/Profile/Admin/PreviewForm.jsx index c8950e0..1781dab 100644 --- a/src/features/Modals/Profile/Admin/PreviewForm.jsx +++ b/src/features/Modals/Profile/Admin/PreviewForm.jsx @@ -604,10 +604,23 @@ const PreviewForm = ({ if (receiverDetails.upi) { navigator.clipboard.writeText(receiverDetails.upi) .then(() => { - alert("UPI ID copied to clipboard!"); + setAlert({ type: "success", message: "UPI ID copied to clipboard!", position: "bottom-right", duration: 3000 }); }) .catch(() => { - alert("Failed to copy UPI ID."); + setAlert({ type: "error", message: "Failed to copy UPI ID.", position: "bottom-right", duration: 3000 }); + }); + } + }; + + const handleCopyLink = () => { + const targetLink = safeLink || receiverDetails.link || receiverDetails.upi; + if (targetLink) { + navigator.clipboard.writeText(targetLink) + .then(() => { + setAlert({ type: "success", message: "Payment Link copied to clipboard!", position: "bottom-right", duration: 3000 }); + }) + .catch(() => { + setAlert({ type: "error", message: "Failed to copy link.", position: "bottom-right", duration: 3000 }); }); } }; @@ -620,46 +633,82 @@ const PreviewForm = ({ return (

Amount payable:{" "} - ₹{eventAmount} + ₹{eventAmount}

- {safeLink ? ( - + {safeLink ? ( + + {receiverDetails.buttonText || "Pay Now"} + + ) : null} + + +
+ + {!safeLink && !receiverDetails.upi && ( +

The payment link for this event is missing or invalid. Please contact fedkiit@gmail.com before continuing.

@@ -686,11 +735,13 @@ const PreviewForm = ({ return (
{receiverDetails.media && ( @@ -705,26 +756,72 @@ const PreviewForm = ({ width: 200, height: 200, objectFit: "contain", + borderRadius: "12px", + backgroundColor: "#fff", + padding: "8px", }} /> )} - {/* ✅ Download & Copy Buttons */} -
- - + {/* ✅ Download & Copy Link Buttons */} +
+ +

Make the payment of{" "} - ₹{eventAmount}{" "} + ₹{eventAmount}{" "} using QR-Code or Pay using UPI ID:{" "} {receiverDetails.upi} (No Refund Policy)

@@ -819,11 +916,33 @@ const PreviewForm = ({ }} > {inboundList() && inboundList().backSection && ( - )}