From 514d9ffd8618ff0aea25125f6c17fc45247a5242 Mon Sep 17 00:00:00 2001
From: Lane Goodman <Lane@developmentseed.org>
Date: Wed, 18 Jan 2023 14:19:23 -0500
Subject: [PATCH] Consistent button sizes, page titles, form wrapper

---
 src/components/profile-form.js        | 322 +++++++++++++-------------
 src/pages/organizations/[id]/index.js |   7 +-
 src/pages/teams/index.js              |   4 +-
 3 files changed, 167 insertions(+), 166 deletions(-)

diff --git a/src/components/profile-form.js b/src/components/profile-form.js
index 3b7ebfff..f4499062 100644
--- a/src/components/profile-form.js
+++ b/src/components/profile-form.js
@@ -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>
     )
   }
diff --git a/src/pages/organizations/[id]/index.js b/src/pages/organizations/[id]/index.js
index a013cc79..4fd42095 100644
--- a/src/pages/organizations/[id]/index.js
+++ b/src/pages/organizations/[id]/index.js
@@ -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`))
                 }
@@ -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>
               ) : (
diff --git a/src/pages/teams/index.js b/src/pages/teams/index.js
index b04aac37..003c81a6 100644
--- a/src/pages/teams/index.js
+++ b/src/pages/teams/index.js
@@ -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)}
       />
     )
@@ -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