mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-16 19:46:19 +02:00
Code Issues Releases Wiki Activity

add pro badge to header

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/MainHeader.jsx
View File

@@ -3,7 +3,7 @@ import { Button } from './common';
import { Trans, NumberFormat, t } from '@lingui/macro'; import { Trans, NumberFormat, t } from '@lingui/macro';
import { I18n } from '@lingui/react'; import { I18n } from '@lingui/react';
import { ProBadge } from './ProBadge'; import { ProBadge } from './ProBadge';
import { Stack } from './Stack'; import { HStack, Stack } from './Stack';
const DEFAULT_PROFILE_IMG = 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"; "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`)} aria-label={i18n._(t`See profile or Logout`)}
class="btn--dark hint--rounded hint--bottom-left" class="btn--dark hint--rounded hint--bottom-left"
> >
<HStack gap={1}>
<img <img
id="headerAvatarImg" id="headerAvatarImg"
width="20" width="20"
src={ src={
props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : '' props.user
? props.user.photoURL || DEFAULT_PROFILE_IMG
: ''
} }
class="main-header__avatar-img" class="main-header__avatar-img"
/> />
{props.user && props.user.isPro ? <ProBadge /> : null}
</HStack>
</Button> </Button>
)} )}
</div> </div>

4
src/components/app.jsx
View File

@@ -194,7 +194,9 @@ export default class App extends Component {
if (customUser) { if (customUser) {
const prefs = { ...this.state.prefs }; const prefs = { ...this.state.prefs };
Object.assign(prefs, user.settings); 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 { } else {

12
src/style.css
View File

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