diff --git a/js/extension.js b/js/extension.js
index 563df44..a2030a4 100644
--- a/js/extension.js
+++ b/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 = '';
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 = '';
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);
diff --git a/js/notes-sidebar.css b/js/notes-sidebar.css
index 6f3318b..088bda2 100644
--- a/js/notes-sidebar.css
+++ b/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 */