1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-03-24 20:49:47 +01:00

add pro badge to header

This commit is contained in:
Kushagra Gour 2024-02-28 03:16:08 +05:30
parent 17575313aa
commit abb8967e9a
3 changed files with 25 additions and 14 deletions

View File

@ -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>

View File

@ -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 {

View File

@ -574,7 +574,9 @@ body:not(.light-version).overlay-visible .main-container {
overflow: hidden;
position: relative;
background: var(--color-bg);
transition: height 0.3s ease, width 0.3s ease;
transition:
height 0.3s ease,
width 0.3s ease;
will-change: height;
}
@ -993,7 +995,9 @@ body > #demo-frame {
/* fix me */
background: linear-gradient(45deg, #2d063c, #3a2b63);
box-shadow: inset 1px -1px 0 0 #ffffff17, 0 20px 31px 0 #0000008a;
box-shadow:
inset 1px -1px 0 0 #ffffff17,
0 20px 31px 0 #0000008a;
color: var(--color-text);
position: relative;
@ -2122,10 +2126,10 @@ while the theme CSS file is loading */
padding: 0.1rem 0.3rem;
background-color: #fff91f;
border-radius: 1rem;
font-size: 0.8em;
font-size: 0.7em;
color: #222;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
font-weight: 700;
font-weight: 800;
line-height: 1;
}
@media screen and (max-width: 600px) {