From e1fed84ccfed97ece1626c6725095c96239c7143 Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Sun, 15 Sep 2024 21:16:14 +0200
Subject: [PATCH] Adjustments to Mac Word installation banner (#4660)

- Use real buttons and other tweaks from design
- Use existing .properties string for "Don't Ask Again" for now
- Remove close button
- Update submodule for reminder after 24 hours instead of 7
---
 app/modules/zotero-word-for-mac-integration |  2 +-
 chrome/content/zotero/zoteroPane.js         | 16 +++++++---------
 chrome/content/zotero/zoteroPane.xhtml      | 14 ++++++++++----
 chrome/locale/en-US/zotero/zotero.ftl       | 11 ++++++++---
 scss/components/_banners.scss               | 16 ++++++++++++++--
 5 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/app/modules/zotero-word-for-mac-integration b/app/modules/zotero-word-for-mac-integration
index 31f5d8d145..8225aee7ab 160000
--- a/app/modules/zotero-word-for-mac-integration
+++ b/app/modules/zotero-word-for-mac-integration
@@ -1 +1 @@
-Subproject commit 31f5d8d145a231713cfb27e3477e774c29942c81
+Subproject commit 8225aee7abe1e5911a42f01b711530b9d9a2cfbb
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index a338244f3f..7cf9f26648 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -6132,21 +6132,19 @@ var ZoteroPane = new function()
 	 */
 	this.showMacWordPluginInstallWarning = function () {
 		return new Promise((resolve) => {
-			const panel = document.querySelector('#mac-word-plugin-install-warning');
-			const action = panel.querySelector('.link');
-			const close = panel.querySelector('.close-link');
-			const remind = panel.querySelector('.remind-later-link');
-			const dontAskAgain = panel.querySelector('.dont-ask-again-link');
+			const panel = document.getElementById('mac-word-plugin-install-warning');
+			const action = document.getElementById('mac-word-plugin-install-action');
+			const remind = document.getElementById('mac-word-plugin-install-remind-later');
+			const dontAskAgain = document.getElementById('mac-word-plugin-install-dont-ask-again');
+			
+			// TODO: Replace with ftl string
+			dontAskAgain.label = Zotero.getString('general.dontAskAgain');
 			
 			panel.removeAttribute('collapsed');
 			action.onclick = () => {
 				this.hideMacWordPluginInstallWarning();
 				resolve({ install: true });
 			};
-			close.onclick = () => {
-				this.hideMacWordPluginInstallWarning();
-				resolve({ dismiss: true });
-			};
 			remind.onclick = () => {
 				this.hideMacWordPluginInstallWarning();
 				resolve({ remindLater: true });
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 36c814e190..ce42169111 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1135,11 +1135,17 @@
 							<vbox id="mac-word-plugin-install-warning" class="banner-container" collapsed="true" role="status">
 								<html:div class="banner">
 									<html:div class="message" data-l10n-id="mac-word-plugin-install-message" />
-									<html:a class="link" data-l10n-id="mac-word-plugin-install-action" />
+									<button
+										id="mac-word-plugin-install-action"
+										data-l10n-id="mac-word-plugin-install-action-button"
+										default="true"/>
 									<html:div class="spacer" />
-									<label is="text-link" class="remind-later-link" data-l10n-id="general-remind-me-later" />
-									<label is="text-link" class="dont-ask-again-link" data-l10n-id="general-dont-ask-again" />
-									<label is="text-link" class="close-link">×</label>
+									<button
+										id="mac-word-plugin-install-remind-later"
+										data-l10n-id="mac-word-plugin-install-remind-later-button"/>
+									<!-- TODO: Use ftl string -->
+									<button
+										id="mac-word-plugin-install-dont-ask-again"/>
 								</html:div>
 							</vbox>
 							
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 2d7d47b776..d43a5a941d 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -8,7 +8,7 @@ return-or-enter =
 general-remove = Remove
 general-add = Add
 general-remind-me-later = Remind Me Later
-general-dont-ask-again = Don't Ask Again
+general-dont-ask-again = Don’t Ask Again
 general-choose-file = Choose File…
 general-open-settings = Open Settings
 general-help = Help
@@ -676,5 +676,10 @@ post-upgrade-done =
 text-action-paste-and-search =
     .label = Paste and Search
     
-mac-word-plugin-install-message = Zotero requires access to Word data to install the Word plugin.
-mac-word-plugin-install-action = Install Word plugin
+mac-word-plugin-install-message = Zotero needs access to Word data to install the Word plugin.
+mac-word-plugin-install-action-button =
+    .label = Install Word plugin
+mac-word-plugin-install-remind-later-button =
+    .label = { general-remind-me-later }
+mac-word-plugin-install-dont-ask-again-button =
+    .label = { general-dont-ask-again }
diff --git a/scss/components/_banners.scss b/scss/components/_banners.scss
index 2b8ff27fa6..780380e0d7 100644
--- a/scss/components/_banners.scss
+++ b/scss/components/_banners.scss
@@ -3,6 +3,7 @@
 
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	text-align: center;
 	position: relative;
 	white-space: nowrap;
@@ -95,13 +96,17 @@
 }
 
 #retracted-items-banner, #sync-reminder-banner, #architecture-warning-banner,
-		#mac-word-plugin-install-warning > .banner {
+#mac-word-plugin-install-warning {
 	line-height: 2.2em;
 	font-size: 13.5px;
 	padding: 0 2em;
 	font-weight: 600;
 }
 
+#mac-word-plugin-install-warning {
+	padding: 0 1em;
+}
+
 #retracted-items-banner {
 	background: #d93425;
 	color: white;
@@ -116,8 +121,15 @@
 }
 
 #mac-word-plugin-install-warning {
-	background: #ffea50;
+	background: var(--accent-blue30);
+	color: var(--fill-primary);
+	font-weight: normal;
 	border-bottom: #a9a9a9 .5px solid;
+	line-height: 2.5em;
+}
+
+#mac-word-plugin-install-remind-later {
+	margin-inline-end: .4em;
 }
 
 #sync-reminder-banner {