Merge pull request #1882 from fecgov/feature/1880

#1880 Fix submit styling
fecgov · Apr 26, 2024 · 82010e1 · 82010e1
2 parents d1ffa19 + c11d41c
commit 82010e1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/front-end/src/app/reports/submission-workflow/submit-report-step2.component.html b/front-end/src/app/reports/submission-workflow/submit-report-step2.component.html
@@ -19,7 +19,7 @@ <h2>Committee treasurer</h2>
         <div class="col-4">
           <div class="field">
             <label for="treasurer_last_name"><strong>LAST NAME</strong></label>
-            <input type="text" pInputText id="treasurer_last_name" formControlName="treasurer_last_name"/>
+            <input type="text" pInputText id="treasurer_last_name" formControlName="treasurer_last_name" />
             <app-error-messages
               [form]="form"
               fieldName="treasurer_last_name"
@@ -30,7 +30,7 @@ <h2>Committee treasurer</h2>
         <div class="col-4">
           <div class="field">
             <label for="treasurer_first_name"><strong>FIRST NAME</strong></label>
-            <input type="text" pInputText id="treasurer_first_name" formControlName="treasurer_first_name"/>
+            <input type="text" pInputText id="treasurer_first_name" formControlName="treasurer_first_name" />
             <app-error-messages
               [form]="form"
               fieldName="treasurer_first_name"
@@ -41,7 +41,7 @@ <h2>Committee treasurer</h2>
         <div class="col-4">
           <div class="field">
             <label for="treasurer_middle_name"><strong>MIDDLE NAME</strong> (OPTIONAL)</label>
-            <input type="text" pInputText id="treasurer_middle_name" formControlName="treasurer_middle_name"/>
+            <input type="text" pInputText id="treasurer_middle_name" formControlName="treasurer_middle_name" />
             <app-error-messages
               [form]="form"
               fieldName="treasurer_middle_name"
@@ -54,7 +54,7 @@ <h2>Committee treasurer</h2>
         <div class="col-3">
           <div class="field">
             <label for="treasurer_prefix"><strong>PREFIX</strong> (OPTIONAL)</label>
-            <input type="text" pInputText id="treasurer_prefix" formControlName="treasurer_prefix"/>
+            <input type="text" pInputText id="treasurer_prefix" formControlName="treasurer_prefix" />
             <app-error-messages
               [form]="form"
               fieldName="treasurer_prefix"
@@ -65,7 +65,7 @@ <h2>Committee treasurer</h2>
         <div class="col-3">
           <div class="field">
             <label for="treasurer_suffix"><strong>SUFFIX</strong> (OPTIONAL)</label>
-            <input type="text" pInputText id="treasurer_suffix" formControlName="treasurer_suffix"/>
+            <input type="text" pInputText id="treasurer_suffix" formControlName="treasurer_suffix" />
             <app-error-messages
               [form]="form"
               fieldName="treasurer_suffix"
@@ -85,7 +85,7 @@ <h2>Enter password</h2>
               If you have any questions on how to enroll, confirming your email, two-factor authentication, or your
               Personel Key please go to the following page:
               <a href="https://webforms.fec.gov/psa/help.htm" target="_blank" rel="noopener"
-              >FEC Electronic Filing Password Assignment System Help</a
+                >FEC Electronic Filing Password Assignment System Help</a
               >
             </p>
           </div>
@@ -130,7 +130,7 @@ <h2>Enter password</h2>
                 <div class="col-4">
                   <div class="field">
                     <label for="backdoor_code">BACKDOOR CODE</label>
-                    <input type="text" pInputText id="backdoor_code" formControlName="backdoor_code"/>
+                    <input type="text" pInputText id="backdoor_code" formControlName="backdoor_code" />
                     <app-error-messages
                       [form]="form"
                       fieldName="backdoor_code"
@@ -159,9 +159,17 @@ <h2>Enter password</h2>
           </div>
         </div>
       </div>
-      <div class="grid" *ngIf="!report?.getBlocker()">
-        <div class="col-4"></div>
+      <div class="grid">
         <div class="col-4">
+          <button
+            pButton
+            pRipple
+            label="Back"
+            class="p-button-secondary p-button-outlined"
+            (click)="router.navigateByUrl(getBackUrl?.(report) || '')"
+          ></button>
+        </div>
+        <div class="col-8 submit-container" *ngIf="!report?.getBlocker()">
           <button
             *ngIf="form.value.userCertified === true"
             pButton
@@ -192,17 +200,5 @@ <h2>Enter password</h2>
         <div class="col-12">{{ report?.getBlocker() }}</div>
       </div>
     </form>
-
-    <div class="grid">
-      <div class="col-3">
-        <button
-          pButton
-          pRipple
-          label="Back"
-          class="p-button-secondary p-button-outlined"
-          (click)="router.navigateByUrl(getBackUrl?.(report) || '')"
-        ></button>
-      </div>
-    </div>
   </p-card>
 </div>
diff --git a/front-end/src/app/reports/submission-workflow/submit-report-step2.component.scss b/front-end/src/app/reports/submission-workflow/submit-report-step2.component.scss
@@ -0,0 +1,4 @@
+.submit-container {
+    display: flex;
+    flex-direction: row-reverse;
+}
diff --git a/front-end/src/app/reports/submission-workflow/submit-report-step2.component.ts b/front-end/src/app/reports/submission-workflow/submit-report-step2.component.ts
@@ -19,6 +19,7 @@ import { combineLatest, from, Observable, of, switchMap, takeUntil } from 'rxjs'
 @Component({
   selector: 'app-submit-report-step2',
   templateUrl: './submit-report-step2.component.html',
+  styleUrls: ['./submit-report-step2.component.scss'],
 })
 export class SubmitReportStep2Component extends DestroyerComponent implements OnInit {
   formProperties: string[] = [