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

@@ -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 ;
+  }
+}

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<AuthModalProps> = ({ onClose }) => {
 
   return (
     <>
+      {/*Background Blur*/}
       <div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
+      {/*Container*/}
+      <div className="card-wrapper fixed inset-0 flex flex-col items-center justify-around z-50 
+      h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]
+       transition-all" >
 
-      <div id="modal-container" className="fixed inset-0 bg-black/30 has-[input:focus]:bg-black/40 flex flex-col items-center justify-around z-50 h-[70vh] m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all">
+        {/*Border Container*/}  
-        <div id="login-methods" className="w-full flex flex-row items-center justify-evenly">
+        <div  
-          <button
+          id="border-container"
-            onClick={onClose}
+          className="card-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
-            className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
+          z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
           >
-            ✕
+          <div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
-          </button>
+            <button
-          <ToggleButton
+              onClick={onClose}
-            toggled={selectedTab === "Login"}
+              className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
-            extraClasses="flex flex-col items-center px-8"
+            >
-            onClick={() => setSelectedTab("Login")}
+              ✕
-          >
+            </button>
-            <LogInIcon className="h-[40px] w-[40px] mr-1" />
+            <ToggleButton
-            Login
+              toggled={selectedTab === "Login"}
-          </ToggleButton>
+              extraClasses="flex flex-col items-center px-8"
-          <ToggleButton
+              onClick={() => setSelectedTab("Login")}
-            toggled={selectedTab === "Register"}
+            >
-            extraClasses="flex flex-col items-center px-8"
+              <LogInIcon className="h-[40px] w-[40px] mr-1" />
-            onClick={() => setSelectedTab("Register")}
+              Login
-          >
+            </ToggleButton>
-            <UserIcon className="h-[40px] w-[40px] mr-1" />
+            <ToggleButton
-            Register
+              toggled={selectedTab === "Register"}
-          </ToggleButton>
+              extraClasses="flex flex-col items-center px-8"
+              onClick={() => setSelectedTab("Register")}
+            >
+              <UserIcon className="h-[40px] w-[40px] mr-1" />
+              Register
+            </ToggleButton>
+          </div>
+          {selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
         </div>
-        {selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
       </div>
     </>
   );

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<NavbarProps> = ({ variant = "default" }) => {
         <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
       </div>
 
+
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
     </div>
   );

frontend/src/pages/HomePage.tsx

@@ -39,6 +39,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         streams={featuredCategories}
         onStreamClick={() => {}} //TODO
       />
+
     </div>
   );
 };

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: {
+        'border-spin': {
-          '0%': { backgroundPosition: '0% 0%' },
+          '100%': {
-          '100%': { backgroundPosition: '100% 0%' }
+            transform: 'rotate(360deg)',
-        }
+          },
-      }
+        },
+      },
     },
-  },
+    plugins: [
-  plugins: [
+    ],
-  ],
+  }
 };

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"
+      }
+    }
+  }
+}

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"
+  }
+}