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/components | |
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/components')
-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 | </> |