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

new color theme applied to settings

Browse source
This commit is contained in:
nklhrstv 2020-03-04 16:55:10 +02:00
parent d5dea1da8b
commit 30ecf2f805
3 changed files with 63 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common/ColorInput/styles.less
View file

@ -1,3 +1,5 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.color-input-container { .color-input-container {
position: relative; position: relative;
z-index: 0; z-index: 0;
@ -13,13 +15,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 0.5rem; padding: 0 0.5rem;
border: thin solid var(--color-surfacelighter20); border: thin solid @color-surface-light5-20;
pointer-events: none; pointer-events: none;
.transparent-label { .transparent-label {
flex: 1; flex: 1;
text-align: center; text-align: center;
color: var(--color-surfacelighter); color: @color-surface-light5;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -28,4 +30,4 @@
.color-picker-container { .color-picker-container {
margin: 1rem 0; margin: 1rem 0;
} }

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

@ -148,6 +148,9 @@ const Settings = () => {
null null
} }
</div> </div>
<Button className={styles['user-panel-container']} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
<div className={styles['user-panel-label']}>User Panel</div>
</Button>
</div> </div>
{ {
profile.auth === null ? profile.auth === null ?
@ -157,18 +160,16 @@ const Settings = () => {
</Button> </Button>
</div> </div>
: :
<div className={styles['option-container']}> null
<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'} />
<div className={styles['label']}>User panel</div>
</Button>
</div>
} }
<div className={styles['option-container']}> <div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['button-container'])} title={'Addons'} href={'#/addons'}> <div className={styles['option-name-container']}>
<Icon className={styles['icon']} icon={'ic_addons'} /> <div className={styles['label']}>Interface language</div>
<div className={styles['label']}>Addons</div> </div>
</Button> <Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...interfaceLanguageSelect}
/>
</div> </div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<div className={styles['option-name-container']}> <div className={styles['option-name-container']}>
@ -197,15 +198,6 @@ const Settings = () => {
<div className={styles['label']}>Subscribe</div> <div className={styles['label']}>Subscribe</div>
</Button> </Button>
</div> </div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>Interface language</div>
</div>
<Multiselect
className={classnames(styles['option-input-container'], styles['multiselect-container'])}
{...interfaceLanguageSelect}
/>
</div>
<div className={styles['option-container']}> <div className={styles['option-container']}>
<Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'} onClick={exportDataOnClick}> <Button className={classnames(styles['option-input-container'], styles['link-container'])} title={'Export user data'} onClick={exportDataOnClick}>
<div className={styles['label']}>Export user data</div> <div className={styles['label']}>Export user data</div>

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

@ -1,3 +1,5 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/Checkbox/styles.less') { :import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon; checkbox-icon: icon;
} }
@ -10,7 +12,7 @@
.settings-container { .settings-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-background); background-color: @color-background-dark2;
.settings-content { .settings-content {
width: 100%; width: 100%;
@ -23,23 +25,23 @@
align-self: stretch; align-self: stretch;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 17rem; width: 20rem;
padding: 1rem; padding: 3rem;
background-color: var(--color-backgroundlighter);
.side-menu-button { .side-menu-button {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
padding: 1rem; padding: 1rem;
font-size: 1.1rem; font-size: 1.1rem;
color: var(--color-surfacelighter); color: @color-secondaryvariant1;
&.selected { &.selected {
background-color: var(--color-background); background-color: @color-background;
color: @color-surface-light5;
} }
&:hover { &:hover {
background-color: var(--color-surface20); background-color: @color-background-light1;
} }
} }
@ -49,7 +51,7 @@
.version-info-label { .version-info-label {
margin: 0.5rem 0; margin: 0.5rem 0;
color: var(--color-surfacelight); color: @color-secondaryvariant1;
} }
} }
@ -62,15 +64,11 @@
.section-container { .section-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2rem 0; padding: 3rem 0;
overflow: visible; overflow: visible;
&:first-child {
padding-top: 1rem;
}
&:not(:last-child) { &:not(:last-child) {
border-bottom: thin solid var(--color-primary40); border-bottom: thin solid @color-primary;
} }
.section-title { .section-title {
@ -79,7 +77,7 @@
font-size: 1.8rem; font-size: 1.8rem;
line-height: 3.4rem; line-height: 3.4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
.option-container { .option-container {
@ -97,12 +95,12 @@
} }
&.user-info-option-container { &.user-info-option-container {
height: 7rem; height: 6rem;
.avatar-container { .avatar-container {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
width: 7rem; width: 6rem;
margin-right: 1rem; margin-right: 1rem;
border-radius: 50%; border-radius: 50%;
background-size: cover; background-size: cover;
@ -130,9 +128,9 @@
.email-label { .email-label {
flex: 1; flex: 1;
font-size: 1.4rem; font-size: 1.1rem;
max-height: 2.4em; max-height: 2.4em;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }
@ -143,7 +141,7 @@
outline: none; outline: none;
.logout-label { .logout-label {
color: var(--color-surfacelighter); color: @color-surface-light5;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -151,10 +149,34 @@
.logout-label { .logout-label {
flex: 1; flex: 1;
max-height: 1.2em; max-height: 1.2em;
color: var(--color-surface); color: @color-surface;
} }
} }
} }
.user-panel-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
width: 10rem;
height: 3.5rem;
margin-left: 1rem;
background-color: @color-accent3;
&:hover {
background-color: @color-accent3-light1;
}
.user-panel-label {
flex: 1;
max-height: 2.4em;
padding: 0 0.5rem;
font-weight: 600;
text-align: center;
color: @color-surface-light5;
}
}
} }
.option-name-container, .option-input-container { .option-name-container, .option-input-container {
@ -168,7 +190,7 @@
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
.label { .label {
@ -176,7 +198,7 @@
flex-shrink: 1; flex-shrink: 1;
flex-basis: auto; flex-basis: auto;
line-height: 1.5rem; line-height: 1.5rem;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }
@ -191,10 +213,10 @@
&.button-container { &.button-container {
justify-content: center; justify-content: center;
background-color: var(--color-primary); background-color: @color-accent3;
&:hover { &:hover {
background-color: var(--color-primarylight); background-color: @color-accent3-light1;
} }
} }