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

minor refactor in Intro screen

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-06-04 11:06:09 +03:00
parent ca4e83148e
commit eb72dfb266
4 changed files with 221 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common/Checkbox/styles.less
View file

@ -1,7 +1,6 @@
.checkbox-container {
position: relative;
z-index: 0;
display: inline-block;
&:global(.checked) {
.icon {

2
src/routes/Intro/ConsentCheckbox/styles.less
View file

@ -14,8 +14,6 @@
margin-left: 0.5em;
line-height: 1.2em;
color: var(--color-surface);
word-wrap: break-word;
overflow: hidden;
.link {
color: var(--color-surfacelight);

5
src/routes/Intro/Intro.js
View file

@ -182,9 +182,7 @@ class Intro extends React.Component {
render() {
return (
<div className={styles['intro-container']}>
<div className={styles['background-overlay']} />
<div className={styles['intro-content']} tabIndex={-1}>
<div className={styles['intro-container']} tabIndex={-1}>
<div className={styles['form-container']}>
<Input className={classnames(styles['login-form-button'], styles['facebook-button'], 'focusable-with-border')} type={'button'} onClick={this.loginWithFacebook}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
@ -274,7 +272,6 @@ class Intro extends React.Component {
</Input>
</div>
</div>
</div >
);
}
}

44
src/routes/Intro/styles.less
View file

@ -4,36 +4,18 @@
}
.intro-container {
position: relative;
z-index: 0;
height: 100%;
background-image: url('/images/intro_background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
.background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-color: var(--color-backgrounddark80);
}
.intro-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background:
linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)),
url('/images/intro_background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
overflow-y: auto;
overflow-x: hidden;
@ -52,8 +34,10 @@
cursor: pointer;
.icon {
flex: none;
align-self: stretch;
display: block;
width: 0.8em;
height: 100%;
margin-right: 1em;
fill: var(--color-surfacelighter);
@ -63,13 +47,13 @@
}
.label {
flex: none;
max-width: 100%;
padding: 0.3em 0;
font-size: 1.1em;
line-height: 1.2em;
font-weight: 600;
color: var(--color-surfacelighter);
word-wrap: break-word;
}
}
@ -92,7 +76,6 @@
margin-bottom: 2em;
text-align: center;
color: var(--color-surface);
word-wrap: break-word;
}
.text-input {
@ -122,11 +105,10 @@
text-align: right;
.forgot-password-link {
max-width: 100%;
display: inline-block;
max-width: 100%;
padding: 0.5em 0.3em;
color: var(--color-surfacelight);
word-wrap: break-word;
cursor: pointer;
&:hover {
@ -149,7 +131,6 @@
margin: 1em 0;
text-align: center;
color: var(--color-signal1);
word-wrap: break-word;
}
.submit-button {
@ -184,5 +165,4 @@
}
}
}
}
}