From f4b9301f55b8c662d716a786c6dce554a3064299 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 26 Mar 2024 11:36:20 +0900
Subject: [PATCH] [enterprise] polish enterprise logo

---
 .../master-page/master-page.component.html    | 33 +++++++++++++++----
 .../master-page/master-page.component.scss    | 19 +++++++++--
 .../search-form/search-form.component.scss    |  4 +--
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index fd7319b01..d99f9d5fa 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -15,12 +15,31 @@
     <div *ngIf="user === undefined" class="profile_image_container"></div>
   </ng-container>
 
-  <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-  <ng-template [ngIf]="subdomain && enterpriseInfo">
-    <div class="subdomain_container">
-      <img [src]="'/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo">
-    </div>
-  </ng-template>
+  <!-- Large screen -->
+  <a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
+    <ng-template [ngIf]="subdomain && enterpriseInfo">
+      <div class="subdomain_container">
+        <img [src]="'/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+      </div>
+      <div class="vertical-line"></div>
+    </ng-template>
+    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
+      <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
+      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+      <div class="connection-badge">
+        <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
+        <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
+      </div>
+    </ng-container>
+  </a>
+  <!-- Mobile -->
+  <a class="navbar-brand d-flex d-md-none justify-content-center" [ngClass]="{'dual-logos': subdomain, 'mr-0': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
+    <ng-template [ngIf]="subdomain && enterpriseInfo">
+      <div class="subdomain_container">
+        <img [src]="'/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+      </div>
+      <div class="vertical-line"></div>
+    </ng-template>
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
       <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
       <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
@@ -78,7 +97,7 @@
         <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
       </li>
     </ul>
-    <app-search-form [hamburgerOpen]="user != null" class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
+    <app-search-form [hamburgerOpen]="enterpriseInfo === null && user != null" class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
   </div>
 </nav>
 <app-menu *ngIf="servicesEnabled" [navOpen]="menuOpen" (loggedOut)="onLoggedOut()" (menuToggled)="menuToggled($event)"></app-menu>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 743092f3f..9320e2b38 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -106,6 +106,8 @@ li.nav-item {
   .dropdown {
     .dropdown-toggle {
       width: 62px;
+      height: 36px;
+      margin-top: 5px;
     }
   }
 }
@@ -181,19 +183,30 @@ nav {
 }
 
 .subdomain_logo {
-  max-height: 45px;
+  height: 35px;
+  overflow: clip;
   max-width: 140px;
   margin: auto;
   align-self: center;
+  .rounded {
+    border-radius: 5px;
+  }
 }
 
 .subdomain_container {
-  width: 140px;
-  margin-right: 15px;
+  max-width: 140px;
   text-align: center;
   align-self: center;
 }
 
+.vertical-line {
+  border-left: 1px solid #444;
+  height: 30px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 3px;
+}
+
 .logo-holder {
   display: flex;
   flex-direction: row;
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index cec555a4f..b84754397 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -15,8 +15,6 @@
 form {
   margin-top: 5px;
   @media (min-width: 564px) {
-    margin-top: 0px;
-    margin-left: 5px;
     margin-right: -5px;
   }
   @media (min-width: 992px) {
@@ -39,7 +37,7 @@ form {
   position: relative;
   width: 100%;
   @media (min-width: 768px) {
-    min-width: 400px;
+    min-width: 300px;
   }
   @media (min-width: 992px) {
     min-width: 142px;