feat(uploading-bar): match new UI design

Author: sultanmyrza

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.html

@@ -1,5 +1,10 @@
-<mat-toolbar color="background" class="thin-upload-bar" id="thin-upload-bar">
-  <ng-container *ngrxLet="uploadingBarState$ as uploadingBarState">
+<ng-container *ngrxLet="uploadingBarState$ as uploadingBarState">
+  <mat-toolbar
+    color="background"
+    class="thin-upload-bar"
+    id="thin-upload-bar"
+    *ngIf="uploadingBarState.hideUploadBar === false"
+  >
     <span class="text spacer-text" *ngIf="uploadingBarState.spacer">{{
       uploadingBarState.text
     }}</span>
@@ -18,5 +23,5 @@
     <mat-icon *ngIf="uploadingBarState.showResumeButton" (click)="resume()"
       >publish</mat-icon
     >
-  </ng-container>
-</mat-toolbar>
+  </mat-toolbar>
+</ng-container>

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.scss

@@ -1,6 +1,13 @@
+mat-toolbar {
+  margin: 16px;
+}
+
 .thin-upload-bar {
+  margin: 16px auto;
+  width: calc(100vw - 32px);
   min-height: 32px;
-  height: 32px;
+  max-height: 48px;
+  border-radius: 8px;
   justify-content: stretch;
   transition: all 1s;
 
@@ -22,9 +29,8 @@
 }
 
 #thin-upload-bar {
-  height: 32px;
-  color: var(--ion-color-medium-tint);
-  background-color: var(--ion-color-light);
+  color: white;
+  background-color: #212121;
 }
 
 .spacer {

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.ts

@@ -49,6 +49,7 @@ export class UploadingBarComponent {
           showProgressBar: tasks > 0 && networkConnected && !isPaused,
           showPauseButton: tasks > 0 && networkConnected && !isPaused,
           showResumeButton: tasks > 0 && networkConnected && isPaused,
+          hideUploadBar: tasks === 0,
         };
         return uploadingBarState;
       })
@@ -85,4 +86,5 @@ interface UploadingBarState {
   readonly showProgressBar: boolean;
   readonly showPauseButton: boolean;
   readonly showResumeButton: boolean;
+  readonly hideUploadBar: boolean;
 }