From 5aa97b51db75e68264be25a506e96515009f37ec Mon Sep 17 00:00:00 2001
From: Nathaniel Schmitz <schmitznathaniel@gmail.com>
Date: Fri, 17 Jan 2025 16:34:09 -0500
Subject: [PATCH 1/2] Minor UI tweaks

---
 js/basemap_selector.ts |  4 ++--
 js/container.ts        | 16 ++++++++++++++--
 js/layer_manager.ts    |  2 +-
 js/search_bar.ts       |  1 -
 js/styles.ts           |  2 +-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/js/basemap_selector.ts b/js/basemap_selector.ts
index 50c9fe593d..3a777bebce 100644
--- a/js/basemap_selector.ts
+++ b/js/basemap_selector.ts
@@ -29,7 +29,7 @@ export class BasemapSelector extends LitWidget<
         materialStyles,
         css`
             .horizontal-flex {
-                gap: 4px;
+                gap: 8px;
             }
 
             .legacy-text {
@@ -61,7 +61,7 @@ export class BasemapSelector extends LitWidget<
         return html`
             <widget-container
                 icon="map"
-                title="Basemap Selector"
+                title="Basemap"
                 @close-clicked="${this.onCloseClicked}"
             >
                 <div class="vertical-flex">
diff --git a/js/container.ts b/js/container.ts
index 3ca33f083c..faea7f9d56 100644
--- a/js/container.ts
+++ b/js/container.ts
@@ -53,7 +53,7 @@ export class Container extends LitWidget<ContainerModel, Container> {
             }
 
             .widget-container {
-                padding: 4px;
+                padding: 8px 12px 12px 12px;
             }
 
             .hidden {
@@ -71,6 +71,10 @@ export class Container extends LitWidget<ContainerModel, Container> {
                 flex-grow: 1;
                 padding: 0 12px 0 0;
             }
+
+            .left-padding {
+                padding-left: 8px;
+            }
         `,
     ];
 
@@ -135,7 +139,15 @@ export class Container extends LitWidget<ContainerModel, Container> {
     }
 
     private renderTitle(): HTMLTemplateResult {
-        return html`<span class="legacy-text header-text">${this.title}</span>`;
+        return html`<span
+            class="${classMap({
+                "legacy-text": true,
+                "header-text": true,
+                "left-padding":
+                    this.compactMode && this.title && !this.reverseHeader,
+            })}"
+            >${this.title}</span
+        >`;
     }
 
     private onCloseButtonClicked(): void {
diff --git a/js/layer_manager.ts b/js/layer_manager.ts
index db9e0eb45f..f93a39ea4c 100644
--- a/js/layer_manager.ts
+++ b/js/layer_manager.ts
@@ -35,7 +35,7 @@ export class LayerManager extends LitWidget<LayerManagerModel, LayerManager> {
             .layer-manager-rows {
                 display: flex;
                 flex-direction: column;
-                gap: 4px;
+                gap: 8px;
             }
         `,
     ];
diff --git a/js/search_bar.ts b/js/search_bar.ts
index 7edffffae7..0d920ccbb8 100644
--- a/js/search_bar.ts
+++ b/js/search_bar.ts
@@ -44,7 +44,6 @@ export class SearchBar extends LitWidget<
 
             .input-container {
                 max-width: 460px;
-                padding: 5px;
             }
 
             .input-container > p {
diff --git a/js/styles.ts b/js/styles.ts
index d3e190afea..486c2b8de9 100644
--- a/js/styles.ts
+++ b/js/styles.ts
@@ -29,7 +29,7 @@ export const flexStyles = css`
     .vertical-flex {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 8px;
     }
 
     .horizontal-flex {

From 49498baf337f7d6574470e8c8bdb1827f272066c Mon Sep 17 00:00:00 2001
From: Nathaniel Schmitz <schmitznathaniel@gmail.com>
Date: Sat, 25 Jan 2025 17:04:15 -0500
Subject: [PATCH 2/2] Additional UI tweaks

---
 geemap/map_widgets.py   |  1 -
 geemap/toolbar.py       |  1 -
 js/container.ts         | 10 +++++++++-
 js/inspector.ts         |  2 +-
 js/layer_manager_row.ts | 14 +++++++-------
 js/search_bar.ts        |  6 ++++--
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/geemap/map_widgets.py b/geemap/map_widgets.py
index 01838352e5..57dd16fe3b 100644
--- a/geemap/map_widgets.py
+++ b/geemap/map_widgets.py
@@ -781,7 +781,6 @@ def _delete_layer(self) -> None:
         self.host_map.remove_layer(self.layer)
 
 
-@Theme.apply
 class LayerManager(anywidget.AnyWidget):
     """A layer manager widget for geemap."""
 
diff --git a/geemap/toolbar.py b/geemap/toolbar.py
index a7d77f778d..fbf8c001e9 100644
--- a/geemap/toolbar.py
+++ b/geemap/toolbar.py
@@ -86,7 +86,6 @@ def _observe_value(self, change: Dict[str, Any]) -> None:
             self.active = False
 
 
-@map_widgets.Theme.apply
 class Toolbar(anywidget.AnyWidget):
     """A toolbar that can be added to the map."""
 
diff --git a/js/container.ts b/js/container.ts
index faea7f9d56..8540da62eb 100644
--- a/js/container.ts
+++ b/js/container.ts
@@ -66,6 +66,13 @@ export class Container extends LitWidget<ContainerModel, Container> {
                 width: 28px;
             }
 
+            .compact-header-button {
+                background: transparent;
+                font-size: 16px;
+                height: 28px;
+                width: 28px;
+            }
+
             .header-text {
                 align-content: center;
                 flex-grow: 1;
@@ -179,7 +186,8 @@ export class Container extends LitWidget<ContainerModel, Container> {
         return html`<button
             class="${classMap({
             'legacy-button': true,
-            'header-button': true,
+            'header-button': !this.compactMode,
+            'compact-header-button': this.compactMode,
             'active': !this.collapsed,
         })}"
             class="legacy-button header-button"
diff --git a/js/inspector.ts b/js/inspector.ts
index aa14143f1f..c41ab80c7d 100644
--- a/js/inspector.ts
+++ b/js/inspector.ts
@@ -40,8 +40,8 @@ export class Inspector extends LitWidget<InspectorModel, Inspector> {
 
             .object-browser {
                 max-height: 300px;
-                min-width: 290px;
                 overflow: auto;
+                width: 290px;
             }
 
             input[type='checkbox'] {
diff --git a/js/layer_manager_row.ts b/js/layer_manager_row.ts
index 3171513ed5..62901b8fb5 100644
--- a/js/layer_manager_row.ts
+++ b/js/layer_manager_row.ts
@@ -170,7 +170,7 @@ export class LayerManagerRow extends LitWidget<
                 >
                     <div class="spinner"></div>
                     <span class="close-icon material-symbols-outlined"
-                        >close</span
+                        >delete</span
                     >
                 </button>
             </div>
@@ -186,16 +186,16 @@ export class LayerManagerRow extends LitWidget<
             <div class="row confirm-deletion-container">
                 <span class="legacy-text remove-layer-text">Remove layer?</span>
                 <button
-                    class="legacy-button primary confirm-deletion-button"
-                    @click="${this.confirmDeletion}"
+                    class="legacy-button"
+                    @click="${this.cancelDeletion}"
                 >
-                    Yes
+                    No
                 </button>
                 <button
-                    class="legacy-button primary"
-                    @click="${this.cancelDeletion}"
+                    class="legacy-button primary confirm-deletion-button"
+                    @click="${this.confirmDeletion}"
                 >
-                    No
+                    Yes
                 </button>
             </div>
         `;
diff --git a/js/search_bar.ts b/js/search_bar.ts
index 0d920ccbb8..aead72e08f 100644
--- a/js/search_bar.ts
+++ b/js/search_bar.ts
@@ -40,10 +40,11 @@ export class SearchBar extends LitWidget<
         css`
             .row {
                 display: flex;
+                gap: 6px;
             }
 
             .input-container {
-                max-width: 460px;
+                max-width: 320px;
             }
 
             .input-container > p {
@@ -52,7 +53,7 @@ export class SearchBar extends LitWidget<
             }
 
             input.search {
-                margin: 2px;
+                margin: 2px 2px 8px 2px;
                 width: calc(100% - 4px);
             }
 
@@ -66,6 +67,7 @@ export class SearchBar extends LitWidget<
             label.result {
                 align-items: center;
                 display: flex;
+                margin-bottom: 4px;
             }
 
             .import-button, .reset-button {