From 1a0ceebcaf7a21085b6ca4ddba2873bbf0b205fe Mon Sep 17 00:00:00 2001
From: Alessandro <155005371+3clyp50@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:18:06 +0100
Subject: [PATCH] Modal styling WIP

---
 webui/index.html   | 22 +++++------
 webui/settings.css | 91 ++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 50128d5ee..673fcd02a 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -14,7 +14,7 @@
             if (window[name]) window[name](...args)
         }
     </script>
-    
+
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script type="module" src="index.js"></script>
@@ -40,13 +40,13 @@
                 <a href="https://github.com/frdel/agent-zero" target="_blank" rel="noopener noreferrer">
                     <img src="splash.jpg" alt="a0" width="22" height="22">
                 </a>
-            </div>
         </div>
+    </div>
         
-        <div id="left-panel" class="panel">
-            <div class="left-panel-top">
-                <!--Sidebar upper elements-->
-                <div class="config-section" id="status-section" x-data="{ connected: true }">
+    <div id="left-panel" class="panel">
+        <!--Sidebar upper elements-->
+        <div class="left-panel-top">                
+            <div class="config-section" id="status-section" x-data="{ connected: true }">
                     <h3>Status</h3>
                     <h4 class="connected" x-show="connected">&#10004; Connected</h4>
                     <h4 class="disconnected" x-show="!connected">&#10008; Disconnected</h4>
@@ -79,9 +79,9 @@
                     </ul>
                 </div>
             </div>
-            </div>
-                   <!--Sidebar lower elements-->
-                <div class="left-panel-bottom">
+        </div>
+        <!--Sidebar lower elements-->
+        <div class="left-panel-bottom">
             <!-- Preferences -->
             <div class="pref-section" x-data="{ prefOpen: true }">
                 <span><h3 class="pref-header" @click="prefOpen = !prefOpen">
@@ -180,7 +180,6 @@
             </div>
         </div>
     </div>
-
     <div id="settingsModal" x-data="settingsModalProxy">
         <h1 x-text="settings.title"></h1>
         <template x-teleport="body">
@@ -279,17 +278,18 @@
                     </div>
 
                     <div class="modal-footer">
+                        <div id="buttons-container">
                         <template x-for="button in settings.buttons" :key="button.id">
                             <button :class="button.classes" @click="handleButton(button.id)"
                                 x-text="button.title"></button>
                         </template>
+                        </div>
                     </div>
                 </div>
             </div>
         </template>
     </div>
 
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/webui/settings.css b/webui/settings.css
index edfa23ce7..22802e5e6 100644
--- a/webui/settings.css
+++ b/webui/settings.css
@@ -8,6 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 1001;
 }
 
 .modal-container {
@@ -30,6 +31,30 @@
     padding: 2rem;
     overflow-y: auto;
     flex-grow: 1;
+    background-clip: border-box;
+    border: 6px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.modal-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.modal-content::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 4px 0;
+  border-radius: 6px;
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+}
+
+.modal-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
 }
 
 .modal-footer {
@@ -97,6 +122,7 @@ input[type="text"] {
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 0.25rem;
+    font-family: Rubik;
 }
 
 textarea {
@@ -106,8 +132,13 @@ textarea {
     border: 1px solid #ddd;
     border-radius: 0.25rem;
     margin-top: 1rem;
-    font-family: inherit;
-    resize: vertical;
+    font-family: Roboto Mono;
+    scroll-behavior: smooth;
+    resize: none;
+      /*-/* scrollbar padding */
+      background-clip: border-box;
+      border: 6px solid transparent;
+      transition: all 0.3s ease;
 }
 
 .toggle {
@@ -165,12 +196,18 @@ input[type="range"] {
     text-align: right;
 }
 
+#buttons-container {
+        display: flex;
+        gap: 0.875rem;
+    }
+
 .btn {
-    padding: 0.5rem 1rem;
+    padding: 0.7rem 1.5rem;
     border-radius: 0.25rem;
     cursor: pointer;
     border: none;
     font-size: 0.875rem;
+    font-family: Rubik;
 }
 
 .btn-ok {
@@ -202,6 +239,7 @@ select {
     background-color: white;
     font-size: inherit;
     cursor: pointer;
+    font-family: Rubik;
 }
 
 select:disabled {
@@ -228,4 +266,51 @@ nav ul li a {
 
 nav ul li a:hover {
     text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .modal-header {
+        padding: 1.5rem 2rem;
+        border-bottom: 1px solid #eee;
+    }
+    
+    .modal-content {
+        padding: 1rem;
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+    
+    .modal-footer {
+        padding: 1.5rem;
+    }
+
+    #buttons-container {
+        display: flex;
+        gap: 1rem;
+        margin: 0 auto;
+    }
+    
+    .section {
+        margin-bottom: 2rem;
+        padding: 1rem;
+        border: 1px solid #eee;
+        border-radius: 0.5rem;
+    }
+
+    .field-control {
+     width: 100%;   
+    }
+    .field-description {
+     padding-bottom: var(--spacing-xs);
+    }
+    .field {
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+    display: block;
+    align-items: center;
+    }
+    .select {
+        margin-top: 100px !important;
+        padding-bottom: 1rem;
+    }
 }
\ No newline at end of file