From cf6233586eff4b532df4f9489b3f2b4b27012ffa Mon Sep 17 00:00:00 2001
From: vantezzen <hello@vantezzen.io>
Date: Fri, 18 Oct 2019 10:58:02 +0200
Subject: Implement #129

---
 src/components/layout/Sidebar.js |  6 ++++++
 src/styles/layout.scss           | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

(limited to 'src')

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index d0cae3443..a7f8696c3 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -201,6 +201,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
         >
           <i className="mdi mdi-settings" />
+          { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE ||
+            this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
+            <span className="update-availible">
+              •
+            </span>
+          ) }
         </button>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index b18bd6dcf..a7de4b247 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -2,6 +2,18 @@
 
 html { overflow: hidden; }
 
+@keyframes pulse-danger {
+  0% {
+    background: darken($theme-brand-danger, 10%);
+  }
+  50% {
+    background: lighten($theme-brand-danger, 10%);
+  }
+  100% {
+    background: darken($theme-brand-danger, 10%);
+  }
+}
+
 .theme__dark .app {
   .sidebar {
     background: $dark-theme-gray-darker;
@@ -26,6 +38,27 @@ html { overflow: hidden; }
       &.is-active {
         color: $theme-brand-primary;
       }
+
+      .update-availible { 
+        align-items: center;
+        background: $theme-brand-danger;
+        border-radius: 20px;
+        bottom: 5px;
+        color: #FFF;
+        display: flex;
+        justify-content: center;
+        padding: 0px 5px;
+        position: absolute;
+        right: 16px;
+        padding-top: 0;
+        font-size: 0px;
+        min-height: 15px;
+        min-width: 15px;
+
+        animation-name: pulse-danger;
+        animation-duration: 0.75s;
+        animation-iteration-count: 6;
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2