Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

logout button moved bellow the email label

Browse source
This commit is contained in:
nklhrstv 2020-02-11 18:02:06 +02:00
parent 539c90c6b8
commit 5a7b322285
2 changed files with 77 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/routes/Settings/Settings.js
View file

@ -88,22 +88,34 @@ const Settings = () => {
`url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')` `url('${profile.auth.user.avatar}'), url('/images/default_avatar.png')`
}} }}
/> />
<div className={styles['email-label']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}> <div className={styles['email-logout-container']}>
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email} <div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
<div className={styles['email-label']}>
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
</div>
</div>
{
profile.auth !== null ?
<Button className={styles['logout-button-container']} title={'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>Log out</div>
</Button>
:
null
}
</div> </div>
</div> </div>
{ {
profile.auth === null ? profile.auth === null ?
<div className={styles['option-container']}> <div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Log in / Sign up'} href={'#/intro'} onClick={logoutButtonOnClick}> <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Log in / Sign up'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['label']}>{'Log in / Sign up'}</div> <div className={styles['label']}>Log in / Sign up</div>
</Button> </Button>
</div> </div>
: :
<div className={styles['option-container']}> <div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}> <Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
<Icon className={styles['icon']} icon={'ic_user'} /> <Icon className={styles['icon']} icon={'ic_user'} />
<div className={styles['label']}>{'User panel'}</div> <div className={styles['label']}>User panel</div>
</Button> </Button>
</div> </div>
} }
@ -169,16 +181,6 @@ const Settings = () => {
<div className={styles['label']}>Privacy Policy</div> <div className={styles['label']}>Privacy Policy</div>
</Button> </Button>
</div> </div>
{
profile.auth !== null ?
<div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Log out'} href={'#/intro'} onClick={logoutButtonOnClick}>
<div className={styles['label']}>Log out</div>
</Button>
</div>
:
null
}
</div> </div>
<div className={styles['section-container']}> <div className={styles['section-container']}>
<div className={styles['section-title']}>Player</div> <div className={styles['section-title']}>Player</div>

83
src/routes/Settings/styles.less
View file

@ -95,6 +95,67 @@
margin-bottom: 0; margin-bottom: 0;
} }
&.user-info-option-container {
height: 7rem;
.avatar-container {
flex: none;
align-self: stretch;
width: 7rem;
margin-right: 1rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.email-logout-container {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: column;
padding: 1rem 0;
.email-label-container, .logout-button-container {
display: flex;
flex-direction: row;
align-items: center;
}
.email-label-container {
flex: 1 0 auto;
.email-label {
flex: 1;
font-size: 1.4rem;
max-height: 2.4em;
color: var(--color-surfacelighter);
}
}
.logout-button-container {
flex: 0 1 50%;
&:hover, &:focus {
outline: none;
.logout-label {
color: var(--color-surfacelighter);
text-decoration: underline;
}
}
.logout-label {
flex: 1;
max-height: 1.2em;
color: var(--color-surface);
}
}
}
}
.option-name-container, .option-input-container { .option-name-container, .option-input-container {
flex: 1 1 50%; flex: 1 1 50%;
display: flex; display: flex;
@ -185,28 +246,6 @@
} }
} }
} }
.user-info-option-container {
.avatar-container {
flex: none;
width: 6rem;
height: 6rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.email-label {
flex: 1;
font-size: 1.4rem;
max-height: 3.6em;
padding: 0 2rem;
color: var(--color-surfacelighter);
}
}
} }
} }
} }