From 9f9e96a4a5be0d271dc3adf0165f93f8c3fc31f7 Mon Sep 17 00:00:00 2001 From: Rakshat28 Date: Wed, 23 Jul 2025 01:58:20 +0530 Subject: [PATCH 1/5] fix #7 Loader --- AppUi/src/components/Loader.jsx | 81 +++++++++++++++++++++++++ AppUi/src/components/ProtectedRoute.jsx | 2 +- 2 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 AppUi/src/components/Loader.jsx diff --git a/AppUi/src/components/Loader.jsx b/AppUi/src/components/Loader.jsx new file mode 100644 index 0000000..8541802 --- /dev/null +++ b/AppUi/src/components/Loader.jsx @@ -0,0 +1,81 @@ +import { AnimatePresence } from "framer-motion"; + +const glassStyles = + "backdrop-blur-md bg-white/30 dark:bg-black/30 shadow-lg border border-white/20 dark:border-black/20"; + +const Loader = ({ + size = 48, + fullScreen = false, +// variant = "spinner", you can add more variants if needed + text = "Loading...", + glass = true, +}) => { + const spinner = ( + + ); + + const content = ( +
+ + {spinner} + + + {text} + +
+ ); + + return ( + + + {content} + + + ); +}; + +export default Loader; \ No newline at end of file diff --git a/AppUi/src/components/ProtectedRoute.jsx b/AppUi/src/components/ProtectedRoute.jsx index cf06035..9762d57 100644 --- a/AppUi/src/components/ProtectedRoute.jsx +++ b/AppUi/src/components/ProtectedRoute.jsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; + import { useSelector } from "react-redux"; import { Navigate } from "react-router-dom"; import { GUEST_PATH } from "../routes/guest/GuestPaths"; From cbed16ab35da79b7193c517462a33dd441878796 Mon Sep 17 00:00:00 2001 From: Rakshat28 Date: Wed, 23 Jul 2025 20:35:35 +0530 Subject: [PATCH 2/5] add custom loader --- AppUi/package-lock.json | 7 ++ AppUi/package.json | 1 + AppUi/src/components/Loader.jsx | 168 ++++++++++++++++++-------------- AppUi/src/index.css | 55 ++++++++++- AppUi/tailwind.config.js | 141 +++++++++++++++++++++++++-- 5 files changed, 287 insertions(+), 85 deletions(-) diff --git a/AppUi/package-lock.json b/AppUi/package-lock.json index daeb1f3..496606e 100644 --- a/AppUi/package-lock.json +++ b/AppUi/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@reduxjs/toolkit": "^2.8.2", "@tailwindcss/vite": "^4.1.11", + "classnames": "^2.5.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-redux": "^9.2.0", @@ -2116,6 +2117,12 @@ "node": ">=18" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", diff --git a/AppUi/package.json b/AppUi/package.json index 189be27..f8fadb1 100644 --- a/AppUi/package.json +++ b/AppUi/package.json @@ -12,6 +12,7 @@ "dependencies": { "@reduxjs/toolkit": "^2.8.2", "@tailwindcss/vite": "^4.1.11", + "classnames": "^2.5.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-redux": "^9.2.0", diff --git a/AppUi/src/components/Loader.jsx b/AppUi/src/components/Loader.jsx index 8541802..8401f64 100644 --- a/AppUi/src/components/Loader.jsx +++ b/AppUi/src/components/Loader.jsx @@ -1,81 +1,99 @@ -import { AnimatePresence } from "framer-motion"; +import { forwardRef } from "react"; -const glassStyles = - "backdrop-blur-md bg-white/30 dark:bg-black/30 shadow-lg border border-white/20 dark:border-black/20"; +const sizeClasses = { + sm: "w-8 h-8", + md: "w-12 h-12", + lg: "w-20 h-20", + xl: "w-32 h-32" +}; + +// Simple utility to combine class names +const combineClasses = (...classes) => { + return classes.filter(Boolean).join(' '); +}; -const Loader = ({ - size = 48, - fullScreen = false, -// variant = "spinner", you can add more variants if needed - text = "Loading...", - glass = true, -}) => { - const spinner = ( - - ); +const LoaderSpinner = forwardRef( + ({ size = "md", variant = "default", fullScreen = false, className }, ref) => { + const baseClasses = combineClasses( + "relative flex items-center justify-center", + sizeClasses[size], + className + ); - const content = ( -
- - {spinner} - - - {text} - -
- ); + if (variant === "pulse") { + return ( +
+
+ ); + } - return ( - - +
+ {[0, 1, 2].map((i) => ( +
+ ))} +
+
+ ); + } + + return ( +
- {content} - - - ); -}; +
+
+
+ +
+
+ +
+
+ ); + } +); + +LoaderSpinner.displayName = "LoaderSpinner"; -export default Loader; \ No newline at end of file +export { LoaderSpinner as Loader }; \ No newline at end of file diff --git a/AppUi/src/index.css b/AppUi/src/index.css index a461c50..30cff61 100644 --- a/AppUi/src/index.css +++ b/AppUi/src/index.css @@ -1 +1,54 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; + +/* Design system colors - Light mode only */ + +@theme { + /* Color palette using HSL */ + --color-background: hsl(0 0% 100%); + --color-foreground: hsl(222.2 84% 4.9%); + --color-card: hsl(0 0% 100%); + --color-card-foreground: hsl(222.2 84% 4.9%); + --color-popover: hsl(0 0% 100%); + --color-popover-foreground: hsl(222.2 84% 4.9%); + --color-primary: hsl(222.2 47.4% 11.2%); + --color-primary-foreground: hsl(210 40% 98%); + --color-secondary: hsl(210 40% 96.1%); + --color-secondary-foreground: hsl(222.2 47.4% 11.2%); + --color-muted: hsl(210 40% 96.1%); + --color-muted-foreground: hsl(215.4 16.3% 46.9%); + --color-accent: hsl(210 40% 96.1%); + --color-accent-foreground: hsl(222.2 47.4% 11.2%); + --color-destructive: hsl(0 84.2% 60.2%); + --color-destructive-foreground: hsl(210 40% 98%); + --color-border: hsl(214.3 31.8% 91.4%); + --color-input: hsl(214.3 31.8% 91.4%); + --color-ring: hsl(222.2 84% 4.9%); + + /* Sidebar colors */ + --color-sidebar-background: hsl(0 0% 98%); + --color-sidebar-foreground: hsl(240 5.3% 26.1%); + --color-sidebar-primary: hsl(240 5.9% 10%); + --color-sidebar-primary-foreground: hsl(0 0% 98%); + --color-sidebar-accent: hsl(240 4.8% 95.9%); + --color-sidebar-accent-foreground: hsl(240 5.9% 10%); + --color-sidebar-border: hsl(220 13% 91%); + --color-sidebar-ring: hsl(217.2 91.2% 59.8%); + + /* Loader specific colors */ + --color-loader-primary: hsl(224 100% 67%); + --color-loader-secondary: hsl(224 85% 53%); + --color-loader-glass: hsl(224 85% 53%); + + /* Border radius */ + --radius: 0.5rem; +} + +/* Base styles */ +* { + border-color: var(--color-border); +} + +body { + background-color: var(--color-background); + color: var(--color-foreground); +} \ No newline at end of file diff --git a/AppUi/tailwind.config.js b/AppUi/tailwind.config.js index 3718949..9c75e85 100644 --- a/AppUi/tailwind.config.js +++ b/AppUi/tailwind.config.js @@ -1,10 +1,133 @@ + + export default { - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - ], - theme: { - extend: {}, - }, - plugins: [], -} + darkMode: ["class"], + content: [ + "./pages/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./app/**/*.{ts,tsx}", + "./src/**/*.{ts,tsx}", + ], + prefix: "", + theme: { + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px' + } + }, + extend: { + colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + sidebar: { + DEFAULT: 'hsl(var(--sidebar-background))', + foreground: 'hsl(var(--sidebar-foreground))', + primary: 'hsl(var(--sidebar-primary))', + 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', + accent: 'hsl(var(--sidebar-accent))', + 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', + border: 'hsl(var(--sidebar-border))', + ring: 'hsl(var(--sidebar-ring))' + }, + loader: { + primary: 'hsl(var(--loader-primary))', + secondary: 'hsl(var(--loader-secondary))', + glass: 'hsl(var(--loader-glass))' + } + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + keyframes: { + 'accordion-down': { + from: { + height: '0' + }, + to: { + height: 'var(--radix-accordion-content-height)' + } + }, + 'accordion-up': { + from: { + height: 'var(--radix-accordion-content-height)' + }, + to: { + height: '0' + } + }, + 'loader-slide': { + '0%, 100%': { + transform: 'translateX(-80px)' + }, + '50%': { + transform: 'translateX(80px)' + } + }, + 'fade-in': { + '0%': { + opacity: '0', + transform: 'scale(0.95)' + }, + '100%': { + opacity: '1', + transform: 'scale(1)' + } + }, + 'fade-out': { + '0%': { + opacity: '1', + transform: 'scale(1)' + }, + '100%': { + opacity: '0', + transform: 'scale(0.95)' + } + } + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + 'loader-slide': 'loader-slide 2s ease-in-out infinite', + 'loader-slide-delayed': 'loader-slide 2s ease-in-out infinite -1s', + 'fade-in': 'fade-in 0.3s ease-out', + 'fade-out': 'fade-out 0.3s ease-out' + } + } + }, + plugins: [import("tailwindcss-animate")], +}; From b53dad88cf6be333b796bb998b34b5d961b334c8 Mon Sep 17 00:00:00 2001 From: Rakshat28 Date: Thu, 24 Jul 2025 05:55:16 +0530 Subject: [PATCH 3/5] add cn in Loader.jsx, resolve merge conflicts --- AppUi/package-lock.json | 126 +++++- AppUi/package.json | 4 +- AppUi/src/components/Loader.jsx | 49 ++- AppUi/src/index.css | 679 +++++++++++++++++++++++++++++--- AppUi/tailwind.config.js | 41 +- 5 files changed, 810 insertions(+), 89 deletions(-) diff --git a/AppUi/package-lock.json b/AppUi/package-lock.json index 496606e..d3f6dd9 100644 --- a/AppUi/package-lock.json +++ b/AppUi/package-lock.json @@ -8,9 +8,12 @@ "name": "appui", "version": "0.0.0", "dependencies": { + "@radix-ui/react-slot": "^1.0.2", "@reduxjs/toolkit": "^2.8.2", "@tailwindcss/vite": "^4.1.11", - "classnames": "^2.5.1", + "class-variance-authority": "^0.7.0", + "lucide-react": "^0.525.0", + "prop-types": "^15.8.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-redux": "^9.2.0", @@ -1062,6 +1065,39 @@ "node": ">= 8" } }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@reduxjs/toolkit": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz", @@ -2117,12 +2153,28 @@ "node": ">=18" } }, - "node_modules/classnames": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", - "license": "MIT" + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } }, + "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -3118,7 +3170,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -3507,6 +3558,18 @@ "dev": true, "license": "MIT" }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -3517,6 +3580,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.525.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz", + "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -3704,6 +3776,15 @@ "node": ">=0.10.0" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-hash": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz", @@ -4018,6 +4099,17 @@ "node": ">= 0.8" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -4099,6 +4191,12 @@ "react": "^19.1.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/react-redux": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", @@ -4815,20 +4913,6 @@ "dev": true, "license": "ISC" }, - "node_modules/yaml": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz", - "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==", - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/AppUi/package.json b/AppUi/package.json index f8fadb1..1390ab5 100644 --- a/AppUi/package.json +++ b/AppUi/package.json @@ -12,7 +12,9 @@ "dependencies": { "@reduxjs/toolkit": "^2.8.2", "@tailwindcss/vite": "^4.1.11", - "classnames": "^2.5.1", + "class-variance-authority": "^0.7.0", + "lucide-react": "^0.525.0", + "prop-types": "^15.8.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-redux": "^9.2.0", diff --git a/AppUi/src/components/Loader.jsx b/AppUi/src/components/Loader.jsx index 8401f64..64fb3cb 100644 --- a/AppUi/src/components/Loader.jsx +++ b/AppUi/src/components/Loader.jsx @@ -1,3 +1,4 @@ +import { cn } from "@/lib/utils"; import { forwardRef } from "react"; const sizeClasses = { @@ -7,14 +8,9 @@ const sizeClasses = { xl: "w-32 h-32" }; -// Simple utility to combine class names -const combineClasses = (...classes) => { - return classes.filter(Boolean).join(' '); -}; - const LoaderSpinner = forwardRef( - ({ size = "md", variant = "default", fullScreen = false, className }, ref) => { - const baseClasses = combineClasses( + ({ size = "md", variant = "default", fullScreen = false, text, className }, ref) => { + const baseClasses = cn( "relative flex items-center justify-center", sizeClasses[size], className @@ -24,11 +20,19 @@ const LoaderSpinner = forwardRef( return (
+
+
+ {text && ( + + {text} + + )} +
); } @@ -37,7 +41,7 @@ const LoaderSpinner = forwardRef( return (
(
))}
+ {text && fullScreen && ( + + {text} + + )}
); } + // Default glassmorphism loader return (
-
+ {/* Main loader container */} +
+ {/* Primary circle */}
+ {/* Glassmorphism circle */}
+ {/* Loading text */} + {text && ( +
+ + {text} + +
+ )}
); diff --git a/AppUi/src/index.css b/AppUi/src/index.css index 30cff61..6432508 100644 --- a/AppUi/src/index.css +++ b/AppUi/src/index.css @@ -1,54 +1,637 @@ +/** + * Gaming Theme Styles - KnockoutZone AppUI + * * This file contains the complete design system for the gaming-themed application. + * Built with Tailwind CSS v4 and custom CSS variables for a cohesive gaming experience. + * * Structure: + * 1. Tailwind CSS import + * 2. CSS Variables (Light & Dark themes) + * 3. Base layer styles + * 4. Utility layer classes + * * Color Format: All colors use HSL format for better manipulation and consistency + * Theme Support: Full light/dark mode support with gaming-specific colors + */ + +/** + * Design System CSS Variables + * * All colors, gradients, effects, and design tokens are defined here. + * This ensures consistency across the entire application and enables + * easy theme switching and customization. + * * Color Naming Convention: + * - Standard UI colors: --background, --foreground, --primary, etc. + * - Gaming colors: --game-success, --game-warning, --game-disabled + * - Sidebar colors: --sidebar-background, --sidebar-primary, etc. + * * All colors MUST be in HSL format for optimal color manipulation. + */ + @import "tailwindcss"; -/* Design system colors - Light mode only */ - -@theme { - /* Color palette using HSL */ - --color-background: hsl(0 0% 100%); - --color-foreground: hsl(222.2 84% 4.9%); - --color-card: hsl(0 0% 100%); - --color-card-foreground: hsl(222.2 84% 4.9%); - --color-popover: hsl(0 0% 100%); - --color-popover-foreground: hsl(222.2 84% 4.9%); - --color-primary: hsl(222.2 47.4% 11.2%); - --color-primary-foreground: hsl(210 40% 98%); - --color-secondary: hsl(210 40% 96.1%); - --color-secondary-foreground: hsl(222.2 47.4% 11.2%); - --color-muted: hsl(210 40% 96.1%); - --color-muted-foreground: hsl(215.4 16.3% 46.9%); - --color-accent: hsl(210 40% 96.1%); - --color-accent-foreground: hsl(222.2 47.4% 11.2%); - --color-destructive: hsl(0 84.2% 60.2%); - --color-destructive-foreground: hsl(210 40% 98%); - --color-border: hsl(214.3 31.8% 91.4%); - --color-input: hsl(214.3 31.8% 91.4%); - --color-ring: hsl(222.2 84% 4.9%); - - /* Sidebar colors */ - --color-sidebar-background: hsl(0 0% 98%); - --color-sidebar-foreground: hsl(240 5.3% 26.1%); - --color-sidebar-primary: hsl(240 5.9% 10%); - --color-sidebar-primary-foreground: hsl(0 0% 98%); - --color-sidebar-accent: hsl(240 4.8% 95.9%); - --color-sidebar-accent-foreground: hsl(240 5.9% 10%); - --color-sidebar-border: hsl(220 13% 91%); - --color-sidebar-ring: hsl(217.2 91.2% 59.8%); - - /* Loader specific colors */ - --color-loader-primary: hsl(224 100% 67%); - --color-loader-secondary: hsl(224 85% 53%); - --color-loader-glass: hsl(224 85% 53%); - - /* Border radius */ - --radius: 0.5rem; +@layer base { + /** + * Light Theme Variables (Default) + * * Primary color scheme for the gaming interface. + * Features dark cosmic backgrounds with bright neon accents. + */ + :root { + /* === CORE BACKGROUND COLORS === */ + /* Main app background - deep cosmic dark */ + --background: 240 10% 8%; + /* Primary text color - bright white with blue tint */ + --foreground: 210 40% 95%; + + /* === CARD & SURFACE COLORS === */ + /* Card backgrounds - slightly lighter than main background */ + --card: 240 8% 12%; + --card-foreground: 210 40% 95%; + + /* Popover/dropdown backgrounds */ + --popover: 240 8% 12%; + --popover-foreground: 210 40% 95%; + + /* === PRIMARY GAMING COLORS === */ + /* Electric blue - main brand color for buttons and highlights */ + --primary: 210 100% 56%; + --primary-foreground: 240 10% 8%; + + /* Neon purple - secondary brand color for accents */ + --secondary: 270 95% 65%; + --secondary-foreground: 240 10% 8%; + + /* === MUTED & SUBTLE COLORS === */ + /* Muted backgrounds for less prominent elements */ + --muted: 240 8% 15%; + --muted-foreground: 215 20% 65%; + + /* Accent color - matches secondary for consistency */ + --accent: 270 95% 65%; + --accent-foreground: 240 10% 8%; + + /* === SEMANTIC COLORS === */ + /* Neon red - for destructive actions and errors */ + --destructive: 0 100% 60%; + --destructive-foreground: 240 10% 8%; + + /* === FORM & INTERACTION COLORS === */ + /* Border color for inputs and dividers */ + --border: 240 8% 20%; + /* Input field backgrounds */ + --input: 240 8% 15%; + /* Focus ring color - matches primary */ + --ring: 210 100% 56%; + + /* === GAMING-SPECIFIC SEMANTIC COLORS === */ + /* Bright green - for success states, achievements, wins */ + --game-success: 120 100% 50%; + /* Bright orange/yellow - for warnings, cautions, alerts */ + --game-warning: 45 100% 55%; + /* Muted blue-gray - for disabled states, unavailable options */ + --game-disabled: 220 13% 30%; + + /* === GAMING GRADIENT EFFECTS === */ + /* Primary gradient - electric blue to cyan for buttons and highlights */ + --gradient-primary: linear-gradient(135deg, hsl(210 100% 56%), hsl(195 100% 60%)); + /* Secondary gradient - purple to magenta for accents */ + --gradient-secondary: linear-gradient(135deg, hsl(270 95% 65%), hsl(285 95% 70%)); + /* Danger gradient - red to orange for destructive actions */ + --gradient-danger: linear-gradient(135deg, hsl(0 100% 60%), hsl(15 100% 65%)); + /* Success gradient - green to lime for positive actions */ + --gradient-success: linear-gradient(135deg, hsl(120 100% 50%), hsl(135 100% 55%)); + + /* === GAMING GLOW EFFECTS === */ + /* Primary glow - electric blue shadow for buttons and focus states */ + --glow-primary: 0 0 20px hsl(210 100% 56% / 0.5); + /* Secondary glow - purple shadow for secondary elements */ + --glow-secondary: 0 0 20px hsl(270 95% 65% / 0.5); + /* Danger glow - red shadow for destructive actions */ + --glow-danger: 0 0 20px hsl(0 100% 60% / 0.5); + + /* === GAMING TRANSITION EFFECTS === */ + /* Smooth transition - for general hover and state changes */ + --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + /* Bounce transition - for gaming-style button interactions */ + --transition-bounce: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); + + /* === BORDER RADIUS === */ + /* Standard border radius for consistent rounded corners */ + --radius: 0.5rem; + + /* === SIDEBAR COLORS (Light Theme) === */ + /* Light sidebar background */ + --sidebar-background: 0 0% 98%; + /* Dark text on light sidebar */ + --sidebar-foreground: 240 5.3% 26.1%; + /* Dark primary elements in light sidebar */ + --sidebar-primary: 240 5.9% 10%; + /* Light text on dark primary elements */ + --sidebar-primary-foreground: 0 0% 98%; + /* Light accent background in sidebar */ + --sidebar-accent: 240 4.8% 95.9%; + /* Dark text on light accent */ + --sidebar-accent-foreground: 240 5.9% 10%; + /* Light border color for sidebar */ + --sidebar-border: 220 13% 91%; + /* Blue ring color for sidebar focus states */ + --sidebar-ring: 217.2 91.2% 59.8%; + + /* === LOADER SPECIFIC COLORS === */ + --loader-primary: 224 100% 67%; + --loader-secondary: 224 85% 53%; + --loader-glass: 224 85% 53%; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + + /* Gaming specific colors for dark mode */ + --game-success: 120 100% 50%; + --game-warning: 45 100% 55%; + --game-disabled: 220 13% 30%; + + /* === LOADER SPECIFIC COLORS (Dark Mode - assuming same values for now) === */ + --loader-primary: 224 100% 67%; + --loader-secondary: 224 85% 53%; + --loader-glass: 224 85% 53%; + } } -/* Base styles */ -* { - border-color: var(--color-border); +@layer base { + * { + border-color: hsl(var(--border)); + } + + body { + background-color: hsl(var(--background)); + color: hsl(var(--foreground)); + } } -body { - background-color: var(--color-background); - color: var(--color-foreground); -} \ No newline at end of file +@layer utilities { + /* Background color utilities */ + .bg-background { + background-color: hsl(var(--background)); + } + + .bg-foreground { + background-color: hsl(var(--foreground)); + } + + .bg-card { + background-color: hsl(var(--card)); + } + + .bg-card-foreground { + background-color: hsl(var(--card-foreground)); + } + + .bg-popover { + background-color: hsl(var(--popover)); + } + + .bg-popover-foreground { + background-color: hsl(var(--popover-foreground)); + } + + .bg-primary { + background-color: hsl(var(--primary)); + } + + .bg-primary-foreground { + background-color: hsl(var(--primary-foreground)); + } + + .bg-secondary { + background-color: hsl(var(--secondary)); + } + + .bg-secondary-foreground { + background-color: hsl(var(--secondary-foreground)); + } + + .bg-muted { + background-color: hsl(var(--muted)); + } + + .bg-muted-foreground { + background-color: hsl(var(--muted-foreground)); + } + + .bg-accent { + background-color: hsl(var(--accent)); + } + + .bg-accent-foreground { + background-color: hsl(var(--accent-foreground)); + } + + .bg-destructive { + background-color: hsl(var(--destructive)); + } + + .bg-destructive-foreground { + background-color: hsl(var(--destructive-foreground)); + } + + .bg-border { + background-color: hsl(var(--border)); + } + + .bg-input { + background-color: hsl(var(--input)); + } + + .bg-ring { + background-color: hsl(var(--ring)); + } + + /* Gaming specific background colors */ + .bg-game-success { + background-color: hsl(var(--game-success)); + } + + .bg-game-warning { + background-color: hsl(var(--game-warning)); + } + + .bg-game-disabled { + background-color: hsl(var(--game-disabled)); + } + + /* Sidebar background colors */ + .bg-sidebar { + background-color: hsl(var(--sidebar-background)); + } + + .bg-sidebar-foreground { + background-color: hsl(var(--sidebar-foreground)); + } + + .bg-sidebar-primary { + background-color: hsl(var(--sidebar-primary)); + } + + .bg-sidebar-primary-foreground { + background-color: hsl(var(--sidebar-primary-foreground)); + } + + .bg-sidebar-accent { + background-color: hsl(var(--sidebar-accent)); + } + + .bg-sidebar-accent-foreground { + background-color: hsl(var(--sidebar-accent-foreground)); + } + + /* Loader background colors */ + .bg-loader-primary { + background-color: hsl(var(--loader-primary)); + } + + .bg-loader-secondary { + background-color: hsl(var(--loader-secondary)); + } + + .bg-loader-glass { + background-color: hsl(var(--loader-glass)); + } + + /* Text color utilities */ + .text-background { + color: hsl(var(--background)); + } + + .text-foreground { + color: hsl(var(--foreground)); + } + + .text-card { + color: hsl(var(--card)); + } + + .text-card-foreground { + color: hsl(var(--card-foreground)); + } + + .text-popover { + color: hsl(var(--popover)); + } + + .text-popover-foreground { + color: hsl(var(--popover-foreground)); + } + + .text-primary { + color: hsl(var(--primary)); + } + + .text-primary-foreground { + color: hsl(var(--primary-foreground)); + } + + .text-secondary { + color: hsl(var(--secondary)); + } + + .text-secondary-foreground { + color: hsl(var(--secondary-foreground)); + } + + .text-muted { + color: hsl(var(--muted)); + } + + .text-muted-foreground { + color: hsl(var(--muted-foreground)); + } + + .text-accent { + color: hsl(var(--accent)); + } + + .text-accent-foreground { + color: hsl(var(--accent-foreground)); + } + + .text-destructive { + color: hsl(var(--destructive)); + } + + .text-destructive-foreground { + color: hsl(var(--destructive-foreground)); + } + + .text-border { + color: hsl(var(--border)); + } + + .text-input { + color: hsl(var(--input)); + } + + .text-ring { + color: hsl(var(--ring)); + } + + /* Gaming specific text colors */ + .text-game-success { + color: hsl(var(--game-success)); + } + + .text-game-warning { + color: hsl(var(--game-warning)); + } + + .text-game-disabled { + color: hsl(var(--game-disabled)); + } + + /* Sidebar text colors */ + .text-sidebar { + color: hsl(var(--sidebar-background)); + } + + .text-sidebar-foreground { + color: hsl(var(--sidebar-foreground)); + } + + .text-sidebar-primary { + color: hsl(var(--sidebar-primary)); + } + + .text-sidebar-primary-foreground { + color: hsl(var(--sidebar-primary-foreground)); + } + + .text-sidebar-accent { + color: hsl(var(--sidebar-accent)); + } + + .text-sidebar-accent-foreground { + color: hsl(var(--sidebar-accent-foreground)); + } + + /* Loader text colors */ + .text-loader-primary { + color: hsl(var(--loader-primary)); + } + + .text-loader-secondary { + color: hsl(var(--loader-secondary)); + } + + .text-loader-glass { + color: hsl(var(--loader-glass)); + } + + /* Border color utilities */ + .border-background { + border-color: hsl(var(--background)); + } + + .border-foreground { + border-color: hsl(var(--foreground)); + } + + .border-card { + border-color: hsl(var(--card)); + } + + .border-card-foreground { + border-color: hsl(var(--card-foreground)); + } + + .border-popover { + border-color: hsl(var(--popover)); + } + + .border-popover-foreground { + border-color: hsl(var(--popover-foreground)); + } + + .border-primary { + border-color: hsl(var(--primary)); + } + + .border-primary-foreground { + border-color: hsl(var(--primary-foreground)); + } + + .border-secondary { + border-color: hsl(var(--secondary)); + } + + .border-secondary-foreground { + border-color: hsl(var(--secondary-foreground)); + } + + .border-muted { + border-color: hsl(var(--muted)); + } + + .border-muted-foreground { + border-color: hsl(var(--muted-foreground)); + } + + .border-accent { + border-color: hsl(var(--accent)); + } + + .border-accent-foreground { + border-color: hsl(var(--accent-foreground)); + } + + .border-destructive { + border-color: hsl(var(--destructive)); + } + + .border-destructive-foreground { + border-color: hsl(var(--destructive-foreground)); + } + + .border-border { + border-color: hsl(var(--border)); + } + + .border-input { + border-color: hsl(var(--input)); + } + + .border-ring { + border-color: hsl(var(--ring)); + } + + /* Gaming specific border colors */ + .border-game-success { + border-color: hsl(var(--game-success)); + } + + .border-game-warning { + border-color: hsl(var(--game-warning)); + } + + .border-game-disabled { + border-color: hsl(var(--game-disabled)); + } + + /* Sidebar border colors */ + .border-sidebar { + border-color: hsl(var(--sidebar-background)); + } + + .border-sidebar-foreground { + border-color: hsl(var(--sidebar-foreground)); + } + + .border-sidebar-primary { + border-color: hsl(var(--sidebar-primary)); + } + + .border-sidebar-primary-foreground { + border-color: hsl(var(--sidebar-primary-foreground)); + } + + .border-sidebar-accent { + border-color: hsl(var(--sidebar-accent)); + } + + .border-sidebar-accent-foreground { + border-color: hsl(var(--sidebar-accent-foreground)); + } + + .border-sidebar-border { + border-color: hsl(var(--sidebar-border)); + } + + .border-sidebar-ring { + border-color: hsl(var(--sidebar-ring)); + } + + /* Loader border colors */ + .border-loader-primary { + border-color: hsl(var(--loader-primary)); + } + + .border-loader-secondary { + border-color: hsl(var(--loader-secondary)); + } + + .border-loader-glass { + border-color: hsl(var(--loader-glass)); + } + + /* Custom gradient utilities */ + .bg-gradient-primary { + background-image: var(--gradient-primary); + } + + .bg-gradient-secondary { + background-image: var(--gradient-secondary); + } + + .bg-gradient-danger { + background-image: var(--gradient-danger); + } + + .bg-gradient-success { + background-image: var(--gradient-success); + } + + /* Custom glow utilities */ + .shadow-glow-primary { + box-shadow: var(--glow-primary); + } + + .shadow-glow-secondary { + box-shadow: var(--glow-secondary); + } + + .shadow-glow-danger { + box-shadow: var(--glow-danger); + } + + /* Custom transition utilities */ + .transition-smooth { + transition: var(--transition-smooth); + } + + .transition-bounce { + transition: var(--transition-bounce); + } + + /* Border radius utilities */ + .rounded-radius { + border-radius: var(--radius); + } +} diff --git a/AppUi/tailwind.config.js b/AppUi/tailwind.config.js index 9c75e85..33ec4c3 100644 --- a/AppUi/tailwind.config.js +++ b/AppUi/tailwind.config.js @@ -1,12 +1,12 @@ - - +/** @type {import('tailwindcss').Config} */ export default { darkMode: ["class"], content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", ], prefix: "", theme: { @@ -52,6 +52,12 @@ export default { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' }, + // Gaming specific colors + game: { + success: 'hsl(var(--game-success))', + warning: 'hsl(var(--game-warning))', + disabled: 'hsl(var(--game-disabled))' + }, sidebar: { DEFAULT: 'hsl(var(--sidebar-background))', foreground: 'hsl(var(--sidebar-foreground))', @@ -117,6 +123,14 @@ export default { opacity: '0', transform: 'scale(0.95)' } + }, + 'pulse-glow': { + '0%, 100%': { + boxShadow: '0 0 20px hsl(var(--primary) / 0.5)' + }, + '50%': { + boxShadow: '0 0 30px hsl(var(--primary) / 0.8)' + } } }, animation: { @@ -125,9 +139,26 @@ export default { 'loader-slide': 'loader-slide 2s ease-in-out infinite', 'loader-slide-delayed': 'loader-slide 2s ease-in-out infinite -1s', 'fade-in': 'fade-in 0.3s ease-out', - 'fade-out': 'fade-out 0.3s ease-out' + 'fade-out': 'fade-out 0.3s ease-out', + 'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', + 'spin-slow': 'spin 3s linear infinite' + }, + backgroundImage: { + 'gradient-primary': 'var(--gradient-primary)', + 'gradient-secondary': 'var(--gradient-secondary)', + 'gradient-danger': 'var(--gradient-danger)', + 'gradient-success': 'var(--gradient-success)' + }, + boxShadow: { + 'glow-primary': 'var(--glow-primary)', + 'glow-secondary': 'var(--glow-secondary)', + 'glow-danger': 'var(--glow-danger)' + }, + transitionTimingFunction: { + 'smooth': 'var(--transition-smooth)', + 'bounce': 'var(--transition-bounce)' } } }, - plugins: [import("tailwindcss-animate")], + plugins: [require("tailwindcss-animate")], }; From 030e5caac29682b2db2dd95cbfe5db2e56598551 Mon Sep 17 00:00:00 2001 From: Rakshat Date: Thu, 24 Jul 2025 00:56:09 +0000 Subject: [PATCH 4/5] removed text from loader --- AppUi/src/components/Loader.jsx | 23 +---------------------- 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/AppUi/src/components/Loader.jsx b/AppUi/src/components/Loader.jsx index 64fb3cb..3323a0b 100644 --- a/AppUi/src/components/Loader.jsx +++ b/AppUi/src/components/Loader.jsx @@ -9,7 +9,7 @@ const sizeClasses = { }; const LoaderSpinner = forwardRef( - ({ size = "md", variant = "default", fullScreen = false, text, className }, ref) => { + ({ size = "md", variant = "default", fullScreen = false, className }, ref) => { const baseClasses = cn( "relative flex items-center justify-center", sizeClasses[size], @@ -25,14 +25,6 @@ const LoaderSpinner = forwardRef( fullScreen && "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm" )} > -
-
- {text && ( - - {text} - - )} -
); } @@ -61,11 +53,6 @@ const LoaderSpinner = forwardRef( /> ))}
- {text && fullScreen && ( - - {text} - - )}
); } @@ -101,14 +88,6 @@ const LoaderSpinner = forwardRef( />
- {/* Loading text */} - {text && ( -
- - {text} - -
- )}
); From 02aec88b55240fbc8ee4e63ac0ce81ea742563e1 Mon Sep 17 00:00:00 2001 From: Rakshat28 Date: Fri, 25 Jul 2025 02:28:34 +0530 Subject: [PATCH 5/5] increase glass blur, reduce full screen bg blur --- AppUi/src/components/Loader.jsx | 28 +++++----------------------- 1 file changed, 5 insertions(+), 23 deletions(-) diff --git a/AppUi/src/components/Loader.jsx b/AppUi/src/components/Loader.jsx index 3323a0b..0a9cd62 100644 --- a/AppUi/src/components/Loader.jsx +++ b/AppUi/src/components/Loader.jsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils"; +import { cn } from "../utils/utils"; import { forwardRef } from "react"; const sizeClasses = { @@ -9,25 +9,7 @@ const sizeClasses = { }; const LoaderSpinner = forwardRef( - ({ size = "md", variant = "default", fullScreen = false, className }, ref) => { - const baseClasses = cn( - "relative flex items-center justify-center", - sizeClasses[size], - className - ); - - if (variant === "pulse") { - return ( -
-
- ); - } + ({ size = "md", variant = "default", fullScreen = false }, ref) => { if (variant === "dots") { return ( @@ -35,7 +17,7 @@ const LoaderSpinner = forwardRef( ref={ref} className={cn( "flex items-center justify-center gap-1", - fullScreen && "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex-col" + fullScreen && "fixed inset-0 z-50 bg-background/80 backdrop-blur-[2px] flex-col" )} >
@@ -62,7 +44,7 @@ const LoaderSpinner = forwardRef(
@@ -79,7 +61,7 @@ const LoaderSpinner = forwardRef( {/* Glassmorphism circle */}