Merge pull request #76 from singhcoder694/codepeak23/button_UI

Corrected Button UI

Author: Kritika30032002

public/css/styles.css

@@ -106,3 +106,35 @@ html {
     max-width: 600px;
   }
 }
+.button_all_white{
+  width: fit-content;
+  height: fit-content;
+  background-color:white;
+  padding:5px;
+  border-radius: 5px;
+  font-size: 1.5rem;
+  font-weight: 400;
+  color:black;
+  margin:5px;
+  cursor: pointer;
+}
+.button_all_black{
+  width: fit-content;
+  height: fit-content;
+  background-color:black;
+  padding:5px;
+  border-radius: 5px;
+  font-size: 1.5rem;
+  font-weight: 300;
+  color:white;
+  margin:5px;
+  cursor: pointer;
+}
+.button_all_black:hover{
+  text-decoration: none;
+  color:white;
+}
+.button_all_white:hover{
+  text-decoration: none;
+  color:black;
+}

views/home.ejs

@@ -10,8 +10,8 @@ background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, F
       <p class="lead">Don't keep your secrets, share them anonymously!</p>
       <hr />
       <div class="d-flex justify-content-center">
-        <a class="btn btn-light btn-lg col-2 mx-2" href="/register" role="button">Register</a>
-        <a class="btn btn-dark btn-lg col-2 mx-2" href="/login" role="button">Login</a>
+        <a class="button_all_white" href="/register" role="button">Register</a>
+        <a class="button_all_black" href="/login" role="button">Login</a>
       </div>
     </div>
   </div>

views/login.ejs

@@ -3,22 +3,27 @@
 <div class="container mt-5" style="margin-bottom: 197px">
   <h1>Login</h1>
 
-  <div class="row">
-    <div class="col-sm-8">
-      <div class="card">
-        <div class="card-body">
-          <!-- Makes POST request to /login route -->
-          <form action="/login" method="POST">
-            <div class="form-group">
-              <label for="email">Email</label>
-              <input type="email" class="form-control" name="username" />
-            </div>
-            <div class="form-group">
-              <label for="password">Password</label>
-              <input type="password" class="form-control" name="password" />
-            </div>
-            <button type="submit" class="btn btn-dark col-2">Login</button>
-          </form>
+
+  <div class="container mt-5" style="margin-bottom: 197px">
+    <h1>Login</h1>
+
+    <div class="row">
+      <div class="col-sm-8">
+        <div class="card">
+          <div class="card-body">
+            <!-- Makes POST request to /login route -->
+            <form action="/login" method="POST">
+              <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" class="form-control" name="username" />
+              </div>
+              <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" class="form-control" name="password" />
+              </div>
+              <button type="submit" class="button_all_black" role="button">Login</button>
+            </form>
+          </div>
         </div>
       </div>
     </div>

views/secrets.ejs

@@ -14,8 +14,8 @@
 
           <hr>
           <div class="d-flex justify-content-center">
-            <a class="btn btn-light btn-lg col-2 mx-1" href="/logout" role="button">Log Out</a>
-            <a class="btn btn-dark btn-lg col-2 mx-1" href="/submit-secret-form" role="button">Submit a Secret</a>
+            <a class="button_all_white" href="/logout" role="button">Log Out</a>
+            <a class="button_all_black" href="/submit" role="button">Submit a Secret</a>
           </div>
     </div>
   </div>