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
2025-01-28 22:31:31 +00:00
parent 01d7be2d4b
commit 252ca7d1e6
7 changed files with 263 additions and 36 deletions
--- a/frontend/src/assets/styles/auth.css
+++ 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 ;
+  }
+}
--- 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<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>
    </>
  );
--- 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<NavbarProps> = ({ variant = "default" }) => {
        <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
      </div>

+
      {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
    </div>
  );
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -39,6 +39,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
        streams={featuredCategories}
        onStreamClick={() => {}} //TODO
      />
+
    </div>
  );
 };
--- 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: [
+    ],
+  }
 };
--- a/package-lock.json
+++ 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"
+      }
+    }
+  }
+}
--- a/package.json
+++ 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"
+  }
+}