updated code for login button and formatted the way login model will look

_includes/header.html

@@ -1,23 +1,11 @@
 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+<!-- <link rel="stylesheet" href="{{ " /css/main.css" | prepend: site.baseurl }}"> -->
 <style>
   .user-icon {
     display: inline-block;
     position: relative;
   }
 
-  /* Style for the modal */
-  .modal {
-    display: none;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 20px;
-    background-color: #FFC907;
-    border: 2px solid #ccc;
-    z-index: 2000;
-  }
-
   .dropdown {
     display: inline-block;
     position: relative;
@@ -59,6 +47,83 @@
     grid-template-columns: initial;
     /* Or any other appropriate value */
   }
+
+  /* Container for buttons */
+  .button-container {
+    display: flex;
+    justify-content: flex-end;
+    /* Adjust as needed */
+  }
+
+  /* Style for modal buttons */
+  /* Container for buttons */
+  .button-container {
+    display: flex;
+    justify-content: flex-end;
+    /* Adjust as needed */
+    margin-top: 20px;
+    /* Adjust as needed for spacing between content and buttons */
+  }
+
+  /* Style for the modal */
+  #navBar.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #emailCode,
+  #emailCodeVerify {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .modal {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background-color: white;
+    border: 2px solid #ccc;
+    z-index: 2000;
+    width: 60%;
+    height: 20%;
+    text-align: center;
+    font-family: Reforma2018, serif;
+    font-size: 1em;
+  }
+
+  /* Additional styling for buttons */
+  .btn {
+    position: relative;
+    border-radius: 4px;
+    background-color: transparent;
+    border: 1px solid #29335C;
+    font-family: Reforma2018, serif;
+    margin: 10px;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  .btn.primary {
+    background-color: #FFC907;
+    color: black;
+    border: 1px solid #d3a500;
+  }
+
+  .btn.is-large {
+    font-size: 1em;
+    text-align: center;
+  }
+
+  /* Rule App styles */
+  .rule-app * {
+    box-sizing: border-box;
+  }
 </style>
 
 <header class="site-header">
@@ -88,49 +153,48 @@
           href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
         {% endif %}
         {% endfor %}
-        <div class="user-icon">
-          <div id="loginLogoutButton">
-            <div id="login" style="height: 20px; width: 30px;">
-              <button onclick="showLoginModal()"
-                style="background-color: #FFC907; height: 30px; width: 35px; padding:0px; border-color: #FFC907;">
-                <img src="{% link assets/elements/loginIcon.png %}" alt="Login" style="width: 100%; height: 100%;">
-              </button>
-            </div>
 
+        <div class="user-icon" id="loginLogoutButton">
+          <div id="login">
+            <button class="btn primary is-large" onclick="showLoginModal()"
+              style="height: 42px; width: 100px; padding: 2px; text-align: center">
+              <img src="{% link assets/tabler_icons/login.svg %}" alt="Login"> Login
+            </button>
+          </div>
 
-            <div id="logout" class="dropdown disable-hover"
-              style="background-color: #FFC907; height: 30px; width: 35px; ">
-              <button onclick="toggleDropdown()"
-                style="background-color: #FFC907; height: 30px; width: 32px; padding:0px;">
-                <img src="{% link assets/elements/loggedin.png %}" alt="Profile" style="width: 100%; height: 100%;">
-              </button>
-              <div class="dropdown-content">
-                <div id="emailText"
-                  style="padding: 10px; padding-top: 20px; margin-top: 1px; margin-bottom: 1px; height: 10 px"> </div>
-                <a href="#" style="padding: 10px; margin-top: 1px; margin-bottom: 1px; height: 10 px"
-                  @click="logout">Logout</a>
+          <div id="logout">
+            <button class="btn primary is-large" onclick="toggleDropdown()"
+              style="height: 40px; width: 40px; padding: 2px; text-align: center">
+              <img src="{% link assets/tabler_icons/user.svg %}" alt="Login">
+            </button>
+            <div class="dropdown-content">
+              <div id="emailText"
+                style="padding: 10px; padding-top: 20px; margin-top: 1px; margin-bottom: 1px; height: 10 px">
               </div>
-
+              <a href="#" style="padding: 10px; margin-top: 1px; margin-bottom: 1px; height: 10 px"
+                @click="logout">Logout</a>
             </div>
           </div>
         </div>
-
-        <div id="navBar" class="modal">
-          <div id="emailCode">
-            <label for="emailInput">Enter your email:</label>
-            <input type="email" id="emailInput" v-model="loginEmail" required>
-            <button @click="sendOTP" style="font-family: Arial, Helvetica, sans-serif;">Send Code</button>
-          </div>
-          <div id="emailCodeVerify" style="display: none;">
-            <label for="otpInput">Enter Code to Login:</label>
-            <input type="text" id="otpInput" v-model="otpCode" required>
-            <button @click="verifyOTP" style="font-family: Arial, Helvetica, sans-serif;">Verify Code</button>
-            <button @click="sendOTPAagin" style="font-family: Arial, Helvetica, sans-serif;"> Send Code again</button>
-          </div>
-          <button @click="closeModal" style="font-family: Arial;">Close</button>
-        </div>
       </div>
   </div>
+
+  <div id="navBar" class="modal" style="display: none;">
+    <div id="emailCode" style="display:block; align-items: center;">
+      <label for="emailInput">Enter your email:</label>
+      <input type="email" id="emailInput" v-model="loginEmail" required>
+      <button class="btn primary is-large" @click="sendOTP" style="text-align:center;">Send Code</button>
+    </div>
+    <div id="emailCodeVerify" style="display: none;">
+      <label for="otpInput">Enter Code to Login:</label>
+      <input type="text" id="otpInput" v-model="otpCode" required>
+      <button class="btn primary is-large" @click="verifyOTP">Verify Code</button>
+      <button class="btn primary is-large" @click="sendOTPAagin"> Send Code Again</button>
+    </div>
+    <button class="btn primary is-large" @click="closeModal">Close</button>
+  </div>
+  </div>
+  </div>
   </nav>
   </div>
 </header>