Merge pull request #10 from CMP26Projects/SignUp-LogIn-FixUp

Sign up log in fix up

client/.gitignore

@@ -14,6 +14,7 @@ dist-ssr
 .env
 
 *.css.map
+*.css
 
 # Editor directories and files
 .vscode/*

client/src/assets/styles/_vars.scss

@@ -1,5 +1,11 @@
 $--grey-800: #1F2A37;
+$--grey-700: #374151;
+$--grey-600: #4b5563;
 $--grey-300: #D1D5DB;
+$--Teal-900: #014451;
 $--Teal-500: #0694A2;
 $--Red-700: #C81E1E;
-$--Yellow-500: #C27803;
+$--green-700: #046C4E;
+$--Yellow-500: #C27803;
+$--Primary-900: #0e0218;
+$--text-color: #e2efee;

client/src/assets/styles/global/global.scss

@@ -10,12 +10,13 @@
 
 body {
   font-family: var(--font-primary);
+  font-size: var(--font-base-size);
   background-color: var(--bg);
-  color: var(--grey-50);
+  color: var(--text-color);
   overflow-x: hidden;
 }
 
 a {
-  color: var(--grey-50);
+  color: var(--text-color);
   text-decoration: none;
 }

client/src/components/login/logIn.jsx

@@ -0,0 +1,25 @@
+import './logIn.scss'
+import Footer from '../common/Footer'
+
+export default function LogIn() {
+    return (
+        <>
+            <div className="hero">
+                <h2>تسجيل الدخول</h2>
+                <div className="card">
+                    <label className="input-field">
+                        الحساب
+                        <input type="email" />
+                    </label>
+                    <label className="input-field">
+                        الرمز السري
+                        <input type="password" />
+                    </label>
+                    <button>تسجيل الدخول</button>
+                </div>
+                <div className="small no-account">ليس لديك حساب؟</div>
+            </div>
+            <Footer />
+        </>
+    )
+}

client/src/assets/styles/components/logIn.scss → client/src/components/login/logIn.scss

@@ -1,12 +1,3 @@
-$Teal-900: #014451;
-$Teal-500: #0694A2;
-$grey-800: #1f2a37;
-$grey-700: #374151;
-$grey-600: #4b5563;
-$green-700: #046C4E;
-$Primary-900: #0e0218;
-$text-color: #e2efee;
-$font: 'Noto Kufi Arabic';
 
 .hero {
     display: flex;
@@ -21,7 +12,7 @@ $font: 'Noto Kufi Arabic';
 }
 
 .card {
-    background-color: $grey-800;
+    background-color: var(--grey-800);
     border-radius: 1.875rem;
     display: flex;
     width: 16.9375rem;
@@ -41,9 +32,9 @@ $font: 'Noto Kufi Arabic';
         gap: 0rem 9.25rem;
         flex-wrap: wrap;
         input {
-            background: $grey-700;
+            background: var(--grey-700);
             margin-block: 0.3rem;
-            border: 1px solid $grey-600;
+            border: 1px solid var(--grey-600);
             border-radius: 0.25rem;
             width: 12.66319rem;
             height: 1.75rem;
@@ -53,15 +44,13 @@ $font: 'Noto Kufi Arabic';
 }
 
 .no-account {
-    color: $Teal-500;
-    font-family: $font;
+    color: var(--Teal-500);
     margin-bottom: 1rem;
 }
 
 button {
-    color: $text-color;
-    font-family: $font;
-    background: $green-700;
+    //color: var(--text-color);
+    background: var(--green-700);
     border: 0px solid;
     border-radius: 0.3125rem;
     display: flex;