From a3c6977076aeff32ee6efa10b0eb174f21fe11f7 Mon Sep 17 00:00:00 2001
From: Sasha Dresden <sasha.dresden@proton.me>
Date: Mon, 20 May 2024 17:13:38 -0400
Subject: [PATCH 1/2] Update css on Transactions toolbar

---
 .../transaction-list.component.html              | 16 ++++++----------
 .../app/reports/transactions/transaction.scss    |  5 +++++
 front-end/src/assets/styles/theme.css            |  8 +++++---
 3 files changed, 16 insertions(+), 13 deletions(-)

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
index 937e249316..898da8f8e1 100644
--- 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
@@ -1,15 +1,11 @@
 <div class="card">
   <p-toolbar>
     <ng-template pTemplate="left">
-      <div class="grid">
-        <div class="col-12">
-          <h1 class="gandhi-bold size-36">Transactions in this report</h1>
-        </div>
-        <div class="col-12">
-          <span class="subtitle"
-            ><strong>{{ report?.formLabel }}: </strong>{{ report?.formSubLabel }}</span
-          >
-        </div>
+      <div class="flex flex-column">
+        <h1 class="gandhi-bold size-36">Transactions in this report</h1>
+        <span class="subtitle">
+          <strong>{{ report?.formLabel }}: </strong>{{ report?.formSubLabel }}
+        </span>
       </div>
     </ng-template>
 
@@ -21,7 +17,7 @@ <h1 class="gandhi-bold size-36">Transactions in this report</h1>
         [rounded]="false"
         (tableActionClick)="onTableActionClick($event.action, $event.actionItem)"
         buttonIcon="pi pi-plus"
-        buttonLabel="Add new transaction"
+        buttonLabel="Add transaction"
         buttonStyleClass="add-button"
         buttonAriaLabel="Add a Transaction"
       ></app-table-actions-button>
diff --git a/front-end/src/app/reports/transactions/transaction.scss b/front-end/src/app/reports/transactions/transaction.scss
index 5c940b9ddd..af1164f22f 100644
--- a/front-end/src/app/reports/transactions/transaction.scss
+++ b/front-end/src/app/reports/transactions/transaction.scss
@@ -24,6 +24,7 @@
   font-family: karla-bold, serif;
   font-size: 14px;
   color: #212121;
+  padding-top: 8px;
 }
 
 .read-only-tag {
@@ -58,3 +59,7 @@ hr {
   border-top: 2px solid;
   opacity: 1;
 }
+
+:host::ng-deep.p-toolbar {
+  border-bottom: 2px solid !important;
+}
diff --git a/front-end/src/assets/styles/theme.css b/front-end/src/assets/styles/theme.css
index 7611aa810c..7568185881 100644
--- a/front-end/src/assets/styles/theme.css
+++ b/front-end/src/assets/styles/theme.css
@@ -2987,7 +2987,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   background: #fff;
   color: #212121;
   border-bottom: 2px solid #000000;
-  padding: 64px 1rem 8px 0;
+  padding: 48px 1rem 8px 0;
   font-weight: 600;
 }
 .p-datatable .p-datatable-footer {
@@ -4664,8 +4664,10 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 
 .p-toolbar {
   background: #ffffff;
-  padding: 1rem 1.25rem;
-  border-radius: 4px;
+  padding: 48px 0 8px 0;
+  border-radius: 0;
+  display: flex;
+  align-items: baseline;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

From 619b3e4cf88d34a80fd8e87fece0ece04d9bcaef Mon Sep 17 00:00:00 2001
From: Sasha Dresden <sasha.dresden@proton.me>
Date: Wed, 22 May 2024 15:16:18 -0400
Subject: [PATCH 2/2] Update 'Add report'button and fix css for spacing between
 toolbar and header when no bottom line

---
 .../src/app/reports/report-list/report-list.component.html      | 2 +-
 front-end/src/app/reports/transactions/transaction.scss         | 1 +
 front-end/src/assets/styles/theme.css                           | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

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
index c9e98cf497..0718d02dae 100644
--- a/front-end/src/app/reports/report-list/report-list.component.html
+++ b/front-end/src/app/reports/report-list/report-list.component.html
@@ -24,7 +24,7 @@ <h1 class="m-0">Manage reports</h1>
         <button
           pButton
           pRipple
-          label="Create a new report"
+          label="Create report"
           data-cy="create-report"
           icon="pi pi-plus"
           class="add-button"
diff --git a/front-end/src/app/reports/transactions/transaction.scss b/front-end/src/app/reports/transactions/transaction.scss
index af1164f22f..db37ea8adf 100644
--- a/front-end/src/app/reports/transactions/transaction.scss
+++ b/front-end/src/app/reports/transactions/transaction.scss
@@ -62,4 +62,5 @@ hr {
 
 :host::ng-deep.p-toolbar {
   border-bottom: 2px solid !important;
+  padding-bottom: 8px;
 }
diff --git a/front-end/src/assets/styles/theme.css b/front-end/src/assets/styles/theme.css
index 7568185881..e289749d87 100644
--- a/front-end/src/assets/styles/theme.css
+++ b/front-end/src/assets/styles/theme.css
@@ -4664,7 +4664,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 
 .p-toolbar {
   background: #ffffff;
-  padding: 48px 0 8px 0;
+  padding: 48px 0 0 0;
   border-radius: 0;
   display: flex;
   align-items: baseline;