Add initial styles for headings, typography, sidenav

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

@@ -26,3 +26,60 @@ i.e.
 .sr-only {
    @include sr-only;
  }
+
+ h1 {
+  @include typeset('sans', '2xl', 2);
+  margin: units(0) auto units(1);
+ }
+
+ h2 {
+  font-weight: font-weight('semibold');
+  line-height: line-height('heading', 3);
+  margin: units(2) auto ;
+
+  // &:first-of-type {
+  //   margin: 0 auto units(1);   
+  // }
+ }
+.reg-form-step p {
+  @include typeset('sans', 'sm', 5);
+  max-width: measure(5);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.reg-form-step a {
+  color: color('primary');
+
+  &:visited {
+    color: color('violet-70v'); //USWDS default
+  }
+}
+
+a.bread__back {
+  display:inline-block;
+  margin-bottom: units('205');
+  &:visited {
+    color: color('primary');
+  }
+}
+
+.sidenav__step--locked {
+  color: color('base-darker');
+  span {
+    display: flex;
+    align-items: flex-start;
+    padding: units(1);
+
+    .usa-icon {
+       flex-shrink: 0;
+       margin: units('2px') units(1) 0 0; 
+    }
+  }  
+}
+
+.stepnav {
+  margin-top: units(2);
+}

src/registrar/templates/application_form.html

@@ -9,9 +9,9 @@
       {% include 'application_sidebar.html' %}
     </div>
     <div class="grid-col-9">
-      <main id="main-content" class="grid-container">
+      <main id="main-content" class="grid-container reg-form-step">
         {% if wizard.steps.prev %}
-        <a href="{% url wizard.url_name step=wizard.steps.prev %}">
+        <a href="{% url wizard.url_name step=wizard.steps.prev %}" class="bread__back">
           <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
             <use xlink:href="{%static 'img/sprite.svg'%}#arrow_back"></use>
           </svg><span class="margin-left-05">Previous step </span>
@@ -19,12 +19,14 @@
         {% endif %}
         <h1> {{form_titles|get_item:wizard.steps.current}} </h1>
         {% block form_content %}
-        {% if wizard.steps.next %}
+        <div class="stepnav">
-        <button type="submit" class="usa-button">Next</button>
+          {% if wizard.steps.next %}
-        {% else %}
+          <button type="submit" class="usa-button">Next</button>
-        <button type="submit" class="usa-button">Submit your domain request</button>
+          {% else %}
-        {% endif %}
+          <button type="submit" class="usa-button">Submit your domain request</button>
-        <button type="button" class="usa-button usa-button--outline">Save</button>
+          {% endif %}
+          <button type="button" class="usa-button usa-button--outline">Save</button>
+        </div>
       </main>
     </div> 
     {% endblock %}

src/registrar/templates/application_sidebar.html

@@ -10,11 +10,14 @@
           {{ form_titles|get_item:this_step }}
         </a>
       {% else %}
-        <li class="usa-sidenav__item step--locked">
+        <li class="usa-sidenav__item sidenav__step--locked">
-        {{ form_titles|get_item:this_step }}
+          <span>
-        <svg class="usa-icon" aria-labelledby="locked-step" role="img">
+            <svg class="usa-icon" aria-labelledby="locked-step" role="img">
-          <title id="locked-step__{{forloop.counter}}">locked until previous steps have been completed </title>
+              <title id="locked-step__{{forloop.counter}}">locked until previous steps have been completed </title>
-          <use xlink:href="{%static 'img/sprite.svg'%}#lock"></use>
+              <use xlink:href="{%static 'img/sprite.svg'%}#lock"></use>
+            </svg>
+              {{ form_titles|get_item:this_step }}
+          </span>
       {% endif %}
       </li>
     {% endfor %}