Improved styling of Sign-Up Screen

4 files changed, 130 insertions, 98 deletions

diff --git a/res/client/css/partials/user-signup.scss b/res/client/css/partials/user-signup.scss
index dc7bd2fb..5eeda044 100644
--- a/res/client/css/partials/user-signup.scss
+++ b/res/client/css/partials/user-signup.scss
@@ -1,4 +1,4 @@
-#user_signup_form_panel {
+/* #user_signup_form_panel {
 	width: 550px;
 	text-align: center;
 	margin-left: auto;
@@ -8,27 +8,26 @@
 	margin-top: 80px;
 	background: white;
 	box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3);
-}
+} */
 
-#signup_form___submit_button {
+/* #signup_form___submit_button {
 	background-color: #ee3654;
 	border-radius: 3px;
 	color: #fff;
 	cursor: pointer;
 	float: right;
-	font-weight: bold;
+	font-weight: bold;s
 	margin: 20px;
 	padding: 12px 20px;
 	text-align: center;
 	width: 140px;
-}
+} */
 
 .signup_form__row {
-	overflow: auto;
 	width: 100%;
 }
 
-.signup_form__field {
+/* .signup_form__field {
 	border-radius: 3px;
 	border: 1px solid #4B7CBD;
 	float: left;
@@ -62,6 +61,15 @@
 
 #signup_form___submit_button_row {
 	overflow: auto;
+}  */
+
+.input-username {
+	background-image: url(../img/user-icon.png);
+	background-position-x: 21px;
+}
+
+.signup-button {
+	width: 92%;
 }
 
 #signup_form___submit_button:hover {
diff --git a/res/client/css/style.css b/res/client/css/style.css
index 09284b13..52263b99 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -885,62 +885,73 @@ p {
   top: -5px;
   width: 200px; }
 
-#user_signup_form_panel {
-  width: 550px;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-  padding: 20px 30px;
-  margin-top: 80px;
-  background: white;
-  box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3); }
-
-#signup_form___submit_button {
-  background-color: #ee3654;
-  border-radius: 3px;
-  color: #fff;
-  cursor: pointer;
-  float: right;
-  font-weight: bold;
-  margin: 20px;
-  padding: 12px 20px;
-  text-align: center;
-  width: 140px; }
-
+/* #user_signup_form_panel {
+	width: 550px;
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+	display: block;
+	padding: 20px 30px;
+	margin-top: 80px;
+	background: white;
+	box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3);
+} */
+/* #signup_form___submit_button {
+	background-color: #ee3654;
+	border-radius: 3px;
+	color: #fff;
+	cursor: pointer;
+	float: right;
+	font-weight: bold;s
+	margin: 20px;
+	padding: 12px 20px;
+	text-align: center;
+	width: 140px;
+} */
 .signup_form__row {
-  overflow: auto;
   width: 100%; }
 
-.signup_form__field {
-  border-radius: 3px;
-  border: 1px solid #4B7CBD;
-  float: left;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin: 5px; }
+/* .signup_form__field {
+	border-radius: 3px;
+	border: 1px solid #4B7CBD;
+	float: left;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin: 5px;
+}
 
 .signup_form__row_sharing_field {
-  display: inline-block; }
+	display: inline-block;
+}
 
 .signup_form__field input {
-  background-color: inherit;
-  border: none; }
+	background-color: inherit;
+	border: none;
+}
 
 .signup_form__field input:focus {
-  outline: none; }
+	outline: none;
+}
 
 #signup_form__title {
-  color: #ee3654;
-  margin-bottom: 30px;
-  background: url(../img/logo-red.png);
-  background-repeat: no-repeat;
-  background-position: 140px 2px; }
+	color: #ee3654;
+	margin-bottom: 30px;
+	background: url(../img/logo-red.png);
+	background-repeat: no-repeat;
+	background-position: 140px 2px;
+}
 
 #signup_form___submit_button_row {
-  overflow: auto; }
+	overflow: auto;
+}  */
+.input-username {
+  background-image: url(../img/user-icon.png);
+  background-position-x: 21px; }
+
+.signup-button {
+  width: 92%; }
 
 #signup_form___submit_button:hover {
   alpha: 1.0; }
diff --git a/res/client/img/user-icon.png b/res/client/img/user-icon.png
new file mode 100644
index 00000000..ba97ba1d
--- /dev/null
+++ b/res/client/img/user-icon.png
diff --git a/res/templates/user_signup.html b/res/templates/user_signup.html
index 26f3daf4..a15cf046 100644
--- a/res/templates/user_signup.html
+++ b/res/templates/user_signup.html
@@ -16,8 +16,13 @@ body {
 }
 </style>
 {% endblock %} {% block content %}
-<div id="user_signup_form_panel">
-    <h1 id="signup_form__title">Sign up</h1>
+<div id="user_signup_form_panel" class="welcome-box">
+    <div class="login-view-section">
+        <div class="login-rhizi-logo"></div>
+    </div>
+    <div class="login-view-section">
+        <h1 class="login-header">Sign up</h1>
+    </div>
     {% if 'activation_success' == state %}
     <div>
         <p>
@@ -31,58 +36,66 @@ body {
         <p>Activation failure,<br>please try again later.</p>
     </div>
     {% else %}
-    <div
-        class="signup_form__row"
-        id="err_msg_row"></div>
-    <div class="signup_form__row">
-        <div class="signup_form__field signup_form__row_sharing_field">
-            <input
-                id="signup_form___first_name"
-                placeholder="First name">
+    <div class="login-view-section login-form">
+        <div
+            class="signup_form__row"
+            id="err_msg_row"></div>
+        <div class="signup_form__row">
+            <div class="signup_form__field signup_form__row_sharing_field">
+                <input
+                    id="signup_form___first_name"
+                    placeholder="First name"
+                    class="login-input input-username">
+            </div>
+            <div class="signup_form__field signup_form__row_sharing_field">
+                <input
+                    id="signup_form___last_name"
+                    placeholder="Last name"
+                    class="login-input input-username">
+            </div>
         </div>
-        <div class="signup_form__field signup_form__row_sharing_field">
-            <input
-                id="signup_form___last_name"
-                placeholder="Last name">
+        <div class="signup_form__row">
+            <div class="signup_form__field">
+                <input
+                    id="signup_form___rz_username"
+                    placeholder="Rhizi username"
+                    class="login-input input-username">
+            </div>
         </div>
-    </div>
-    <div class="signup_form__row">
-        <div class="signup_form__field">
-            <input
-                id="signup_form___rz_username"
-                placeholder="Rhizi username">
+        <div class="signup_form__row">
+            <div class="signup_form__field">
+                <input
+                    id="signup_form___email_address"
+                    type="email"
+                    placeholder="Email"
+                    class="login-input">
+            </div>
         </div>
-    </div>
-    <div class="signup_form__row">
-        <div class="signup_form__field">
-            <input
-                id="signup_form___email_address"
-                type="email"
-                placeholder="Email">
+        <div class="signup_form__row">
+            <div class="signup_form__field">
+                <input
+                    id="signup_form___password_first"
+                    type="password"
+                    placeholder="password"
+                    class="login-input">
+            </div>
         </div>
-    </div>
-    <div class="signup_form__row">
-        <div class="signup_form__field">
-            <input
-                id="signup_form___password_first"
-                type="password"
-                placeholder="password">
+        <div class="signup_form__row">
+            <div class="signup_form__field">
+                <input
+                    id="signup_form___password_second"
+                    type="password"
+                    placeholder="Re-type password"
+                    class="login-input">
+            </div>
         </div>
-    </div>
-    <div class="signup_form__row">
-        <div class="signup_form__field">
-            <input
-                id="signup_form___password_second"
-                type="password"
-                placeholder="password repeat">
+        <div id="signup_form___submit_button_row">
+            <div
+                id="signup_form___submit_button" class="login-form_button signup-button"
+                onclick="signup_form___submit();">Sign Up</div>
         </div>
+        <div id="signup_form__ajax_response"></div>
+        {% endif %}
     </div>
-    <div id="signup_form___submit_button_row">
-        <div
-            id="signup_form___submit_button"
-            onclick="signup_form___submit();">Submit</div>
-    </div>
-    <div id="signup_form__ajax_response"></div>
-    {% endif %}
 </div>
 {% endblock %}