feat: restyle buttons

Author: colbster937

src/ui.ts

@@ -214,7 +214,13 @@ export function createUI() {
                 outline: none;
             }
 
-            .settings-ui .button {
+            .settings-ui .action {
+                display: flex;
+                flex-direction: row;
+                gap: 0.5rem;
+            }
+
+            .settings-ui .action .button {
                 background-color: #3C82F6;
                 color: #0F172A;
                 border: 1px solid #1E293B;
@@ -227,13 +233,14 @@ export function createUI() {
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
+                flex: 1;
             }
 
-            .settings-ui .button:hover {
+            .settings-ui .action .button:hover {
                 background-color: rgba(57 128 242, 0.9);
             }
 
-            .settings-ui .button:focus {
+            .settings-ui .action .button:focus {
                 outline: none;
             }
 
@@ -295,10 +302,6 @@ export function createUI() {
                     <img src="${workshop}">
                     <h1>Wispcraft</h1>
                 </div>
-
-                <div class="side" style="padding-right:1rem;color:rgba(248,250,252,0.8);">
-                    <svg id="close" onclick="document.querySelector('.settings-ui').classList.add('hidden');document.querySelector('.backdrop-blur').classList.add('hidden');" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-                </div>
             </div>
 
             <div class="tabs">
@@ -317,8 +320,10 @@ export function createUI() {
                         <option value="no-account">NONE</option>
                     </select>
                     <p id="account_status"></p>
-                    <button class="button" id="addbutton">Add an account</button>
-                    <button class="button" id="removebutton" disabled>Remove account</button>
+                    <div class="action">
+                        <button class="button" id="addbutton">Add an account</button>
+                        <button class="button" id="removebutton" disabled>Remove account</button>
+                    </div>
                 </div>
             </div>