diff options
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/AppLayout.js | 8 | ||||
-rw-r--r-- | src/components/layout/Sidebar.js | 25 |
2 files changed, 23 insertions, 10 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index af27e8854..a31419a5e 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -6,6 +6,7 @@ import { TitleBar } from 'electron-react-titlebar/renderer'; | |||
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { ipcRenderer } from 'electron'; | 7 | import { ipcRenderer } from 'electron'; |
8 | 8 | ||
9 | import { mdiFlash, mdiPowerPlug } from '@mdi/js'; | ||
9 | import InfoBar from '../ui/InfoBar'; | 10 | import InfoBar from '../ui/InfoBar'; |
10 | import { Component as BasicAuth } from '../../features/basicAuth'; | 11 | import { Component as BasicAuth } from '../../features/basicAuth'; |
11 | import { Component as QuickSwitch } from '../../features/quickSwitch'; | 12 | import { Component as QuickSwitch } from '../../features/quickSwitch'; |
@@ -20,6 +21,7 @@ import WorkspaceSwitchingIndicator from '../../features/workspaces/components/Wo | |||
20 | import { workspaceStore } from '../../features/workspaces'; | 21 | import { workspaceStore } from '../../features/workspaces'; |
21 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 22 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
22 | import Todos from '../../features/todos/containers/TodosScreen'; | 23 | import Todos from '../../features/todos/containers/TodosScreen'; |
24 | import { Icon } from '../ui/icon'; | ||
23 | 25 | ||
24 | const messages = defineMessages({ | 26 | const messages = defineMessages({ |
25 | servicesUpdated: { | 27 | servicesUpdated: { |
@@ -151,7 +153,7 @@ class AppLayout extends Component { | |||
151 | sticky | 153 | sticky |
152 | onClick={retryRequiredRequests} | 154 | onClick={retryRequiredRequests} |
153 | > | 155 | > |
154 | <span className="mdi mdi-flash" /> | 156 | <Icon icon={mdiFlash} /> |
155 | {intl.formatMessage(messages.requiredRequestsFailed)} | 157 | {intl.formatMessage(messages.requiredRequestsFailed)} |
156 | </InfoBar> | 158 | </InfoBar> |
157 | )} | 159 | )} |
@@ -163,7 +165,7 @@ class AppLayout extends Component { | |||
163 | sticky | 165 | sticky |
164 | onClick={retryRequiredRequests} | 166 | onClick={retryRequiredRequests} |
165 | > | 167 | > |
166 | <span className="mdi mdi-flash" /> | 168 | <Icon icon={mdiFlash} /> |
167 | {intl.formatMessage(messages.authRequestFailed)} | 169 | {intl.formatMessage(messages.authRequestFailed)} |
168 | </InfoBar> | 170 | </InfoBar> |
169 | )} | 171 | )} |
@@ -179,7 +181,7 @@ class AppLayout extends Component { | |||
179 | }); | 181 | }); |
180 | }} | 182 | }} |
181 | > | 183 | > |
182 | <span className="mdi mdi-power-plug" /> | 184 | <Icon icon={mdiPowerPlug} /> |
183 | {intl.formatMessage(messages.servicesUpdated)} | 185 | {intl.formatMessage(messages.servicesUpdated)} |
184 | </InfoBar> | 186 | </InfoBar> |
185 | )} | 187 | )} |
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index 18492be80..728613f42 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -4,6 +4,16 @@ import ReactTooltip from 'react-tooltip'; | |||
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { inject, observer } from 'mobx-react'; | 5 | import { inject, observer } from 'mobx-react'; |
6 | import { Link } from 'react-router'; | 6 | import { Link } from 'react-router'; |
7 | import { | ||
8 | mdiCheckAll, | ||
9 | mdiViewGrid, | ||
10 | mdiPlusBox, | ||
11 | mdiLoginVariant, | ||
12 | mdiCog, | ||
13 | mdiBellOff, | ||
14 | mdiBell, | ||
15 | mdiLock, | ||
16 | } from '@mdi/js'; | ||
7 | 17 | ||
8 | import Tabbar from '../services/tabs/Tabbar'; | 18 | import Tabbar from '../services/tabs/Tabbar'; |
9 | import { | 19 | import { |
@@ -19,6 +29,7 @@ import { todoActions } from '../../features/todos/actions'; | |||
19 | import AppStore from '../../stores/AppStore'; | 29 | import AppStore from '../../stores/AppStore'; |
20 | import SettingsStore from '../../stores/SettingsStore'; | 30 | import SettingsStore from '../../stores/SettingsStore'; |
21 | import globalMessages from '../../i18n/globalMessages'; | 31 | import globalMessages from '../../i18n/globalMessages'; |
32 | import { Icon } from '../ui/icon'; | ||
22 | 33 | ||
23 | const messages = defineMessages({ | 34 | const messages = defineMessages({ |
24 | addNewService: { | 35 | addNewService: { |
@@ -156,7 +167,7 @@ class Sidebar extends Component { | |||
156 | messages.lockFerdi, | 167 | messages.lockFerdi, |
157 | )} (${lockFerdiShortcutKey(false)})`} | 168 | )} (${lockFerdiShortcutKey(false)})`} |
158 | > | 169 | > |
159 | <i className="mdi mdi-lock" /> | 170 | <Icon icon={mdiLock} size={1.5} /> |
160 | </button> | 171 | </button> |
161 | ) : null} | 172 | ) : null} |
162 | {todosStore.isFeatureEnabledByUser ? ( | 173 | {todosStore.isFeatureEnabledByUser ? ( |
@@ -174,7 +185,7 @@ class Sidebar extends Component { | |||
174 | todosToggleMessage, | 185 | todosToggleMessage, |
175 | )} (${todosToggleShortcutKey(false)})`} | 186 | )} (${todosToggleShortcutKey(false)})`} |
176 | > | 187 | > |
177 | <i className="mdi mdi-check-all" /> | 188 | <Icon icon={mdiCheckAll} size={1.5} /> |
178 | </button> | 189 | </button> |
179 | ) : null} | 190 | ) : null} |
180 | <button | 191 | <button |
@@ -190,7 +201,7 @@ class Sidebar extends Component { | |||
190 | workspaceToggleMessage, | 201 | workspaceToggleMessage, |
191 | )} (${workspaceToggleShortcutKey(false)})`} | 202 | )} (${workspaceToggleShortcutKey(false)})`} |
192 | > | 203 | > |
193 | <i className="mdi mdi-view-grid" /> | 204 | <Icon icon={mdiViewGrid} size={1.5} /> |
194 | </button> | 205 | </button> |
195 | <button | 206 | <button |
196 | type="button" | 207 | type="button" |
@@ -205,7 +216,7 @@ class Sidebar extends Component { | |||
205 | isAppMuted ? messages.unmute : messages.mute, | 216 | isAppMuted ? messages.unmute : messages.mute, |
206 | )} (${muteFerdiShortcutKey(false)})`} | 217 | )} (${muteFerdiShortcutKey(false)})`} |
207 | > | 218 | > |
208 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> | 219 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> |
209 | </button> | 220 | </button> |
210 | <button | 221 | <button |
211 | type="button" | 222 | type="button" |
@@ -215,7 +226,7 @@ class Sidebar extends Component { | |||
215 | messages.addNewService, | 226 | messages.addNewService, |
216 | )} (${addNewServiceShortcutKey(false)})`} | 227 | )} (${addNewServiceShortcutKey(false)})`} |
217 | > | 228 | > |
218 | <i className="mdi mdi-plus-box" /> | 229 | <Icon icon={mdiPlusBox} size={1.5} /> |
219 | </button> | 230 | </button> |
220 | </> | 231 | </> |
221 | ) : ( | 232 | ) : ( |
@@ -224,7 +235,7 @@ class Sidebar extends Component { | |||
224 | className="sidebar__button sidebar__button--new-service" | 235 | className="sidebar__button sidebar__button--new-service" |
225 | data-tip="Login" | 236 | data-tip="Login" |
226 | > | 237 | > |
227 | <i className="mdi mdi-login-variant" /> | 238 | <Icon icon={mdiLoginVariant} size={1.5} /> |
228 | </Link> | 239 | </Link> |
229 | )} | 240 | )} |
230 | <button | 241 | <button |
@@ -235,7 +246,7 @@ class Sidebar extends Component { | |||
235 | globalMessages.settings, | 246 | globalMessages.settings, |
236 | )} (${settingsShortcutKey(false)})`} | 247 | )} (${settingsShortcutKey(false)})`} |
237 | > | 248 | > |
238 | <i className="mdi mdi-cog" /> | 249 | <Icon icon={mdiCog} size={1.5} /> |
239 | {(this.props.stores.app.updateStatus === | 250 | {(this.props.stores.app.updateStatus === |
240 | this.props.stores.app.updateStatusTypes.AVAILABLE || | 251 | this.props.stores.app.updateStatusTypes.AVAILABLE || |
241 | this.props.stores.app.updateStatus === | 252 | this.props.stores.app.updateStatus === |