Move navigation to bottom in onboarding (#20010)

* Shifted navigation to bottom in onboarding

* Padding changes
This commit is contained in:
Rajat Talesra 2023-08-30 23:22:41 +05:30 committed by GitHub
parent 7e83f18eca
commit cd0f53e413
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 30 deletions

View file

@ -35,7 +35,7 @@
@media screen and (min-width: $breakpoint-s) {
justify-content: center;
padding: var(--su-7) var(--su-8);
padding: var(--su-8);
}
}
@ -97,10 +97,10 @@
align-self: flex-end;
flex-shrink: 0;
width: 100%;
border-bottom: 2px solid #000;
border-top: 1px solid var(--divider);
&.intro-slide {
border-bottom: none;
border-top: none;
}
.navigation-content {

View file

@ -62,12 +62,6 @@ export class EmailPreferencesForm extends Component {
aria-labelledby="title"
aria-describedby="subtitle"
>
<Navigation
prev={prev}
next={this.onSubmit}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
<div className="onboarding-content terms-and-conditions-wrapper">
<header className="onboarding-content-header">
<h1 id="title" className="title">
@ -111,6 +105,12 @@ export class EmailPreferencesForm extends Component {
</fieldset>
</form>
</div>
<Navigation
prev={prev}
next={this.onSubmit}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
</div>
</div>
);

View file

@ -108,13 +108,6 @@ export class FollowTags extends Component {
aria-labelledby="title"
aria-describedby="subtitle"
>
<Navigation
prev={prev}
next={this.handleComplete}
canSkip={canSkip}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
<div className="onboarding-content toggle-bottom">
<header className="onboarding-content-header">
<h1 id="title" className="title">
@ -169,6 +162,13 @@ export class FollowTags extends Component {
})}
</div>
</div>
<Navigation
prev={prev}
next={this.handleComplete}
canSkip={canSkip}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
</div>
</div>
);

View file

@ -197,13 +197,6 @@ export class FollowUsers extends Component {
aria-labelledby="title"
aria-describedby="subtitle"
>
<Navigation
prev={prev}
next={this.handleComplete}
canSkip={canSkip}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
<div className="onboarding-content toggle-bottom">
<header className="onboarding-content-header">
<h1 id="title" className="title">
@ -271,6 +264,13 @@ export class FollowUsers extends Component {
})}
</fieldset>
</div>
<Navigation
prev={prev}
next={this.handleComplete}
canSkip={canSkip}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
</div>
</div>
);

View file

@ -190,13 +190,6 @@ export class ProfileForm extends Component {
aria-labelledby="title"
aria-describedby="subtitle"
>
<Navigation
prev={prev}
next={this.onSubmit}
canSkip={canSkip}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
{error && (
<div role="alert" class="crayons-notice crayons-notice--danger m-2">
An error occurred: {errorMessage}
@ -268,6 +261,13 @@ export class ProfileForm extends Component {
{sections}
</div>
<Navigation
prev={prev}
next={this.onSubmit}
canSkip={canSkip}
slidesCount={slidesCount}
currentSlideIndex={currentSlideIndex}
/>
</div>
</div>
);