Skip to content

Commit

Permalink
Consistent button sizes, page titles, form wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
@LanesGood
LanesGood committed Jan 18, 2023
1 parent 01ed684 commit 514d9ff
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 166 deletions.
322 changes: 163 additions & 159 deletions src/components/profile-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,174 +230,178 @@ export default class ProfileForm extends Component {

return (
<article className='inner page'>
<h1>Edit your profile details</h1>
<Formik
enableReinitialize
validateOnBlur
validationSchema={yupSchema}
initialValues={initialValues}
onSubmit={async (values, actions) => {
const data = Object.keys(values).map((key) => ({
key_id: key,
value: values[key],
}))
actions.setSubmitting(true)
try {
await setMyProfile(data)
actions.setSubmitting(false)
Router.push(returnUrl)
} catch (e) {
logger.error(e)
actions.setSubmitting(false)
actions.setStatus(e.message)
}
}}
render={({ status, isSubmitting }) => {
const addProfileText = `Submit ${isSubmitting ? ' 🕙' : ''}`
return (
<Form>
{orgAttributes.length > 0 ? (
<>
<h2>
Details for <b>{orgName}</b>
</h2>
{orgAttributes.map((attribute) => {
return (
<div
key={attribute.name}
className='form-control form-control__vertical'
>
<label>
{attribute.name}
{attribute.required ? (
<span className='form--required'>*</span>
) : (
''
)}
{attribute.description
? descriptionPopup(attribute.description)
: ''}
</label>
{attribute.key_type === 'gender' ? (
<section>
<h1>Edit your profile details</h1>
<Formik
enableReinitialize
validateOnBlur
validationSchema={yupSchema}
initialValues={initialValues}
onSubmit={async (values, actions) => {
const data = Object.keys(values).map((key) => ({
key_id: key,
value: values[key],
}))
actions.setSubmitting(true)
try {
await setMyProfile(data)
actions.setSubmitting(false)
Router.push(returnUrl)
} catch (e) {
logger.error(e)
actions.setSubmitting(false)
actions.setStatus(e.message)
}
}}
render={({ status, isSubmitting }) => {
const addProfileText = `Submit ${isSubmitting ? ' 🕙' : ''}`
return (
<Form>
{orgAttributes.length > 0 ? (
<>
<h2>
Details for <b>{orgName}</b>
</h2>
{orgAttributes.map((attribute) => {
return (
<div
key={attribute.name}
className='form-control form-control__vertical'
>
<label>
Type in or select your gender from the drop-down.
{attribute.name}
{attribute.required ? (
<span className='form--required'>*</span>
) : (
''
)}
{attribute.description
? descriptionPopup(attribute.description)
: ''}
</label>
) : null}
{attribute.key_type === 'gender' ? (
<GenderSelectField name={attribute.id} />
) : (
<>
<Field
type={attribute.key_type}
name={attribute.id}
required={attribute.required}
/>
<div className='form--error'>
<ErrorMessage name={attribute.id} />
</div>
</>
)}
</div>
)
})}
</>
) : (
''
)}
<h2>
Details for <b>{teamName}</b>
</h2>
{memberAttributes.length > 0
? memberAttributes.map((attribute) => {
return (
<div
key={attribute.name}
className='form-control form-control__vertical'
>
<label>
{attribute.name}
{attribute.required ? (
<span className='form--required'>*</span>
{attribute.key_type === 'gender' ? (
<label>
Type in or select your gender from the
drop-down.
</label>
) : null}
{attribute.key_type === 'gender' ? (
<GenderSelectField name={attribute.id} />
) : (
''
<>
<Field
type={attribute.key_type}
name={attribute.id}
required={attribute.required}
/>
<div className='form--error'>
<ErrorMessage name={attribute.id} />
</div>
</>
)}
{attribute.description
? descriptionPopup(attribute.description)
: ''}
</label>
{attribute.key_type === 'gender' ? (
</div>
)
})}
</>
) : (
''
)}
<h2>
Details for <b>{teamName}</b>
</h2>
{memberAttributes.length > 0
? memberAttributes.map((attribute) => {
return (
<div
key={attribute.name}
className='form-control form-control__vertical'
>
<label>
Type in or select your gender from the drop-down.
{attribute.name}
{attribute.required ? (
<span className='form--required'>*</span>
) : (
''
)}
{attribute.description
? descriptionPopup(attribute.description)
: ''}
</label>
) : null}
{attribute.key_type === 'gender' ? (
<GenderSelectField name={attribute.id} />
) : (
<>
<Field
type={attribute.key_type}
name={attribute.id}
required={attribute.required}
/>
<div className='form--error'>
<ErrorMessage name={attribute.id} />
</div>
</>
)}
</div>
)
})
: 'No profile form to fill yet'}
{org && org.privacy_policy ? (
<div>
<h2>Privacy Policy</h2>
<div
style={{
maxHeight: '100px',
width: '80%',
overflow: 'scroll',
marginBottom: '1rem',
}}
>
{org.privacy_policy.body}
{attribute.key_type === 'gender' ? (
<label>
Type in or select your gender from the
drop-down.
</label>
) : null}
{attribute.key_type === 'gender' ? (
<GenderSelectField name={attribute.id} />
) : (
<>
<Field
type={attribute.key_type}
name={attribute.id}
required={attribute.required}
/>
<div className='form--error'>
<ErrorMessage name={attribute.id} />
</div>
</>
)}
</div>
)
})
: 'No profile form to fill yet'}
{org && org.privacy_policy ? (
<div>
<h2>Privacy Policy</h2>
<div
style={{
maxHeight: '100px',
width: '80%',
overflow: 'scroll',
marginBottom: '1rem',
}}
>
{org.privacy_policy.body}
</div>
<div
style={{
maxHeight: '100px',
width: '80%',
overflow: 'scroll',
}}
>
<input
type='checkbox'
checked={consentChecked}
onChange={(e) =>
this.setConsentChecked(e.target.checked)
}
/>
{org.privacy_policy.consentText}
</div>
</div>
<div
style={{
maxHeight: '100px',
width: '80%',
overflow: 'scroll',
}}
) : (
<div />
)}
{status && status.msg && <div>{status.msg}</div>}
<div
style={{ marginTop: '1rem' }}
className='form-control form-control__vertical'
>
<Button
type='submit'
variant='submit'
disabled={!consentChecked || isSubmitting}
>
<input
type='checkbox'
checked={consentChecked}
onChange={(e) =>
this.setConsentChecked(e.target.checked)
}
/>
{org.privacy_policy.consentText}
</div>
{addProfileText}
</Button>
</div>
) : (
<div />
)}
{status && status.msg && <div>{status.msg}</div>}
<div
style={{ marginTop: '1rem' }}
className='form-control form-control__vertical'
>
<Button
type='submit'
variant='submit'
disabled={!consentChecked || isSubmitting}
>
{addProfileText}
</Button>
</div>
</Form>
)
}}
/>
</Form>
)
}}
/>
</section>
</article>
)
}
Expand Down
7 changes: 2 additions & 5 deletions src/pages/organizations/[id]/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ class Organization extends Component {
<SectionHeader>Badges</SectionHeader>
<div>
<Button
variant='primary small'
variant='primary'
onClick={() =>
Router.push(join(URL, `/organizations/${orgId}/badges/add`))
}
Expand Down Expand Up @@ -330,10 +330,7 @@ class Organization extends Component {
<div className='section-actions'>
<SectionHeader>Org Details</SectionHeader>
{isOwner ? (
<Button
variant='small'
href={`/organizations/${org.data.id}/edit`}
>
<Button href={`/organizations/${org.data.id}/edit`}>
Edit
</Button>
) : (
Expand Down
4 changes: 2 additions & 2 deletions src/pages/teams/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default class TeamList extends Component {
return (
<Map
markers={centers}
style={{ height: '300px' }}
style={{ height: '360px' }}
onBoundsChange={this.onMapBoundsChange.bind(this)}
/>
)
Expand All @@ -185,7 +185,7 @@ export default class TeamList extends Component {
const { searchOnMapMove } = this.state
return (
<div className='inner page'>
<h2>Teams</h2>
<h1>Explore All Teams</h1>
{this.renderMap()}
<fieldset>
<input
Expand Down

0 comments on commit 514d9ff

Please sign in to comment.