From 4da0a75efa473b5d6530b10bfc04c4a9c7c1b40b Mon Sep 17 00:00:00 2001
From: Matt Friedman <maf675@gmail.com>
Date: Wed, 17 Jul 2024 09:28:33 -0700
Subject: [PATCH] [ticket/17371] Improve dropdown toggle UX

PHPBB-17371

Signed-off-by: Matt Friedman <maf675@gmail.com>
---
 phpBB/styles/prosilver/imgs/svg/toggle-off.svg            | 1 +
 phpBB/styles/prosilver/imgs/svg/toggle-on.svg             | 1 +
 .../styles/prosilver/template/notification_dropdown.html  | 4 ++--
 phpBB/styles/prosilver/theme/colours.css                  | 8 ++++++++
 phpBB/styles/prosilver/theme/icons.css                    | 6 ++++++
 5 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 phpBB/styles/prosilver/imgs/svg/toggle-off.svg
 create mode 100644 phpBB/styles/prosilver/imgs/svg/toggle-on.svg

diff --git a/phpBB/styles/prosilver/imgs/svg/toggle-off.svg b/phpBB/styles/prosilver/imgs/svg/toggle-off.svg
new file mode 100644
index 0000000000..9bd31a7bf5
--- /dev/null
+++ b/phpBB/styles/prosilver/imgs/svg/toggle-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-.621 0-1.227.066-1.813.188a9.238 9.238 0 0 0-.875.218A9.073 9.073 0 0 0 .72 12.5c-.114.27-.227.531-.313.813A8.848 8.848 0 0 0 0 16c0 .93.145 1.813.406 2.656c.004.008-.004.024 0 .032A9.073 9.073 0 0 0 5.5 24.28c.27.114.531.227.813.313A8.83 8.83 0 0 0 9 24.999h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm0 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7c0-.242.008-.484.031-.719A6.985 6.985 0 0 1 9 9m5.625 0H23c3.879 0 7 3.121 7 7s-3.121 7-7 7h-8.375C16.675 21.348 18 18.828 18 16c0-2.828-1.324-5.348-3.375-7"/></svg>
\ No newline at end of file
diff --git a/phpBB/styles/prosilver/imgs/svg/toggle-on.svg b/phpBB/styles/prosilver/imgs/svg/toggle-on.svg
new file mode 100644
index 0000000000..83d2e59c0c
--- /dev/null
+++ b/phpBB/styles/prosilver/imgs/svg/toggle-on.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-4.96 0-9 4.035-9 9s4.04 9 9 9h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm14 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7s3.121-7 7-7"/></svg>
\ No newline at end of file
diff --git a/phpBB/styles/prosilver/template/notification_dropdown.html b/phpBB/styles/prosilver/template/notification_dropdown.html
index de5a8c79e6..715f04e1a2 100644
--- a/phpBB/styles/prosilver/template/notification_dropdown.html
+++ b/phpBB/styles/prosilver/template/notification_dropdown.html
@@ -47,8 +47,8 @@
 		{% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is not defined %}
 			<div class="footer webpush-subscribe">
 				<span class="ellipsis-text">{{ lang('NOTIFY_WEB_PUSH_ENABLE') ~ lang('COLON') }}</span>
-				<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">{{ Icon('font', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), false, '', {'style' : 'color:#9e9e9e;'}) }}</button>
-				<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('font', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), false, '', {'style' : 'color:#0059b3;'}) }}</button>
+				<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">{{ Icon('svg', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), true, 'push-subscribe-toggle-icon toggle-off') }}</button>
+				<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('svg', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), true, 'push-subscribe-toggle-icon toggle-on') }}</button>
 			</div>
 		{% endif %}
 		{% EVENT notification_dropdown_footer_after %}
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 4980cd89f2..eb16158cc3 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -298,6 +298,14 @@ a:hover .icon.icon-black, /* DEPRECATED 4.0 */
 	color: inherit;
 }
 
+.push-subscribe-toggle-icon.toggle-on {
+	color: #0059b3;
+}
+
+.push-subscribe-toggle-icon.toggle-off {
+	color: #9e9e9e;
+}
+
 /* jumpbox */
 .jumpbox .dropdown li {
 	border-top-color: #dedede;
diff --git a/phpBB/styles/prosilver/theme/icons.css b/phpBB/styles/prosilver/theme/icons.css
index a6ad36d22a..d4b7dabefe 100644
--- a/phpBB/styles/prosilver/theme/icons.css
+++ b/phpBB/styles/prosilver/theme/icons.css
@@ -123,6 +123,12 @@ blockquote cite:before,
 	height: 18px;
 }
 
+.push-subscribe-toggle-icon {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
 /* Contact icons
 ---------------------------------------- */
 .contact-icon {