Remove unused styling in login page and update noauth header styling

Author: bensohh

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

@@ -43,9 +43,9 @@ export default function Home() {
   return (
     <>
       {contextHolder}
-      <Layout>
+      <Layout className="layout">
         <NoAuthHeader />
-        <Content>
+        <Content className="content">
           <div className="login-card">
             <h1>Login</h1>
             <Form name="basic" onFinish={submitDetails}>
@@ -81,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/styles.scss

@@ -17,12 +17,12 @@
 
 .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 +32,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;
-}
-
-.filter-button {
-  margin-left: 8px;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) !important;
+.login-button {
+  width: 100%;
 }
 
-.clear-button {
-  width: 100%;
+.registration-text {
+  color: #bcb8b1;
+  margin: auto;
+  text-align: center;
 }
 
-.categories-multi-select,
-.difficulty-select,
-.order-select {
-  width: 100%;
+.create-account-link {
+  color: #8a817c;
 }
 
-.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/components/NoAuthHeader/NoAuthHeader.tsx

@@ -21,7 +21,7 @@ const NoAuthHeader = (): JSX.Element => {
 
   return (
     // Header Component
-    <AntdHeader className="header">
+    <AntdHeader className="noauth-header">
       <div className="logo-container">
         <div className="logo1">Peer</div>
         <div className="logo2">Prep</div>

apps/frontend/src/components/NoAuthHeader/styles.scss

@@ -0,0 +1,50 @@
+$primary-color: #e0afa0;
+$secondary-color: #463f3a;
+
+.noauth-header {
+  display: flex;
+  align-items: center;
+  background: white !important;
+  border-bottom: 1px solid #f3f3f3;
+  padding-right: 20px !important;
+}
+
+.logo {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.logo1 {
+  @extend .logo;
+  color: $primary-color;
+}
+
+.logo2 {
+  @extend .logo;
+  color: $secondary-color;
+}
+
+.logo-container {
+  display: flex;
+  flex-direction: row;
+  padding: 0 16px 0 0;
+}
+
+.profile-menu-items {
+  width: 6rem;
+  padding: 2px 8px;
+}
+
+.profile-menu-icon {
+  margin-right: 8px;
+}
+
+.dropdown {
+  padding-right: 10px !important;
+}