reCAPTCHA: Text padding realignment

[machikoyasuda]

Must have

• Go through each and every page, and confirm padding between text element are 24px (that's a p-4 or m-4 in Bootstrap class utility language) on both Figma and app.
• Go through each and every page, and change the H1 to start from 72px (p-5 m-4) from the nav.

Nice to have

• Go through styles.css to see if there are any 24px or 72pxs being called, replace with classes
• Pages should NOT be delivering empty divs. Refactor base to not do this.
• Combine unnecessary divs
• Renaming confusing base stuff
• Take out unnecessary blocks, use base blocks.

I recommend this ticket be completed last.

[machikoyasuda]

Since this is the last reCAPTCHA ticket, I'm going to be writing any notes in here of any other possible improvements/refactors we can now do:

• Should we get rid of the Media Item includes entirely?
• The app is full of this kind of pattern:

<div class="container">
  <div class="row justify-content-center">
      <div class="col-lg-X"></div>
  </div>
  <div class="row justify-content-center">
       <div class="col-lg-X"></div>
  </div>
  <div class="row justify-content-center">
      <div class="col-lg-X"></div>
  </div>
</div>

In the past, this was necessary because some elements had a different column width. But now, they are all col-lg-6. Can we simplify to:

<div class="container">
  <div class="row justify-content-center">
      <div class="col-lg-6">
         // everything goes in here
      </div>
  </div>
</div>

[machikoyasuda]

Probably can now remove: explanatory-text-wrapper and maybe even cta button from base.

Instead of:

        <div class="container main-row">
          <div class="row justify-content-center">
            {% block headline %}
            {% endblock headline %}
          </div>
          {% block explanatory-text-wrapper %}
            <div class="col-lg-8">
              {% block explanatory-text %}
              {% endblock explanatory-text %}
            </div>
          {% endblock explanatory-text-wrapper %}
          <div class="row justify-content-center">
            {% block inner-content %}
            {% endblock inner-content %}
          </div>
          {% block call-to-action %}
            <div class="row d-flex justify-content-center pt-8">
              <div class="col-12 col-lg-6">
                {% block call-to-action-button %}
                {% endblock call-to-action-button %}
              </div>
            </div>
          {% endblock call-to-action %}
        </div>

Can now just have:

        <div class="container main-row">
          <div class="row justify-content-center">
               <div class="col-12 col-lg-6">
                  {% block inner-content %}
                  {% endblock inner-content %}
               </div>
          </div>
        </div>

EXCEPT Enrollment Sucess is actually col-lg-9 or something weird and one-off.

[machikoyasuda]

Maybe keep call-to-action-button but collapse the others. The goal is to not have a bunch of empty divs on pages.

Actually I retract this statement. A misleading thing about the cta in base is that not all ctas use that (like on forms). So I think it makes sense to remove the cta from base too.

[machikoyasuda]

The kind of refactor desired is achieved here: #2585

[machikoyasuda]

#2585 (comment)