fix:draft report zero state improvements (#3363)

* fix:draft report zero state improvements

* fixing unit test error

* fixing unit test

* fix cta text size based on different scrren size

* minor changes

---------

Co-authored-by: Snehasish <snehasish@Snehasishs-MacBook-Air.local>

src/app/fyle/my-view-report/my-view-report.page.html

@@ -172,21 +172,27 @@
           </div>
           <div class="view-reports--expenses-zero-state" *ngIf="!isExpensesLoading && report.num_expenses === 0">
             <div class="text-center">
-              <img src="../../../assets/images/zero-states/expenses.png" alt="No expense in this report" />
-              <div class="view-reports--zero-state-header">Looks like this report is empty.</div>
+              <div class="view-reports--zero-state-image-container">
+                <img src="../../../assets/images/zero-states/invoice.png" alt="No expense in this report" />
+              </div>
+              <div class="view-reports--zero-state-semibold-header">Looks like you’ve got</div>
+              <div class="view-reports--zero-state-header">0 expense right now</div>
+            </div>
+            <div class="view-reports--footer-container">
               <button
                 *ngIf="unreportedExpenses && unreportedExpenses.length > 0"
-                class="view-reports--unreported-cta"
+                class="btn-primary view-reports--cta"
                 (click)="showAddExpensesToReportModal()"
               >
-                Add complete expenses
+                Add complete expense
+              </button>
+              <button
+                id="add-expense"
+                [ngClass]="{'btn-primary': !(unreportedExpenses && unreportedExpenses.length > 0), 'btn-outline-secondary view-reports--cta': unreportedExpenses && unreportedExpenses.length > 0}"
+                (click)="addExpense()"
+              >
+                Add new expense
               </button>
-              <div class="view-reports--add-more-container" (click)="addExpense()">
-                <div class="view-reports--add-more-icon-container">
-                  <mat-icon class="view-reports--add-more-icon" svgIcon="plus-square"></mat-icon>
-                </div>
-                <div class="view-reports--add-more-text">Add Expenses</div>
-              </div>
             </div>
           </div>
         </ng-container>

src/app/fyle/my-view-report/my-view-report.page.scss

@@ -56,6 +56,27 @@
     }
   }
 
+  &--footer-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 16px;
+    gap: 8px;
+    text-wrap: nowrap;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: $pure-white;
+    box-shadow: 0 -2px 12px $pink-shadow;
+    z-index: 999;
+  }
+
+  &--cta {
+    font-size: 14px !important;
+    @media (max-width: 350px) {
+      font-size: 12px !important;
+    }
+  }
+
   &--card-body {
     font-size: 16px;
     color: $gray-3;
@@ -365,6 +386,19 @@
     font-weight: 500;
   }
 
+  &--zero-state-semibold-header {
+    font-size: 14px;
+    display: block;
+    color: $blue-black;
+    line-height: 1.5;
+  }
+
+  &--zero-state-image-container {
+    height: 150px;
+    width: 150px;
+    overflow: hidden;
+  }
+
   &--history-container {
     background: $pure-white;
     border-radius: 16px;

src/app/fyle/my-view-report/my-view-report.page.spec.ts

@@ -932,7 +932,7 @@ describe('MyViewReportPage', () => {
     component.report$ = of(cloneDeep({ ...platformReportData, state: 'DRAFT' }));
     fixture.detectChanges();
 
-    const addExpenseButton = getElementBySelector(fixture, '.view-reports--add-more-container') as HTMLElement;
+    const addExpenseButton = getElementBySelector(fixture, '#add-expense') as HTMLElement;
     click(addExpenseButton);
 
     expect(router.navigate).toHaveBeenCalledOnceWith([