opt: boot hash window ui

module/webui/index.html

@@ -219,12 +219,8 @@
     <div id="boot-hash-overlay" class="boot-hash-overlay"></div>
     <div id="boot-hash-card" class="boot-hash-card">
         <div class="boot-hash-title" data-i18n="boot_hash.title"></div>
-        <div class="boot-hash-value ripple-element">
-            <textarea id="boot-hash-input" class="input-box" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder"></textarea>
-        </div>
-        <div class="boot-hash-button-container">
-            <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
-        </div>
+        <textarea id="boot-hash-input" class="boot-hash-input" placeholder="Paste your verified Boot Hash here" data-i18n="boot_hash.input_placeholder" oninput="window.trimInput(this)"></textarea>
+        <button id="boot-hash-save-button" class="boot-hash-save-button ripple-element" data-i18n="boot_hash.save_button"></button>
     </div>
 
     <!-- About Overlay -->

module/webui/scripts/boot_hash.js

@@ -5,6 +5,11 @@ const card = document.getElementById('boot-hash-card');
 const inputBox = document.getElementById('boot-hash-input');
 const saveButton = document.getElementById('boot-hash-save-button');
 
+// Remove empty spaces from input
+window.trimInput = (input) => {
+    input.value = input.value.replace(/\s+/g, '');
+};
+
 // Function to handle Verified Boot Hash
 document.getElementById("boot-hash").addEventListener("click", async () => {
     const showCard = () => {
@@ -51,4 +56,11 @@ document.getElementById("boot-hash").addEventListener("click", async () => {
     bootHashOverlay.addEventListener("click", (event) => {
         if (event.target === bootHashOverlay) closeCard();
     });
+
+    // Enter to save
+    inputBox.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            saveButton.click();
+        }
+    });
 });

module/webui/styles/boot_hash.css

@@ -49,42 +49,25 @@
     user-select: none;
 }
 
-.boot-hash-value {
+.boot-hash-input {
     width: 100%;
     height: 100px;
     font-size: 16px;
-    background-color: #FFF;
+    padding: 10px;
+    background-color: #F5F5F5;
     border: 1px solid #ccc;
     border-radius: 10px;
     box-sizing: border-box;
-}
-
-.input-box {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    font-size: 16px;
-    border-radius: 9px;
-    box-sizing: border-box;
-    background-color: transparent;
     outline-color: #007bff;
-}
-
-.boot-hash-button-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
+    resize: none;
 }
 
 .boot-hash-save-button {
-    width: 50%;
+    width: 100%;
     padding: 12px;
     border: none;
     border-radius: 12px;
-    font-size: 18px;
+    font-size: 20px;
     font-weight: bold;
     background-color: #007bff;
     color: white;
@@ -98,12 +81,9 @@
         background-color: #343434;
     }
 
-    .input-box {
+    .boot-hash-input {
+        background-color: #232323;
         color: #fff;
-    }
-    
-    .boot-hash-value {
-        background-color: #343434;
         border: 1px solid #6E6E6E;
     }
 }

module/webui/styles/search_menu.css

@@ -40,7 +40,7 @@
     outline: none;
     left: 10px;
     padding: 0 30px;
-    width: calc(100% - 10);
+    width: calc(100% - 80px);
 }
 
 .clear-btn {

module/webui/styles/security_patch.css

@@ -118,7 +118,6 @@
     outline-color: #007bff;
     border-radius: 10px;
     font-size: 16px;
-    transition: border-color 0.2s ease;
 }
 
 .button-container {