signup page complete responsive

assets/card.css

@@ -82,5 +82,20 @@
 }
 .c-content a:hover {
   color: #000;
-  background-color: rgb(80, 78, 78, 0.15);
+  background-color: #1c4f6c;
 }
+
+@media screen and (max-width:550px){
+  .c-content h2{
+    font-size: 3.2em;
+  }
+  .c-content h3{
+    color: #1c4f6c;
+  }
+  .c-box:hover .c-content h2 {
+    top: -50px;
+  }
+  .c-box{
+    padding-top: 30px;
+  }
+}

assets/styles.css

@@ -10,6 +10,7 @@ body {
 
 .login-card {
   position: absolute;
+  margin-top: 20px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -27,7 +28,7 @@ body {
 }
 
 .login-card img {
-  height: 260px;
+  height: 50%;
 }
 
 .login-card a {
@@ -42,11 +43,58 @@ body {
 
 .login-card h4 {
   color: var(--white-bg-text);
+  text-align: center;
   font-size: 18px;
   padding-bottom: 5px;
   border-bottom: 1px solid #ccc;
 }
 
+/* responsive */
+
+@media screen and (max-width:550px){
+  .login-card{
+    max-width: 90vw;
+    max-height: 60vh;
+  }
+  .login-card img {
+    width: 60vmin;
+  }
+  .sgup-g{
+    display: none;
+  }
+  .brand-logo{
+    top: 50%;
+  }
+  .logout{
+    position: absolute;
+    right: 6%;
+    margin-top: 15px;
+  }
+  .left{
+    position: absolute;
+    left: 30px;
+  }
+  .left img{
+    height: 40px;
+    width: 65px;
+  }
+  .jumbotron h3{
+    font-size: 32px;
+  }
+}
+@media screen and (max-height:400px){
+  body{
+    height: 70vw;
+  }
+  .login-card{
+    position: absolute;
+    top: 70%;
+    transform: translate(-50% , -50%);
+    max-width: 90vw;
+    min-height: 45vw;
+  }
+}
+
 /* sidenave */
 nav {
   background: white;
@@ -315,7 +363,6 @@ nav ul a {
   .c-box{
     margin-bottom: 30px;
     border: .5px solid #333;
-
   }
   .c-box::before{
     content: '';
@@ -329,9 +376,10 @@ nav ul a {
     z-index: -1;
   }
   .c-box:nth-child(1)::before{
-    background-image: linear-gradient(315deg , #474243 , #2b2725);
+    background-image: linear-gradient(315deg , #1c4f6c , #1c4f6c);
   }
   .c-box:nth-child(3)::before{
-    background-image: linear-gradient(315deg , #474243 , #2b2725);
+    /* background-image: linear-gradient(315deg , #474243 , #2b2725); */
+    background-image: linear-gradient(315deg , #1c4f6c , #1c4f6c);
   }
 }

views/editleave.ejs

@@ -15,7 +15,7 @@
             </div>
 
             <div class="form-group">
-                <label>Name:</label><br>
+                <label>Email:</label><br>
                 <input type="text" name="leave[Email]" value="<%=leave.Email%>" readonly required>
             </div>
 
@@ -29,10 +29,15 @@
                 <input type="date" name="leave[Return]" value="<%=leave.Return%>" required>
             </div>
 
-            <div class="form group">
-                <label>Reason</label><br>
-                <input type="text" name="leave[Reason]" placeholder="Reason" value="<%=leave.Reason%>"required>
-            </div>
+            <div class="inp-animation-container">
+                <input
+                  type="text"
+                  name="leave[Reason]"
+                required/>
+                <div class="inp-label"> 
+                  <span> Reason </span>
+                </div>
+              </div>
 
             <div class="form-group">
                 <br>

views/leavehistory.ejs

@@ -36,7 +36,7 @@
         <a href="/user/dashboard/delete/leave/<%=leave._id%>"
           ><button class="btn red darken-1 ">Delete</button></a
         >
-        <button class="btn grey darken-1 ">Waiting</button>
+        <button class="btn grey darken-1 " style="margin-top: 5px;">Waiting</button>
         <%}else if(leave.Approve==true){%>
         <button class="btn light-green darken-2 ">Approved</button>
         <%}else if(leave.Approve==false){%>

views/partials/header.ejs

@@ -56,7 +56,11 @@
 
         <ul id="nav-mobile" class="view-on-med-and-down">
         </li>
-        <li><a href="/auth/logout">LogOut</a></li>
+        <%if(!currentUser){%>
+          <li><a class="sgup-g" href="/auth/google">Sign Up/Login with G+</a></li>
+          <%}else{%>
+        <li><a class="logout" href="/auth/logout">LogOut</a></li>
+        <%}%>
         </ul>
 
       </div>

views/partials/sidenav.ejs

@@ -35,6 +35,7 @@
       ><i class="material-icons">schedule</i> Leave Applications</a
     >
   </li>
+  <li><a href="/auth/logout"><i class="material-icons">person_outline</i> LogOut</a></li>
 </ul> 
 <a href="#" data-target="slide-out" class="sidenav-trigger btn-floating"
   ><i class="material-icons slide-out-icon">chevron_right</i></a