diff options
author | vantezzen <hello@vantezzen.io> | 2019-10-13 11:50:37 +0200 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-10-13 11:50:37 +0200 |
commit | 3741ba95e5b07e8a7e415b025587c44e55d7ff32 (patch) | |
tree | 69fac6596c7439cb4f47fa80db7bbf2d293f39e5 /src/features | |
parent | Sort services in QuickSwitch by last used (diff) | |
download | ferdium-app-3741ba95e5b07e8a7e415b025587c44e55d7ff32.tar.gz ferdium-app-3741ba95e5b07e8a7e415b025587c44e55d7ff32.tar.zst ferdium-app-3741ba95e5b07e8a7e415b025587c44e55d7ff32.zip |
Improve QuickSwitch design
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/quickSwitch/Component.js | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js index 583c7184c..39e90cb95 100644 --- a/src/features/quickSwitch/Component.js +++ b/src/features/quickSwitch/Component.js | |||
@@ -6,12 +6,17 @@ import { reaction } from 'mobx'; | |||
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, intlShape } from 'react-intl'; |
8 | import { Input } from '@meetfranz/forms'; | 8 | import { Input } from '@meetfranz/forms'; |
9 | import { H1 } from '@meetfranz/ui'; | ||
9 | 10 | ||
10 | import Modal from '../../components/ui/Modal'; | 11 | import Modal from '../../components/ui/Modal'; |
11 | import { state as ModalState } from '.'; | 12 | import { state as ModalState } from '.'; |
12 | import ServicesStore from '../../stores/ServicesStore'; | 13 | import ServicesStore from '../../stores/ServicesStore'; |
13 | 14 | ||
14 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | title: { | ||
17 | id: 'feature.quickSwitch.title', | ||
18 | defaultMessage: '!!!QuickSwitch', | ||
19 | }, | ||
15 | search: { | 20 | search: { |
16 | id: 'feature.quickSwitch.search', | 21 | id: 'feature.quickSwitch.search', |
17 | defaultMessage: '!!!Search...', | 22 | defaultMessage: '!!!Search...', |
@@ -30,6 +35,11 @@ const styles = theme => ({ | |||
30 | color: theme.styleTypes.primary.accent, | 35 | color: theme.styleTypes.primary.accent, |
31 | paddingTop: 30, | 36 | paddingTop: 30, |
32 | }, | 37 | }, |
38 | headline: { | ||
39 | fontSize: 20, | ||
40 | marginBottom: 20, | ||
41 | marginTop: -27, | ||
42 | }, | ||
33 | services: { | 43 | services: { |
34 | width: '100%', | 44 | width: '100%', |
35 | maxHeight: '50vh', | 45 | maxHeight: '50vh', |
@@ -276,6 +286,9 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
276 | shouldCloseOnOverlayClick | 286 | shouldCloseOnOverlayClick |
277 | close={this.close.bind(this)} | 287 | close={this.close.bind(this)} |
278 | > | 288 | > |
289 | <H1 className={classes.headline}> | ||
290 | {intl.formatMessage(messages.title)} | ||
291 | </H1> | ||
279 | <div ref={this.inputRef}> | 292 | <div ref={this.inputRef}> |
280 | <Input | 293 | <Input |
281 | placeholder={intl.formatMessage(messages.search)} | 294 | placeholder={intl.formatMessage(messages.search)} |