final frontend code

_includes/header.html

@@ -1,4 +1,5 @@
 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+
 <!-- <link rel="stylesheet" href="{{ " /css/main.css" | prepend: site.baseurl }}"> -->
 <style>
   .user-icon {
@@ -6,13 +7,14 @@
     position: relative;
   }
 
-  .dropdown {
+  .dropdown_header {
     display: inline-block;
     position: relative;
     z-index: 1000;
+    background-color: #FFC907;
   }
 
-  .dropdown-content {
+  .dropdown-content_header {
     display: none;
     position: absolute;
     width: auto;
@@ -20,25 +22,27 @@
     box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
     /* background-color: rgba(255, 255, 255, 0); */
     background-color: white;
+    font-family: Reforma2018, serif;
+    font-size: 1em;
   }
 
-  .dropdown.active .dropdown-content {
+  .dropdown_header.active .dropdown-content_header {
     display: block;
   }
 
-  .dropdown-content a {
+  .dropdown-content_header a {
     display: block;
     color: #000000;
     padding: 5px;
     text-decoration: none;
   }
 
-  .dropdown-content a:hover {
+  .dropdown-content_header a:hover {
     color: #FFFFFF;
     background-color: #FFC907;
   }
 
-  .dropdown:hover {
+  .dropdown_header:hover {
     /* Resetting styles for hover state */
     border: none;
     box-shadow: none;
@@ -48,22 +52,7 @@
     /* 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 {
@@ -98,7 +87,7 @@
   }
 
   /* Additional styling for buttons */
-  .btn {
+  .btn_login_logout {
     position: relative;
     border-radius: 4px;
     background-color: transparent;
@@ -109,20 +98,20 @@
     padding-right: 2px;
   }
 
-  .btn.primary {
+  .btn_login_logout.primary_login_logout {
     background-color: #FFC907;
     color: black;
     border: 1px solid #d3a500;
   }
 
-  .btn.is-large {
+  .btn_login_logout.is-large_login_logout {
     font-size: 1em;
     text-align: center;
   }
 
-  /* Rule App styles */
-  .rule-app * {
-    box-sizing: border-box;
+  .btn_login_logout:hover {
+    cursor: pointer;
+    background-color: #d3a500
   }
 </style>
 
@@ -156,18 +145,18 @@
 
         <div class="user-icon" id="loginLogoutButton">
           <div id="login">
-            <button class="btn primary is-large" onclick="showLoginModal()"
+            <button class="btn_login_logout primary_login_logout is-large_login_logout" 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">
-            <button class="btn primary is-large" onclick="toggleDropdown()"
+          <div id="logout" class="dropdown_header">
+            <button class="btn_login_logout primary_login_logout is-large_login_logout" 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 class="dropdown-content_header">
               <div id="emailText"
                 style="padding: 10px; padding-top: 20px; margin-top: 1px; margin-bottom: 1px; height: 10 px">
               </div>
@@ -183,15 +172,18 @@
     <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>
+      <button class="btn_login_logout primary_login_logout is-large_login_logout" @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>
+      <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="verifyOTP">Verify
+        Code</button>
+      <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="sendOTPAagin"> Send Code
+        Again</button>
     </div>
-    <button class="btn primary is-large" @click="closeModal">Close</button>
+    <button class="btn_login_logout primary_login_logout is-large_login_logout" @click="closeModal">Close</button>
   </div>
   </div>
   </div>

_includes/vue-rule-script.html

@@ -189,7 +189,7 @@
                 </div>
                 <h1>
                     <icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]
-                    <icon :icon="icons.fork" v-if="rule.forked == 1"></icon>
+                    <icon :icon="icons.fork" v-if="rule.forked !== 1"></icon>
                 </h1>
                 <p>[[rule.summary]]</p>
                 <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">