Updates to Auth form UI

DangaRanga · Apr 16, 2021 · aecbfd7 · aecbfd7 · vercel · Apr 16, 2021
1 parent 786d80d
commit aecbfd7
Show file tree

Hide file tree

Showing 23 changed files with 62 additions and 28 deletions.
diff --git a/src/assets/icons/account-circle-purple.svg b/src/assets/icons/account-circle-purple.svg
diff --git a/src/assets/icons/lock-purple.svg b/src/assets/icons/lock-purple.svg
diff --git a/src/assets/icons/mail-purple.svg b/src/assets/icons/mail-purple.svg
diff --git a/src/components/AuthForm/AuthForm.css b/src/components/AuthForm/AuthForm.css
diff --git a/src/components/AuthForm/AuthForm.scss b/src/components/AuthForm/AuthForm.scss
@@ -35,7 +35,7 @@
     }
 
     & span {
-        padding: 15px 30px;
+        padding: 15px 35px;
         pointer-events: none;
         position: absolute;
         left: 0;
@@ -49,14 +49,14 @@
     & input:focus + span,
     & input:not(:placeholder-shown) + span {
         opacity: 0.7;
-        transform: scale(0.75) translateY(-100%) translateX(-45px);
+        transform: scale(0.75) translateY(-100%) translateX(-50px);
     }
 
     /* For IE Browsers*/
     & input:focus + span,
     & input:not(:-ms-input-placeholder) + span {
         opacity: 0.7;
-        transform: scale(0.75) translateY(-100%) translateX(-45px);
+        transform: scale(0.75) translateY(-100%) translateX(-50px);
     }
 }
 
@@ -98,3 +98,26 @@
     cursor: pointer;
     color: #9377e2;
 }
+
+#firstname,
+#lastname,
+#username,
+#address {
+    background: url('../../assets/icons/account-circle-purple.svg') no-repeat
+        scroll;
+    background-position: left;
+    background-size: 30px;
+}
+
+#password,
+#password-confirm {
+    background: url('../../assets/icons/lock-purple.svg') no-repeat scroll;
+    background-position: left;
+    background-size: 30px;
+}
+
+#email {
+    background: url('../../assets/icons/mail-purple.svg') no-repeat scroll;
+    background-position: left;
+    background-size: 30px;
+}
diff --git a/src/components/AuthForm/AuthForm.tsx b/src/components/AuthForm/AuthForm.tsx
@@ -172,7 +172,7 @@ function AuthForm({ isLogin: isLogin }: AuthFormProps) {
                             className="input-field"
                             type="password"
                             name="password-confirm"
-                            id="password-confim"
+                            id="password-confirm"
                             placeholder=" "
                             onChange={(e) =>
                                 setFormState((prev) => ({

diff --git a/src/components/OrderCollator/OrderList/OrderItem/OrderItem.css b/src/components/OrderCollator/OrderList/OrderItem/OrderItem.css
@@ -3,5 +3,3 @@
 
 .order-detail {
   margin: 20px 0px; }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9yZGVySXRlbS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhLEVBQUU7O0FBRWpCO0VBQ0UsZ0JBQWdCLEVBQUUiLCJmaWxlIjoiT3JkZXJJdGVtLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ub3Qtc2VsZWN0ZWQge1xuICBkaXNwbGF5OiBub25lOyB9XG5cbi5vcmRlci1kZXRhaWwge1xuICBtYXJnaW46IDIwcHggMHB4OyB9XG4iXX0= */
diff --git a/src/views/Menu/Menu.css b/src/views/Menu/Menu.css
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,5 +3,3 @@

		.order-detail {
		margin: 20px 0px; }

		/# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9yZGVySXRlbS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhLEVBQUU7O0FBRWpCO0VBQ0UsZ0JBQWdCLEVBQUUiLCJmaWxlIjoiT3JkZXJJdGVtLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ub3Qtc2VsZWN0ZWQge1xuICBkaXNwbGF5OiBub25lOyB9XG5cbi5vcmRlci1kZXRhaWwge1xuICBtYXJnaW46IDIwcHggMHB4OyB9XG4iXX0= /