From 100cb466089688216975ae06dbdca63b83d04bac Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 20 Mar 2024 12:06:44 +0100
Subject: [PATCH] [Glitch] Fix icon and styling in browser notifications banner

Port a583317df62acced3cea1f102e5c7981ff1bdbea to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../notifications/components/column_settings.jsx   | 14 ++++++++------
 .../components/notifications_permission_banner.jsx |  4 ++--
 .../flavours/glitch/styles/components.scss         |  6 ++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
index 6b3df02e73..3f02df1881 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
@@ -71,16 +71,18 @@ export default class ColumnSettings extends PureComponent {
           <span className='warning-hint'><FormattedMessage id='notifications.permission_denied' defaultMessage='Desktop notifications are unavailable due to previously denied browser permissions request' /></span>
         )}
 
-        {alertsEnabled && browserSupport && browserPermission === 'default' && (
-          <span className='warning-hint'>
-            <FormattedMessage id='notifications.permission_required' defaultMessage='Desktop notifications are unavailable because the required permission has not been granted.' /> <GrantPermissionButton onClick={onRequestNotificationPermission} />
-          </span>
-        )}
-
         <section>
           <ClearColumnButton onClick={onClear} />
         </section>
 
+        {alertsEnabled && browserSupport && browserPermission === 'default' && (
+          <section>
+            <span className='warning-hint'>
+              <FormattedMessage id='notifications.permission_required' defaultMessage='Desktop notifications are unavailable because the required permission has not been granted.' /> <GrantPermissionButton onClick={onRequestNotificationPermission} />
+            </span>
+          </section>
+        )}
+
         <section>
           <h3><FormattedMessage id='notifications.policy.title' defaultMessage='Filter out notifications from…' /></h3>
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
index ba031332f9..7d1367a623 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
@@ -5,8 +5,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import SettingsIcon from '@/material-icons/400-20px/settings.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import TuneIcon from '@/material-icons/400-24px/tune.svg?react';
 import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { Button } from 'flavours/glitch/components/button';
@@ -42,7 +42,7 @@ class NotificationsPermissionBanner extends PureComponent {
         </div>
 
         <h2><FormattedMessage id='notifications_permission_banner.title' defaultMessage='Never miss a thing' /></h2>
-        <p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' icon={TuneIcon} /> }} /></p>
+        <p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' icon={SettingsIcon} /> }} /></p>
         <Button onClick={this.handleClick}><FormattedMessage id='notifications_permission_banner.enable' defaultMessage='Enable desktop notifications' /></Button>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index fba040a1c6..47756b50ee 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -9169,6 +9169,12 @@ noscript {
     color: $darker-text-color;
     margin-bottom: 15px;
     text-align: center;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+    }
   }
 }