diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/AppUpdateInfoBar.js | 60 | ||||
-rw-r--r-- | src/components/AppUpdateInfoBar.tsx | 55 | ||||
-rw-r--r-- | src/components/services/content/ErrorHandlers/styles.ts (renamed from src/components/services/content/ErrorHandlers/styles.js) | 0 | ||||
-rw-r--r-- | src/components/settings/supportFerdi/SupportFerdiDashboard.js | 234 | ||||
-rw-r--r-- | src/components/settings/supportFerdi/SupportFerdiDashboard.tsx | 232 | ||||
-rw-r--r-- | src/components/ui/AppLoader/styles.ts (renamed from src/components/ui/AppLoader/styles.js) | 0 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/styles.ts (renamed from src/components/ui/WebviewLoader/styles.js) | 0 | ||||
-rw-r--r-- | src/components/ui/effects/Appear.js | 47 | ||||
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 39 |
9 files changed, 326 insertions, 341 deletions
diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js deleted file mode 100644 index 3f2b1ae95..000000000 --- a/src/components/AppUpdateInfoBar.js +++ /dev/null | |||
@@ -1,60 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | |||
5 | import InfoBar from './ui/InfoBar'; | ||
6 | import { GITHUB_FERDI_URL } from '../config'; | ||
7 | import { openExternalUrl } from '../helpers/url-helpers'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | updateAvailable: { | ||
11 | id: 'infobar.updateAvailable', | ||
12 | defaultMessage: 'A new update for Ferdi is available.', | ||
13 | }, | ||
14 | changelog: { | ||
15 | id: 'infobar.buttonChangelog', | ||
16 | defaultMessage: 'What is new?', | ||
17 | }, | ||
18 | buttonInstallUpdate: { | ||
19 | id: 'infobar.buttonInstallUpdate', | ||
20 | defaultMessage: 'Restart & install update', | ||
21 | }, | ||
22 | }); | ||
23 | |||
24 | class AppUpdateInfoBar extends Component { | ||
25 | static propTypes = { | ||
26 | onInstallUpdate: PropTypes.func.isRequired, | ||
27 | onHide: PropTypes.func.isRequired, | ||
28 | }; | ||
29 | |||
30 | render() { | ||
31 | const { intl } = this.props; | ||
32 | const { onInstallUpdate, onHide } = this.props; | ||
33 | |||
34 | return ( | ||
35 | <InfoBar | ||
36 | type="primary" | ||
37 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} | ||
38 | onClick={onInstallUpdate} | ||
39 | onHide={onHide} | ||
40 | > | ||
41 | <span className="mdi mdi-information" /> | ||
42 | {intl.formatMessage(messages.updateAvailable)}{' '} | ||
43 | <button | ||
44 | className="info-bar__inline-button" | ||
45 | type="button" | ||
46 | onClick={() => | ||
47 | openExternalUrl( | ||
48 | `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`, | ||
49 | true, | ||
50 | ) | ||
51 | } | ||
52 | > | ||
53 | <u>{intl.formatMessage(messages.changelog)}</u> | ||
54 | </button> | ||
55 | </InfoBar> | ||
56 | ); | ||
57 | } | ||
58 | } | ||
59 | |||
60 | export default injectIntl(AppUpdateInfoBar); | ||
diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx new file mode 100644 index 000000000..1dd3723cc --- /dev/null +++ b/src/components/AppUpdateInfoBar.tsx | |||
@@ -0,0 +1,55 @@ | |||
1 | import { defineMessages, useIntl } from 'react-intl'; | ||
2 | |||
3 | import InfoBar from './ui/InfoBar'; | ||
4 | import { GITHUB_FERDI_URL } from '../config'; | ||
5 | import { openExternalUrl } from '../helpers/url-helpers'; | ||
6 | |||
7 | const messages = defineMessages({ | ||
8 | updateAvailable: { | ||
9 | id: 'infobar.updateAvailable', | ||
10 | defaultMessage: 'A new update for Ferdi is available.', | ||
11 | }, | ||
12 | changelog: { | ||
13 | id: 'infobar.buttonChangelog', | ||
14 | defaultMessage: 'What is new?', | ||
15 | }, | ||
16 | buttonInstallUpdate: { | ||
17 | id: 'infobar.buttonInstallUpdate', | ||
18 | defaultMessage: 'Restart & install update', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | type Props = { | ||
23 | onInstallUpdate: () => void; | ||
24 | onHide: () => void; | ||
25 | }; | ||
26 | |||
27 | const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => { | ||
28 | const intl = useIntl(); | ||
29 | |||
30 | return ( | ||
31 | <InfoBar | ||
32 | type="primary" | ||
33 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} | ||
34 | onClick={onInstallUpdate} | ||
35 | onHide={onHide} | ||
36 | > | ||
37 | <span className="mdi mdi-information" /> | ||
38 | {intl.formatMessage(messages.updateAvailable)}{' '} | ||
39 | <button | ||
40 | className="info-bar__inline-button" | ||
41 | type="button" | ||
42 | onClick={() => | ||
43 | openExternalUrl( | ||
44 | `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`, | ||
45 | true, | ||
46 | ) | ||
47 | } | ||
48 | > | ||
49 | <u>{intl.formatMessage(messages.changelog)}</u> | ||
50 | </button> | ||
51 | </InfoBar> | ||
52 | ); | ||
53 | }; | ||
54 | |||
55 | export default AppUpdateInfoBar; | ||
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.ts index 72d62f5e3..72d62f5e3 100644 --- a/src/components/services/content/ErrorHandlers/styles.js +++ b/src/components/services/content/ErrorHandlers/styles.ts | |||
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js deleted file mode 100644 index b906df5c8..000000000 --- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js +++ /dev/null | |||
@@ -1,234 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { defineMessages, injectIntl } from 'react-intl'; | ||
3 | import { BrowserWindow } from '@electron/remote'; | ||
4 | import InfoBar from '../../ui/InfoBar'; | ||
5 | |||
6 | const messages = defineMessages({ | ||
7 | headline: { | ||
8 | id: 'settings.supportFerdi.headline', | ||
9 | defaultMessage: 'About Ferdi', | ||
10 | }, | ||
11 | title: { | ||
12 | id: 'settings.supportFerdi.title', | ||
13 | defaultMessage: 'Do you like Ferdi?', | ||
14 | }, | ||
15 | aboutIntro: { | ||
16 | id: 'settings.supportFerdi.aboutIntro', | ||
17 | defaultMessage: | ||
18 | '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>', | ||
19 | }, | ||
20 | textListContributors: { | ||
21 | id: 'settings.supportFerdi.textListContributors', | ||
22 | defaultMessage: 'Full list of contributors', | ||
23 | }, | ||
24 | textListContributorsHere: { | ||
25 | id: 'settings.supportFerdi.textListContributorsHere', | ||
26 | defaultMessage: 'here', | ||
27 | }, | ||
28 | textVolunteers: { | ||
29 | id: 'settings.supportFerdi.textVolunteers', | ||
30 | defaultMessage: | ||
31 | 'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.', | ||
32 | }, | ||
33 | textSupportWelcome: { | ||
34 | id: 'settings.supportFerdi.textSupportWelcome', | ||
35 | defaultMessage: | ||
36 | 'Support is always welcome. You can find a list of the help we need', | ||
37 | }, | ||
38 | textSupportWelcomeHere: { | ||
39 | id: 'settings.supportFerdi.textSupportWelcomeHere', | ||
40 | defaultMessage: 'here', | ||
41 | }, | ||
42 | textExpenses: { | ||
43 | id: 'settings.supportFerdi.textExpenses', | ||
44 | defaultMessage: | ||
45 | 'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our', | ||
46 | }, | ||
47 | textOpenCollective: { | ||
48 | id: 'settings.supportFerdi.textOpenCollective', | ||
49 | defaultMessage: 'Open Collective', | ||
50 | }, | ||
51 | textDonation: { | ||
52 | id: 'settings.supportFerdi.textDonation', | ||
53 | defaultMessage: | ||
54 | 'If you feel like supporting Ferdi development with a donation, you can do so on both,', | ||
55 | }, | ||
56 | textDonationAnd: { | ||
57 | id: 'settings.supportFerdi.textDonationAnd', | ||
58 | defaultMessage: 'and', | ||
59 | }, | ||
60 | textGitHubSponsors: { | ||
61 | id: 'settings.supportFerdi.textGitHubSponsors', | ||
62 | defaultMessage: 'GitHub Sponsors', | ||
63 | }, | ||
64 | openSurvey: { | ||
65 | id: 'settings.supportFerdi.openSurvey', | ||
66 | defaultMessage: 'Open survey', | ||
67 | }, | ||
68 | bannerText: { | ||
69 | id: 'settings.supportFerdi.bannerText', | ||
70 | defaultMessage: 'Do you want to help us improve Ferdi?', | ||
71 | }, | ||
72 | }); | ||
73 | |||
74 | class SupportFerdiDashboard extends Component { | ||
75 | openSurveyWindow() { | ||
76 | let win = new BrowserWindow({ width: 670, height: 400 }); | ||
77 | win.on('closed', () => { | ||
78 | win = null; | ||
79 | }); | ||
80 | |||
81 | win.loadURL('https://rp28.typeform.com/to/E3phJT'); | ||
82 | } | ||
83 | |||
84 | render() { | ||
85 | const { intl } = this.props; | ||
86 | |||
87 | const aboutIntro = intl.formatMessage(messages.aboutIntro); | ||
88 | |||
89 | return ( | ||
90 | <div className="settings__main"> | ||
91 | <div className="settings__header"> | ||
92 | <span className="settings__header-item"> | ||
93 | {intl.formatMessage(messages.headline)} | ||
94 | </span> | ||
95 | </div> | ||
96 | <div className="settings__body"> | ||
97 | <h1>{intl.formatMessage(messages.title)}</h1> | ||
98 | <div> | ||
99 | <p className="settings__support-badges"> | ||
100 | <a | ||
101 | href="https://github.com/getferdi/ferdi" | ||
102 | target="_blank" | ||
103 | rel="noreferrer" | ||
104 | > | ||
105 | <img | ||
106 | alt="GitHub Stars" | ||
107 | src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" | ||
108 | /> | ||
109 | </a> | ||
110 | <a | ||
111 | href="https://twitter.com/getferdi/" | ||
112 | target="_blank" | ||
113 | rel="noreferrer" | ||
114 | > | ||
115 | <img | ||
116 | alt="Twitter Follow" | ||
117 | src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" | ||
118 | /> | ||
119 | </a> | ||
120 | <a | ||
121 | href="https://opencollective.com/getferdi#section-contributors" | ||
122 | target="_blank" | ||
123 | rel="noreferrer" | ||
124 | > | ||
125 | <img | ||
126 | alt="Open Collective backers" | ||
127 | src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" | ||
128 | /> | ||
129 | </a> | ||
130 | <a | ||
131 | href="https://opencollective.com/getferdi#section-contributors" | ||
132 | target="_blank" | ||
133 | rel="noreferrer" | ||
134 | > | ||
135 | <img | ||
136 | alt="Open Collective sponsors" | ||
137 | src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" | ||
138 | /> | ||
139 | </a> | ||
140 | </p> | ||
141 | <span dangerouslySetInnerHTML={{ __html: aboutIntro }} /> | ||
142 | <br /> | ||
143 | <br /> | ||
144 | <p> | ||
145 | <a href="#contributors-via-opencollective"> | ||
146 | <img | ||
147 | alt="GitHub contributors (non-exhaustive)" | ||
148 | width="100%" | ||
149 | src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false" | ||
150 | /> | ||
151 | </a> | ||
152 | </p> | ||
153 | <p> | ||
154 | {intl.formatMessage(messages.textListContributors)} | ||
155 | <a | ||
156 | href="https://github.com/getferdi/ferdi#contributors-" | ||
157 | target="_blank" | ||
158 | className="link" | ||
159 | rel="noreferrer" | ||
160 | > | ||
161 | {' '} | ||
162 | {intl.formatMessage(messages.textListContributorsHere)} | ||
163 | <i className="mdi mdi-open-in-new" /> | ||
164 | </a> | ||
165 | <br /> | ||
166 | <br /> | ||
167 | </p> | ||
168 | <p>{intl.formatMessage(messages.textVolunteers)}</p> | ||
169 | <p> | ||
170 | {intl.formatMessage(messages.textSupportWelcome)} | ||
171 | <a | ||
172 | href="https://help.getferdi.com/general/support" | ||
173 | target="_blank" | ||
174 | className="link" | ||
175 | rel="noreferrer" | ||
176 | > | ||
177 | {' '} | ||
178 | {intl.formatMessage(messages.textSupportWelcomeHere)} | ||
179 | <i className="mdi mdi-open-in-new" /> | ||
180 | </a> | ||
181 | </p> | ||
182 | <p> | ||
183 | {intl.formatMessage(messages.textExpenses)} | ||
184 | <a | ||
185 | href="https://opencollective.com/getferdi#section-budget" | ||
186 | target="_blank" | ||
187 | className="link" | ||
188 | rel="noreferrer" | ||
189 | > | ||
190 | {' '} | ||
191 | {intl.formatMessage(messages.textOpenCollective)} | ||
192 | <i className="mdi mdi-open-in-new" /> | ||
193 | </a> | ||
194 | </p> | ||
195 | <p> | ||
196 | {intl.formatMessage(messages.textDonation)} | ||
197 | <a | ||
198 | href="https://opencollective.com/getferdi#section-contribute" | ||
199 | target="_blank" | ||
200 | className="link" | ||
201 | rel="noreferrer" | ||
202 | > | ||
203 | {' '} | ||
204 | {intl.formatMessage(messages.textOpenCollective)} | ||
205 | <i className="mdi mdi-open-in-new" /> | ||
206 | </a>{' '} | ||
207 | {intl.formatMessage(messages.textDonationAnd)} | ||
208 | <a | ||
209 | href="https://github.com/sponsors/getferdi" | ||
210 | target="_blank" | ||
211 | className="link" | ||
212 | rel="noreferrer" | ||
213 | > | ||
214 | {' '} | ||
215 | {intl.formatMessage(messages.textGitHubSponsors)} | ||
216 | <i className="mdi mdi-open-in-new" /> | ||
217 | </a> | ||
218 | </p> | ||
219 | </div> | ||
220 | </div> | ||
221 | <InfoBar | ||
222 | sticky | ||
223 | type="primary" | ||
224 | ctaLabel={intl.formatMessage(messages.openSurvey)} | ||
225 | onClick={this.openSurveyWindow} | ||
226 | > | ||
227 | {intl.formatMessage(messages.bannerText)} | ||
228 | </InfoBar> | ||
229 | </div> | ||
230 | ); | ||
231 | } | ||
232 | } | ||
233 | |||
234 | export default injectIntl(SupportFerdiDashboard); | ||
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx new file mode 100644 index 000000000..505c49812 --- /dev/null +++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx | |||
@@ -0,0 +1,232 @@ | |||
1 | import { defineMessages, useIntl } from 'react-intl'; | ||
2 | import { BrowserWindow } from '@electron/remote'; | ||
3 | import InfoBar from '../../ui/InfoBar'; | ||
4 | |||
5 | const messages = defineMessages({ | ||
6 | headline: { | ||
7 | id: 'settings.supportFerdi.headline', | ||
8 | defaultMessage: 'About Ferdi', | ||
9 | }, | ||
10 | title: { | ||
11 | id: 'settings.supportFerdi.title', | ||
12 | defaultMessage: 'Do you like Ferdi?', | ||
13 | }, | ||
14 | aboutIntro: { | ||
15 | id: 'settings.supportFerdi.aboutIntro', | ||
16 | defaultMessage: | ||
17 | '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>', | ||
18 | }, | ||
19 | textListContributors: { | ||
20 | id: 'settings.supportFerdi.textListContributors', | ||
21 | defaultMessage: 'Full list of contributors', | ||
22 | }, | ||
23 | textListContributorsHere: { | ||
24 | id: 'settings.supportFerdi.textListContributorsHere', | ||
25 | defaultMessage: 'here', | ||
26 | }, | ||
27 | textVolunteers: { | ||
28 | id: 'settings.supportFerdi.textVolunteers', | ||
29 | defaultMessage: | ||
30 | 'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.', | ||
31 | }, | ||
32 | textSupportWelcome: { | ||
33 | id: 'settings.supportFerdi.textSupportWelcome', | ||
34 | defaultMessage: | ||
35 | 'Support is always welcome. You can find a list of the help we need', | ||
36 | }, | ||
37 | textSupportWelcomeHere: { | ||
38 | id: 'settings.supportFerdi.textSupportWelcomeHere', | ||
39 | defaultMessage: 'here', | ||
40 | }, | ||
41 | textExpenses: { | ||
42 | id: 'settings.supportFerdi.textExpenses', | ||
43 | defaultMessage: | ||
44 | 'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our', | ||
45 | }, | ||
46 | textOpenCollective: { | ||
47 | id: 'settings.supportFerdi.textOpenCollective', | ||
48 | defaultMessage: 'Open Collective', | ||
49 | }, | ||
50 | textDonation: { | ||
51 | id: 'settings.supportFerdi.textDonation', | ||
52 | defaultMessage: | ||
53 | 'If you feel like supporting Ferdi development with a donation, you can do so on both,', | ||
54 | }, | ||
55 | textDonationAnd: { | ||
56 | id: 'settings.supportFerdi.textDonationAnd', | ||
57 | defaultMessage: 'and', | ||
58 | }, | ||
59 | textGitHubSponsors: { | ||
60 | id: 'settings.supportFerdi.textGitHubSponsors', | ||
61 | defaultMessage: 'GitHub Sponsors', | ||
62 | }, | ||
63 | openSurvey: { | ||
64 | id: 'settings.supportFerdi.openSurvey', | ||
65 | defaultMessage: 'Open survey', | ||
66 | }, | ||
67 | bannerText: { | ||
68 | id: 'settings.supportFerdi.bannerText', | ||
69 | defaultMessage: 'Do you want to help us improve Ferdi?', | ||
70 | }, | ||
71 | }); | ||
72 | |||
73 | const openSurveyWindow = () => { | ||
74 | let win = new BrowserWindow({ width: 670, height: 400 }); | ||
75 | win.on('closed', () => { | ||
76 | // @ts-expect-error Type 'null' is not assignable to type 'BrowserWindow'. | ||
77 | win = null; | ||
78 | }); | ||
79 | |||
80 | win.loadURL('https://rp28.typeform.com/to/E3phJT'); | ||
81 | }; | ||
82 | |||
83 | const SupportFerdiDashboard = () => { | ||
84 | const intl = useIntl(); | ||
85 | |||
86 | const aboutIntro = intl.formatMessage(messages.aboutIntro); | ||
87 | |||
88 | return ( | ||
89 | <div className="settings__main"> | ||
90 | <div className="settings__header"> | ||
91 | <span className="settings__header-item"> | ||
92 | {intl.formatMessage(messages.headline)} | ||
93 | </span> | ||
94 | </div> | ||
95 | <div className="settings__body"> | ||
96 | <h1>{intl.formatMessage(messages.title)}</h1> | ||
97 | <div> | ||
98 | <p className="settings__support-badges"> | ||
99 | <a | ||
100 | href="https://github.com/getferdi/ferdi" | ||
101 | target="_blank" | ||
102 | rel="noreferrer" | ||
103 | > | ||
104 | <img | ||
105 | alt="GitHub Stars" | ||
106 | src="https://img.shields.io/github/stars/getferdi/ferdi?style=social" | ||
107 | /> | ||
108 | </a> | ||
109 | <a | ||
110 | href="https://twitter.com/getferdi/" | ||
111 | target="_blank" | ||
112 | rel="noreferrer" | ||
113 | > | ||
114 | <img | ||
115 | alt="Twitter Follow" | ||
116 | src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social" | ||
117 | /> | ||
118 | </a> | ||
119 | <a | ||
120 | href="https://opencollective.com/getferdi#section-contributors" | ||
121 | target="_blank" | ||
122 | rel="noreferrer" | ||
123 | > | ||
124 | <img | ||
125 | alt="Open Collective backers" | ||
126 | src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective" | ||
127 | /> | ||
128 | </a> | ||
129 | <a | ||
130 | href="https://opencollective.com/getferdi#section-contributors" | ||
131 | target="_blank" | ||
132 | rel="noreferrer" | ||
133 | > | ||
134 | <img | ||
135 | alt="Open Collective sponsors" | ||
136 | src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective" | ||
137 | /> | ||
138 | </a> | ||
139 | </p> | ||
140 | <span dangerouslySetInnerHTML={{ __html: aboutIntro }} /> | ||
141 | <br /> | ||
142 | <br /> | ||
143 | <p> | ||
144 | <a href="#contributors-via-opencollective"> | ||
145 | <img | ||
146 | alt="GitHub contributors (non-exhaustive)" | ||
147 | width="100%" | ||
148 | src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false" | ||
149 | /> | ||
150 | </a> | ||
151 | </p> | ||
152 | <p> | ||
153 | {intl.formatMessage(messages.textListContributors)} | ||
154 | <a | ||
155 | href="https://github.com/getferdi/ferdi#contributors-" | ||
156 | target="_blank" | ||
157 | className="link" | ||
158 | rel="noreferrer" | ||
159 | > | ||
160 | {' '} | ||
161 | {intl.formatMessage(messages.textListContributorsHere)} | ||
162 | <i className="mdi mdi-open-in-new" /> | ||
163 | </a> | ||
164 | <br /> | ||
165 | <br /> | ||
166 | </p> | ||
167 | <p>{intl.formatMessage(messages.textVolunteers)}</p> | ||
168 | <p> | ||
169 | {intl.formatMessage(messages.textSupportWelcome)} | ||
170 | <a | ||
171 | href="https://help.getferdi.com/general/support" | ||
172 | target="_blank" | ||
173 | className="link" | ||
174 | rel="noreferrer" | ||
175 | > | ||
176 | {' '} | ||
177 | {intl.formatMessage(messages.textSupportWelcomeHere)} | ||
178 | <i className="mdi mdi-open-in-new" /> | ||
179 | </a> | ||
180 | </p> | ||
181 | <p> | ||
182 | {intl.formatMessage(messages.textExpenses)} | ||
183 | <a | ||
184 | href="https://opencollective.com/getferdi#section-budget" | ||
185 | target="_blank" | ||
186 | className="link" | ||
187 | rel="noreferrer" | ||
188 | > | ||
189 | {' '} | ||
190 | {intl.formatMessage(messages.textOpenCollective)} | ||
191 | <i className="mdi mdi-open-in-new" /> | ||
192 | </a> | ||
193 | </p> | ||
194 | <p> | ||
195 | {intl.formatMessage(messages.textDonation)} | ||
196 | <a | ||
197 | href="https://opencollective.com/getferdi#section-contribute" | ||
198 | target="_blank" | ||
199 | className="link" | ||
200 | rel="noreferrer" | ||
201 | > | ||
202 | {' '} | ||
203 | {intl.formatMessage(messages.textOpenCollective)} | ||
204 | <i className="mdi mdi-open-in-new" /> | ||
205 | </a>{' '} | ||
206 | {intl.formatMessage(messages.textDonationAnd)} | ||
207 | <a | ||
208 | href="https://github.com/sponsors/getferdi" | ||
209 | target="_blank" | ||
210 | className="link" | ||
211 | rel="noreferrer" | ||
212 | > | ||
213 | {' '} | ||
214 | {intl.formatMessage(messages.textGitHubSponsors)} | ||
215 | <i className="mdi mdi-open-in-new" /> | ||
216 | </a> | ||
217 | </p> | ||
218 | </div> | ||
219 | </div> | ||
220 | <InfoBar | ||
221 | sticky | ||
222 | type="primary" | ||
223 | ctaLabel={intl.formatMessage(messages.openSurvey)} | ||
224 | onClick={openSurveyWindow} | ||
225 | > | ||
226 | {intl.formatMessage(messages.bannerText)} | ||
227 | </InfoBar> | ||
228 | </div> | ||
229 | ); | ||
230 | }; | ||
231 | |||
232 | export default SupportFerdiDashboard; | ||
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.ts index 9891e0387..9891e0387 100644 --- a/src/components/ui/AppLoader/styles.js +++ b/src/components/ui/AppLoader/styles.ts | |||
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.ts index 5d58011fe..5d58011fe 100644 --- a/src/components/ui/WebviewLoader/styles.js +++ b/src/components/ui/WebviewLoader/styles.ts | |||
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js deleted file mode 100644 index fc319fe28..000000000 --- a/src/components/ui/effects/Appear.js +++ /dev/null | |||
@@ -1,47 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; | ||
4 | |||
5 | export default class Appear extends Component { | ||
6 | static propTypes = { | ||
7 | // eslint-disable-next-line react/forbid-prop-types | ||
8 | children: PropTypes.any.isRequired, | ||
9 | transitionName: PropTypes.string, | ||
10 | className: PropTypes.string, | ||
11 | }; | ||
12 | |||
13 | static defaultProps = { | ||
14 | transitionName: 'fadeIn', | ||
15 | className: '', | ||
16 | }; | ||
17 | |||
18 | state = { | ||
19 | mounted: false, | ||
20 | }; | ||
21 | |||
22 | componentDidMount() { | ||
23 | this.setState({ mounted: true }); | ||
24 | } | ||
25 | |||
26 | render() { | ||
27 | const { children, transitionName, className } = this.props; | ||
28 | |||
29 | if (!this.state.mounted) { | ||
30 | return null; | ||
31 | } | ||
32 | |||
33 | return ( | ||
34 | <ReactCSSTransitionGroup | ||
35 | transitionName={transitionName} | ||
36 | transitionAppear | ||
37 | transitionLeave | ||
38 | transitionAppearTimeout={1500} | ||
39 | transitionEnterTimeout={1500} | ||
40 | transitionLeaveTimeout={1500} | ||
41 | className={className} | ||
42 | > | ||
43 | {children} | ||
44 | </ReactCSSTransitionGroup> | ||
45 | ); | ||
46 | } | ||
47 | } | ||
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx new file mode 100644 index 000000000..117c02f97 --- /dev/null +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -0,0 +1,39 @@ | |||
1 | import { ReactChildren, useEffect, useState } from 'react'; | ||
2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; | ||
3 | |||
4 | type Props = { | ||
5 | children: ReactChildren; | ||
6 | transitionName: string; | ||
7 | className: string; | ||
8 | }; | ||
9 | const Appear = ({ | ||
10 | children, | ||
11 | transitionName = 'fadeIn', | ||
12 | className = '', | ||
13 | }: Props) => { | ||
14 | const [mounted, setMounted] = useState(false); | ||
15 | |||
16 | useEffect(() => { | ||
17 | setMounted(true); | ||
18 | }, []); | ||
19 | |||
20 | if (!mounted) { | ||
21 | return null; | ||
22 | } | ||
23 | |||
24 | return ( | ||
25 | <ReactCSSTransitionGroup | ||
26 | transitionName={transitionName} | ||
27 | transitionAppear | ||
28 | transitionLeave | ||
29 | transitionAppearTimeout={1500} | ||
30 | transitionEnterTimeout={1500} | ||
31 | transitionLeaveTimeout={1500} | ||
32 | className={className} | ||
33 | > | ||
34 | {children} | ||
35 | </ReactCSSTransitionGroup> | ||
36 | ); | ||
37 | }; | ||
38 | |||
39 | export default Appear; | ||