Bump styles

js/extension.js

@@ -156,20 +156,22 @@ class NotesSidebar {
         this.tabsContainer = document.createElement('div');
         this.tabsContainer.className = 'notes-tabs-container';
 
+        const newNoteButtonGroup = document.createElement('div');
+        newNoteButtonGroup.className = 'notes-button-group';
+
         const newTabBtn = document.createElement('button');
         newTabBtn.innerHTML = '<i class="pi pi-plus"></i>';
         newTabBtn.title = 'New Note';
         newTabBtn.className = 'notes-new-tab-btn';
         newTabBtn.onclick = () => this.createNewNote();
 
-        this.tabsContainer.appendChild(newTabBtn);
+        newNoteButtonGroup.appendChild(newTabBtn);
+        this.tabsContainer.appendChild(newNoteButtonGroup);
 
-        // Right side: zoom controls and refresh button
         const rightControls = document.createElement('div');
         rightControls.style.display = 'flex';
         rightControls.style.gap = '10px';
 
-        // Zoom button group
         const zoomButtonGroup = document.createElement('div');
         zoomButtonGroup.className = 'notes-button-group';
 
@@ -188,14 +190,19 @@ class NotesSidebar {
         zoomButtonGroup.appendChild(zoomOutBtn);
         zoomButtonGroup.appendChild(zoomInBtn);
 
+        const refreshButtonGroup = document.createElement('div');
+        refreshButtonGroup.className = 'notes-button-group';
+
         const refreshBtn = document.createElement('button');
         refreshBtn.innerHTML = '<i class="pi pi-refresh"></i>';
         refreshBtn.className = 'notes-btn refresh';
         refreshBtn.title = 'Refresh';
         refreshBtn.onclick = () => this.refreshNotes();
 
+        refreshButtonGroup.appendChild(refreshBtn);
+
         rightControls.appendChild(zoomButtonGroup);
-        rightControls.appendChild(refreshBtn);
+        rightControls.appendChild(refreshButtonGroup);
 
         tabsWrapper.appendChild(this.tabsContainer);
         tabsWrapper.appendChild(rightControls);

js/notes-sidebar.css

@@ -26,7 +26,7 @@
 }
 
 .notes-new-tab-btn {
-    background: #444;
+    background: #333;
     border: none;
     color: #fff;
     padding: 5px 10px;
@@ -53,6 +53,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     height: 32px;
+    margin-top: 1px
 }
 
 .note-tab:hover {
@@ -143,26 +144,20 @@
 }
 
 .notes-btn:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 
 .notes-btn:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
 }
 
 .notes-submenu-container:last-child .notes-btn {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-
-/* Refresh button is standalone and needs group-like styling */
-.notes-btn.refresh {
-    border: 1px solid #444;
-    border-radius: 4px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
 }
 
 /* Submenu styles */