From a596e25df3980a548dfab1278ae2a899106bf2fd Mon Sep 17 00:00:00 2001
From: Felix Brucker <felix@felixbrucker.com>
Date: Fri, 20 Oct 2023 22:03:56 +0530
Subject: [PATCH] Add "Join Pool" button and fix colors for some input fields

---
 src/app/harvester-card/harvester-card.component.html | 2 +-
 src/app/header/header.component.html                 | 7 ++++++-
 src/app/header/header.component.ts                   | 8 ++++++++
 src/app/my-farmer/my-farmer.component.html           | 2 +-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/harvester-card/harvester-card.component.html b/src/app/harvester-card/harvester-card.component.html
index 09f769b..3e09c72 100644
--- a/src/app/harvester-card/harvester-card.component.html
+++ b/src/app/harvester-card/harvester-card.component.html
@@ -12,7 +12,7 @@ <h5 class="d-flex align-items-center gap-1">
           </ng-template>
 
           <ng-template editMode>
-            <input editableOnEnter editableOnEscape class="form-control harvester-name-input" type="text" [formControl]="nameControl"/>
+            <input editableOnEnter editableOnEscape class="form-control input-field harvester-name-input" type="text" [formControl]="nameControl"/>
           </ng-template>
         </editable>
         <span *ngIf="(status$ | async) !== null" class="badge status-pill" [ngClass]="statusDotColorClass$ | async" [ngbTooltip]="statusTooltip$ | async">{{status$ | async}}</span>
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 202dbe3..4646032 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -69,7 +69,12 @@
       <div class="header-row-item" *ngIf="showLogoutButton">
         <button class="btn btn-outline-danger logout-button" (click)="accountService.logout()">{{snippetService.getSnippet('header-component.button.logout')}}</button>
       </div>
-      <div class="header-row-item" *ngIf="ratesService.currencies && ratesService.currencies.length > 0">
+      <div class="header-row-item" *ngIf="showJoinPoolButton">
+        <a class="btn btn-primary text-decoration-none" [href]="joinPoolUrl" target="_blank">
+          Join Pool
+        </a>
+      </div>
+      <div class="header-row-item" *ngIf="ratesService.currencies.length > 0">
         <app-currency-selector></app-currency-selector>
       </div>
       <div class="input-group header-row-item search-input">
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index c80c38f..70998d7 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -23,6 +23,14 @@ export class HeaderComponent {
   public readonly accountSearchInputPlaceholder: string = makeAccountIdentifierName(this.poolsProvider.pool.type)
   public readonly isSearchingAccount$: Observable<boolean>
 
+  public get showJoinPoolButton(): boolean {
+    return this.accountService.accountIdentifierFromLocalStorage === null
+  }
+
+  public get joinPoolUrl(): string {
+    return `https://docs.foxypool.io/proof-of-spacetime/foxy-pool/pools/${this.poolsProvider.poolIdentifier}/getting-started/`
+  }
+
   public get showMoonInThemeSwitcher(): boolean {
     return !this.isDarkTheme
   }
diff --git a/src/app/my-farmer/my-farmer.component.html b/src/app/my-farmer/my-farmer.component.html
index d1a6110..48b617d 100644
--- a/src/app/my-farmer/my-farmer.component.html
+++ b/src/app/my-farmer/my-farmer.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-12" *ngIf="(accountService.haveAccountIdentifier$ | async) === false">
     <div class="d-flex justify-content-center">
-      <input type="text" class="form-control" placeholder="{{accountIdentifierInputPlaceholder}}" [(ngModel)]="accountIdentifierInput" style="width: 32em;margin-right: 0.5rem;">
+      <input type="text" class="form-control input-field" placeholder="{{accountIdentifierInputPlaceholder}}" [(ngModel)]="accountIdentifierInput" style="width: 32em;margin-right: 0.5rem;">
       <button class="btn btn-success" style="margin-left: 0.5rem;" (click)="login()">
         <fa-icon *ngIf="accountService.isLoading$ | async" [icon]="faCircleNotch" animation="spin"></fa-icon>
         <span *ngIf="accountService.isLoading$ | async"> {{snippetService.getSnippet('my-farmer-component.login-button.label-logging-in')}}</span>