diff options
author | 2019-04-12 13:32:52 +0200 | |
---|---|---|
committer | 2019-04-12 13:32:52 +0200 | |
commit | a24af19461d5270fc474d92521be39160377610e (patch) | |
tree | 2f7eda1ff464f020941d19e9504aebc2fd435a52 /src | |
parent | Merge branch 'develop' into chore/streamline-dashboard (diff) | |
download | ferdium-app-a24af19461d5270fc474d92521be39160377610e.tar.gz ferdium-app-a24af19461d5270fc474d92521be39160377610e.tar.zst ferdium-app-a24af19461d5270fc474d92521be39160377610e.zip |
Fix styling issues & add premium badge
Diffstat (limited to 'src')
6 files changed, 56 insertions, 59 deletions
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index ea335815c..4a73b51d9 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js | |||
@@ -3,6 +3,7 @@ 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'; |
5 | import ReactTooltip from 'react-tooltip'; | 5 | import ReactTooltip from 'react-tooltip'; |
6 | import { ProBadge } from '@meetfranz/ui'; | ||
6 | 7 | ||
7 | import Loader from '../../ui/Loader'; | 8 | import Loader from '../../ui/Loader'; |
8 | import Button from '../../ui/Button'; | 9 | import Button from '../../ui/Button'; |
@@ -143,14 +144,6 @@ export default @observer class AccountDashboard extends Component { | |||
143 | src="./assets/images/logo.svg" | 144 | src="./assets/images/logo.svg" |
144 | alt="" | 145 | alt="" |
145 | /> | 146 | /> |
146 | {user.isPremium && ( | ||
147 | <span | ||
148 | className="account__avatar-premium emoji" | ||
149 | data-tip="Premium Supporter Account" | ||
150 | > | ||
151 | <img src="./assets/images/emoji/star.png" alt="" /> | ||
152 | </span> | ||
153 | )} | ||
154 | </div> | 147 | </div> |
155 | <div className="account__info"> | 148 | <div className="account__info"> |
156 | <h2> | 149 | <h2> |
@@ -158,6 +151,7 @@ export default @observer class AccountDashboard extends Component { | |||
158 | {user.isPremium && ( | 151 | {user.isPremium && ( |
159 | <> | 152 | <> |
160 | {' '} | 153 | {' '} |
154 | <ProBadge /> | ||
161 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> | 155 | <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> |
162 | </> | 156 | </> |
163 | )} | 157 | )} |
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index cab6f23d7..df4b3b3b2 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -7,6 +7,7 @@ import { ProBadge } from '@meetfranz/ui'; | |||
7 | import Link from '../../ui/Link'; | 7 | import Link from '../../ui/Link'; |
8 | import { workspaceStore } from '../../../features/workspaces'; | 8 | import { workspaceStore } from '../../../features/workspaces'; |
9 | import UIStore from '../../../stores/UIStore'; | 9 | import UIStore from '../../../stores/UIStore'; |
10 | import UserStore from '../../../stores/UserStore'; | ||
10 | 11 | ||
11 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
12 | availableServices: { | 13 | availableServices: { |
@@ -47,6 +48,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
47 | static propTypes = { | 48 | static propTypes = { |
48 | stores: PropTypes.shape({ | 49 | stores: PropTypes.shape({ |
49 | ui: PropTypes.instanceOf(UIStore).isRequired, | 50 | ui: PropTypes.instanceOf(UIStore).isRequired, |
51 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
50 | }).isRequired, | 52 | }).isRequired, |
51 | serviceCount: PropTypes.number.isRequired, | 53 | serviceCount: PropTypes.number.isRequired, |
52 | workspaceCount: PropTypes.number.isRequired, | 54 | workspaceCount: PropTypes.number.isRequired, |
@@ -59,6 +61,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
59 | render() { | 61 | render() { |
60 | const { serviceCount, workspaceCount, stores } = this.props; | 62 | const { serviceCount, workspaceCount, stores } = this.props; |
61 | const { isDarkThemeActive } = stores.ui; | 63 | const { isDarkThemeActive } = stores.ui; |
64 | const { router, user } = stores; | ||
62 | const { intl } = this.context; | 65 | const { intl } = this.context; |
63 | 66 | ||
64 | return ( | 67 | return ( |
@@ -107,6 +110,9 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
107 | activeClassName="is-active" | 110 | activeClassName="is-active" |
108 | > | 111 | > |
109 | {intl.formatMessage(messages.team)} | 112 | {intl.formatMessage(messages.team)} |
113 | {!user.data.isPremium && ( | ||
114 | <ProBadge inverted={!isDarkThemeActive && router.location.pathname === '/settings/team'} /> | ||
115 | )} | ||
110 | </Link> | 116 | </Link> |
111 | <Link | 117 | <Link |
112 | to="/settings/app" | 118 | to="/settings/app" |
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index e222bb14c..3eb464d49 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -29,7 +29,7 @@ const messages = defineMessages({ | |||
29 | }, | 29 | }, |
30 | manageButton: { | 30 | manageButton: { |
31 | id: 'settings.team.manageAction', | 31 | id: 'settings.team.manageAction', |
32 | defaultMessage: '!!!Manage your Team', | 32 | defaultMessage: '!!!Manage your Team on meetfranz.com', |
33 | }, | 33 | }, |
34 | upgradeButton: { | 34 | upgradeButton: { |
35 | id: 'settings.team.upgradeAction', | 35 | id: 'settings.team.upgradeAction', |
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json index 22eaf0381..4969db910 100644 --- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json +++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Account", | 4 | "defaultMessage": "!!!Account", |
5 | "file": "src/components/settings/account/AccountDashboard.js", | 5 | "file": "src/components/settings/account/AccountDashboard.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 13, | 7 | "line": 14, |
8 | "column": 12 | 8 | "column": 12 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 16, | 11 | "line": 17, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!Your Subscription", | 17 | "defaultMessage": "!!!Your Subscription", |
18 | "file": "src/components/settings/account/AccountDashboard.js", | 18 | "file": "src/components/settings/account/AccountDashboard.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 17, | 20 | "line": 18, |
21 | "column": 24 | 21 | "column": 24 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 20, | 24 | "line": 21, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Upgrade your Account", | 30 | "defaultMessage": "!!!Upgrade your Account", |
31 | "file": "src/components/settings/account/AccountDashboard.js", | 31 | "file": "src/components/settings/account/AccountDashboard.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 21, | 33 | "line": 22, |
34 | "column": 19 | 34 | "column": 19 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 24, | 37 | "line": 25, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!Danger Zone", | 43 | "defaultMessage": "!!Danger Zone", |
44 | "file": "src/components/settings/account/AccountDashboard.js", | 44 | "file": "src/components/settings/account/AccountDashboard.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 25, | 46 | "line": 26, |
47 | "column": 22 | 47 | "column": 22 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 28, | 50 | "line": 29, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | }, | 53 | }, |
@@ -56,11 +56,11 @@ | |||
56 | "defaultMessage": "!!!Manage your subscription", | 56 | "defaultMessage": "!!!Manage your subscription", |
57 | "file": "src/components/settings/account/AccountDashboard.js", | 57 | "file": "src/components/settings/account/AccountDashboard.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 29, | 59 | "line": 30, |
60 | "column": 33 | 60 | "column": 33 |
61 | }, | 61 | }, |
62 | "end": { | 62 | "end": { |
63 | "line": 32, | 63 | "line": 33, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | }, | 66 | }, |
@@ -69,11 +69,11 @@ | |||
69 | "defaultMessage": "!!!Basic Account", | 69 | "defaultMessage": "!!!Basic Account", |
70 | "file": "src/components/settings/account/AccountDashboard.js", | 70 | "file": "src/components/settings/account/AccountDashboard.js", |
71 | "start": { | 71 | "start": { |
72 | "line": 33, | 72 | "line": 34, |
73 | "column": 20 | 73 | "column": 20 |
74 | }, | 74 | }, |
75 | "end": { | 75 | "end": { |
76 | "line": 36, | 76 | "line": 37, |
77 | "column": 3 | 77 | "column": 3 |
78 | } | 78 | } |
79 | }, | 79 | }, |
@@ -82,11 +82,11 @@ | |||
82 | "defaultMessage": "!!!Premium Supporter Account", | 82 | "defaultMessage": "!!!Premium Supporter Account", |
83 | "file": "src/components/settings/account/AccountDashboard.js", | 83 | "file": "src/components/settings/account/AccountDashboard.js", |
84 | "start": { | 84 | "start": { |
85 | "line": 37, | 85 | "line": 38, |
86 | "column": 22 | 86 | "column": 22 |
87 | }, | 87 | }, |
88 | "end": { | 88 | "end": { |
89 | "line": 40, | 89 | "line": 41, |
90 | "column": 3 | 90 | "column": 3 |
91 | } | 91 | } |
92 | }, | 92 | }, |
@@ -95,11 +95,11 @@ | |||
95 | "defaultMessage": "!!!Edit Account", | 95 | "defaultMessage": "!!!Edit Account", |
96 | "file": "src/components/settings/account/AccountDashboard.js", | 96 | "file": "src/components/settings/account/AccountDashboard.js", |
97 | "start": { | 97 | "start": { |
98 | "line": 41, | 98 | "line": 42, |
99 | "column": 21 | 99 | "column": 21 |
100 | }, | 100 | }, |
101 | "end": { | 101 | "end": { |
102 | "line": 44, | 102 | "line": 45, |
103 | "column": 3 | 103 | "column": 3 |
104 | } | 104 | } |
105 | }, | 105 | }, |
@@ -108,11 +108,11 @@ | |||
108 | "defaultMessage": "!!Invoices", | 108 | "defaultMessage": "!!Invoices", |
109 | "file": "src/components/settings/account/AccountDashboard.js", | 109 | "file": "src/components/settings/account/AccountDashboard.js", |
110 | "start": { | 110 | "start": { |
111 | "line": 45, | 111 | "line": 46, |
112 | "column": 18 | 112 | "column": 18 |
113 | }, | 113 | }, |
114 | "end": { | 114 | "end": { |
115 | "line": 48, | 115 | "line": 49, |
116 | "column": 3 | 116 | "column": 3 |
117 | } | 117 | } |
118 | }, | 118 | }, |
@@ -121,11 +121,11 @@ | |||
121 | "defaultMessage": "!!!Download", | 121 | "defaultMessage": "!!!Download", |
122 | "file": "src/components/settings/account/AccountDashboard.js", | 122 | "file": "src/components/settings/account/AccountDashboard.js", |
123 | "start": { | 123 | "start": { |
124 | "line": 49, | 124 | "line": 50, |
125 | "column": 19 | 125 | "column": 19 |
126 | }, | 126 | }, |
127 | "end": { | 127 | "end": { |
128 | "line": 52, | 128 | "line": 53, |
129 | "column": 3 | 129 | "column": 3 |
130 | } | 130 | } |
131 | }, | 131 | }, |
@@ -134,11 +134,11 @@ | |||
134 | "defaultMessage": "!!!Could not load user information", | 134 | "defaultMessage": "!!!Could not load user information", |
135 | "file": "src/components/settings/account/AccountDashboard.js", | 135 | "file": "src/components/settings/account/AccountDashboard.js", |
136 | "start": { | 136 | "start": { |
137 | "line": 53, | 137 | "line": 54, |
138 | "column": 25 | 138 | "column": 25 |
139 | }, | 139 | }, |
140 | "end": { | 140 | "end": { |
141 | "line": 56, | 141 | "line": 57, |
142 | "column": 3 | 142 | "column": 3 |
143 | } | 143 | } |
144 | }, | 144 | }, |
@@ -147,11 +147,11 @@ | |||
147 | "defaultMessage": "!!!Try again", | 147 | "defaultMessage": "!!!Try again", |
148 | "file": "src/components/settings/account/AccountDashboard.js", | 148 | "file": "src/components/settings/account/AccountDashboard.js", |
149 | "start": { | 149 | "start": { |
150 | "line": 57, | 150 | "line": 58, |
151 | "column": 28 | 151 | "column": 28 |
152 | }, | 152 | }, |
153 | "end": { | 153 | "end": { |
154 | "line": 60, | 154 | "line": 61, |
155 | "column": 3 | 155 | "column": 3 |
156 | } | 156 | } |
157 | }, | 157 | }, |
@@ -160,11 +160,11 @@ | |||
160 | "defaultMessage": "!!!Delete account", | 160 | "defaultMessage": "!!!Delete account", |
161 | "file": "src/components/settings/account/AccountDashboard.js", | 161 | "file": "src/components/settings/account/AccountDashboard.js", |
162 | "start": { | 162 | "start": { |
163 | "line": 61, | 163 | "line": 62, |
164 | "column": 17 | 164 | "column": 17 |
165 | }, | 165 | }, |
166 | "end": { | 166 | "end": { |
167 | "line": 64, | 167 | "line": 65, |
168 | "column": 3 | 168 | "column": 3 |
169 | } | 169 | } |
170 | }, | 170 | }, |
@@ -173,11 +173,11 @@ | |||
173 | "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.", | 173 | "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.", |
174 | "file": "src/components/settings/account/AccountDashboard.js", | 174 | "file": "src/components/settings/account/AccountDashboard.js", |
175 | "start": { | 175 | "start": { |
176 | "line": 65, | 176 | "line": 66, |
177 | "column": 14 | 177 | "column": 14 |
178 | }, | 178 | }, |
179 | "end": { | 179 | "end": { |
180 | "line": 68, | 180 | "line": 69, |
181 | "column": 3 | 181 | "column": 3 |
182 | } | 182 | } |
183 | }, | 183 | }, |
@@ -186,11 +186,11 @@ | |||
186 | "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!", | 186 | "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!", |
187 | "file": "src/components/settings/account/AccountDashboard.js", | 187 | "file": "src/components/settings/account/AccountDashboard.js", |
188 | "start": { | 188 | "start": { |
189 | "line": 69, | 189 | "line": 70, |
190 | "column": 19 | 190 | "column": 19 |
191 | }, | 191 | }, |
192 | "end": { | 192 | "end": { |
193 | "line": 72, | 193 | "line": 73, |
194 | "column": 3 | 194 | "column": 3 |
195 | } | 195 | } |
196 | } | 196 | } |
diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json index 91b6754ea..6bccc25ff 100644 --- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json +++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json | |||
@@ -53,7 +53,7 @@ | |||
53 | }, | 53 | }, |
54 | { | 54 | { |
55 | "id": "settings.team.manageAction", | 55 | "id": "settings.team.manageAction", |
56 | "defaultMessage": "!!!Manage your Team", | 56 | "defaultMessage": "!!!Manage your Team on meetfranz.com", |
57 | "file": "src/components/settings/team/TeamDashboard.js", | 57 | "file": "src/components/settings/team/TeamDashboard.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 30, | 59 | "line": 30, |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index efa0ab942..b01412942 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -61,16 +61,6 @@ | |||
61 | 61 | ||
62 | .account { | 62 | .account { |
63 | .account__box { background: $dark-theme-gray-darker; } | 63 | .account__box { background: $dark-theme-gray-darker; } |
64 | |||
65 | .badge--premium { | ||
66 | margin-left: 10px; | ||
67 | } | ||
68 | |||
69 | .manage-user-links { | ||
70 | margin-top: 20px; | ||
71 | display: flex; | ||
72 | justify-content: space-between; | ||
73 | } | ||
74 | } | 64 | } |
75 | 65 | ||
76 | .premium-info { | 66 | .premium-info { |
@@ -334,15 +324,6 @@ | |||
334 | .account__avatar { | 324 | .account__avatar { |
335 | margin-right: 20px; | 325 | margin-right: 20px; |
336 | position: relative; | 326 | position: relative; |
337 | |||
338 | .emoji img { width: 30px; } | ||
339 | } | ||
340 | |||
341 | .account__avatar-premium { | ||
342 | font-size: 26px; | ||
343 | position: absolute; | ||
344 | right: 2px; | ||
345 | top: 2px; | ||
346 | } | 327 | } |
347 | 328 | ||
348 | .account__info { | 329 | .account__info { |
@@ -359,6 +340,22 @@ | |||
359 | .badge { margin-left: 10px; } | 340 | .badge { margin-left: 10px; } |
360 | } | 341 | } |
361 | 342 | ||
343 | .badge--premium { | ||
344 | margin-left: 1px; | ||
345 | position: relative; | ||
346 | top: -3px; | ||
347 | padding-top: 4px; | ||
348 | color: #FFF; | ||
349 | border-radius: 3px; | ||
350 | } | ||
351 | |||
352 | |||
353 | .manage-user-links { | ||
354 | margin-top: 20px; | ||
355 | display: flex; | ||
356 | justify-content: space-between; | ||
357 | } | ||
358 | |||
362 | .account__subscription-button { margin-left: auto; } | 359 | .account__subscription-button { margin-left: auto; } |
363 | .franz-form__button { white-space: nowrap; } | 360 | .franz-form__button { white-space: nowrap; } |
364 | div { height: auto; } | 361 | div { height: auto; } |