Remove unused styling for register page and fix register page ui

Author: bensohh

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

@@ -15,7 +15,7 @@ type InputFields = {
   password: string;
 };
 
-export default function Home() {
+export default function LoginPage() {
   const [isLoginFailed, setIsLoginFailed] = useState(false);
   const router = useRouter();
   const [messageApi, contextHolder] = message.useMessage();

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

@@ -6,15 +6,6 @@
   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: 8rem auto;

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

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { createUser } from "@/app/services/user";
 import { useRouter } from "next/navigation";
 import NoAuthHeader from "@/components/NoAuthHeader/NoAuthHeader";
+import { UserOutlined } from "@ant-design/icons";
 
 type InputFields = {
   username: string;
@@ -15,7 +16,7 @@ type InputFields = {
   confirmPassword: string;
 };
 
-export default function Home() {
+export default function RegisterPage() {
   const [isRegistrationFailed, setIsRegistrationFailed] = useState(false);
   const router = useRouter();
   const [messageApi, contextHolder] = message.useMessage();
@@ -41,10 +42,10 @@ export default function Home() {
   return (
     <>
       {contextHolder}
-      <Layout>
+      <Layout className="layout">
         <NoAuthHeader />
-        <Content>
-          <div className="login-card">
+        <Content className="content">
+          <div className="register-card">
             <h1>Register</h1>
 
             <Form
@@ -128,14 +129,23 @@ export default function Home() {
               </div>
 
               <Form.Item>
-                <Button type="primary" htmlType="submit">
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  className="register-button"
+                >
                   Register
                 </Button>
               </Form.Item>
             </Form>
-            <p>
-              Let me <Link href="/login">login</Link>
-            </p>
+            <div>
+              <p className="login-text">
+                Existing user?{" "}
+                <Link href="/login" className="login-account-link">
+                  Login Here
+                </Link>
+              </p>
+            </div>
           </div>
         </Content>
       </Layout>

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

@@ -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 {
+.register-card {
   /* Rectangle 6698 */
-  margin: 4rem auto;
-  padding: 2rem 4rem;  
+  margin: 6rem 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;
+.register-button {
+  width: 100%;
 }
 
-.filter-button {
-  margin-left: 8px;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) !important;
+.login-text {
+  color: #bcb8b1;
+  margin: auto;
+  text-align: center;
 }
 
-.clear-button {
-  width: 100%;
+.login-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;
+.login-account-link:hover {
+  color: #463f3a;
 }