Merge pull request #390 from cisagov/ik/style-passthrough

Form style tweaks and adjustments

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -35,6 +35,19 @@ $letter-space--xs: .0125em;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.usa-logo {
+  margin-top: units(2);
+}
+
+.usa-logo__text {
+  @include typeset('sans', 'xl', 2);
+  color: color('primary-darker');
+}
+
+.usa-nav__primary {
+  margin-top: units(1);
+}
+
  h1 {
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
@@ -45,28 +58,44 @@ $letter-space--xs: .0125em;
   font-weight: font-weight('semibold');
   line-height: line-height('heading', 3);
   margin: units(4) 0 units(1);
+ }
 
-  &:first-of-type {
-    margin-top: units(2);
-  }
- }
+.register-form-step > h1 {
+  //align to top of sidebar on first page of the form
+  margin-top: units(-1);
+}
+
+ //Tighter spacing when H2 is immediatly after H1
+.register-form-step .usa-fieldset:first-of-type h2:first-of-type,
+.register-form-step h1 + h2 {
+  margin-top: units(1); 
+}
 
 .register-form-step h3 {
   color: color('primary-dark');
   letter-spacing: $letter-space--xs;
   margin-top: units(3);
   margin-bottom: 0;
+
+  + p {
+    margin-top: units(0.5);
+  }
+}
+
+.register-form-step h4 {
+  margin-bottom: 0;
+
+  + p { 
+    margin-top: units(0.5);
+  }
 }
 
 .register-form-step p,
-.dashboard p {
+.register-form-step .usa-list li,
+.dashboard p 
+{
   @include typeset('sans', 'sm', 5);
   max-width: measure(5);
-
-  //TODO: Revisit
-  // &:last-of-type {
-  //   margin-bottom: 0;
-  // }
 }
 
 .register-form-step a {
@@ -77,6 +106,10 @@ $letter-space--xs: .0125em;
   }
 }
 
+.register-form-step .usa-label:first-of-type {
+  margin-top: units(1);
+}
+
 a.breadcrumb__back {
   display:flex;
   align-items: center;
@@ -114,8 +147,39 @@ a.breadcrumb__back {
   margin-top: units(1);
 }
 
+.domain_example {
+  p {
+    margin-bottom: 0;
+  }
+
+  .usa-list {
+    margin-top: units(0.5);
+  }
+} 
+
+.review__step {
+  margin-top: units(3);
+
+  &:first-of-type {
+    margin-top: units(4);
+  }
+}
+
+.review__step hr {
+  border: none; //reset
+  border-top: 1px solid color('primary-dark');
+  margin-top: 0;
+  margin-bottom: units(0.5);
+}
+
+.review__step__title a:visited {
+  color: color('primary');
+}
+
 .review__step__name {
+  color: color('primary-dark');
   font-weight: font-weight('semibold');
+  margin-bottom: units(0.5);
 }
 
 
@@ -123,6 +187,7 @@ a.breadcrumb__back {
 
 #wrapper.dashboard {
   background-color: color('primary-lightest');
+  padding-top: units(5);
 }
 
 section.dashboard {
@@ -230,12 +295,12 @@ section.dashboard {
 }
 
 
-main {
-  //Workaround because USWDS units jump from 10 to 15
-  padding-bottom: units(10) + units(2);
-  padding-top: units(5);
+#wrapper {
+  padding-top: units(3);
+  padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15
 }
 
+
 footer {
   border-top: 1px solid color('primary-darker');
 }

src/registrar/templates/application_dotgov_domain.html

@@ -17,7 +17,7 @@
   <p>We’ll try to give you the domain you want. We first need to make sure your request meets our requirements. We’ll work with you to find the best domain for your organization.</p>
 
   <p>Here are a few domain examples for your type of organization.</p>
-  <div class="domain-example">
+  <div class="domain_example">
     {% include "includes/domain_example.html" %}
   </div>
 </div>

src/registrar/templates/application_org_federal.html

@@ -9,7 +9,7 @@
   <fieldset id="federal_type__fieldset" class="usa-fieldset">
     <legend>
         <h2>Which federal branch is your organization in?</h2>
-        <p class="margin-bottom-5">This question is required.</p>
+        <p>This question is required.</p>
     </legend>
     {% radio_buttons_by_value forms.0.federal_type as choices %}
     {% for choice in choices.values %}

src/registrar/templates/application_review.html

@@ -7,7 +7,7 @@
   {% csrf_token %}
 
   {% for step in steps.all|slice:":-1" %}
-  <section class="review__step margin-top-205">
+  <section class="review__step">
     <hr />
     <div class="review__step__title display-flex flex-justify"> 
       <div class="review__step__value">

src/registrar/templates/base.html

@@ -129,11 +129,7 @@
         {% block logo %}
         <div class="usa-logo" id="extended-logo">
            <a href="{% url 'home' %}">
-           <img
-                src="{% static 'img/dottedgov-round.svg' %}"
-                alt="Home"
-                width="48px"
-              />
+           <strong class="usa-logo__text" >.gov </strong>
            </a>
         </div>
         {% endblock %}

src/registrar/templates/includes/domain_example.html

@@ -8,12 +8,10 @@
 
   {% elif federal_type == 'judicial' %}
     <p><strong>Examples:</strong></p>
-    <p>
     <ul class="usa-list">
       <li> usprobation.gov </li>
       <li> ustaxcourt.gov </li>
     </ul>
-    </p>
 
   {% elif federal_type == 'legislative' %}
     <p><strong>Examples:</strong></p>

src/registrar/templates/includes/footer.html

@@ -16,7 +16,7 @@
                 class="usa-footer__logo-img"
                 src="{% static 'img/dottedgov-round.svg' %}"
                 alt="dot gov registrar logo"
-                width="64px"
+                width="56px"
               />
             </div>
           </div>