Implemented Logout and changed the styling of model

index.php

@@ -242,7 +242,7 @@
               </div>
 
               <div class="modal-footer">
-                Does't have an account? <a href="#" data-bs-target="#registerModal" data-bs-toggle="modal" data-bs-dismiss="modal">Register now!</a>
+                <div>Does't have an account? <a href="#" data-bs-target="#registerModal" data-bs-toggle="modal" data-bs-dismiss="modal">Register now!</a></div>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 <button type="submit" class="btn btn-primary">Log In</button>
               </div>
@@ -286,7 +286,7 @@
               </div>
 
               <div class="modal-footer">
-                Already have an account? <a href="#" data-bs-target="#logInModal" data-bs-toggle="modal" data-bs-dismiss="modal">LogIn here!</a>
+                Already have an account? <a href="#" data-bs-target="#logInModal" data-bs-toggle="modal" data-bs-dismiss="modal">Log In here!</a>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 <button type="submit" class="btn btn-primary">Register</button>
               </div>

php/logout.php

@@ -0,0 +1,8 @@
+<?php
+    session_start();
+    session_unset();
+    session_destroy();
+    header("Location: ../index.php");
+
+    exit();
+?>

shopping/shopping_headerNav.php

@@ -1,7 +1,9 @@
 <div class="shopping_headerNav">
     <div class="col-xl-12" id="shopping_headerImg">
         <span id="span-shopping-username" > Username <?php echo $_SESSION['username']; ?></span>
-        <a class="btn btn-lg my-btn" type="button" id="btn-shopping-logout" href="../index.php"> LOGOUT</a>
+        <form action="../php/logout.php" method="post">
+            <button class="btn btn-lg my-btn" type="submit" id="btn-shopping-logout"> LOGOUT</button>
+        </form>
         <img id="headerImg" src="../img/headerImg.jpg">
     </div>
 </div>

style/modules/_modal.sass

@@ -1,4 +1,7 @@
 #logInModal, #registerModal
+    .mb-3
+        width: 70%
+        margin: auto
     .modal-body
         .myrecaptcha
             div
@@ -7,7 +10,18 @@
             color: OliveDrab
             text-align: center
     .modal-footer
+        div
+            margin: auto
         a
             text-decoration: none
             margin-left: 5px
             margin-right: 10px
+
+@media (max-width: 483px)
+    #logInModal, #registerModal
+        .mb-3
+            width: 100%
+        .modal-footer
+            text-align: center
+            button
+                width: 100%;

style/style.css

@@ -153,6 +153,11 @@ video {
   display: block;
 }
 
+#logInModal .mb-3, #registerModal .mb-3 {
+  width: 70%;
+  margin: auto;
+}
+
 #logInModal .modal-body .myrecaptcha div, #registerModal .modal-body .myrecaptcha div {
   margin: auto;
 }
@@ -162,12 +167,28 @@ video {
   text-align: center;
 }
 
+#logInModal .modal-footer div, #registerModal .modal-footer div {
+  margin: auto;
+}
+
 #logInModal .modal-footer a, #registerModal .modal-footer a {
   text-decoration: none;
   margin-left: 5px;
   margin-right: 10px;
 }
 
+@media (max-width: 483px) {
+  #logInModal .mb-3, #registerModal .mb-3 {
+    width: 100%;
+  }
+  #logInModal .modal-footer, #registerModal .modal-footer {
+    text-align: center;
+  }
+  #logInModal .modal-footer button, #registerModal .modal-footer button {
+    width: 100%;
+  }
+}
+
 .video-container-bg {
   position: relative;
   height: 100%;