diff options
author | 2018-12-09 01:01:12 +0100 | |
---|---|---|
committer | 2018-12-09 01:01:12 +0100 | |
commit | f01957203f77fce8b65d5e034a8acd68f1e0ae2e (patch) | |
tree | 2f8d0d232266cdc7ed74e1913b270527f46bb33d /src/components | |
parent | Add dark mode styles to content tabs (diff) | |
download | ferdium-app-f01957203f77fce8b65d5e034a8acd68f1e0ae2e.tar.gz ferdium-app-f01957203f77fce8b65d5e034a8acd68f1e0ae2e.tar.zst ferdium-app-f01957203f77fce8b65d5e034a8acd68f1e0ae2e.zip |
Upgrade to react 16
TODO: add componentDidCatch
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/auth/AuthLayout.js | 21 | ||||
-rw-r--r-- | src/components/auth/Invite.js | 6 | ||||
-rw-r--r-- | src/components/auth/Login.js | 3 | ||||
-rw-r--r-- | src/components/services/tabs/Tabbar.js | 2 | ||||
-rw-r--r-- | src/components/settings/account/AccountDashboard.js | 44 | ||||
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 14 | ||||
-rw-r--r-- | src/components/settings/services/ServicesDashboard.js | 20 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 6 | ||||
-rw-r--r-- | src/components/subscription/SubscriptionForm.js | 46 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 34 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 6 | ||||
-rw-r--r-- | src/components/ui/Tabs/TabItem.js | 4 |
12 files changed, 85 insertions, 121 deletions
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js index 4fb0e6a59..4e1b0c52e 100644 --- a/src/components/auth/AuthLayout.js +++ b/src/components/auth/AuthLayout.js | |||
@@ -1,7 +1,6 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { RouteTransition } from 'react-router-transition'; | ||
5 | import { intlShape } from 'react-intl'; | 4 | import { intlShape } from 'react-intl'; |
6 | import { TitleBar } from 'electron-react-titlebar'; | 5 | import { TitleBar } from 'electron-react-titlebar'; |
7 | 6 | ||
@@ -69,22 +68,10 @@ export default @observer class AuthLayout extends Component { | |||
69 | </InfoBar> | 68 | </InfoBar> |
70 | )} | 69 | )} |
71 | <div className="auth__layout"> | 70 | <div className="auth__layout"> |
72 | <RouteTransition | 71 | {/* Inject globalError into children */} |
73 | pathname={pathname} | 72 | {React.cloneElement(children, { |
74 | atEnter={{ opacity: 0 }} | 73 | error, |
75 | atLeave={{ opacity: 0 }} | 74 | })} |
76 | atActive={{ opacity: 1 }} | ||
77 | mapStyles={styles => ({ | ||
78 | transform: `translateX(${styles.translateX}%)`, | ||
79 | opacity: styles.opacity, | ||
80 | })} | ||
81 | component="span" | ||
82 | > | ||
83 | {/* Inject globalError into children */} | ||
84 | {React.cloneElement(children, { | ||
85 | error, | ||
86 | })} | ||
87 | </RouteTransition> | ||
88 | </div> | 75 | </div> |
89 | {/* </div> */} | 76 | {/* </div> */} |
90 | <Link to="https://adlk.io" className="auth__adlk" target="_blank"> | 77 | <Link to="https://adlk.io" className="auth__adlk" target="_blank"> |
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index 96821a61a..5da89f2ce 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -127,7 +127,7 @@ export default @observer class Invite extends Component { | |||
127 | }); | 127 | }); |
128 | 128 | ||
129 | const renderForm = ( | 129 | const renderForm = ( |
130 | <div> | 130 | <Fragment> |
131 | {this.state.showSuccessInfo && isInviteSuccessful && ( | 131 | {this.state.showSuccessInfo && isInviteSuccessful && ( |
132 | <Appear> | 132 | <Appear> |
133 | <Infobox | 133 | <Infobox |
@@ -171,7 +171,7 @@ export default @observer class Invite extends Component { | |||
171 | {intl.formatMessage(messages.skipButtonLabel)} | 171 | {intl.formatMessage(messages.skipButtonLabel)} |
172 | </Link>)} | 172 | </Link>)} |
173 | </form> | 173 | </form> |
174 | </div> | 174 | </Fragment> |
175 | ); | 175 | ); |
176 | 176 | ||
177 | return ( | 177 | return ( |
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js index f465b35a5..2cf614041 100644 --- a/src/components/auth/Login.js +++ b/src/components/auth/Login.js | |||
@@ -11,11 +11,8 @@ import Button from '../ui/Button'; | |||
11 | import Link from '../ui/Link'; | 11 | import Link from '../ui/Link'; |
12 | import Infobox from '../ui/Infobox'; | 12 | import Infobox from '../ui/Infobox'; |
13 | 13 | ||
14 | |||
15 | import { globalError as globalErrorPropType } from '../../prop-types'; | 14 | import { globalError as globalErrorPropType } from '../../prop-types'; |
16 | 15 | ||
17 | // import Appear from '../ui/effects/Appear'; | ||
18 | |||
19 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
20 | headline: { | 17 | headline: { |
21 | id: 'login.headline', | 18 | id: 'login.headline', |
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js index dd5c2140f..27f555428 100644 --- a/src/components/services/tabs/Tabbar.js +++ b/src/components/services/tabs/Tabbar.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | 4 | ||
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 06c7074dd..43b8387c6 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -132,21 +132,19 @@ export default @observer class AccountDashboard extends Component { | |||
132 | )} | 132 | )} |
133 | 133 | ||
134 | {!isLoading && userInfoRequestFailed && ( | 134 | {!isLoading && userInfoRequestFailed && ( |
135 | <div> | 135 | <Infobox |
136 | <Infobox | 136 | icon="alert" |
137 | icon="alert" | 137 | type="danger" |
138 | type="danger" | 138 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} |
139 | ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)} | 139 | ctaLoading={isLoading} |
140 | ctaLoading={isLoading} | 140 | ctaOnClick={retryUserInfoRequest} |
141 | ctaOnClick={retryUserInfoRequest} | 141 | > |
142 | > | 142 | {intl.formatMessage(messages.userInfoRequestFailed)} |
143 | {intl.formatMessage(messages.userInfoRequestFailed)} | 143 | </Infobox> |
144 | </Infobox> | ||
145 | </div> | ||
146 | )} | 144 | )} |
147 | 145 | ||
148 | {!userInfoRequestFailed && ( | 146 | {!userInfoRequestFailed && ( |
149 | <div> | 147 | <Fragment> |
150 | {!isLoading && ( | 148 | {!isLoading && ( |
151 | <div className="account"> | 149 | <div className="account"> |
152 | <div className="account__box account__box--flex"> | 150 | <div className="account__box account__box--flex"> |
@@ -194,7 +192,7 @@ export default @observer class AccountDashboard extends Component { | |||
194 | ) : ( | 192 | ) : ( |
195 | <div className="account franz-form"> | 193 | <div className="account franz-form"> |
196 | {orders.length > 0 && ( | 194 | {orders.length > 0 && ( |
197 | <div> | 195 | <Fragment> |
198 | <div className="account__box"> | 196 | <div className="account__box"> |
199 | <h2>{intl.formatMessage(messages.headlineSubscription)}</h2> | 197 | <h2>{intl.formatMessage(messages.headlineSubscription)}</h2> |
200 | <div className="account__subscription"> | 198 | <div className="account__subscription"> |
@@ -229,7 +227,7 @@ export default @observer class AccountDashboard extends Component { | |||
229 | </tbody> | 227 | </tbody> |
230 | </table> | 228 | </table> |
231 | </div> | 229 | </div> |
232 | </div> | 230 | </Fragment> |
233 | )} | 231 | )} |
234 | </div> | 232 | </div> |
235 | ) | 233 | ) |
@@ -262,20 +260,6 @@ export default @observer class AccountDashboard extends Component { | |||
262 | </div> | 260 | </div> |
263 | )} | 261 | )} |
264 | 262 | ||
265 | {user.isMiner && ( | ||
266 | <div className="account franz-form"> | ||
267 | <div className="account__box account__box"> | ||
268 | <h2>Miner Info</h2> | ||
269 | <div className="account__subscription"> | ||
270 | <div> | ||
271 | <p>To maintain a high security level for all our Franz users, we had to remove the miner. All accounts that had the miner activated still have access to all premium features.</p> | ||
272 | <p>Every financial support is still much appreciated.</p> | ||
273 | </div> | ||
274 | </div> | ||
275 | </div> | ||
276 | </div> | ||
277 | )} | ||
278 | |||
279 | {!user.isEnterprise && !user.isPremium && ( | 263 | {!user.isEnterprise && !user.isPremium && ( |
280 | isLoadingPlans ? ( | 264 | isLoadingPlans ? ( |
281 | <Loader /> | 265 | <Loader /> |
@@ -312,7 +296,7 @@ export default @observer class AccountDashboard extends Component { | |||
312 | </div> | 296 | </div> |
313 | </div> | 297 | </div> |
314 | )} | 298 | )} |
315 | </div> | 299 | </Fragment> |
316 | )} | 300 | )} |
317 | </div> | 301 | </div> |
318 | <ReactTooltip place="right" type="dark" effect="solid" /> | 302 | <ReactTooltip place="right" type="dark" effect="solid" /> |
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 0c869c16d..a7c656acd 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { Link } from 'react-router'; | 4 | import { Link } from 'react-router'; |
@@ -271,14 +271,14 @@ export default @observer class EditServiceForm extends Component { | |||
271 | {recipe.hasCustomUrl && ( | 271 | {recipe.hasCustomUrl && ( |
272 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> | 272 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> |
273 | {user.isPremium || recipe.author.find(a => a.email === user.email) ? ( | 273 | {user.isPremium || recipe.author.find(a => a.email === user.email) ? ( |
274 | <div> | 274 | <Fragment> |
275 | <Input field={form.$('customUrl')} /> | 275 | <Input field={form.$('customUrl')} /> |
276 | {form.error === 'url-validation-error' && ( | 276 | {form.error === 'url-validation-error' && ( |
277 | <p className="franz-form__error"> | 277 | <p className="franz-form__error"> |
278 | {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })} | 278 | {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })} |
279 | </p> | 279 | </p> |
280 | )} | 280 | )} |
281 | </div> | 281 | </Fragment> |
282 | ) : ( | 282 | ) : ( |
283 | <div className="center premium-info"> | 283 | <div className="center premium-info"> |
284 | <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p> | 284 | <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p> |
@@ -308,12 +308,12 @@ export default @observer class EditServiceForm extends Component { | |||
308 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> | 308 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> |
309 | <Toggle field={form.$('isBadgeEnabled')} /> | 309 | <Toggle field={form.$('isBadgeEnabled')} /> |
310 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( | 310 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( |
311 | <div> | 311 | <Fragment> |
312 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | 312 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> |
313 | <p className="settings__help"> | 313 | <p className="settings__help"> |
314 | {intl.formatMessage(messages.indirectMessageInfo)} | 314 | {intl.formatMessage(messages.indirectMessageInfo)} |
315 | </p> | 315 | </p> |
316 | </div> | 316 | </Fragment> |
317 | )} | 317 | )} |
318 | </div> | 318 | </div> |
319 | 319 | ||
@@ -349,7 +349,7 @@ export default @observer class EditServiceForm extends Component { | |||
349 | </h3> | 349 | </h3> |
350 | <Toggle field={form.$('proxy.isEnabled')} /> | 350 | <Toggle field={form.$('proxy.isEnabled')} /> |
351 | {form.$('proxy.isEnabled').value && ( | 351 | {form.$('proxy.isEnabled').value && ( |
352 | <div> | 352 | <Fragment> |
353 | <Input field={form.$('proxy.host')} /> | 353 | <Input field={form.$('proxy.host')} /> |
354 | <Input field={form.$('proxy.user')} /> | 354 | <Input field={form.$('proxy.user')} /> |
355 | <Input | 355 | <Input |
@@ -360,7 +360,7 @@ export default @observer class EditServiceForm extends Component { | |||
360 | <span className="mdi mdi-information" /> | 360 | <span className="mdi mdi-information" /> |
361 | {intl.formatMessage(messages.proxyInfo)} | 361 | {intl.formatMessage(messages.proxyInfo)} |
362 | </p> | 362 | </p> |
363 | </div> | 363 | </Fragment> |
364 | )} | 364 | )} |
365 | </div> | 365 | </div> |
366 | </PremiumFeatureContainer> | 366 | </PremiumFeatureContainer> |
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js index e7dfaf106..a12df7372 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.js | |||
@@ -101,17 +101,15 @@ export default @observer class ServicesDashboard extends Component { | |||
101 | /> | 101 | /> |
102 | )} | 102 | )} |
103 | {!isLoading && servicesRequestFailed && ( | 103 | {!isLoading && servicesRequestFailed && ( |
104 | <div> | 104 | <Infobox |
105 | <Infobox | 105 | icon="alert" |
106 | icon="alert" | 106 | type="danger" |
107 | type="danger" | 107 | ctaLabel={intl.formatMessage(messages.tryReloadServices)} |
108 | ctaLabel={intl.formatMessage(messages.tryReloadServices)} | 108 | ctaLoading={isLoading} |
109 | ctaLoading={isLoading} | 109 | ctaOnClick={retryServicesRequest} |
110 | ctaOnClick={retryServicesRequest} | 110 | > |
111 | > | 111 | {intl.formatMessage(messages.servicesRequestFailed)} |
112 | {intl.formatMessage(messages.servicesRequestFailed)} | 112 | </Infobox> |
113 | </Infobox> | ||
114 | </div> | ||
115 | )} | 113 | )} |
116 | 114 | ||
117 | {status.length > 0 && status.includes('updated') && ( | 115 | {status.length > 0 && status.includes('updated') && ( |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 1ec2ab614..df3197520 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -1,5 +1,5 @@ | |||
1 | import { remote } from 'electron'; | 1 | import { remote } from 'electron'; |
2 | import React, { Component } from 'react'; | 2 | import React, { Component, Fragment } from 'react'; |
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -171,14 +171,14 @@ export default @observer class EditSettingsForm extends Component { | |||
171 | <PremiumFeatureContainer | 171 | <PremiumFeatureContainer |
172 | condition={isSpellcheckerPremiumFeature} | 172 | condition={isSpellcheckerPremiumFeature} |
173 | > | 173 | > |
174 | <div> | 174 | <Fragment> |
175 | <Toggle | 175 | <Toggle |
176 | field={form.$('enableSpellchecking')} | 176 | field={form.$('enableSpellchecking')} |
177 | /> | 177 | /> |
178 | {form.$('enableSpellchecking').value && ( | 178 | {form.$('enableSpellchecking').value && ( |
179 | <Select field={form.$('spellcheckerLanguage')} /> | 179 | <Select field={form.$('spellcheckerLanguage')} /> |
180 | )} | 180 | )} |
181 | </div> | 181 | </Fragment> |
182 | </PremiumFeatureContainer> | 182 | </PremiumFeatureContainer> |
183 | <a | 183 | <a |
184 | href={FRANZ_TRANSLATION} | 184 | href={FRANZ_TRANSLATION} |
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js index 12e8471ff..6b60c2af0 100644 --- a/src/components/subscription/SubscriptionForm.js +++ b/src/components/subscription/SubscriptionForm.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -158,35 +158,33 @@ export default @observer class SubscriptionForm extends Component { | |||
158 | <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" /> | 158 | <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" /> |
159 | {!hideInfo && ( | 159 | {!hideInfo && ( |
160 | <div className="subscription__premium-info"> | 160 | <div className="subscription__premium-info"> |
161 | <div> | 161 | <p> |
162 | <p> | 162 | <strong>{intl.formatMessage(messages.includedFeatures)}</strong> |
163 | <strong>{intl.formatMessage(messages.includedFeatures)}</strong> | 163 | </p> |
164 | </p> | 164 | <div className="subscription"> |
165 | <div className="subscription"> | 165 | <ul className="subscription__premium-features"> |
166 | <ul className="subscription__premium-features"> | 166 | <li>{intl.formatMessage(messages.features.onpremise)}</li> |
167 | <li>{intl.formatMessage(messages.features.onpremise)}</li> | 167 | <li> |
168 | <li> | 168 | {intl.formatMessage(messages.features.noInterruptions)} |
169 | {intl.formatMessage(messages.features.noInterruptions)} | 169 | </li> |
170 | </li> | 170 | <li> |
171 | <li> | 171 | {intl.formatMessage(messages.features.spellchecker)} |
172 | {intl.formatMessage(messages.features.spellchecker)} | 172 | </li> |
173 | </li> | 173 | <li> |
174 | <li> | 174 | {intl.formatMessage(messages.features.proxy)} |
175 | {intl.formatMessage(messages.features.proxy)} | 175 | </li> |
176 | </li> | 176 | <li> |
177 | <li> | 177 | {intl.formatMessage(messages.features.ads)} |
178 | {intl.formatMessage(messages.features.ads)} | 178 | </li> |
179 | </li> | 179 | </ul> |
180 | </ul> | ||
181 | </div> | ||
182 | </div> | 180 | </div> |
183 | </div> | 181 | </div> |
184 | )} | 182 | )} |
185 | <div> | 183 | <Fragment> |
186 | {error.code === 'no-payment-session' && ( | 184 | {error.code === 'no-payment-session' && ( |
187 | <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p> | 185 | <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p> |
188 | )} | 186 | )} |
189 | </div> | 187 | </Fragment> |
190 | {showSkipOption && this.form.$('paymentTier').value === 'skip' ? ( | 188 | {showSkipOption && this.form.$('paymentTier').value === 'skip' ? ( |
191 | <Button | 189 | <Button |
192 | label={skipButtonLabel} | 190 | label={skipButtonLabel} |
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index 145c15c2d..36cd32d2a 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -8,21 +8,21 @@ import Loader from '../Loader'; | |||
8 | import styles from './styles'; | 8 | import styles from './styles'; |
9 | 9 | ||
10 | export default inject('stores')(injectSheet(styles)(({ stores, classes, className, title, children }) => ( | 10 | export default inject('stores')(injectSheet(styles)(({ stores, classes, className, title, children }) => ( |
11 | <div className={classes.wrapper}> | 11 | <div className={classes.wrapper}> |
12 | <div | 12 | <div |
13 | className={classnames({ | 13 | className={classnames({ |
14 | [`${classes.component}`]: true, | 14 | [`${classes.component}`]: true, |
15 | [`${className}`]: className, | 15 | [`${className}`]: className, |
16 | })} | 16 | })} |
17 | > | 17 | > |
18 | <h1 className={classes.title}>{title}</h1> | 18 | <h1 className={classes.title}>{title}</h1> |
19 | <Loader color={stores.settings.app.darkMode ? '#FFF' : '#000'} /> | 19 | <Loader color={stores.settings.app.darkMode ? '#FFF' : '#000'} /> |
20 | {children && ( | 20 | {children && ( |
21 | <div className={classes.content}> | 21 | <div className={classes.content}> |
22 | {children} | 22 | {children} |
23 | </div> | 23 | </div> |
24 | )} | 24 | )} |
25 | </div> | ||
26 | </div> | 25 | </div> |
27 | ) | 26 | </div> |
28 | )); | 27 | ), |
28 | )); | ||
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index 76f77d631..cbe70ac88 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | 4 | import { Field } from 'mobx-react-form'; |
@@ -57,7 +57,7 @@ export default @observer class ImageUpload extends Component { | |||
57 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> | 57 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> |
58 | <div className="image-upload"> | 58 | <div className="image-upload"> |
59 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 59 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
60 | <div> | 60 | <Fragment> |
61 | <div | 61 | <div |
62 | className="image-upload__preview" | 62 | className="image-upload__preview" |
63 | style={({ | 63 | style={({ |
@@ -84,7 +84,7 @@ export default @observer class ImageUpload extends Component { | |||
84 | </button> | 84 | </button> |
85 | <div className="image-upload__action-background" /> | 85 | <div className="image-upload__action-background" /> |
86 | </div> | 86 | </div> |
87 | </div> | 87 | </Fragment> |
88 | ) : ( | 88 | ) : ( |
89 | <Dropzone | 89 | <Dropzone |
90 | ref={(node) => { this.dropzoneRef = node; }} | 90 | ref={(node) => { this.dropzoneRef = node; }} |
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js index 9ff9f009e..16881a7f7 100644 --- a/src/components/ui/Tabs/TabItem.js +++ b/src/components/ui/Tabs/TabItem.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | 2 | ||
3 | import { oneOrManyChildElements } from '../../../prop-types'; | 3 | import { oneOrManyChildElements } from '../../../prop-types'; |
4 | 4 | ||
@@ -11,7 +11,7 @@ export default class TabItem extends Component { | |||
11 | const { children } = this.props; | 11 | const { children } = this.props; |
12 | 12 | ||
13 | return ( | 13 | return ( |
14 | <div>{children}</div> | 14 | <Fragment>{children}</Fragment> |
15 | ); | 15 | ); |
16 | } | 16 | } |
17 | } | 17 | } |