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">
-        <div id="login-methods" className="w-full flex flex-row items-center justify-evenly">
-          <button
-            onClick={onClose}
-            className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
+        {/*Border Container*/}  
+        <div  
+          id="border-container"
+          className="card-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
+          z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
           >
-            ✕
-          </button>
-          <ToggleButton
-            toggled={selectedTab === "Login"}
-            extraClasses="flex flex-col items-center px-8"
-            onClick={() => setSelectedTab("Login")}
-          >
-            <LogInIcon className="h-[40px] w-[40px] mr-1" />
-            Login
-          </ToggleButton>
-          <ToggleButton
-            toggled={selectedTab === "Register"}
-            extraClasses="flex flex-col items-center px-8"
-            onClick={() => setSelectedTab("Register")}
-          >
-            <UserIcon className="h-[40px] w-[40px] mr-1" />
-            Register
-          </ToggleButton>
+          <div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
+            <button
+              onClick={onClose}
+              className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
+            >
+              ✕
+            </button>
+            <ToggleButton
+              toggled={selectedTab === "Login"}
+              extraClasses="flex flex-col items-center px-8"
+              onClick={() => setSelectedTab("Login")}
+            >
+              <LogInIcon className="h-[40px] w-[40px] mr-1" />
+              Login
+            </ToggleButton>
+            <ToggleButton
+              toggled={selectedTab === "Register"}
+              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: {
-          '0%': { backgroundPosition: '0% 0%' },
-          '100%': { backgroundPosition: '100% 0%' }
-        }
-      }
+        'border-spin': {
+          '100%': {
+            transform: 'rotate(360deg)',
+          },
+        },
+      },
     },
-  },
-  plugins: [
-  ],
+    plugins: [
+    ],
+  }
 };