Vps/login page polishing (#332)

* feat: used nicer diamond button for log in button

* fix: login button renaming

* fix: login page now responsive to dark/light mode

* fix: lint and prettier passed

* fix: tiny tailwind inconsistencies

---------

Co-authored-by: harbassan <[email protected]>

Author: mshi672

frontend/src/features/login/LoginPage/LoginPage.jsx

@@ -1,24 +1,19 @@
 import { useContext, useEffect } from "react";
 import { useHistory, useLocation } from "react-router-dom";
+import DiamondLoginButton from "../components/DiamondLoginButton";
 import AuthenticationContext from "context/AuthenticationContext";
 
 import toast from "react-hot-toast";
-import axios from "axios";
+import { api } from "../../../util/api";
 
 const handleSignIn = async (user) => {
-  const token = await user.getIdToken();
-  const config = {
-    method: "post",
-    url: `api/user/`,
-    headers: { Authorization: `Bearer ${token}` },
-    data: {
-      name: user.displayName,
-      uid: user.uid,
-      email: user.email,
-      pictureURL: user.photoURL,
-    },
+  const data = {
+    name: user.displayName,
+    uid: user.uid,
+    email: user.email,
+    pictureURL: user.photoURL,
   };
-  return axios.request(config);
+  api.post(user, "api/user", data);
 };
 
 export default function LoginPage() {
@@ -50,41 +45,29 @@ export default function LoginPage() {
   return (
     <div className="min-h-screen flex flex-col">
       {/* Top whitespace */}
-      <div style={{ height: "var(--spacing-2xl-3xl)" }} />
+      <div className="h-2xl-3xl" />
 
       {/* Main container */}
       <div className="u-container u-grid flex-grow w-full">
         {/* Grid container for left/right split */}
-        <div
-          className="u-grid w-full flex-grow"
-          style={{ gridTemplateColumns: "636fr 304fr", height: "100%" }}
-        >
+        <div className="u-grid w-full flex-grow h-full grid-cols-[636fr_304fr]">
           {/* Left container */}
           <div className="flex flex-col justify-between h-full">
             {/* Top-left text */}
-            <div
-              className="text-left font-ibm"
-              style={{
-                fontSize: "clamp(92px, 5vw, 105px)",
-                lineHeight: "clamp(102px, 5.5vw, 115px)",
-              }}
-            >
+            <div className="text-left font-dm text-[clamp(92px,5vw,105px)]/[clamp(102px,5.5vw,115px)]">
               <div>Virtual</div>
               <div>Patient</div>
               <div>Simulator</div>
             </div>
 
             {/* Bottom-left text */}
-            <div
-              className="text-left font-ibm text-s"
-              style={{ color: "var(--color-grey)" }}
-            >
+            <div className="text-left font-dm text-s text-primary">
               <div>Crafted by many hands,</div>
               <div>across many teams,</div>
               <div>
                 over many years at{" "}
                 <a
-                  className="underline decoration-1 underline-offset-2 hover:text-white"
+                  className="underline decoration-1 underline-offset-2 hover:text-secondary"
                   href="https://wdcc.co.nz/"
                   target="_blank"
                   rel="noreferrer"
@@ -100,28 +83,26 @@ export default function LoginPage() {
           <div className="flex flex-col justify-between h-full">
             {/* Centered diamond button */}
             <div className="flex-grow flex justify-center items-center">
-              <button
-                className="btn vps-diamond"
+              <DiamondLoginButton
+                size={150}
                 onClick={() => {
                   if (!loading && !user) {
                     signInUsingGoogle();
                   }
                 }}
-              >
-                <span>LOG IN</span>
-              </button>
+              />
             </div>
 
             {/* Bottom-aligned text */}
-            <div className="font-ibm text-s text-center">
+            <div className="font-dm text-s text-center">
               Please use your university account.
             </div>
           </div>
         </div>
       </div>
 
       {/* Bottom whitespace */}
-      <div style={{ height: "var(--spacing-3xl-4xl)" }} />
+      <div className="h-3xl-4xl" />
     </div>
   );
 }

frontend/src/features/login/components/DiamondLoginButton.jsx

@@ -0,0 +1,89 @@
+const DiamondPlayButton = ({ size = 100, onClick }) => {
+  // Make size responsive to viewport
+  const responsiveSize = `clamp(80px, ${size * 0.06}vw, ${size}px)`;
+
+  return (
+    <>
+      <style>{`
+        /* Diamond login Button Styles */
+        .diamond-login-button:hover {
+          transform: scale(1.1);
+        }
+
+        .diamond-shape {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--color-base-100);
+          border: 1px solid var(--color-primary);
+          transform: rotate(45deg);
+          transition: all 0.3s ease-out;
+          border-radius: 2px;
+        }
+
+        .diamond-login-button:hover .diamond-shape {
+          box-shadow: 0 0px 32px 8px rgba(var(--color-base-content-rgb), 0.20);
+          border-color: var(--color-base-content);
+          background-color: var(--color-base-content);
+        }
+
+        .diamond-login-button:active .diamond-shape {
+          transform: rotate(45deg) scale(0.95);
+        }
+
+        .diamond-login-button:hover .login-text {
+          color: var(--color-base-100) !important;
+          text-shadow: 0 0 8px rgba(var(--color-base-content-rgb), 0.8);
+        }
+      `}</style>
+      <div
+        className="diamond-login-button"
+        onClick={onClick}
+        style={{
+          width: responsiveSize,
+          height: responsiveSize,
+          position: "relative",
+          cursor: "pointer",
+          userSelect: "none",
+          transition: "all 0.3s ease-out",
+        }}
+      >
+        {/* Diamond Shape */}
+        <div
+          className="diamond-shape"
+          style={{
+            transformOrigin: "center center",
+          }}
+        />
+
+        {/* Play Text */}
+        <div
+          className="login-text"
+          style={{
+            fontSize: `clamp(12px, ${size * 0.012}vw, ${size * 0.2}px)`,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--color-base-content)",
+            fontWeight: "regular",
+            letterSpacing: "0.05em",
+            transition: "all 0.2s ease-out",
+            pointerEvents: "none",
+            fontFamily: "var(--font-dm)",
+          }}
+        >
+          LOG IN
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DiamondPlayButton;