Make sidebar search input more pleasant to look at (#2009)

* Improve margins

* Remove right border on non-macOS systems

Would be interesting to know why this was implemented in the first place. Looks quite ugly on Linux.

* Add focus border

* Align height of toolbar icons with search bar

* Remove leftover f-strings

qt/aqt/browser/browser.py

@@ -554,7 +554,7 @@ class Browser(QMainWindow):
         grid.addWidget(self.sidebar.searchBar, 0, 0)
         grid.addWidget(self.sidebar.toolbar, 0, 1)
         grid.addWidget(self.sidebar, 1, 0, 1, 2)
-        grid.setContentsMargins(0, 0, 0, 0)
+        grid.setContentsMargins(8, 4, 0, 0)
         grid.setSpacing(0)
         w = QWidget()
         w.setLayout(grid)

qt/aqt/browser/sidebar/__init__.py

@@ -3,11 +3,6 @@
 from anki.utils import is_mac
 from aqt.theme import theme_manager
 
-
-def _want_right_border() -> bool:
-    return not is_mac or theme_manager.night_mode
-
-
 from .item import SidebarItem, SidebarItemType
 from .model import SidebarModel
 from .searchbar import SidebarSearchBar

qt/aqt/browser/sidebar/searchbar.py

@@ -7,7 +7,6 @@ import aqt
 import aqt.browser
 import aqt.gui_hooks
 from aqt import colors
-from aqt.browser.sidebar import _want_right_border
 from aqt.qt import *
 from aqt.theme import theme_manager
 
@@ -29,18 +28,20 @@ class SidebarSearchBar(QLineEdit):
         aqt.gui_hooks.theme_did_change.append(self.setup_style)
 
     def setup_style(self) -> None:
-        border = theme_manager.color(colors.MEDIUM_BORDER)
         styles = [
-            "padding: 1px",
+            "padding: 2px",
-            "padding-left: 3px",
+            f"border: 1px solid {theme_manager.color(colors.BORDER)}",
-            f"border-bottom: 1px solid {border}",
+            "border-radius: 5px",
         ]
-        if _want_right_border():
-            styles.append(
-                f"border-right: 1px solid {border}",
-            )
 
-        self.setStyleSheet("QLineEdit { %s }" % ";".join(styles))
+        self.setStyleSheet(
+            "QLineEdit { %s }" % ";".join(styles)
+            + f"""
+QLineEdit:focus {{
+    border: 1px solid {theme_manager.color(colors.FOCUS_BORDER)};
+}}
+            """
+        )
 
     def onTextChanged(self, text: str) -> None:
         if not self.timer.isActive():

qt/aqt/browser/sidebar/toolbar.py

@@ -30,7 +30,7 @@ class SidebarToolbar(QToolBar):
         self._action_group = QActionGroup(self)
         qconnect(self._action_group.triggered, self._on_action_group_triggered)
         self._setup_tools()
-        self.setIconSize(QSize(16, 16))
+        self.setIconSize(QSize(18, 18))
         self.setSizePolicy(QSizePolicy.Policy.Fixed, QSizePolicy.Policy.Fixed)
         self.setStyle(QStyleFactory.create("fusion"))
         aqt.gui_hooks.theme_did_change.append(self._update_icons)

qt/aqt/browser/sidebar/tree.py

@@ -22,7 +22,6 @@ from anki.tags import TagTreeNode
 from anki.types import assert_exhaustive
 from aqt import colors, gui_hooks
 from aqt.browser.find_and_replace import FindAndReplaceDialog
-from aqt.browser.sidebar import _want_right_border
 from aqt.browser.sidebar.item import SidebarItem, SidebarItemType
 from aqt.browser.sidebar.model import SidebarModel
 from aqt.browser.sidebar.searchbar import SidebarSearchBar
@@ -112,8 +111,6 @@ class SidebarTreeView(QTreeView):
             "border: 0",
             f"background: {bgcolor}",
         ]
-        if _want_right_border():
-            styles.append(f"border-right: 1px solid {border}")
 
         self.setStyleSheet("QTreeView { %s }" % ";".join(styles))