Add content to configure publish pages (#177)

* Added content to the configure and publish pages * Updated the configure and publish pages part 2
GSA-TTS · Jun 7, 2024 · 1e06611 · 1e06611
1 parent ed8f684
commit 1e06611
Showing 1 changed file with 40 additions and 13 deletions.
diff --git a/packages/design/src/FormManager/index.tsx b/packages/design/src/FormManager/index.tsx
@@ -187,20 +187,33 @@ export default function FormManager({ context }: FormManagerProps) {
                   <div className={`${styles.progressPage} grid-container`}>
                     <div className="grid-row">
                       <div className="grid-col-12">
-                        <h2>Form Approval and Settings</h2>
-                        <h3>Work in Progress</h3>
-                        <p>On this page, you can add additional settings to your form, gather and review feedback by colleagues and share the form for supervisor review.</p>
-                        <p>Unprioritized Upcoming Feature List:
-                        </p>
-                        <ul className="usa-list">
+                        <h1 className="font-body-3xl text-center bg-primary-darker padding-3 text-base-lightest">
+                          <span>Coming Soon..</span>
+                          <svg className="usa-icon" aria-hidden="true" focusable="false" role="img">
+                            <use xlinkHref={`${context.uswdsRoot}img/sprite.svg#construction_worker`}></use>
+                          </svg>
+                        </h1>
+                        <h2 className="font-ui-xl">Form Approval and Settings</h2>
+                        <h3 className="font-ui-lg">
+                          <svg className="usa-icon display-inline-block text-ttop margin-right-1 text-accent-warm" aria-hidden="true" focusable="false" role="img">
+                            <use xlinkHref={`${context.uswdsRoot}img/sprite.svg#warning`}></use>
+                          </svg>
+                          <span className="display-inline-block text-ttop">Work in Progress - Hello, DOJ Pardon Office!</span>
+                          <svg className="usa-icon display-inline-block text-ttop margin-left-1 text-accent-warm" aria-hidden="true" focusable="false" role="img">
+                            <use xlinkHref={`${context.uswdsRoot}img/sprite.svg#warning`}></use>
+                          </svg>
+                        </h3>
+                        <p className="font-ui-md">On this page, you can add additional settings to your form, gather and review feedback by colleagues and share the form for supervisor review.</p>
+                        <p className="font-ui-md">Unprioritized Upcoming Feature List:</p>
+                        <ul className="usa-list font-ui-md">
                           <li>Commenting tools for colleagues</li>
                           <li>Commenting and review tools for supervisors</li>
                           <li>Tracking form edit changes by multiple form builders</li>
                           <li>Form branding tools</li>
                           <li>Guided process to include additional forms in the form application</li>
                         </ul>
                       </div>
-                    </div>                 
+                    </div>
                   </div>
                 </FormManagerLayout>
               </FormManagerProvider>
@@ -231,19 +244,33 @@ export default function FormManager({ context }: FormManagerProps) {
                   close={AppRoutes.MyForms.getUrl()}
                   preview={AppRoutes.Preview.getUrl(formId)}
                 >
+
                   <div className={`${styles.progressPage} grid-container`}>
                     <div className="grid-row">
                       <div className="grid-col-12">
-                        <h2>Publish</h2>
-                        <p>On this page, you can review the pdf preview of your created form and publish it. The exact contents of this page are subject to change following additional user research.</p>
-                        <p>Unprioritized Upcoming Feature List:
-                        </p>
-                        <ul className="usa-list">
+                        <h1 className="font-body-3xl text-center bg-primary-darker padding-3 text-base-lightest">
+                          <span>Coming Soon..</span>
+                          <svg className="usa-icon" aria-hidden="true" focusable="false" role="img">
+                            <use xlinkHref={`${context.uswdsRoot}img/sprite.svg#construction_worker`}></use>
+                          </svg>
+                        </h1>
+                        <h2 className="font-ui-xl">Publish</h2>
+                        <p className="font-ui-md">On this page, you can review the pdf preview of your created form and publish it. The exact contents of this page are subject to change following additional user research.</p>
+                        <p className="font-ui-md">Unprioritized Upcoming Feature List:</p>
+                        <ul className="usa-list font-ui-md">
                           <li>A scrollable pdf view</li>
                           <li>A publish option for the page</li>
                         </ul>
+                        <p>
+                          <a
+                            href={AppRoutes.Preview.getUrl(formId)}
+                            className="usa-button usa-button--big margin-top-3"
+                          >
+                            Publish
+                          </a>
+                        </p>
                       </div>
-                    </div>                 
+                    </div>
                   </div>
                 </FormManagerLayout>
               </FormManagerProvider>