Merge pull request #539 from cisagov/ik/submit-style-tune

Style tuning for domain request status page

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

@@ -51,8 +51,8 @@ $letter-space--xs: .0125em;
 }
 
 p,
-.usa-list li
+address, 
-{
+.usa-list li { 
   @include typeset('sans', 'sm', 5); 
   max-width: measure(5);
 }
@@ -133,47 +133,35 @@ a.breadcrumb__back {
   }
 }
 
-a.withdraw_outline {
+a.withdraw {
-  box-shadow: inset 0 0 0 2px color('error');
+  background-color: color('error');
-  color: color('error');
 }
 
+a.withdraw_outline,
 a.withdraw_outline:visited {
   box-shadow: inset 0 0 0 2px color('error');
   color: color('error');
 }
 
-a.withdraw_outline:hover {
+a.withdraw_outline:hover,
-  box-shadow: inset 0 0 0 2px color('error');
-  color: color('error-dark');
-}
-
 a.withdraw_outline:focus {
-  box-shadow: inset 0 0 0 2px color('error');
+  box-shadow: inset 0 0 0 2px color('error-dark');
   color: color('error-dark');
 }
 
 a.withdraw_outline:active {
-  box-shadow: inset 0 0 0 2px color('error');
+  box-shadow: inset 0 0 0 2px color('error-darker');
   color: color('error-darker');
 }
-
+a.withdraw:hover,
 a.withdraw:focus {
   background-color: color('error-dark');
 }
 
-a.withdraw:hover {
-  background-color: color('error-dark');
-}
-
 a.withdraw:active {
   background-color: color('error-darker');
 }
 
-a.withdraw {
-  background-color: color('error');
-}
-
 .usa-sidenav {
   .usa-sidenav__item {
     span {
@@ -222,6 +210,7 @@ a.withdraw {
   margin-top: units(3);
 }
 
+.summary-item hr,
 .review__step hr {
   border: none; //reset
   border-top: 1px solid color('primary-dark');

src/registrar/templates/application_status.html

@@ -1,14 +1,12 @@
 {% extends 'base.html' %}
 
-{% block title %}Domain request status- {{ domainapplication.requested_domain.name }}{% endblock %}
+{% block title %}Domain request status | {{ domainapplication.requested_domain.name }} | {% endblock %}
 {% load static url_helpers %}
 
 {% block content %}
+<main id="main-content" class="grid-container register-form-step">
   <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">
- 
+    <h1>Domain request for {{ domainapplication.requested_domain.name }}</h1>
-
-<p><h1>Domain request for {{ domainapplication.requested_domain.name }}</h1></p>
-
     <div
         class="usa-summary-box dotgov-status-box margin-top-3" 
         role="region"
@@ -26,89 +24,76 @@
           {% elif domainapplication.status == 'submitted' %} Received
           {% else %}ERROR Please contact technical support/dev
           {% endif %}
-  </div></div><br>
+        </p>
+      </div>
+    </div>
+    <br>
     <p> <b class="review__step__name">Last updated:</b> {{domainapplication.updated_at|date:"F j, Y"}}<br>
     <b class="review__step__name">Request #:</b> {{domainapplication.id}}</p>
-
     <p>{% include "includes/domain_application.html" %}</p>
-
+    <p><a href="{% url 'application-withdraw-confirmation' domainapplication.id %}" class="usa-button usa-button--outline withdraw_outline">
-<p><a href="{% url 'application-withdraw-confirmation' domainapplication.id %}" class="withdraw_outline usa-button usa-button--outline">Withdraw Request</a></p>
+      Withdraw Request</a>
-
-<p><h2>Summary of your domain request</h2></p> 
-
-<section class="review__step">
-<p>
-  <hr><div class="review__step__name">Type of organization</div> 
-    {{ domainapplication.get_organization_type_display }}
     </p>
+  </div>
+
+  <div class="grid-col desktop:grid-offset-2 maxw-tablet">
+    <h2 class="text-primary-darker"> Summary of your domain request </h2> 
+
+    {% include "includes/summary_item.html" with title='Type of organization' value=domainapplication.get_organization_type_display %}
 
     {% if domainapplication.tribe_name %}
-    <p>{{ domainapplication.tribe_name }}</p>
+      {% include "includes/summary_item.html" with title='Tribal government' value=domainapplication.tribe_name %}
-    {% endif %}
+
       {% if domainapplication.federally_recognized_tribe %}
         <p>Federally-recognized tribe</p>
       {% endif %}
+      
       {% if domainapplication.state_recognized_tribe %}
         <p>State-recognized tribe</p>
       {% endif %}
+
+    {% endif %}
+
     {% if domainapplication.get_federal_type_display %}
-    <p><hr><div class="review__step__name">Federal government branch</div>
+      {% include "includes/summary_item.html" with title='Federal government branch' value=domainapplication.get_federal_type_display %}
-      {{ domainapplication.get_federal_type_display }}</p>
     {% endif %}
+
     {% if domainapplication.is_election_board %}
-    <p><hr><div class="review__step__name">Election Office</div>{{ domainapplication.is_election_board}}</p>
+      {% include "includes/summary_item.html" with title='Election office' value=domainapplication.is_election_board %}
     {% endif %}
+
     {% if domainapplication.organization_name %}
-    <p><hr><div class="review__step__name">Organization address</div> 
+      {% include "includes/summary_item.html" with title='Organization address' value=domainapplication  address='true' %}
-      {% include "includes/organization_address.html" with organization=domainapplication %}</p>
     {% endif %}
+
     {% if domainapplication.type_of_work %}
-    <p>{{domainapplication.type_of_work}}</p>
+      {% include "includes/summary_item.html" with title='Type of work' value=domainapplication.type_of_work %}
     {% endif %}
+
     {% if domainapplication.more_organization_information %}
-    <p>{{domainapplication.more_organization_information}}</p>
+      {% include "includes/summary_item.html" with title='Further information about the government organization' value=domainapplication.more_organization_information %}
     {% endif %}
+
     {% if domainapplication.authorizing_official %}
-    <p><hr><div class="review__step__name">Authorizing Official</div> 
+      {% include "includes/summary_item.html" with title='Authorizing official' value=domainapplication.authorizing_official contact='true' %}
-    {% include "includes/contact.html" with contact=domainapplication.authorizing_official %}</p>
     {% endif %}
-  <p><hr><div class="review__step__name">Organization website</div><ul class="add-list-reset">
+
-    {% for site in domainapplication.current_websites.all %}
+    {% if domainapplication.current_websites.all %}
-     <li>{{ site.website }}</li>
+      {% include "includes/summary_item.html" with title='Current website for your organization' value=domainapplication.current_websites.all list='true' %}
-    {% empty %}
-     <li>None</li>
-    {% endfor %}</ul></p>
-  {% if domainapplication.requested_domain.name %}
-  <p><hr><div class="review__step__name"> .gov domain </div> <ul class="add-list-reset margin-bottom-105">
-    <li>{{ domainapplication.requested_domain.name|default:"Incomplete" }}</li>
-    </ul>
-  <ul class="add-list-reset">
-    {% for site in domainapplication.alternative_domains.all %}
-     <li>{{ site.website }}</li>
-   {% endfor %}
-  </ul></p>
     {% endif %}
+
     {% if domainapplication.purpose %}
-    <p><hr><div class="review__step__name">Purpose of your domain </div> 
+      {% include "includes/summary_item.html" with title='Purpose of your domain' value=domainapplication.purpose %}
-      {{ domainapplication.purpose }}</p>
     {% endif %}
+
     {% if domainapplication.submitter %}
-    <p><hr><div class="review__step__name">Your contact information</div>
+      {% include "includes/summary_item.html" with title='Your contact information' value=domainapplication.submitter contact='true'%}
-        <div class="margin-bottom-105">
-        {% include "includes/contact.html" with contact=domainapplication.submitter %}
-        </div>
     {% endif %}
-  {% for other in domainapplication.other_contacts.all %}
-                <div class="margin-bottom-105">
-                  {% include "includes/contact.html" with contact=other %}
-                </div>
-              {% empty %}
-                None
-              {% endfor %}</p>
-  <p><hr><div class="review__step__name">Anything else we should know?</div></p>
-  {{ domainapplication.anything_else|default:"No" }}
-</div>
-</section>
 
+    {% include "includes/summary_item.html" with title='Other employees from your organization' value=domainapplication.other_contacts.all contact='true' list='true' %}
+    {% include "includes/summary_item.html" with title='Anything else we should know' value=domainapplication.anything_else|default:"No" %}
 
+  </div>
+
+</main>
 {% endblock %}

src/registrar/templates/includes/domain_application.html

@@ -1,8 +1,10 @@
-<p class="font-body-sm margin-top-0 margin-bottom-2 
+<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold" > 
-              text-primary-darker text-semibold"
+  Next steps
-    ><h2>Next steps</h2></p>
+</h2>
 <p>We received your .gov domain request. Our next step is to review your request. This usually takes two weeks. We’ll email you with questions or when we complete our review. Contact us with any questions.</p>
-<p class="font-body-sm margin-top-0 margin-bottom-2 
+
-              text-primary-darker text-semibold"
+<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold">
-    ><h2>Need to make changes?</h2></p>
+  Need to make changes?
+</h2>
+
 <p>If you need to change your request you have to first withdraw it. Once you withdraw the request you can edit it and submit it again. Changing your request might add to the wait time.</p>

src/registrar/templates/includes/summary_item.html

@@ -0,0 +1,49 @@
+<section class="summary-item margin-top-3">
+  <hr class="" />
+  <p class="summary-item__title 
+            text-primary-dark text-semibold
+            margin-top-0 margin-bottom-05"
+  > 
+  {{ title }} 
+  </p>
+  {% if address %}
+    {% include "includes/organization_address.html" with organization=value %}
+  {% elif contact %}
+    {% if list %}
+      {% if value|length == 1 %}
+        {% include "includes/contact.html" with contact=value|first %}
+      {% else %}
+        <ul class="usa-list usa-list--unstyled margin-top-0">
+          {% for item in value %}
+          <li>
+            <p class="text-semibold margin-top-1 margin-bottom-0">
+              Conatct {{forloop.counter}}
+            </p>
+            {% include "includes/contact.html" with contact=item %}</li>
+          {% empty %}
+           <li>None</li>
+          {% endfor %}</ul></p>
+        </ul>
+      {% endif %}
+    {% else %}
+      {% include "includes/contact.html" with contact=value %}
+    {% endif %}
+  {% elif list %}
+    {% if value|length == 1 %}
+      <p class="margin-top-0">{{ value | first }} </p>
+    {% else %}
+      <ul class="usa-list margin-top-0">
+        {% for item in value %}
+         <li>{{ item }}</li>
+        {% empty %}
+         <li>None</li>
+        {% endfor %}</ul></p>
+      </ul>
+    {% endif %}
+  {% else %}
+  <p class="margin-top-0">
+    {{ value }}
+  </p>
+  {% endif %}
+  
+