Improved UI for signin and signup

4 files changed, 151 insertions, 34 deletions

diff --git a/assets/css/creative.css b/assets/css/creative.css
index 17ee257..a4c3ab8 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -386,3 +386,4 @@ header .header-content .header-content-inner hr {
 .follow-exam-btn{
     margin: 15px;
 }
+
diff --git a/assets/css/style.css b/assets/css/style.css
index e8a88b7..f688524 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -522,6 +522,8 @@ hr {
 .slate .container {
     width: 100%;
     padding: 15px;
+    padding-left: 25px;
+    padding-right: 25px;
 }
 
 .signin, .signup {
@@ -530,3 +532,79 @@ hr {
     text-align: center;
 }
 
+.signin-insite, .signup-btn{
+    color: #fff;
+    background-color: rgba(80,80,80, 0.5) !important;
+    border-color: rgba(80,80,80, 0.5) !important;
+}
+
+.signin-insite:hover, .signup-btn:hover {
+    color: #fff;
+    background-color: rgba(80,80,80, 0.2) !important;
+    border-color: rgba(80,80,80, 0.2) !important;
+}
+
+.signin-fb{
+    color: #fff;
+    background-color: #3b5998 !important;
+    border-color: #3b5998 !important;
+}
+
+.signin-fb:hover {
+    color: #fff;
+    background-color: #8b9dc3 !important;
+    border-color: #8b9dc3 !important;
+}
+
+
+
+.input-username, .input-password, .input-group-addon{
+    font-size: 1em !important;
+    border-radius: 0 !important;
+}
+
+.input-lname, .input-email, .input-username-signin, .input-new-password,
+.input-confirm, .input-phone, .input-univ{
+    font-size: 1em !important;
+    border-radius: 0 !important;
+    border-bottom: 0 !important;
+    box-shadow: none !important;
+}
+
+.input-fname{
+    font-size: 1em !important;
+    border-radius: 0 !important;
+    border-top-right-radius: 8px !important;
+    border-bottom: 0 !important;
+    box-shadow: none !important;
+}
+
+.input-dept {
+    font-size: 1em !important;
+    border-radius: 0 !important;
+    border-bottom-right-radius: 8px !important;
+    box-shadow: none !important;
+}
+.input-username {
+    font-size: 1em !important;
+    border-top-right-radius: 8px !important;
+}
+
+.addon-username, .addon-fname {
+    border-top-left-radius: 8px !important;
+}
+
+.input-password, .input-dept {
+    border-bottom-right-radius: 8px !important;
+}
+
+.addon-password, .addon-dept {
+    border-bottom-left-radius: 8px !important;
+}
+
+
+
+.input-group-addon {
+    min-width:50px;
+    text-align:left;
+}
\ No newline at end of file
diff --git a/views/signin.hbs b/views/signin.hbs
index dc0bb8a..e985c13 100644
--- a/views/signin.hbs
+++ b/views/signin.hbs
@@ -26,20 +26,28 @@
 
                     <h3 class="signin"><hr><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In<hr></h3>
                     <form action="/user/signin" method="post">
-                        <div class="form-group">
-                            <input type="text" class="form-control" placeholder="New Username" name="usrname">
-                        </div>
-                        <div class="form-group">
-                            <input type="password" class="form-control" placeholder="New Password" name="password">
+                        <div class="form-group signin-group">
+                            <div class="input-group input-group-lg">
+                                <div class="input-group-addon addon-username">
+                                    <i class="fa fa-envelope" aria-hidden="true"></i>
+                                </div>
+                                <input type="text" class="form-control input-username" placeholder="email" name="usrname">
+                            </div>
+                            <div class="input-group input-group-lg">
+                                <div class="input-group-addon addon-password">
+                                    <i class="fa fa-key" aria-hidden="true"></i>
+                                </div>
+                                <input type="password" class="form-control input-lg input-password" placeholder="password" name="password">
+                            </div>
                         </div>
                         <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                         <button class="signin-btn signin-insite btn-lg btn btn-primary btn-block"><span>Sign In</span></button>
                     </form>
 
 
-                    <h3 class="signin signin-or">or</h3>
-                    <a href="/auth/facebook" class=" signin-btn btn-lg btn btn-primary btn-block"><span>
-                        <span class="fa fa-facebook"> </span>   Facebook connect</span></a>
+                    <h4 class="signin signin-or">or</h4>
+                    <a href="/auth/facebook" class="signin-fb signin-btn btn-lg btn btn-primary btn-block"><span>
+                        <span class="fa fa-facebook"> </span>   Sign in with Facebook</span></a>
 
                     </div>
                 </div>
diff --git a/views/signup.hbs b/views/signup.hbs
index b9cbb86..09b6c20 100644
--- a/views/signup.hbs
+++ b/views/signup.hbs
@@ -30,38 +30,68 @@
 
         <h3 class="signup"><hr><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up<hr></h3>
         <form action="/user/signup" method="post">
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="First Name" name="fname">
-            </div>
+            <div class="form-group signup-group ">
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon addon-fname">
+                        <i class="fa fa-male" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-fname" placeholder="first name" name="fname">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-cube" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-lname" placeholder="last name" name="lname">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-at" aria-hidden="true"></i>
+                    </div>
+                    <input type="email" class="form-control input-email" placeholder="email" name="email">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-user" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-username-signin" placeholder="username" name="usrname">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                    </div>
+                    <input type="password" class="form-control input-new-password" placeholder="password" name="password">
+                </div>
 
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="Last Name" name="lname">
-            </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-unlock-alt" aria-hidden="true"></i>
+                    </div>
+                    <input type="password" class="form-control input-confirm" placeholder="confirm password" name="confirmPassword">
+                </div>
 
-            <div class="form-group">
-                <input type="email" class="form-control" placeholder="Email" name="email">
-            </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-mobile" aria-hidden="true"></i>
+                    </div>
+                    <input type="number" class="form-control input-phone" placeholder="phone number (optional)" name="phone_num">
+                </div>
 
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="New Username" name="usrname">
-            </div>
-            <div class="form-group">
-                <input type="password" class="form-control" placeholder="New Password" name="password">
-            </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-university" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-univ" placeholder="university (optional)" name="univ">
+                </div>
 
-            <div class="form-group">
-                <input type="password" class="form-control" placeholder="Confirm Password" name="confirmPassword">
-            </div>
-            <div class="form-group">
-                <input type="number" class="form-control" placeholder="Phone Number (optional)" name="phone_num">
-            </div>
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="University (optional)" name="univ">
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon addon-dept">
+                        <i class="fa fa-trophy" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-dept" placeholder="department (optional)" name="dept">
+                </div>
             </div>
 
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="Department (optional)" name="dept">
-            </div>
+
             <input type="hidden" name="_csrf" value="{{ csrfToken }}">
             <button class="signup-btn btn-lg btn btn-primary btn-block">Sign Up</button>
         </form>