Improved styling of Sign-Up Screen

3 files changed, 69 insertions, 50 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