Merge pull request #491 from cisagov/ik/review-page-update

Update review page style

src/registrar/assets/img/registrar/dotgov_review_magnify.svg

@@ -0,0 +1,11 @@
+<svg width="87" height="86" viewBox="0 0 87 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="44.8006" cy="42.9707" r="32.2615" transform="rotate(-105 44.8006 42.9707)" fill="#F5F8FA"/>
+<mask id="mask0_3468_36471" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="58" height="57">
+<circle cx="39.1123" cy="38.4999" r="28.5" fill="#002B47"/>
+</mask>
+<g mask="url(#mask0_3468_36471)">
+<path d="M30.6385 47.4559C32.5765 47.4559 34.0205 45.9359 34.0205 43.9599C34.0205 41.9459 32.5765 40.4259 30.6385 40.4259C28.7005 40.4259 27.2565 41.9459 27.2565 43.9599C27.2565 45.9359 28.7005 47.4559 30.6385 47.4559ZM44.5591 54.1739C50.3391 54.1739 53.9771 51.6239 53.9771 48.1219C53.9771 45.0959 51.6991 43.8379 47.5511 43.8379H44.8311C42.9611 43.8379 42.2811 43.4299 42.2811 42.5799C42.2811 42.0019 42.4511 41.6959 42.8931 41.3219C43.6411 41.5599 44.3211 41.6619 44.9331 41.6619C48.6391 41.6619 51.5631 39.8599 51.5631 35.9839C51.5631 35.0999 51.3251 34.2839 51.0191 33.7739H53.7051V30.1359H47.5511C46.8031 29.8639 45.8851 29.7279 44.9331 29.7279C41.2951 29.7279 37.9631 31.7679 37.9631 35.8139C37.9631 37.7859 39.0511 39.3839 40.2411 40.1999V40.3359C39.1531 41.0839 38.3371 42.2739 38.3371 43.4979C38.3371 44.8919 39.0171 45.7759 39.9011 46.3539V46.4899C38.3371 47.3739 37.4871 48.4959 37.4871 49.8899C37.4871 52.8819 40.6151 54.1739 44.5591 54.1739ZM44.9331 38.6359C43.6071 38.6359 42.6211 37.6839 42.6211 35.8139C42.6211 34.0119 43.6071 33.0939 44.9331 33.0939C46.2591 33.0939 47.2451 34.0459 47.2451 35.8139C47.2451 37.6839 46.2591 38.6359 44.9331 38.6359ZM45.3411 51.0459C43.0971 51.0459 41.6011 50.3659 41.6011 49.1079C41.6011 48.4959 41.9071 47.9859 42.5191 47.4419C43.0631 47.5779 43.7431 47.6459 44.8991 47.6459H46.6331C48.2991 47.6459 49.2171 47.9179 49.2171 48.9719C49.2171 50.1279 47.5851 51.0459 45.3411 51.0459ZM63.3475 47.4079C67.5975 47.4079 71.5415 44.1779 71.5415 38.5679C71.5415 32.9579 67.5975 29.7279 63.3475 29.7279C59.0635 29.7279 55.1195 32.9579 55.1195 38.5679C55.1195 44.1779 59.0635 47.4079 63.3475 47.4079ZM63.3475 43.3619C61.2735 43.3619 60.2535 41.4919 60.2535 38.5679C60.2535 35.6439 61.2735 33.7739 63.3475 33.7739C65.3875 33.7739 66.4415 35.6439 66.4415 38.5679C66.4415 41.4919 65.3875 43.3619 63.3475 43.3619ZM78.5753 46.9999H84.3553L89.8633 30.1359H85.0693L82.8593 38.0919C82.4173 39.7579 81.9753 41.5259 81.5673 43.2939H81.4313C80.9893 41.5259 80.5473 39.7579 80.1053 38.0919L77.9293 30.1359H72.8973L78.5753 46.9999Z" fill="#0078AE"/>
+</g>
+<circle cx="40.8529" cy="40.3051" r="26" transform="rotate(-45 40.8529 40.3051)" stroke="#002B47" stroke-width="5"/>
+<path d="M58.5042 61.5901C57.5478 60.579 57.5698 58.9904 58.554 58.0062V58.0062C59.5381 57.0221 61.1268 57 62.1379 57.9564L83.9421 78.582C85.3347 79.8994 85.3654 82.1065 84.0098 83.462V83.462C82.6542 84.8176 80.4472 84.787 79.1297 83.3943L58.5042 61.5901Z" fill="#002B47"/>
+</svg>

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

@@ -177,10 +177,6 @@ a.breadcrumb__back {
 
 .review__step {
   margin-top: units(3);
-
-  &:first-of-type {
-    margin-top: units(4);
-  }
 }
 
 .review__step hr {
@@ -200,6 +196,17 @@ a.breadcrumb__back {
   margin-bottom: units(0.5);
 }
 
+.dotgov-button--green {
+  background-color: color('success-dark');
+
+  &:hover {
+    background-color: color('success-darker');
+  }
+
+  &:active {
+    background-color: color('green-80v');
+  }
+}
 
 /** ---- DASHBOARD ---- */
 

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

@@ -81,6 +81,7 @@ in the form $setting: value,
   ------------------------------
   ## Primary color
   ----------------------------*/ 
+  $theme-color-primary-darkest: $dhs-blue-80,
   $theme-color-primary-darker: $dhs-blue-70,
   $theme-color-primary-dark: $dhs-blue-60,
   $theme-color-primary: $dhs-blue,

src/registrar/templates/application_form.html

@@ -41,7 +41,9 @@
         {% endfor %}
 {% endblock %}
 
+{% block form_page_title %}
         <h1> {{form_titles|get_item:steps.current}} </h1>
+{% endblock %}
 
 {% block form_instructions %}
 {% endblock %}
@@ -67,7 +69,7 @@
             {% else %}
             <button
               type="submit"
-              class="usa-button"
+              class="usa-button usa-button--big dotgov-button--green"
             >Submit your domain request</button>
             {% endif %}
           </div>
@@ -81,4 +83,4 @@
     </div> 
   </div>
 </div>
-{% endblock %}
+{% endblock %}

src/registrar/templates/application_review.html

@@ -5,6 +5,18 @@
 {# there are no required fields on this page so don't show this #}
 {% endblock %}
 
+{% block form_page_title %}
+  <span class="display-flex flex-align-start maxw-mobile-lg"> 
+    <img 
+        class= "margin-right-105" 
+        src="{%static 'img/registrar/dotgov_review_magnify.svg' %}" 
+        alt=""
+        width="72"
+        />
+    <h1> Review and submit your domain request </h1>
+  </span>
+{% endblock %}
+
 {% block form_fields %}
   {% for step in steps.all|slice:":-1" %}
   <section class="review__step">