diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-19 15:21:09 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-19 09:51:09 +0000 |
commit | a051331680b21f20201a47601d69505a4cfa9e40 (patch) | |
tree | f98dd4bc668c9814d58c0e49170aeeb19c2fe1de /src/components/services/content/ConnectionLostBanner.js | |
parent | 6.2.1-nightly.46 [skip ci] (diff) | |
download | ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.gz ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.tar.zst ferdium-app-a051331680b21f20201a47601d69505a4cfa9e40.zip |
Transform service components to ts (#778)
Diffstat (limited to 'src/components/services/content/ConnectionLostBanner.js')
-rw-r--r-- | src/components/services/content/ConnectionLostBanner.js | 104 |
1 files changed, 0 insertions, 104 deletions
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js deleted file mode 100644 index f2f70ca2e..000000000 --- a/src/components/services/content/ConnectionLostBanner.js +++ /dev/null | |||
@@ -1,104 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, injectIntl } from 'react-intl'; | ||
6 | |||
7 | import { mdiAlert } from '@mdi/js'; | ||
8 | import { LIVE_API_FERDIUM_WEBSITE } from '../../../config'; | ||
9 | import Icon from '../../ui/icon'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | text: { | ||
13 | id: 'connectionLostBanner.message', | ||
14 | defaultMessage: 'Oh no! Ferdium lost the connection to {name}.', | ||
15 | }, | ||
16 | moreInformation: { | ||
17 | id: 'connectionLostBanner.informationLink', | ||
18 | defaultMessage: 'What happened?', | ||
19 | }, | ||
20 | cta: { | ||
21 | id: 'connectionLostBanner.cta', | ||
22 | defaultMessage: 'Reload Service', | ||
23 | }, | ||
24 | }); | ||
25 | |||
26 | let buttonTransition = 'none'; | ||
27 | |||
28 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
29 | buttonTransition = 'opacity 0.25s'; | ||
30 | } | ||
31 | |||
32 | const styles = theme => ({ | ||
33 | root: { | ||
34 | background: theme.colorBackground, | ||
35 | borderRadius: theme.borderRadius, | ||
36 | position: 'absolute', | ||
37 | zIndex: 300, | ||
38 | height: 50, | ||
39 | display: 'flex', | ||
40 | flexDirection: 'row', | ||
41 | alignItems: 'center', | ||
42 | bottom: 10, | ||
43 | right: 10, | ||
44 | justifyContent: 'center', | ||
45 | padding: 10, | ||
46 | fontSize: 12, | ||
47 | }, | ||
48 | link: { | ||
49 | display: 'inline-flex', | ||
50 | opacity: 0.7, | ||
51 | }, | ||
52 | button: { | ||
53 | transition: buttonTransition, | ||
54 | color: theme.colorText, | ||
55 | border: [1, 'solid', theme.colorText], | ||
56 | borderRadius: theme.borderRadiusSmall, | ||
57 | padding: 4, | ||
58 | fontSize: 12, | ||
59 | marginLeft: 15, | ||
60 | |||
61 | '&:hover': { | ||
62 | opacity: 0.8, | ||
63 | }, | ||
64 | }, | ||
65 | icon: { | ||
66 | marginRight: 10, | ||
67 | fill: theme.styleTypes.danger.accent, | ||
68 | }, | ||
69 | }); | ||
70 | |||
71 | class ConnectionLostBanner extends Component { | ||
72 | static propTypes = { | ||
73 | classes: PropTypes.object.isRequired, | ||
74 | name: PropTypes.string.isRequired, | ||
75 | reload: PropTypes.func.isRequired, | ||
76 | }; | ||
77 | |||
78 | render() { | ||
79 | const { classes, name, reload } = this.props; | ||
80 | |||
81 | const { intl } = this.props; | ||
82 | |||
83 | return ( | ||
84 | <div className={classes.root}> | ||
85 | <Icon icon={mdiAlert} className={classes.icon} /> | ||
86 | <p> | ||
87 | {intl.formatMessage(messages.text, { name })} | ||
88 | <br /> | ||
89 | <a | ||
90 | href={`${LIVE_API_FERDIUM_WEBSITE}/support#what-does-franz-lost-the-connection-to-service-mean`} | ||
91 | className={classes.link} | ||
92 | > | ||
93 | {intl.formatMessage(messages.moreInformation)} | ||
94 | </a> | ||
95 | </p> | ||
96 | <button type="button" className={classes.button} onClick={reload}> | ||
97 | {intl.formatMessage(messages.cta)} | ||
98 | </button> | ||
99 | </div> | ||
100 | ); | ||
101 | } | ||
102 | } | ||
103 | |||
104 | export default injectIntl(injectSheet(styles)(observer(ConnectionLostBanner))); | ||