From e99f76b40c9e42c9e4fd54fc562184d8c68febc7 Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Mon, 21 Sep 2020 05:50:00 -0400
Subject: [PATCH] Tab bar: Update styling on macOS

---
 chrome/content/zotero/components/tabBar.jsx   |  8 ++++--
 .../content/zotero/standalone/standalone.xul  |  2 +-
 chrome/skin/default/zotero/overlay.css        |  4 +--
 scss/components/_mainWindow.scss              | 20 ++++++++++++++
 scss/components/_tabBar.scss                  | 12 ++++++---
 scss/mac/_mainWindow.scss                     |  3 +++
 scss/mac/_tabBar.scss                         | 26 +++++++++++++++++--
 scss/themes/_light.scss                       |  8 ++++++
 scss/zotero-react-client-mac.scss             |  1 +
 9 files changed, 72 insertions(+), 12 deletions(-)
 create mode 100644 scss/mac/_mainWindow.scss

diff --git a/chrome/content/zotero/components/tabBar.jsx b/chrome/content/zotero/components/tabBar.jsx
index e47329c502..593e0f3289 100644
--- a/chrome/content/zotero/components/tabBar.jsx
+++ b/chrome/content/zotero/components/tabBar.jsx
@@ -128,7 +128,7 @@ const TabBar = forwardRef(function (props, ref) {
 					className="tab-close"
 					onClick={(event) => handleTabClose(event, index)}
 				>
-					X
+					x
 				</div>
 			</div>
 		);
@@ -136,7 +136,11 @@ const TabBar = forwardRef(function (props, ref) {
 	
 	return (
 		<div className="tabs">
-			{ tabs.map((tab, index) => renderTab(tab, index)) }
+			<div className="tabs-spacer-before"/>
+			<div className="tabs-holder">
+				{ tabs.map((tab, index) => renderTab(tab, index)) }
+			</div>
+			<div className="tabs-spacer-after"/>
         </div>
 	);
 });
diff --git a/chrome/content/zotero/standalone/standalone.xul b/chrome/content/zotero/standalone/standalone.xul
index 712511567c..c80ce2f14e 100644
--- a/chrome/content/zotero/standalone/standalone.xul
+++ b/chrome/content/zotero/standalone/standalone.xul
@@ -124,7 +124,7 @@
 			</hbox>
 		</hbox>
 	</vbox>
-	<vbox id="tab-bar-container" style="-moz-window-dragging: drag"/>
+	<vbox id="tab-bar-container"/>
 	<toolbox id="navigator-toolbox" class="toolbox-top" mode="icons" defaultmode="icons">
 		<!-- Menu -->
 		<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 452a6565a9..b619c3a3de 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -296,13 +296,11 @@
 	min-width: 560px;
 }
 
-#zotero-pane .toolbar
-{
+.toolbar {
 	height: 32px !important; /* Hard-code this to fix toolbar icon compression on Linux */
 	margin: 0;
 	padding: 0;
 	min-width: 1px;
-	-moz-appearance: toolbar;
 }
 
 #zotero-pane toolbarseparator {
diff --git a/scss/components/_mainWindow.scss b/scss/components/_mainWindow.scss
index 3aa8e23067..7ff8375762 100644
--- a/scss/components/_mainWindow.scss
+++ b/scss/components/_mainWindow.scss
@@ -147,3 +147,23 @@ toolbarpaletteitem {
 #main-window[sizemode="fullscreen"] .titlebar-placeholder[type="caption-buttons"] {
   display: none;
 }
+
+
+
+#tab-bar-container {
+	-moz-window-dragging: drag;
+}
+
+#tab-bar-container .tab {
+	background: $transparent;
+}
+
+#tab-bar-container .tab.selected {
+	background: $toolbar-background-color;
+}
+
+#zotero-toolbar {
+	-moz-appearance: none;
+	background: $toolbar-background-color;
+	border-bottom: $toolbar-border;
+}
\ No newline at end of file
diff --git a/scss/components/_tabBar.scss b/scss/components/_tabBar.scss
index 9e849e6171..25f1ccb0fa 100644
--- a/scss/components/_tabBar.scss
+++ b/scss/components/_tabBar.scss
@@ -6,6 +6,10 @@
 	display: flex;
 }
 
+.tabs-holder {
+	display: flex;
+}
+
 .tab {
 	-moz-appearance: none;
 	width: 200px;
@@ -17,12 +21,12 @@
 	position: relative;
 	background: #f9f9f9;
 	border-top: 2px solid transparent;
-	border-left: 1px solid lightgray;
-	border-right: 1px solid lightgray;
-	border-bottom: 1px solid transparent;
-	margin-right: -1px;
 	color: #000;
 	
+	&:not(:last-child) {
+		border-right: $tab-border;
+	}
+	
 	&.selected {
 		border-top: 2px solid #CC2936;
 	}
diff --git a/scss/mac/_mainWindow.scss b/scss/mac/_mainWindow.scss
new file mode 100644
index 0000000000..18fcdbe915
--- /dev/null
+++ b/scss/mac/_mainWindow.scss
@@ -0,0 +1,3 @@
+#titlebar {
+	-moz-appearance: -moz-mac-vibrant-titlebar-light;
+}
\ No newline at end of file
diff --git a/scss/mac/_tabBar.scss b/scss/mac/_tabBar.scss
index ed7310c942..a82c80cb12 100644
--- a/scss/mac/_tabBar.scss
+++ b/scss/mac/_tabBar.scss
@@ -1,9 +1,31 @@
 .tabs {
 	-moz-window-dragging: drag;
-	margin-left: 78px;
+}
+
+.tabs-spacer-before {
+	width: 78px;
+	border-bottom: $tab-border;
+	border-inline-end: $tab-border;
+}
+
+.tabs-spacer-after {
+	flex: 1;
+	border-inline-start: $tab-border;
+	border-bottom: $tab-border;
 }
 
 .tab {
 	-moz-window-dragging: no-drag;
-	
+}
+
+.tab:not(.selected) {
+	border-bottom: $tab-border;
+}
+
+.tab:first-child {
+	border-left: 0;
+}
+
+.tab:last-child {
+	border-right: 0;
 }
\ No newline at end of file
diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss
index deeeb37e28..67f334cd93 100644
--- a/scss/themes/_light.scss
+++ b/scss/themes/_light.scss
@@ -80,6 +80,14 @@ $clicky-active-color: $shade-0;
 // Components
 // --------------------------------------------------
 
+// Toolbar
+$toolbar-background-color: #f6f6f6;
+$toolbar-border-color: darkgray;
+$toolbar-border: .5px solid $toolbar-border-color;
+
+// Tab bar
+$tab-border: $toolbar-border;
+
 // Icon
 $icon-color: $secondary;
 $icon-active-color: $shade-9;
diff --git a/scss/zotero-react-client-mac.scss b/scss/zotero-react-client-mac.scss
index f516a7f38d..29c82fd8eb 100644
--- a/scss/zotero-react-client-mac.scss
+++ b/scss/zotero-react-client-mac.scss
@@ -7,6 +7,7 @@
 @import "mac/button";
 @import "mac/createParent";
 @import "mac/editable";
+@import "mac/mainWindow";
 @import "mac/search";
 @import "mac/tabBar";
 @import "mac/tag-selector";