diff options
author | vantezzen <hello@vantezzen.io> | 2019-10-18 10:58:02 +0200 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-10-18 10:58:02 +0200 |
commit | cf6233586eff4b532df4f9489b3f2b4b27012ffa (patch) | |
tree | b199d997fa69843fa5e320cde7a97c30a4bafa6f | |
parent | Add toggle to disable dark mode on per-service basis (diff) | |
download | ferdium-app-cf6233586eff4b532df4f9489b3f2b4b27012ffa.tar.gz ferdium-app-cf6233586eff4b532df4f9489b3f2b4b27012ffa.tar.zst ferdium-app-cf6233586eff4b532df4f9489b3f2b4b27012ffa.zip |
Implement #129
-rw-r--r-- | src/components/layout/Sidebar.js | 6 | ||||
-rw-r--r-- | src/styles/layout.scss | 33 |
2 files changed, 39 insertions, 0 deletions
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 | |||
201 | data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`} | 201 | data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`} |
202 | > | 202 | > |
203 | <i className="mdi mdi-settings" /> | 203 | <i className="mdi mdi-settings" /> |
204 | { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE || | ||
205 | this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && ( | ||
206 | <span className="update-availible"> | ||
207 | • | ||
208 | </span> | ||
209 | ) } | ||
204 | </button> | 210 | </button> |
205 | {this.state.tooltipEnabled && ( | 211 | {this.state.tooltipEnabled && ( |
206 | <ReactTooltip place="right" type="dark" effect="solid" /> | 212 | <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 @@ | |||
2 | 2 | ||
3 | html { overflow: hidden; } | 3 | html { overflow: hidden; } |
4 | 4 | ||
5 | @keyframes pulse-danger { | ||
6 | 0% { | ||
7 | background: darken($theme-brand-danger, 10%); | ||
8 | } | ||
9 | 50% { | ||
10 | background: lighten($theme-brand-danger, 10%); | ||
11 | } | ||
12 | 100% { | ||
13 | background: darken($theme-brand-danger, 10%); | ||
14 | } | ||
15 | } | ||
16 | |||
5 | .theme__dark .app { | 17 | .theme__dark .app { |
6 | .sidebar { | 18 | .sidebar { |
7 | background: $dark-theme-gray-darker; | 19 | background: $dark-theme-gray-darker; |
@@ -26,6 +38,27 @@ html { overflow: hidden; } | |||
26 | &.is-active { | 38 | &.is-active { |
27 | color: $theme-brand-primary; | 39 | color: $theme-brand-primary; |
28 | } | 40 | } |
41 | |||
42 | .update-availible { | ||
43 | align-items: center; | ||
44 | background: $theme-brand-danger; | ||
45 | border-radius: 20px; | ||
46 | bottom: 5px; | ||
47 | color: #FFF; | ||
48 | display: flex; | ||
49 | justify-content: center; | ||
50 | padding: 0px 5px; | ||
51 | position: absolute; | ||
52 | right: 16px; | ||
53 | padding-top: 0; | ||
54 | font-size: 0px; | ||
55 | min-height: 15px; | ||
56 | min-width: 15px; | ||
57 | |||
58 | animation-name: pulse-danger; | ||
59 | animation-duration: 0.75s; | ||
60 | animation-iteration-count: 6; | ||
61 | } | ||
29 | } | 62 | } |
30 | } | 63 | } |
31 | 64 | ||