diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-11-10 21:48:28 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-11-10 21:48:28 +0100 |
commit | 623f8c9d25f28eb9d2aef045029f74387a9281c3 (patch) | |
tree | d633cac71d6160b5f3da1ee4bb5f0efeb6584756 | |
parent | fix undefined prop for isAppMuted (diff) | |
download | ferdium-app-623f8c9d25f28eb9d2aef045029f74387a9281c3.tar.gz ferdium-app-623f8c9d25f28eb9d2aef045029f74387a9281c3.tar.zst ferdium-app-623f8c9d25f28eb9d2aef045029f74387a9281c3.zip |
optimize sidebar button size
-rw-r--r-- | src/components/layout/Sidebar.js | 6 | ||||
-rw-r--r-- | src/styles/layout.scss | 8 |
2 files changed, 9 insertions, 5 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 72ee2b3b7..ea34e8702 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -61,21 +61,21 @@ export default class Sidebar extends Component { | |||
61 | /> | 61 | /> |
62 | <button | 62 | <button |
63 | onClick={toggleMuteApp} | 63 | onClick={toggleMuteApp} |
64 | className={`sidebar__button ${isAppMuted ? 'is-muted' : ''}`} | 64 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} |
65 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} | 65 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} |
66 | > | 66 | > |
67 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> | 67 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> |
68 | </button> | 68 | </button> |
69 | <button | 69 | <button |
70 | onClick={() => openSettings({ path: 'recipes' })} | 70 | onClick={() => openSettings({ path: 'recipes' })} |
71 | className="sidebar__button" | 71 | className="sidebar__button sidebar__button--new-service" |
72 | data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`} | 72 | data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`} |
73 | > | 73 | > |
74 | <i className="mdi mdi-plus-box" /> | 74 | <i className="mdi mdi-plus-box" /> |
75 | </button> | 75 | </button> |
76 | <button | 76 | <button |
77 | onClick={() => openSettings({ path: 'app' })} | 77 | onClick={() => openSettings({ path: 'app' })} |
78 | className="sidebar__button" | 78 | className="sidebar__button sidebar__button--settings" |
79 | data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`} | 79 | data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`} |
80 | > | 80 | > |
81 | <i className="mdi mdi-settings" /> | 81 | <i className="mdi mdi-settings" /> |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index b35ab2a7b..afdd7dec7 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -42,7 +42,7 @@ html { | |||
42 | z-index: 200; | 42 | z-index: 200; |
43 | text-align: center; | 43 | text-align: center; |
44 | color: $theme-text-color; | 44 | color: $theme-text-color; |
45 | padding-bottom: 5px; | 45 | padding-bottom: 10px; |
46 | 46 | ||
47 | .sidebar__add-service { | 47 | .sidebar__add-service { |
48 | width: 32px; | 48 | width: 32px; |
@@ -55,7 +55,7 @@ html { | |||
55 | 55 | ||
56 | .sidebar__button { | 56 | .sidebar__button { |
57 | width: $theme-sidebar-width; | 57 | width: $theme-sidebar-width; |
58 | padding: 10px 0; | 58 | padding: 7px 0; |
59 | font-size: 24px; | 59 | font-size: 24px; |
60 | position: relative; | 60 | position: relative; |
61 | color: $theme-gray-light; | 61 | color: $theme-gray-light; |
@@ -71,6 +71,10 @@ html { | |||
71 | &.is-muted { | 71 | &.is-muted { |
72 | color: $theme-brand-primary; | 72 | color: $theme-brand-primary; |
73 | } | 73 | } |
74 | |||
75 | &--new-service { | ||
76 | padding-bottom: 6px; | ||
77 | } | ||
74 | } | 78 | } |
75 | 79 | ||
76 | & > div { | 80 | & > div { |