Homepage style improvements

stable/1.0.x
Alex Gleason 2020-05-31 19:22:08 -05:00
rodzic 73e2649530
commit 55c958c7ad
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
7 zmienionych plików z 78 dodań i 77 usunięć

Wyświetl plik

@ -33,7 +33,7 @@ class AboutPage extends ImmutablePureComponent {
render() { render() {
return ( return (
<div className='content'> <div className='content'>
<div className='box-widget'> <div className='about-page'>
<div <div
className='rich-formatting' className='rich-formatting'
dangerouslySetInnerHTML={{ __html: this.state.pageHtml }} dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}

Wyświetl plik

@ -73,66 +73,64 @@ class RegistrationForm extends ImmutablePureComponent {
const isLoading = this.state.captchaLoading || this.state.submissionLoading; const isLoading = this.state.captchaLoading || this.state.submissionLoading;
return ( return (
<div className='box-widget'> <SimpleForm onSubmit={this.onSubmit}>
<SimpleForm onSubmit={this.onSubmit}> <fieldset disabled={isLoading}>
<fieldset disabled={isLoading}> <div className='simple_form__overlay-area'>
<div className='simple_form__overlay-area'> <p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
<p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p> <div className='fields-group'>
<div className='fields-group'> <TextInput
<TextInput placeholder='Username'
placeholder='Username' name='username'
name='username' autoComplete='off'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='E-mail address'
name='email'
type='email'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Password'
name='password'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Confirm password'
name='confirm'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
</div>
<CaptchaField
onFetch={this.onFetchCaptcha}
onFetchFail={this.onFetchCaptchaFail}
onChange={this.onInputChange} onChange={this.onInputChange}
idempotencyKey={this.state.captchaIdempotencyKey} required
/>
<SimpleInput
placeholder='E-mail address'
name='email'
type='email'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Password'
name='password'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
placeholder='Confirm password'
name='confirm'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/> />
<div className='fields-group'>
<Checkbox
label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
name='agreement'
onChange={this.onCheckboxChange}
required
/>
</div>
<input type='hidden' name='locale' value='en_US' />
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>Sign up</button>
</div>
</div> </div>
</fieldset> <CaptchaField
</SimpleForm> onFetch={this.onFetchCaptcha}
</div> onFetchFail={this.onFetchCaptchaFail}
onChange={this.onInputChange}
idempotencyKey={this.state.captchaIdempotencyKey}
/>
<div className='fields-group'>
<Checkbox
label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
name='agreement'
onChange={this.onCheckboxChange}
required
/>
</div>
<input type='hidden' name='locale' value='en_US' />
<div className='actions'>
<button name='button' type='submit' className='btn button button-primary'>Sign up</button>
</div>
</div>
</fieldset>
</SimpleForm>
); );
} }

Wyświetl plik

@ -729,6 +729,13 @@ $small-breakpoint: 960px;
&--right { &--right {
margin-left: auto; margin-left: auto;
width: 395px; width: 395px;
background-color: #fff;
border-radius: 6px;
.simple_form {
padding: 20px;
background-color: var(--brand-color-faint);
}
} }
@media (min-width: 767px) and (max-width: 1024px) { @media (min-width: 767px) and (max-width: 1024px) {
@ -1005,3 +1012,7 @@ $small-breakpoint: 960px;
.public-layout pre.canary { .public-layout pre.canary {
white-space: pre-wrap; white-space: pre-wrap;
} }
.about-page {
background: var(--brand-color-faint);
}

Wyświetl plik

@ -53,7 +53,7 @@
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: $ui-primary-color; background-color: var(--brand-color-med);
cursor: default; cursor: default;
} }

Wyświetl plik

@ -203,6 +203,8 @@
.content { .content {
display: block; display: block;
margin: 40px 0; margin: 40px 0;
background: #fff;
border-radius: 6px;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
margin-top: 0; margin-top: 0;
@ -270,10 +272,12 @@
position: absolute; position: absolute;
top: 30px; top: 30px;
left: 160px; left: 160px;
border-radius: 4px;
background: #fff;
overflow: hidden;
a { a {
padding: 4px; padding: 4px;
border-radius: 4px;
background-color: var(--brand-color-med); background-color: var(--brand-color-med);
} }
} }

Wyświetl plik

@ -6,8 +6,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: auto; margin-top: auto;
background-color: lighten($ui-base-color, 5%); color: #fff;
border-top: darken($ui-base-color, 10%); background-color: rgba(0, 0, 0, 0.15);
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
padding: 40px 20px; padding: 40px 20px;
@ -48,14 +48,9 @@
margin-right: auto; margin-right: auto;
span { span {
color: var(--primary-text-color);
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
&:last-of-type {
color: var(--primary-text-color-faint);
}
} }
} }
@ -67,7 +62,7 @@
li { li {
a { a {
text-decoration: none; text-decoration: none;
color: lighten($ui-base-color, 34%); color: #fff;
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;

Wyświetl plik

@ -409,17 +409,10 @@ code {
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover,
background-color: lighten($ui-highlight-color, 5%);
}
&:active, &:active,
&:focus { &:focus {
background-color: darken($ui-highlight-color, 5%); background-color: var(--brand-color-hicontrast);
}
&:disabled:hover {
background-color: $ui-primary-color;
} }
&.negative { &.negative {