Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #111 from edx/adeel/remove_margin_bottom_register_page

Browse Source 
Remove margin bottom from register fields
This commit is contained in:
adeel khan
2021-02-01 16:44:03 +05:00
committed by GitHub
parent 101a8da547 7b750c7405
commit 21dad5340a
2 changed files with 46 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/register/RegistrationPage.jsx
View File

@@ -403,7 +403,7 @@ class RegistrationPage extends React.Component {
<ValidationFormGroup
for={field.name}
key={field.name}
className="pt-10 mb-20 small"
className="pt-10 small"
>
{ nodes }
</ValidationFormGroup>
@@ -420,7 +420,7 @@ class RegistrationPage extends React.Component {
key={field.name}
invalid={this.state.errors[stateVar] !== ''}
invalidMessage={field.errorMessages.required}
className="custom-control mb-20 small"
className="custom-control small"
>
<Input {...props} />
{beforeLink}
@@ -445,7 +445,7 @@ class RegistrationPage extends React.Component {
key={field.name}
invalid={this.state.errors[stateVar] !== ''}
invalidMessage={field.errorMessages.required}
className="mb-20"
className="mb-0"
>
<label htmlFor={field.name} className="h6 pt-10">{field.label} (required)</label>
<Input {...props} />
@@ -461,7 +461,7 @@ class RegistrationPage extends React.Component {
addExtraOptionalFields() {
const fields = this.props.formData.fields.map((field) => {
let options = null;
let cssClass = 'mb-20';
let cssClass = 'mb-0';
if (REGISTRATION_EXTRA_FIELDS.includes(field.name)) {
if (!field.required && field.name !== 'honor_code' && field.name !== 'country') {
REGISTRATION_OPTIONAL_MAP[field.name] = true;
@@ -588,12 +588,11 @@ class RegistrationPage extends React.Component {
</div>
<hr className="mb-20 border-gray-200" />
<h3 className="mb-20">{intl.formatMessage(messages['create.a.new.account'])}</h3>
<Form className="mb-4 form-group">
<Form className="form-group">
<ValidationFormGroup
for="name"
invalid={this.state.errors.name !== ''}
invalidMessage={this.state.errors.name}
className="mb-20"
helpText="This name will be used by any certificates that you earn."
>
<label htmlFor="name" className="h6 pt-10">
@@ -615,7 +614,6 @@ class RegistrationPage extends React.Component {
for="username"
invalid={this.state.errors.username !== ''}
invalidMessage={this.state.errors.username}
className="mb-20"
helpText="The name that will identify you in your courses. It cannot be changed later."
>
<label htmlFor="username" className="h6 pt-10">
@@ -638,7 +636,6 @@ class RegistrationPage extends React.Component {
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={this.state.errors.email}
className="mb-20"
helpText="This is what you will use to login."
>
<label htmlFor="email" className="h6 pt-10">
@@ -661,7 +658,6 @@ class RegistrationPage extends React.Component {
for="password"
invalid={this.state.errors.password !== ''}
invalidMessage={this.state.errors.password}
className="mb-20"
helpText="Your password must contain at least 8 characters, including 1 letter & 1 number."
>
<label htmlFor="password" className="h6 pt-10">
@@ -694,7 +690,7 @@ class RegistrationPage extends React.Component {
onChange={e => this.handleOnOptional(e)}
required
/>
<p role="presentation" id="additionalFields" className="mb-20 small" onClick={e => this.handleOnOptional(e)}>
<p role="presentation" id="additionalFields" className="mb-0 small" onClick={e => this.handleOnOptional(e)}>
{intl.formatMessage(messages['support.education.research'])}
</p>
</ValidationFormGroup>
@@ -703,6 +699,7 @@ class RegistrationPage extends React.Component {
type="button"
variant="brand"
state={submitState}
className="mt-20"
labels={{
default: intl.formatMessage(messages['create.account.button']),
}}

78
src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -43,10 +43,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
Create a new account
</h3>
<form
className="mb-4 form-group"
className="form-group"
>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -75,7 +75,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -105,7 +105,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -134,7 +134,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
</small>
</div>
<div
className="form-group custom-control mb-20 small"
className="form-group custom-control small"
>
<input
aria-describedby=""
@@ -178,7 +178,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
value={false}
/>
<p
className="mb-20 small"
className="mb-0 small"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -189,7 +189,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
disabled={false}
onClick={[Function]}
type="button"
@@ -240,10 +240,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
Create a new account
</h3>
<form
className="mb-4 form-group"
className="form-group"
>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -272,7 +272,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -302,7 +302,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -331,7 +331,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -360,7 +360,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
</small>
</div>
<div
className="form-group custom-control mb-20 small"
className="form-group custom-control small"
>
<input
aria-describedby=""
@@ -404,7 +404,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
value={false}
/>
<p
className="mb-20 small"
className="mb-0 small"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -415,7 +415,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
disabled={false}
onClick={[Function]}
type="button"
@@ -505,10 +505,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
Create a new account
</h3>
<form
className="mb-4 form-group"
className="form-group"
>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -537,7 +537,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -567,7 +567,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -596,7 +596,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -625,7 +625,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
</small>
</div>
<div
className="form-group custom-control mb-20 small"
className="form-group custom-control small"
>
<input
aria-describedby=""
@@ -669,7 +669,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
value={false}
/>
<p
className="mb-20 small"
className="mb-0 small"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -680,7 +680,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
disabled={false}
onClick={[Function]}
type="button"
@@ -731,10 +731,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
Create a new account
</h3>
<form
className="mb-4 form-group"
className="form-group"
>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -763,7 +763,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -793,7 +793,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -822,7 +822,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -851,7 +851,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
</small>
</div>
<div
className="form-group custom-control mb-20 small"
className="form-group custom-control small"
>
<input
aria-describedby=""
@@ -895,7 +895,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
value={false}
/>
<p
className="mb-20 small"
className="mb-0 small"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -906,7 +906,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
<button
aria-disabled={true}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-pending disabled btn btn-brand"
className="pgn__stateful-btn pgn__stateful-btn-state-pending mt-20 disabled btn btn-brand"
disabled={false}
onClick={[Function]}
type="button"
@@ -1000,10 +1000,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
Create a new account
</h3>
<form
className="mb-4 form-group"
className="form-group"
>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -1032,7 +1032,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -1062,7 +1062,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -1091,7 +1091,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
</small>
</div>
<div
className="form-group mb-20"
className="form-group"
>
<label
className="h6 pt-10"
@@ -1120,7 +1120,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
</small>
</div>
<div
className="form-group custom-control mb-20 small"
className="form-group custom-control small"
>
<input
aria-describedby=""
@@ -1164,7 +1164,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
value={false}
/>
<p
className="mb-20 small"
className="mb-0 small"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -1175,7 +1175,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
className="pgn__stateful-btn pgn__stateful-btn-state-default mt-20 btn btn-brand"
disabled={false}
onClick={[Function]}
type="button"