Merge pull request #28 from NUS-Fintech-Society/TAS-2-login-form-cont…

…ainers-edited

Tas 2 login form containers edited

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.18.0",
     "@tanstack/react-query-devtools": "^5.18.0",
+    "@uidotdev/usehooks": "^2.4.1",
     "date-fns": "^3.3.1",
     "msw": "^2.1.5",
     "react": "^18.2.0",

src/App.tsx

@@ -1,42 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/img/react.svg'
-import viteLogo from '/vite.svg'
-import {useQuery} from "@tanstack/react-query";
-import resolveURL from "./api/fetch.ts";
-import './assets/css/App.css'
+import WebLoginContainer from './components/authentication/WebLoginContainer.tsx';
+import MobileLoginContainer from "./components/authentication/MobileLoginContainer.tsx";
+import { useWindowSize } from "@uidotdev/usehooks";
+import { BREAKPOINTS } from "./components/constants.tsx";
 
 function App() {
-  const [count, setCount] = useState(0)
-
-  const { isPending, data } = useQuery({
-    queryKey: ['resourceData'],
-    queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json())
-  })
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>{isPending ? "Loading..." : data.result}</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+  const size = useWindowSize();
+  return size.width! <= BREAKPOINTS.MD ? <MobileLoginContainer/> : <WebLoginContainer/>
 }
 
 export default App

src/Test.tsx

@@ -0,0 +1,43 @@
+import {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import resolveURL from "./api/fetch.ts";
+import viteLogo from "*.svg";
+import reactLogo from "./assets/img/react.svg";
+import './assets/css/Test.css'
+
+const Test = () => {
+
+  const [count, setCount] = useState(0)
+
+  const { isPending, data } = useQuery({
+    queryKey: ['resourceData'],
+    queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json())
+  })
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>{isPending ? "Loading..." : data.result}</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default Test;

src/assets/css/authentication/MobileLoginContainer.module.css

@@ -0,0 +1,50 @@
+/* MobileLoginContainer.module.css */
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Example to fill the screen */
+    padding: 20px; /* Padding for smaller screens */
+    background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+    border: 1px black solid;
+  }
+
+
+
+/* For small mobile phones */
+@media (max-width: 480px) {
+    /* styles for screens smaller than 600px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        min-width: 320px; /* But not too small */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+      }
+}
+
+/* For large mobile phones */
+@media (min-width: 481px) and (max-width: 768px) {
+    /* styles for screens smaller than 600px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+      }
+}
+
+/* For tablets */
+@media (min-width: 768px) and (max-width: 1024px) {
+    /* styles for screens between 601px and 1024px */
+    .loginForm {
+        width: 100%; /* Full width on mobile */
+        padding: 20px;
+        background-color: white;
+        border-radius: 4px;
+        /* Add more styling as needed */
+    }
+}
+

src/assets/css/authentication/WebLoginContainer.module.css

@@ -0,0 +1,22 @@
+/* WebLoginContainer.module.css */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Example to fill the screen */
+  background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+  border: 1px black solid;
+  }
+
+  /* For desktops */
+@media (min-width: 1025px) {
+  /* styles for screens larger than 1024px */
+}
+  .loginForm {
+    width: 100%; /* Full width on mobile */
+    max-width: 1280px; /* But not too wide */
+    padding: 20px;
+    background-color: white;
+    border-radius: 4px;
+    /* Add more styling as needed */
+  }

src/components/authentication/MobileLoginContainer.tsx

@@ -0,0 +1,13 @@
+import styles from '../../assets/css/authentication/MobileLoginContainer.module.css'; // Import mobile-specific CSS
+
+const MobileLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loginForm}>
+        {/* Your login form goes here */}
+      </div>
+    </div>
+  );
+}
+
+export default MobileLoginContainer;

src/components/authentication/WebLoginContainer.tsx

@@ -0,0 +1,13 @@
+import styles from '../../assets/css/authentication/WebLoginContainer.module.css'; // Import web-specific CSS
+
+const WebLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.loginForm}>
+        {/* Your login form goes here */}
+      </div>
+    </div>
+  );
+}
+
+export default WebLoginContainer;

src/components/constants.tsx

@@ -0,0 +1,8 @@
+export const BREAKPOINTS = {
+  XS: 0,
+  SM: 576,
+  MD: 768,
+  LG: 992,
+  XL: 1200,
+  XXL: 1400
+}

src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import './assets/css/index.css'
+import './assets/css/reset.css'
 
 const queryClient = new QueryClient()
 
@@ -21,7 +21,7 @@ enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
-        <App />
+        <App/>
         <ReactQueryDevtools/>
       </QueryClientProvider>
     </React.StrictMode>,

yarn.lock

@@ -794,6 +794,11 @@
     "@typescript-eslint/types" "6.20.0"
     eslint-visitor-keys "^3.4.1"
 
+"@uidotdev/usehooks@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@uidotdev/usehooks/-/usehooks-2.4.1.tgz#4b733eaeae09a7be143c6c9ca158b56cc1ea75bf"
+  integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"