diff options
| author |  Stefan Malzner <stefan@adlk.io> | 2019-04-13 12:43:59 +0200 |
|---|---|---|
| committer | Stefan Malzner <stefan@adlk.io> | 2019-04-13 12:43:59 +0200 |
| commit | 89988f591d342bcb101efea40371f26fc5c2c7ad (patch) | |
| tree | b2dc3db1678960398ffd33c09bd17e7823b6f486 /src | |
| parent | Fix styling issues & add premium badge (diff) | |
| download | ferdium-app-89988f591d342bcb101efea40371f26fc5c2c7ad.tar.gz ferdium-app-89988f591d342bcb101efea40371f26fc5c2c7ad.tar.zst ferdium-app-89988f591d342bcb101efea40371f26fc5c2c7ad.zip | |
Polish team screen
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/settings/team/TeamDashboard.js | 51 |
1 files changed, 41 insertions, 10 deletions
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 3eb464d49..63381c4ed 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
| @@ -39,8 +39,36 @@ const messages = defineMessages({ | |||
| 39 | 39 | ||
| 40 | const styles = { | 40 | const styles = { |
| 41 | cta: { | 41 | cta: { |
| 42 | marginTop: 40, | 42 | margin: [40, 'auto'], |
| 43 | }, | 43 | }, |
| 44 | container: { | ||
| 45 | display: 'flex', | ||
| 46 | flexDirection: 'column', | ||
| 47 | height: 'auto', | ||
| 48 | |||
| 49 | ['@media(min-width: 800px)']: { | ||
| 50 | flexDirection: 'row', | ||
| 51 | }, | ||
| 52 | }, | ||
| 53 | content: { | ||
| 54 | height: 'auto', | ||
| 55 | order: 1, | ||
| 56 | |||
| 57 | ['@media(min-width: 800px)']: { | ||
| 58 | order: 0, | ||
| 59 | }, | ||
| 60 | }, | ||
| 61 | image: { | ||
| 62 | display: 'block', | ||
| 63 | height: 150, | ||
| 64 | order: 0, | ||
| 65 | margin: [0, 'auto', 40, 'auto'], | ||
| 66 | |||
| 67 | ['@media(min-width: 800px)']: { | ||
| 68 | marginLeft: 40, | ||
| 69 | order: 1, | ||
| 70 | }, | ||
| 71 | } | ||
| 44 | }; | 72 | }; |
| 45 | 73 | ||
| 46 | 74 | ||
| @@ -100,15 +128,18 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon | |||
| 100 | <PremiumFeatureContainer> | 128 | <PremiumFeatureContainer> |
| 101 | <> | 129 | <> |
| 102 | <h1>{intl.formatMessage(messages.contentHeadline)}</h1> | 130 | <h1>{intl.formatMessage(messages.contentHeadline)}</h1> |
| 103 | <p>{intl.formatMessage(messages.intro)}</p> | 131 | <div className={classes.container}> |
| 104 | <p>{intl.formatMessage(messages.copy)}</p> | 132 | <div className={classes.content}> |
| 105 | {user.isSubscriptionOwner && ( | 133 | <p>{intl.formatMessage(messages.intro)}</p> |
| 106 | <Button | 134 | <p>{intl.formatMessage(messages.copy)}</p> |
| 107 | label={intl.formatMessage(messages.manageButton)} | 135 | </div> |
| 108 | onClick={openTeamManagement} | 136 | <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" /> |
| 109 | className={classes.cta} | 137 | </div> |
| 110 | /> | 138 | <Button |
| 111 | )} | 139 | label={intl.formatMessage(messages.manageButton)} |
| 140 | onClick={openTeamManagement} | ||
| 141 | className={classes.cta} | ||
| 142 | /> | ||
| 112 | </> | 143 | </> |
| 113 | </PremiumFeatureContainer> | 144 | </PremiumFeatureContainer> |
| 114 | </> | 145 | </> |