From b2688a25eeb46a163d726f1e84d3efae48901030 Mon Sep 17 00:00:00 2001 From: myusername Date: Thu, 7 May 2026 17:04:48 +0530 Subject: [PATCH 1/2] Initial commit --- index.html | 2 +- package.json | 6 +- pnpm-lock.yaml | 58 ++-- src/App.tsx | 19 +- src/LoginCard.tsx | 128 +++++++++ src/TestCard.tsx | 42 +++ src/ThemeToggleSwitch.tsx | 95 +++++++ src/index.css | 371 ++++---------------------- src/layouts/MainLayout/BaseLayout.tsx | 64 +---- src/main.tsx | 58 ++-- src/routes/MainRouters.tsx | 16 +- src/shared/theme/ThemePicker.tsx | 21 ++ src/shared/theme/ThemeProvider.tsx | 34 +++ src/shared/theme/index.ts | 5 + src/shared/theme/themeRegistry.ts | 15 ++ src/shared/theme/themeStore.ts | 27 ++ src/shared/theme/tokens/dark.ts | 54 ++++ src/shared/theme/tokens/digital.ts | 27 ++ src/shared/theme/tokens/light.ts | 57 ++++ src/shared/theme/tokens/monochrome.ts | 27 ++ src/shared/theme/tokens/primitives.ts | 28 ++ src/shared/theme/types.ts | 65 +++++ src/shared/theme/useTheme.ts | 25 ++ src/types.tsx | 0 src/views/Auth/OAuthCallBack.tsx | 13 +- tailwind.config.ts | 7 + 26 files changed, 801 insertions(+), 463 deletions(-) create mode 100644 src/LoginCard.tsx create mode 100644 src/TestCard.tsx create mode 100644 src/ThemeToggleSwitch.tsx create mode 100644 src/shared/theme/ThemePicker.tsx create mode 100644 src/shared/theme/ThemeProvider.tsx create mode 100644 src/shared/theme/index.ts create mode 100644 src/shared/theme/themeRegistry.ts create mode 100644 src/shared/theme/themeStore.ts create mode 100644 src/shared/theme/tokens/dark.ts create mode 100644 src/shared/theme/tokens/digital.ts create mode 100644 src/shared/theme/tokens/light.ts create mode 100644 src/shared/theme/tokens/monochrome.ts create mode 100644 src/shared/theme/tokens/primitives.ts create mode 100644 src/shared/theme/types.ts create mode 100644 src/shared/theme/useTheme.ts delete mode 100644 src/types.tsx create mode 100644 tailwind.config.ts diff --git a/index.html b/index.html index f79623d..17c8257 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index e775721..bbf94df 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "@heroicons/react": "^2.2.0", "@mui/icons-material": "^7.3.0", "@mui/material": "^7.3.0", "@mui/styled-engine-sc": "^7.3.0", @@ -28,9 +29,10 @@ "react-dom": "^19.2.5", "react-icons": "^5.5.0", "react-router-dom": "^7.7.1", - "tailwindcss": "^4.2.4", "styled-components": "^6.2.0", - "vite-plugin-remove-console": "^2.2.0" + "tailwindcss": "^4.2.4", + "vite-plugin-remove-console": "^2.2.0", + "zustand": "^5.0.12" }, "devDependencies": { "@eslint/js": "^9.39.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5338284..13846fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@heroicons/react': + specifier: ^2.2.0 + version: 2.2.0(react@19.2.5) '@mui/icons-material': specifier: ^7.3.0 version: 7.3.10(@mui/material@7.3.10(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5) @@ -68,6 +71,9 @@ importers: vite-plugin-remove-console: specifier: ^2.2.0 version: 2.2.0 + zustand: + specifier: ^5.0.12 + version: 5.0.12(@types/react@19.2.14)(react@19.2.5) devDependencies: '@eslint/js': specifier: ^9.39.4 @@ -256,6 +262,11 @@ packages: resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@heroicons/react@2.2.0': + resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==} + peerDependencies: + react: '>= 16 || ^19.0.0-rc' + '@humanfs/core@0.19.2': resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==} engines: {node: '>=18.18.0'} @@ -442,42 +453,36 @@ packages: engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] - libc: [glibc] '@rolldown/binding-linux-arm64-musl@1.0.0-rc.16': resolution: {integrity: sha512-3fPzdREH806oRLxpTWW1Gt4tQHs0TitZFOECB2xzCFLPKnSOy90gwA7P29cksYilFO6XVRY1kzga0cL2nRjKPg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [arm64] os: [linux] - libc: [musl] '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.16': resolution: {integrity: sha512-EKwI1tSrLs7YVw+JPJT/G2dJQ1jl9qlTTTEG0V2Ok/RdOenRfBw2PQdLPyjhIu58ocdBfP7vIRN/pvMsPxs/AQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [ppc64] os: [linux] - libc: [glibc] '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.16': resolution: {integrity: sha512-Uknladnb3Sxqu6SEcqBldQyJUpk8NleooZEc0MbRBJ4inEhRYWZX0NJu12vNf2mqAq7gsofAxHrGghiUYjhaLQ==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [s390x] os: [linux] - libc: [glibc] '@rolldown/binding-linux-x64-gnu@1.0.0-rc.16': resolution: {integrity: sha512-FIb8+uG49sZBtLTn+zt1AJ20TqVcqWeSIyoVt0or7uAWesgKaHbiBh6OpA/k9v0LTt+PTrb1Lao133kP4uVxkg==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] - libc: [glibc] '@rolldown/binding-linux-x64-musl@1.0.0-rc.16': resolution: {integrity: sha512-RuERhF9/EgWxZEXYWCOaViUWHIboceK4/ivdtQ3R0T44NjLkIIlGIAVAuCddFxsZ7vnRHtNQUrt2vR2n2slB2w==} engines: {node: ^20.19.0 || >=22.12.0} cpu: [x64] os: [linux] - libc: [musl] '@rolldown/binding-openharmony-arm64@1.0.0-rc.16': resolution: {integrity: sha512-mXcXnvd9GpazCxeUCCnZ2+YF7nut+ZOEbE4GtaiPtyY6AkhZWbK70y1KK3j+RDhjVq5+U8FySkKRb/+w0EeUwA==} @@ -531,42 +536,36 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] - libc: [glibc] '@swc/core-linux-arm64-musl@1.15.30': resolution: {integrity: sha512-1SYGs2l0Yyyi0pR/P/NKz/x0kqxkoiw+BXeJjLUdecSk/KasncWlJrc6hOvFSgKHOBrzgM5jwuluKtlT8dnrcA==} engines: {node: '>=10'} cpu: [arm64] os: [linux] - libc: [musl] '@swc/core-linux-ppc64-gnu@1.15.30': resolution: {integrity: sha512-TXREtiXeRhbfDFbmhnkIsXpKfzbfT73YkV2ZF6w0sfxgjC5zI2ZAbaCOq25qxvegofj2K93DtOpm9RLaBgqR2g==} engines: {node: '>=10'} cpu: [ppc64] os: [linux] - libc: [glibc] '@swc/core-linux-s390x-gnu@1.15.30': resolution: {integrity: sha512-DCR2YYeyd6DQE4OuDhImouuNcjXEiEdnn1Y0DyGteugPEDvVuvYk8Xddi+4o2SgWH6jiW8/I+3emZvbep1NC+g==} engines: {node: '>=10'} cpu: [s390x] os: [linux] - libc: [glibc] '@swc/core-linux-x64-gnu@1.15.30': resolution: {integrity: sha512-5Pizw3NgfOJ5BJOBK8TIRa59xFW2avESTOBDPTAYwZYa1JNDs+KMF9lUfjJiJLM5HiMs/wPheA9eiT0q9m2AoA==} engines: {node: '>=10'} cpu: [x64] os: [linux] - libc: [glibc] '@swc/core-linux-x64-musl@1.15.30': resolution: {integrity: sha512-qyqydP/wyH8alcIP4a2hnGSjHLJjm9H7yDFup+CPy9oTahFgLLwnNcv5UHXqO2Qs3AIND+cls5f/Bb6hqpxdgA==} engines: {node: '>=10'} cpu: [x64] os: [linux] - libc: [musl] '@swc/core-win32-arm64-msvc@1.15.30': resolution: {integrity: sha512-CaQENgDHVGOg1mSF5sQVgvfFHG9kjMor2rkLMLeLOkfZYNj13ppnJ9+lfaBZLZUMMbnlGQnavCJb8PVBUOso7Q==} @@ -642,28 +641,24 @@ packages: engines: {node: '>= 20'} cpu: [arm64] os: [linux] - libc: [glibc] '@tailwindcss/oxide-linux-arm64-musl@4.2.4': resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==} engines: {node: '>= 20'} cpu: [arm64] os: [linux] - libc: [musl] '@tailwindcss/oxide-linux-x64-gnu@4.2.4': resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==} engines: {node: '>= 20'} cpu: [x64] os: [linux] - libc: [glibc] '@tailwindcss/oxide-linux-x64-musl@4.2.4': resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==} engines: {node: '>= 20'} cpu: [x64] os: [linux] - libc: [musl] '@tailwindcss/oxide-wasm32-wasi@4.2.4': resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==} @@ -1244,28 +1239,24 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [glibc] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] - libc: [musl] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [glibc] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] - libc: [musl] lightningcss-win32-arm64-msvc@1.32.0: resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} @@ -1633,6 +1624,24 @@ packages: zod@4.3.6: resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==} + zustand@5.0.12: + resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@types/react': '>=18.0.0' + immer: '>=9.0.6' + react: '>=18.0.0' + use-sync-external-store: '>=1.2.0' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + use-sync-external-store: + optional: true + snapshots: '@babel/code-frame@7.29.0': @@ -1831,6 +1840,10 @@ snapshots: '@eslint/core': 0.17.0 levn: 0.4.1 + '@heroicons/react@2.2.0(react@19.2.5)': + dependencies: + react: 19.2.5 + '@humanfs/core@0.19.2': dependencies: '@humanfs/types': 0.15.0 @@ -2994,3 +3007,8 @@ snapshots: zod: 4.3.6 zod@4.3.6: {} + + zustand@5.0.12(@types/react@19.2.14)(react@19.2.5): + optionalDependencies: + '@types/react': 19.2.14 + react: 19.2.5 diff --git a/src/App.tsx b/src/App.tsx index 4ea8d11..55222d5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,21 +5,20 @@ import { RouterProvider } from "react-router-dom"; import router from "./routes"; // import styles from "./App.module.css"; import { AuthProvider } from "./context/AuthContext"; +import TestCard from "./TestCard"; +import LoginCard from "./LoginCard"; // import * from '@mui/styled-engine-sc' as styledEngineSC;, -import { LanguageProvider } from "./context/LanguageContext"; -import CustomTranslate from "./textTranslation/CustomTranslate"; +// import { LanguageProvider } from "./context/LanguageContext"; +// import CustomTranslate from "./textTranslation/CustomTranslate"; function App() { return ( - - - - {/* */} - - {/* */} - - + + + + + ) } export default App; \ No newline at end of file diff --git a/src/LoginCard.tsx b/src/LoginCard.tsx new file mode 100644 index 0000000..8e4930c --- /dev/null +++ b/src/LoginCard.tsx @@ -0,0 +1,128 @@ +import React, { useState } from 'react'; +import ThemeToggleSwitch from './ThemeToggleSwitch'; +import { useTheme } from './shared/theme'; + +function LoginCard() { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const { themeName } = useTheme(); + + const [errors, setErrors] = useState<{ username?: string; password?: string }>({}); + const validate = () => { + const newErrors: typeof errors = {}; + + // Username validation + if (!username.trim()) { + newErrors.username = 'Username is required'; + } else if (username.length < 3) { + newErrors.username = 'Username must be at least 3 characters'; + } + + // Password validation + if (!password) { + newErrors.password = 'Password is required'; + } else if (password.length < 6) { + newErrors.password = 'Password must be at least 6 characters'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (validate()) { + console.log('Login success (mock)'); + } + }; + + const inputBase = + 'w-full px-3 py-2 rounded-md border outline-none transition'; + + const inputNormal = + 'bg-bg-secondary text-text-primary border-border-secondary'; + + const inputError = + `${themeName === 'dark' + ? 'bg-red-900' + : 'bg-red-200' + } text-text-primary border-danger`; + + return ( +
+
+ +
+ +
+ +

+ Login +

+ +
+ + {/* Username */} +
+ + setUsername(e.target.value)} + className={`${inputBase} ${errors.username ? inputError : inputNormal + }`} + /> + {errors.username && ( +

+ {errors.username} +

+ )} +
+ + {/* Password */} +
+ + setPassword(e.target.value)} + className={`${inputBase} ${errors.password ? inputError : inputNormal + }`} + /> + {errors.password && ( +

+ {errors.password} +

+ )} +
+ + {/* Forgot password */} +
+ + Forgot password? + +
+ + {/* Submit */} + +
+
+
+ ); +} + +export default LoginCard; \ No newline at end of file diff --git a/src/TestCard.tsx b/src/TestCard.tsx new file mode 100644 index 0000000..3f75a03 --- /dev/null +++ b/src/TestCard.tsx @@ -0,0 +1,42 @@ +// import React from 'react'; +import { useTheme } from '@/shared/theme/useTheme'; +import { type ThemeName } from '@/shared/theme/types'; +import { themeRegistry } from './shared/theme'; + +function TestCard() { + const { setTheme, themeName } = useTheme(); + // const availableThemes1: ThemeName[] = ['light', 'dark']; + const { availableThemes } = useTheme(); + return ( +
+
+ {availableThemes.map((theme) => { + const t = themeRegistry[theme]; + return ( + + ) + })} +
+ +
+ Current theme: {themeName} +
+ +
+ Test Theme +
+ +
+ Full token test +
+
+ ); +} +export default TestCard; \ No newline at end of file diff --git a/src/ThemeToggleSwitch.tsx b/src/ThemeToggleSwitch.tsx new file mode 100644 index 0000000..a99fabe --- /dev/null +++ b/src/ThemeToggleSwitch.tsx @@ -0,0 +1,95 @@ +import { useState, useRef, useEffect } from 'react'; +import { useTheme } from '@/shared/theme/useTheme'; +import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'; + +function ThemeToggleSwitch() { + const { themeName, setTheme } = useTheme(); + const [open, setOpen] = useState(false); + const ref = useRef(null); + + // Close dropdown on outside click + useEffect(() => { + const handleClickOutside = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) { + setOpen(false); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + const handleSelect = (theme: string) => { + if (theme === 'digital' || theme === 'monochrome') return; // placeholder + setTheme(theme as any); + setOpen(false); + }; + + return ( +
+ {/* Toggle Button */} + + + {/* Dropdown */} + {open && ( +
+ {/* Light */} + + + {/* Dark */} + + + {/* Divider */} +
+ + {/* Digital (disabled) */} + + + {/* Monochrome (disabled) */} + +
+ )} +
+ ); +} + +export default ThemeToggleSwitch; \ No newline at end of file diff --git a/src/index.css b/src/index.css index d662a89..a8a9611 100644 --- a/src/index.css +++ b/src/index.css @@ -1,326 +1,59 @@ @import "tailwindcss"; -@theme { - /* Primary colors */ - --color-primary: #E27E03; - --color-primary-dark: #C16C03; - --color-primary-dark: #cc6e03; - --color-primary-light: #f08d1a; - --color-primary-text: #FFFFFF; - --color-primary-text-dark: #000000; - /* Set both background-color and background-image for better compatibility */ - --color-primary-background-color: #FFFFFF; - /* --color-primary-background-image: radial-gradient(circle at center, rgba(255, 255, 255, 1) 51%, rgba(255, 255, 255, 1) 21%, rgba(237, 221, 83, 1) 100%); */ - --color-primary-background-dark: #0d0d0d; - --color-primary-background-light: #1f1f1f; - - /* Secondary colors */ - --color-secondary: #323232; - --color-secondary-dark: #222222; - --color-secondary-light: #4a4a4a; - --color-secondary-text: #B0B0B0; - --color-secondary-text-dark: #8d8d8d; - --color-secondary-background: none; - --color-secondary-background-dark: #1f1f1f; - --color-secondary-background-light: #4a4a4a; - -} - - -.borderRed { - border: 2px solid red; -} - -.navbar-gradient { - background: linear-gradient(to right, rgba(0, 1, 71, 1) 0%, rgb(22, 24, 157) 33%, rgb(51, 53, 154) 66%, #000147 100%); -} - -.floating-navbar { - border-radius: 30px; -} - -.card-shadow { - border: 2px solid grey; - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; -} - -.parallax-bg { - width: 100%; - padding: 0; - margin: 0; - background-size: auto; - background-position: top; - border-radius: 30px -} - -.card-styling { - background: #fff7dc; - backdrop-filter: blur(10px); - border-radius: 16px; - border: 1px solid #ffeca8; -} -.card-styling-without-transition { - background: #fff7dc; - backdrop-filter: blur(10px); - border-radius: 16px; - border: 1px solid #ffeca8; -} - -.cursor-pointer { - cursor: pointer; -} - -.footer-link-hover { - text-decoration: underline; - text-decoration-color: white; -} - -.card-styling:hover, -.card-styling:focus { - transition: all 0.3s ease-in-out; - background: #ffde71; -} - - -/* Hide scrollbars globally */ -* { - -ms-overflow-style: none; - /* IE/Edge */ - scrollbar-width: none; - /* Firefox */ -} - -*::-webkit-scrollbar { - display: none; - /* Chrome/Safari */ -} - -.navscrollbehavior { - position: fixed; - /* transition: translateY(2rem) 2s; */ - - /* transform: animation: transform 0.3s ease-in-out forwards; */ - /* top:1.5rem; */ - width: 90%; - /* margin: 1rem auto 0 auto; */ - /* border-radius: 1.5rem; */ - /* transition: background-color 1s ease; */ - /* display: flex; - justify-content: center; */ - box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px; - background: inherit; - /* background: linear-gradient(to right, #000147, #1BADD9); */ - /* background: #0A0032; */ - box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px; - /* animation: navbarFloatingDown 0.7s ease-in-out forwards; */ -} - -.w-100C { - width: 100%; -} - -.btn-primary { - background-color: #000147; - /* Default button color */ -} - -.nav-focus-styling:focus { - background-color: rgba(0, 0, 0, 0); -} - -.hamburger-icon { - display: none !important; -} - -.mobile-navbar { - display: none; -} - -/* Closing animation */ -.mobile-navbar-closing { - animation: mobile-navbar-slide-left 0.3s ease-in-out; -} - -.navbar-logos { - display: flex !important; -} - -.navbar-logos-mob { - display: none !important; -} +/* 1. Fallback tokens (match SemanticTokens EXACTLY) */ +:root { + --color-bg-primary: #ffffff; + --color-bg-secondary: #f5f5f5; + --color-text-primary: #000000; + --color-text-secondary: #555555; + --color-border: #e5e5e5; + --color-danger: #ef4444; + --color-success: #22c55e; -/* Opening animation - slide in from left */ -@keyframes mobile-navbar-slide-right { - from { - transform: translateX(-30rem); - } + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; - to { - transform: translateX(0rem); - } + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); } -/* Closing animation - slide out to left */ -@keyframes mobile-navbar-slide-left { - from { - transform: translateX(0rem); - } - - to { - transform: translateX(-30rem); - } -} - -@keyframes navbarFloatingDown { - from { - transform: translateY(0rem); - } - - to { - transform: translateY(2rem); - } -} - -@keyframes spiny { - 0% { - transform: rotateY(0deg); - } - - 100% { - transform: rotateY(360deg); - } -} - -.cdacSpinner { - animation: spiny 2s linear infinite !important; -} - -.footer-links-container-mob { - display: none !important; -} - -.footer-links-container-pc { - display: inline-block !important; -} - -.navbar-list-mob { - display: none !important; -} - -.parallax-bg-pc { - display: block; -} - -.parallax-bg-mob { - display: none; -} - -.profile-stats-pc { - display: block -} - -.profile-stats-mob { - display: none -} - -.view-card-instruction-mob { - display: none; -} - -@media screen and (max-width: 769px) { - .navbar-list { - display: none !important; - } - - .view-card-instruction-mob { - display: block; - font-size: 0.7rem !important; - - } - - .mobile-navbar { - display: flex; - height: 100vh; - width: 100%; - position: fixed; - z-index: 999; - background: linear-gradient(to right, rgba(0, 1, 71, 1) 0%, rgb(22, 24, 157) 33%, rgb(51, 53, 154) 66%, #000147 100%); - overflow: hidden; - animation: mobile-navbar-slide-right 0.3s ease-in-out; - } - - .navbar-list-mob { - display: flex !important; - flex-direction: column !important; - justify-content: center; - height: 100%; - } - - .navbarCdacLogo { - display: inline; - } - - .navscrollbehavior { - border-radius: 0rem; - width: 100%; - animation: none !important; - transition: none !important; - } - - .communitycards { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - } - - .hamburger-icon { - display: inline-block !important; - } - - .footer-links-container-pc { - display: none !important; - } - - .footer-links-container-mob { - display: flex !important; - } - - .navbar-logos { - display: none !important; - } - - .navbar-logos-mob { - display: flex !important; - } - - .hide-these-mobile-view { - display: none !important; - } - - .parallax-bg-pc { - display: none; - } - - .parallax-bg-mob { - display: block; - } - - .profile-stats-pc { - display: none - } - - .profile-stats-mob { - display: block - } - - .post-rating-like-share { - flex-direction: column; - /* align-items: center; */ - } - - .post-rating-like-share>div { - margin-bottom: 1rem; - } - +/* 2. Tailwind v4 bridge (CRITICAL) */ +@theme { + /* Background */ + --color-bg-primary: var(--color-bg-primary); + --color-bg-secondary: var(--color-bg-secondary); + --color-bg-tertiary: var(--color-bg-tertiary); + + /* Text */ + --color-text-primary: var(--color-text-primary); + --color-text-secondary: var(--color-text-secondary); + --color-text-tertiary: var(--color-text-tertiary); + + /* Borders */ + --color-border-primary: var(--color-border-primary); + --color-border-secondary: var(--color-border-secondary); + --color-border-tertiary: var(--color-border-tertiary); + + /* Status */ + --color-danger: var(--color-danger); + --color-warning: var(--color-warning); + --color-success: var(--color-success); + --color-info: var(--color-info); +} + +/* Disable transitions on first load (prevents flash) */ +html[data-theme-loaded="false"], +html[data-theme-loaded="false"] * { + transition: none !important; +} + +/* Enable smooth transitions AFTER theme is applied */ +html[data-theme-loaded="true"], +html[data-theme-loaded="true"] * { + transition: + background-color 0.25s ease, + color 0.25s ease, + border-color 0.25s ease, + box-shadow 0.25s ease; } \ No newline at end of file diff --git a/src/layouts/MainLayout/BaseLayout.tsx b/src/layouts/MainLayout/BaseLayout.tsx index 236da1b..9d0cda0 100644 --- a/src/layouts/MainLayout/BaseLayout.tsx +++ b/src/layouts/MainLayout/BaseLayout.tsx @@ -1,72 +1,22 @@ -// import Navbar from '@components/Navbar/Navbar'; -import React, { Suspense, useContext, useEffect } from 'react'; -import { Outlet, useLocation, useNavigate } from 'react-router-dom'; - -// import Nav from '@components/Navbar/Nav'; -// import Footer from '@/views/Home/Footer'; -// import Nav from '@/components/Navbar/Nav'; -import AuthContext from '@/context/AuthContext'; -import { clearPostLoginRedirect, getPostLoginRedirect } from '@/utils/postLoginRedirect'; - +import React, { Suspense } from 'react'; +import { Outlet } from 'react-router-dom'; const BaseLayout: React.FC = () => { - const { isAuthenticated, isLoading } = useContext(AuthContext); - const navigate = useNavigate(); - const location = useLocation(); - - useEffect(() => { - if (!isAuthenticated || isLoading) return; - - const pendingRedirect = getPostLoginRedirect(); - if (!pendingRedirect) return; - - const currentPath = `${location.pathname}${location.search}${location.hash}`; - - if (pendingRedirect === currentPath) { - clearPostLoginRedirect(); - return; - } - - const isFallbackLanding = location.pathname === "/" || location.pathname === "/home" || location.pathname === "/login"; - if (isFallbackLanding) { - navigate(pendingRedirect, { replace: true }); - } - }, [isAuthenticated, isLoading, location.pathname, location.search, location.hash, navigate]); - - // const homeRef = useRef(null); - // const fdRef = useRef(null); - // const hiwRef = useRef(null); - // const rdRef = useRef(null); - // const communityRef = useRef(null); - // const startRef = useRef(null); - // const NAV_HEIGHT_OFFSET = 60; - - const scrollToSection = (yScrollPosition: number) => { - window.scrollTo({ - top: yScrollPosition, - behavior: 'smooth' - }); - }; return ( -
- - {/*