Merge branch 'develop' into local-server

5 files changed, 52 insertions, 6 deletions

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;
+      }
     }
   }
 
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 87d401215..b1e148ca0 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -30,7 +30,9 @@
 
     &.is-selected {
       background: #FFF;
-      border: 2px solid $theme-brand-primary;
+      border-width: 2px;
+      border-style: solid;
+      border-color: $theme-brand-primary;
       color: $theme-brand-primary;
     }
 
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index bb95ab5d2..753288b8d 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -59,7 +59,9 @@
 
     .premium-info {
       background: $dark-theme-gray-darker;
-      border: 2px solid $theme-brand-primary;
+      border-width: 2px;
+      border-style: solid;
+      border-color: $theme-brand-primary;
     }
     .legal { color: $theme-gray-light; }
   }
@@ -170,7 +172,9 @@
     }
 
     .separator {
-      border-right: 1px solid darken($theme-brand-primary, 8%);
+      border-right-width: 1px;
+      border-right-style: solid;
+      border-right-color: $theme-brand-primary;
       height: 100%;
       margin: 0 15px;
       transform: skew(15deg) rotate(2deg);
@@ -224,7 +228,7 @@
 
   .settings__close {
     background: $theme-brand-primary;
-    border-left: 1px solid darken($theme-brand-primary, 8%);
+    // border-left: 1px solid darken($theme-brand-primary, 8%);
     color: #FFF;
     font-size: 20px;
     height: 50px;
@@ -233,7 +237,9 @@
     right: 0;
     transition: background $theme-transition-time;
     border-top-right-radius: $theme-border-radius;
+    cursor: pointer;
 
+    &::before { cursor: pointer; }
     &:hover { background: darken($theme-brand-primary, 5%); }
   }
 
@@ -296,6 +302,7 @@
   }
 
   .settings__delete-button { right: 0; }
+  .settings__open-dark-mode-button { right: 0; cursor:pointer; }
 
   .settings__empty-state {
     align-items: center;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index ee0858687..e500830ed 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -34,7 +34,9 @@
 
   &.is-active {
     background: lighten($theme-brand-primary, 35%);
-    border-left: 4px solid $theme-brand-primary;
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: $theme-brand-primary;
 
     .tab-item__icon { margin-left: -4px; }
   }
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 1b3a905ef..636b8fd36 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -39,7 +39,9 @@ a, button {
 
   &.button {
     background: none;
-    border: 2px solid $theme-brand-primary;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $theme-brand-primary;
     border-radius: 3px;
     color: $theme-brand-primary;
     display: inline-block;