From 252ca7d1e6d5876c8949285ea3a281a4dabc1b40 Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Tue, 28 Jan 2025 22:31:31 +0000 Subject: [PATCH] Add: Added New Styling For AuthModel New Border effect that rolls around the border of the registration. Use of CSS extension that goes with TailwindCdd --- frontend/src/assets/styles/auth.css | 26 ++++ frontend/src/components/Auth/AuthModal.tsx | 61 +++++--- frontend/src/components/Layout/Navbar.tsx | 2 + frontend/src/pages/HomePage.tsx | 1 + frontend/tailwind.config.js | 33 +++-- package-lock.json | 165 +++++++++++++++++++++ package.json | 11 ++ 7 files changed, 263 insertions(+), 36 deletions(-) create mode 100644 frontend/src/assets/styles/auth.css create mode 100644 package-lock.json create mode 100644 package.json diff --git a/frontend/src/assets/styles/auth.css b/frontend/src/assets/styles/auth.css new file mode 100644 index 0000000..b0794d1 --- /dev/null +++ b/frontend/src/assets/styles/auth.css @@ -0,0 +1,26 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + /* Act as a border */ + .card-wrapper { + @apply absolute overflow-hidden rounded-2xl ; + } + + /* Gradient */ + .card-wrapper::before { + background-image: conic-gradient( + from 200deg at 50% 50%, + transparent 70%, + #55e28b 85%, + #3b82f6 90%, + #BF40BF 95%); + @apply absolute left-[-50%] top-[-50%] h-[200%] w-[200%] animate-border-spin content-['']; + } + + /* Body */ + .card-content { + @apply absolute left-[1px] top-[1px] h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-2xl ; + } +} diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx index 22c7144..92f21da 100644 --- a/frontend/src/components/Auth/AuthModal.tsx +++ b/frontend/src/components/Auth/AuthModal.tsx @@ -3,6 +3,8 @@ import { ToggleButton } from "../Layout/Button"; import { LogIn as LogInIcon, User as UserIcon } from "lucide-react"; import LoginForm from "./LoginForm"; import RegisterForm from "./RegisterForm"; +import "../../assets/styles/auth.css"; + interface AuthModalProps { onClose: () => void; @@ -13,34 +15,45 @@ const AuthModal: React.FC = ({ onClose }) => { return ( <> + {/*Background Blur*/}
+ {/*Container*/} +
- ); diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx index ff8c63f..f56ac62 100644 --- a/frontend/src/components/Layout/Navbar.tsx +++ b/frontend/src/components/Layout/Navbar.tsx @@ -13,6 +13,7 @@ import Input from "./Input"; import AuthModal from "../Auth/AuthModal"; import { useAuth } from "../../context/AuthContext"; + interface NavbarProps { variant?: "home" | "default"; } @@ -88,6 +89,7 @@ const Navbar: React.FC = ({ variant = "default" }) => {
+ {showAuthModal && setShowAuthModal(false)} />} ); diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 47c6d8f..1aab188 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -39,6 +39,7 @@ const HomePage: React.FC = ({ variant = "default" }) => { streams={featuredCategories} onStreamClick={() => {}} //TODO /> + ); }; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index a1a3d6b..c3054d7 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,3 +1,5 @@ +import { transform } from 'typescript'; + /** @type {import('tailwindcss').Config} */ export default { content: [ @@ -6,13 +8,14 @@ export default { ], theme: { extend: { - + animation: { moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate", - moving_bg: 'moving_bg 200s linear infinite' + moving_bg: 'moving_bg 200s linear infinite', + 'border-spin': 'border-spin 7s linear infinite', }, - - + + backgroundImage: { logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)", }, @@ -21,14 +24,20 @@ export default { moving_text_colour: { "0%": { backgroundPosition: "0% 50%" }, "100%": { backgroundPosition: "100% 50%" }, + + moving_bg: { + '0%': { backgroundPosition: '0% 0%' }, + '100%': { backgroundPosition: '100% 0%' }, + } }, - moving_bg: { - '0%': { backgroundPosition: '0% 0%' }, - '100%': { backgroundPosition: '100% 0%' } - } - } + 'border-spin': { + '100%': { + transform: 'rotate(360deg)', + }, + }, + }, }, - }, - plugins: [ - ], + plugins: [ + ], + } }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d03c28d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,165 @@ +{ + "name": "cs3305-team11", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "lucide-react": "^0.474.0", + "react-router-dom": "^7.1.3" + }, + "devDependencies": { + "@types/react": "^19.0.8", + "@types/react-dom": "^19.0.3", + "typescript": "^5.7.3" + } + }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "19.0.8", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz", + "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.0.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.3.tgz", + "integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.0.0" + } + }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true, + "license": "MIT" + }, + "node_modules/lucide-react": { + "version": "0.474.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz", + "integrity": "sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/react": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz", + "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", + "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "scheduler": "^0.25.0" + }, + "peerDependencies": { + "react": "^19.0.0" + } + }, + "node_modules/react-router": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz", + "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz", + "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==", + "license": "MIT", + "dependencies": { + "react-router": "7.1.3" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, + "node_modules/scheduler": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", + "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==", + "license": "MIT", + "peer": true + }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, + "node_modules/typescript": { + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", + "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..456af06 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "devDependencies": { + "@types/react": "^19.0.8", + "@types/react-dom": "^19.0.3", + "typescript": "^5.7.3" + }, + "dependencies": { + "lucide-react": "^0.474.0", + "react-router-dom": "^7.1.3" + } +}