From 6b2cc23cd3f18655d3d87619f8ff14b1af10cf83 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 28 Apr 2024 15:30:57 +0000
Subject: [PATCH] Add custom branding to unfurler previews

---
 .../master-page-preview.component.html             | 11 +++++++++--
 .../master-page-preview.component.scss             | 14 +++++++++++++-
 .../master-page-preview.component.ts               | 11 ++++++++++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.html b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
index 4c436607b..36e8eed10 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
@@ -2,8 +2,15 @@
 <div class="preview-wrapper">
   <header>
     <span class="header-brand" style="position: relative;">
-      <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
-      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+      @if (enterpriseInfo?.img) {
+        <img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+      }
+      @if (enterpriseInfo?.header_img) {
+        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+      } @else {
+        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
+        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+      }
     </span>
 
     <div [ngSwitch]="network.val">
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
index 486922dfa..fb0fd5c24 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
@@ -18,7 +18,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background: var(--active-bg);
+    background: var(--stat-box-bg);
     text-align: start;
     font-size: 1.8em;
   }
@@ -77,3 +77,15 @@
     flex-shrink: 1;
   }
 }
+
+.subdomain_logo {
+  height: 35px;
+  overflow: clip;
+  max-width: 140px;
+  margin: auto;
+  align-self: center;
+  margin-right: 1em;
+  .rounded {
+    border-radius: 5px;
+  }
+}
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.ts b/frontend/src/app/components/master-page-preview/master-page-preview.component.ts
index 03a6a1ebb..64bdcfda2 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.ts
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable, merge, of } from 'rxjs';
+import { Observable, Subscription, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-master-page-preview',
@@ -13,15 +14,23 @@ export class MasterPagePreviewComponent implements OnInit {
   lightning$: Observable<boolean>;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
   urlLanguage: string;
+  subdomain = '';
+  enterpriseInfo: any;
+  enterpriseInfo$: Subscription;
 
   constructor(
     public stateService: StateService,
     private languageService: LanguageService,
+    private enterpriseService: EnterpriseService,
   ) { }
 
   ngOnInit() {
     this.network$ = merge(of(''), this.stateService.networkChanged$);
     this.lightning$ = this.stateService.lightningChanged$;
     this.urlLanguage = this.languageService.getLanguageForUrl();
+    this.subdomain = this.enterpriseService.getSubdomain();
+    this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => {
+      this.enterpriseInfo = info;
+    });
   }
 }