add pro badge to header

src/components/MainHeader.jsx

@@ -3,7 +3,7 @@ import { Button } from './common';
 import { Trans, NumberFormat, t } from '@lingui/macro';
 import { I18n } from '@lingui/react';
 import { ProBadge } from './ProBadge';
-import { Stack } from './Stack';
+import { HStack, Stack } from './Stack';
 
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
@@ -136,14 +136,19 @@ export function MainHeader(props) {
 								aria-label={i18n._(t`See profile or Logout`)}
 								class="btn--dark hint--rounded  hint--bottom-left"
 							>
-								<img
-									id="headerAvatarImg"
-									width="20"
-									src={
-										props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''
-									}
-									class="main-header__avatar-img"
-								/>
+								<HStack gap={1}>
+									<img
+										id="headerAvatarImg"
+										width="20"
+										src={
+											props.user
+												? props.user.photoURL || DEFAULT_PROFILE_IMG
+												: ''
+										}
+										class="main-header__avatar-img"
+									/>
+									{props.user && props.user.isPro ? <ProBadge /> : null}
+								</HStack>
 							</Button>
 						)}
 					</div>

src/components/app.jsx

@@ -194,7 +194,9 @@ export default class App extends Component {
 					if (customUser) {
 						const prefs = { ...this.state.prefs };
 						Object.assign(prefs, user.settings);
-						this.setState({ prefs }, this.updateSetting);
+						const newUser = { ...user, isPro: false, ...customUser };
+						window.localStorage.setItem('user', newUser);
+						this.setState({ user: newUser, prefs }, this.updateSetting);
 					}
 				});
 			} else {