Fix upload banner icon margin

2 files changed, 12 insertions, 6 deletions

diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
index 266fc26c5..f675371d9 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
@@ -5,9 +5,7 @@
     </div>
 
     <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
-      <my-global-icon iconName="upload"></my-global-icon>
-      <label for="bannerfile" i18n>Upload a new banner</label>
-      <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+      <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
     </div>
 
     <div
@@ -22,9 +20,7 @@
 
 <ng-template #bannerEditContent>
   <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body">
-    <my-global-icon iconName="upload"></my-global-icon>
-    <span for="bannerfile" i18n>Upload a new banner</span>
-    <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+    <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
   </div>
 
   <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
@@ -32,3 +28,9 @@
     <span i18n>Remove banner</span>
   </div>
 </ng-template>
+
+<ng-template #uploadNewBanner>
+  <my-global-icon iconName="upload"></my-global-icon>
+  <span for="bannerfile" i18n>Upload a new banner</span>
+  <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
+</ng-template>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index ec2de2528..90fcd81aa 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -25,3 +25,7 @@
     margin-bottom: 0;
   }
 }
+
+my-global-icon {
+  margin: 0 5px;
+}