Fix menu sub-sections vertical spacing for readability

Ensure that the menu sub-section titles are closer to the sub-section items than they are the last item is to the next sub-section title. Ensure that the action items are clickable from one edge of the menu to the other (like standard menu items). Increase the menu items size (area). See https://lawsofux.com/law-of-proximity and https://lawsofux.com/fittss-law 🍐 @ninavizz
freedomofpress · Mar 15, 2022 · f5f11b4 · f5f11b4
1 parent b633ced
commit f5f11b4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/securedrop_client/gui/widgets.py b/securedrop_client/gui/widgets.py
@@ -3622,6 +3622,7 @@ def __init__(
 
         download_section = self.addSection(_("DOWNLOAD"))
         download_section.setFont(separator_font)
+        download_section.setObjectName("first_section")
 
         self.addAction(DownloadConversation(self, self.controller, app_state))
 

diff --git a/securedrop_client/resources/css/source_menu.css b/securedrop_client/resources/css/source_menu.css
@@ -1,18 +1,22 @@
 QMenu {
     font-family: 'Source Sans Pro';
-    padding: 1em 0.5em;
+    padding: 0.5em 0;
     font-size: 16px;
 }
 
 QMenu::separator {
-    padding: 1em 0.25em;
+    margin: 1.0em 1.75em 0.5em 1.675em;
+    height: 1em;
     font-weight: 900;
     color: #b8c0de;
 }
 
+QMenu::separator#first_section {
+    margin-top: 0.5em;
+}
+
 QMenu::item {
-    padding: 0.25em 1em 0.25em 1.25em;
-    margin: 0.25em 0 0 0;
+    padding: 0.5em 2em;
 }
 
 QMenu::item:selected {