💅 fix: login and signup styling

CMP26Projects · Dec 23, 2023 · 75456df · 75456df
1 parent 281c9f1
commit 75456df
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 34 deletions.
diff --git a/client/src/assets/styles/components/Button.scss b/client/src/assets/styles/components/Button.scss
@@ -21,5 +21,16 @@
     color: var(--grey-50);
   }
 
+  &--medium {
+    a {
+    font-size: 1rem;
+    }
+  }
+
+  &--success {
+    background-color: var(--green-400);
+    color: var(--grey-900);
+  }
+
   // TODO: Add more button styles and maybe sizes
 }
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
@@ -1,6 +1,4 @@
-import Nav from "../common/nav";
 import Button from "../common/Button";
-import Footer from "../common/Footer";
 
 import FancyBlobs from "./FancyBlobs";
 

diff --git a/client/src/components/login/logIn.jsx b/client/src/components/login/logIn.jsx
@@ -1,3 +1,4 @@
+import Button from "../common/Button";
 import "./logIn.scss";
 
 export default function LogIn() {
@@ -14,7 +15,9 @@ export default function LogIn() {
             الرمز السري
             <input type="password" />
           </label>
-          <button>تسجيل الدخول</button>
+          <Button className="Button--medium Button--success" linkTo="/signUp">
+            تسجيل الدخول
+          </Button>
         </div>
         <div className="small no-account">ليس لديك حساب؟</div>
       </div>

diff --git a/client/src/components/login/logIn.scss b/client/src/components/login/logIn.scss
@@ -47,18 +47,4 @@
     color: var(--Teal-500);
     margin-bottom: 1rem;
   }
-
-  button {
-    //color: var(--text-color);
-    background: var(--green-700);
-    border: 0px solid;
-    border-radius: 0.3125rem;
-    display: flex;
-    width: 7.25rem;
-    height: 1.875rem;
-    padding: 0.8125rem 0.625rem;
-    justify-content: center;
-    align-items: center;
-    gap: 1.25rem;
-  }
 }
diff --git a/client/src/components/signup/signUp.jsx b/client/src/components/signup/signUp.jsx
@@ -1,3 +1,4 @@
+import Button from "../common/Button";
 import "./signUp.scss";
 
 export default function SignUp() {
@@ -56,7 +57,7 @@ export default function SignUp() {
               </div>
             </label>
           </div>
-          <button>تسجيل</button>
+          <Button className="Button--success Button-medium">تسجيل</Button>
         </div>
       </div>
     </div>

diff --git a/client/src/components/signup/signUp.scss b/client/src/components/signup/signUp.scss
@@ -1,8 +1,6 @@
 .signUp {
   .hero {
     display: flex;
-    width: 22.5rem;
-    height: 93.375rem;
     flex-direction: column;
     align-items: center;
     margin: auto;
@@ -72,18 +70,4 @@
       }
     }
   }
-
-  button {
-    //color: $text-color;
-    background: var(--Primary-900);
-    border: 0px solid;
-    border-radius: 0.3125rem;
-    display: flex;
-    width: 12.5rem;
-    height: 3.125rem;
-    padding: 0.8125rem 0.6875rem 0.8125rem 0.625rem;
-    justify-content: center;
-    align-items: center;
-    gap: 2.5rem;
-  }
 }