Merge pull request #36 from CS3219-AY2425S1/ben/improve-frontend-ui

Enhancement: New home page and Fix Ui

Author: tituschewxj

apps/frontend/.dockerignore

@@ -4,5 +4,4 @@ node_modules
 .gitignore
 .next
 out
-public
 README.md

apps/frontend/Dockerfile

@@ -41,7 +41,7 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 # Include this when we want to include images in the future
-# COPY --from=builder /app/public ./public 
+COPY --from=builder /app/public ./public 
 
 # Set the correct permission for prerender cache
 RUN mkdir .next

apps/frontend/public/assets/coding.gif

@@ -8,13 +8,14 @@ import Link from "next/link";
 import { loginUser } from "@/app/services/user";
 import { setToken } from "@/app/services/login-store";
 import { useRouter } from "next/navigation";
+import NoAuthHeader from "@/components/NoAuthHeader/NoAuthHeader";
 
 type InputFields = {
   email: string;
   password: string;
 };
 
-export default function Home() {
+export default function LoginPage() {
   const [isLoginFailed, setIsLoginFailed] = useState(false);
   const router = useRouter();
   const [messageApi, contextHolder] = message.useMessage();
@@ -42,9 +43,9 @@ export default function Home() {
   return (
     <>
       {contextHolder}
-      <Layout>
-        <Header selectedKey={undefined} />
-        <Content>
+      <Layout className="layout">
+        <NoAuthHeader />
+        <Content className="content">
           <div className="login-card">
             <h1>Login</h1>
             <Form name="basic" onFinish={submitDetails}>
@@ -80,14 +81,23 @@ export default function Home() {
               </div>
 
               <Form.Item>
-                <Button type="primary" htmlType="submit">
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  className="login-button"
+                >
                   Login
                 </Button>
               </Form.Item>
             </Form>
-            <p>
-              Let me <Link href="/register">register</Link>
-            </p>
+            <div>
+              <p className="registration-text">
+                Not registered yet?{" "}
+                <Link href="/register" className="create-account-link">
+                  Create an account
+                </Link>
+              </p>
+            </div>
           </div>
         </Content>
       </Layout>

apps/frontend/src/app/login/page.tsx

@@ -6,23 +6,14 @@
   background: white;
 }
 
-.content-card {
-  margin: 4rem 8rem;
-  padding: 2rem 4rem;
-  background-color: white;
-  min-height: 100vh;
-  border-radius: 30px;
-  box-shadow: 0px 10px 60px rgba(226, 236, 249, 0.5);
-}
-
 .login-card {
   /* Rectangle 6698 */
-  margin: 4rem auto;
-  padding: 2rem 4rem;  
+  margin: 8rem auto;
+  padding: 2rem 3rem;
   box-sizing: border-box;
-  max-width: 30rem;
-  background: #FFFFFF;
-  border: 2px solid #8A817C;
+  max-width: 26rem;
+  background: #ffffff;
+  border: 2px solid #8a817c;
   box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 15px;
 }
@@ -32,50 +23,20 @@
   font-size: 13px;
 }
 
-.content-row-1 {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.content-title {
-  //   font-family: "Poppins";
-  //   font-style: normal;
-  font-weight: 600;
-  font-size: 22px;
-  line-height: 33px;
-  letter-spacing: -0.01em;
-  color: #000000;
-}
-
-.content-filter {
-  margin: 1.5rem 0;
-}
-
-.edit-button {
-  margin-right: 0.5rem;
+.login-button {
+  width: 100%;
 }
 
-.filter-button {
-  margin-left: 8px;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) !important;
+.registration-text {
+  color: #bcb8b1;
+  margin: auto;
+  text-align: center;
 }
 
-.clear-button {
-  width: 100%;
+.create-account-link {
+  color: #8a817c;
 }
 
-.categories-multi-select,
-.difficulty-select,
-.order-select {
-  width: 100%;
-}
-
-.create-title,
-.new-problem-categories-multi-select,
-.new-problem-difficulty-select,
-.create-description,
-.create-problem-id {
-  width: 100%;
-  margin: 5px;
+.create-account-link:hover {
+  color: #463f3a;
 }

apps/frontend/src/app/login/styles.scss

@@ -0,0 +1,7 @@
+"use client";
+
+const MatchingPage = () => {
+  return <div>Hello World! Replace with Matching Page</div>;
+};
+
+export default MatchingPage;