fix:draft report zero state improvements

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

@@ -170,21 +170,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-conatiner">
               <button
                 *ngIf="unreportedExpenses && unreportedExpenses.length > 0"
-                class="view-reports--unreported-cta"
+                class="btn-primary"
                 (click)="showAddExpensesToReportModal()"
               >
-                Add complete expenses
+                Add complete expense
+              </button>
+              <button
+                class="btn-outline-secondary"
+                [ngClass]="{'btn-primary': !(unreportedExpenses && unreportedExpenses.length > 0), 'btn-outline-secondary': 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,19 @@
     }
   }
 
+  &--footer-conatiner {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    gap: 8px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: $pure-white;
+    box-shadow: 0 -2px 12px $pink-shadow;
+    z-index: 999;
+  }
+
   &--card-body {
     font-size: 16px;
     color: $gray-3;
@@ -350,6 +363,20 @@
     font-weight: 500;
   }
 
+  &--zero-state-semibold-header {
+    font-size: 14px;
+    display: block;
+    color: $blue-black;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+
+  &--zero-state-image-container {
+    height: 150px;
+    width: 150px;
+    overflow: hidden;
+  }
+
   &--history-container {
     background: $pure-white;
     border-radius: 16px;