Cleanup add-button css and add css for restore-contact-button

fecgov · May 2, 2024 · 57e473a · 57e473a
1 parent e9e8b9f
commit 57e473a
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 13 deletions.
diff --git a/front-end/src/app/contacts/contact-list/contact-list.component.html b/front-end/src/app/contacts/contact-list/contact-list.component.html
@@ -9,9 +9,9 @@
         id="button-contacts-new"
         pButton
         pRipple
-        label="New"
+        label="Add Contact"
         icon="pi pi-plus"
-        class="p-button-success mr-2"
+        class="add-button"
         (click)="addItem()"
       ></button>
       <!--      <p-fileUpload-->
@@ -49,7 +49,7 @@
     <ng-template pTemplate="caption">
       <div class="flex align-items-center justify-content-between">
         <h2 class="m-0">Contacts</h2>
-        <p-button label="Restore deleted contact(s)" styleClass="p-button-link" (click)="onRestoreClick()"></p-button>
+        <button pButton pRipple label="Restore deleted contact(s)" class="restore-contact-button" (click)="onRestoreClick()"></button>
       </div>
     </ng-template>
     <ng-template pTemplate="sorticon" let-sortOrder>
@@ -61,7 +61,8 @@ <h2 class="m-0">Contacts</h2>
           Name
           <p-sortIcon field="sort_name"></p-sortIcon>
         </th>
-        <th pSortableColumn="type" id="type-column" role="columnheader">Type
+        <th pSortableColumn="type" id="type-column" role="columnheader">
+          Type
           <p-sortIcon field="type"></p-sortIcon>
         </th>
         <th pSortableColumn="sort_fec_id" id="fec-id-column" role="columnheader">

diff --git a/front-end/src/app/contacts/contact-list/contact-list.component.scss b/front-end/src/app/contacts/contact-list/contact-list.component.scss
@@ -0,0 +1,7 @@
+.restore-contact-button {
+  font-weight: 600 !important;
+}
+
+.restore-contact-button:hover {
+  background-color: #164F85 !important;
+}
diff --git a/front-end/src/app/contacts/contact-list/contact-list.component.ts b/front-end/src/app/contacts/contact-list/contact-list.component.ts
@@ -10,6 +10,7 @@ import { TableSelectAllChangeEvent } from 'primeng/table';
 @Component({
   selector: 'app-contact-list',
   templateUrl: './contact-list.component.html',
+  styleUrls: ['./contact-list.component.scss']
 })
 export class ContactListComponent extends TableListBaseComponent<Contact> {
   override item: Contact = new Contact();

diff --git a/front-end/src/app/reports/report-list/report-list.component.html b/front-end/src/app/reports/report-list/report-list.component.html
@@ -9,7 +9,7 @@
         label="Create a new report"
         data-cy="create-report"
         icon="pi pi-plus"
-        class="mr-2 add-button"
+        class="add-button"
         (click)="showDialog()"
         [disabled]="noCashOnHand()"
       ></button>

diff --git a/front-end/src/app/reports/transactions/transaction-list/transaction-list.component.html b/front-end/src/app/reports/transactions/transaction-list/transaction-list.component.html
@@ -22,7 +22,7 @@ <h1 class="gandhi-bold size-36">Transactions in this report</h1>
         (tableActionClick)="onTableActionClick($event.action, $event.actionItem)"
         buttonIcon="pi pi-plus"
         buttonLabel="Add new transaction"
-        buttonStyleClass="mr-2 add-button"
+        buttonStyleClass="add-button"
         buttonAriaLabel="Add a Transaction"
       ></app-table-actions-button>
     </ng-template>

diff --git a/front-end/src/app/reports/transactions/transaction.scss b/front-end/src/app/reports/transactions/transaction.scss
@@ -26,12 +26,6 @@
   color: #212121;
 }
 
-:host ::ng-deep .p-button.add-button {
-  color: black;
-  background-color: #f77b42;
-  border-color: #f77b42;
-}
-
 .read-only-tag {
   font-family: karla, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   color: gray;

diff --git a/front-end/src/styles.scss b/front-end/src/styles.scss
@@ -179,9 +179,17 @@ label.disabled {
 
 .add-button {
   color: #212121;
-  font-weight: bold;
   background-color: #f77b42;
+  border-color: #f77b42;
   border: 0;
+  font-weight: 600;
+}
+
+.add-button:hover {
+  background: #F78D5B !important;
+  border-color: #F78D5B !important;
+  color: #212121 !important;
+  font-weight: 600;
 }
 
 // PRIMENG PANELMENU STYLE OVERRIDE