From de536064f400f5c8b0f444b7ac74bbb646991424 Mon Sep 17 00:00:00 2001
From: kytwb <kytwb@pm.me>
Date: Fri, 24 Dec 2021 18:37:45 +0100
Subject: Apply .update-available badge to settings/updates tabs

---
 src/components/settings/navigation/SettingsNavigation.js |  5 +++++
 src/components/settings/settings/EditSettingsForm.js     |  3 +++
 src/styles/layout.scss                                   | 12 +++++++++++-
 src/styles/settings.scss                                 |  2 ++
 4 files changed, 21 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index e8370d2ef..b58956f51 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -137,6 +137,11 @@ class SettingsNavigation extends Component {
           activeClassName="is-active"
         >
           {intl.formatMessage(globalMessages.settings)}
+          {stores.settings.app.automaticUpdates &&
+            (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE ||
+              stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED) && (
+            <span className="update-available">•</span>
+          )}
         </Link>
         <Link
           to="/settings/support"
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 01e609580..3b2fe4af4 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -378,6 +378,9 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlineUpdates)}
+                {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable) && (
+                  <span className="update-available">•</span>
+                )}
               </h2>
             </div>
 
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index abd38b506..8454814b0 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -58,7 +58,7 @@ html {
   }
 }
 
-.app .sidebar .sidebar__button .update-available {
+.update-available {
   align-items: center;
   background: $theme-brand-danger;
   border-radius: 20px;
@@ -79,6 +79,16 @@ html {
   animation-iteration-count: 6;
 }
 
+.badge .update-available {
+  right: -10px;
+}
+
+.settings-navigation__link .update-available {
+  position: relative;
+  bottom: 0;
+  right: 0;
+}
+
 body.win32:not(.isFullScreen) .app .app__content {
   height: calc(100% - 28px);
 }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 8f59fc57a..00744df88 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -218,6 +218,7 @@
 
     .badge {
       margin-right: 10px;
+      position: relative;
     }
 
     &::-webkit-scrollbar {
@@ -519,6 +520,7 @@
   overflow: hidden;
 
   .settings-navigation__link {
+    position: relative;
     align-items: center;
     justify-content: space-between;
     color: $theme-text-color;
-- 
cgit v1.2.3-70-g09d2