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

@@ -1 +1 @@
-Subproject commit 31f5d8d145a231713cfb27e3477e774c29942c81
+Subproject commit 8225aee7abe1e5911a42f01b711530b9d9a2cfbb

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 });

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>
 							

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 }

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 {