Use new bootstrap themes

src/app/app.component.scss

@@ -11,7 +11,7 @@
     background-color: rgb(13, 110, 253);
   }
   .duration-slider-wrapper .ngx-slider[disabled] .ngx-slider-selection {
-    background-color: #8b91a2;;
+    background-color: var(--slider-selection-background-color-disabled);
   }
   .duration-slider-wrapper .ngx-slider .ngx-slider-tick {
     width: 0;
@@ -25,15 +25,18 @@
     border-radius: 8px;
   }
   .duration-slider-wrapper .ngx-slider[disabled] .ngx-slider-pointer {
-    background-color: #d8e0f3;
+    background-color: var(--slider-pointer-background-color-disabled);
   }
   .duration-slider-wrapper .ngx-slider .ngx-slider-pointer:after {
     display: none;
   }
   .duration-slider-wrapper .ngx-slider .ngx-slider-tick-legend {
-    color: #474747;
+    color: var(--slider-legend-color);
   }
   .duration-slider-wrapper .ngx-slider .ngx-slider-tick-value {
-    color: #474747;
+    color: var(--slider-tick-color);
+  }
+  .duration-slider-wrapper .ngx-slider .ngx-slider-bubble {
+    color: var(--slider-bubble-color);
   }
 }

src/app/generate-login-link/generate-login-link.component.html

@@ -1,4 +1,4 @@
-<h5 style="color: #474747">Generate a login link</h5>
+<h5 class="settings-modal-text">Generate a login link</h5>
 <div class="row">
   <div class="col-12">
     <div class="alert alert-info" role="alert" style="font-size: 1.1rem">

src/app/harvester-card/harvester-card.component.ts

@@ -303,9 +303,6 @@ export class HarvesterCardComponent implements OnInit, OnDestroy {
               color: textColor,
             },
           },
-          series: [{},{},{},{
-            color: this.themeProvider.isDarkTheme ? colors.darkTheme.proofTimesColor : colors.lightTheme.proofTimesColor,
-          }],
         }
         this.proofTimesChartUpdateOptions = {
           ...(this.proofTimesChartUpdateOptions || {}),
@@ -374,8 +371,8 @@ export class HarvesterCardComponent implements OnInit, OnDestroy {
       filter(satellites => satellites !== undefined),
       map(satellites => satellites
         .filter(satellite => !satellite.hidden)
-        .map(satellite => satellite.services.harvester)
-        .filter(harvester => harvester.stats !== undefined)
+        .map(satellite => satellite.services?.harvester)
+        .filter(harvester => harvester?.stats !== undefined)
         .find(harvester => harvester.stats.nodeId === this.harvester.peerId.ensureHexPrefix())
       ),
       filter(harvester => harvester !== undefined),

src/app/harvester-settings-modal/harvester-settings-modal.component.html

@@ -1,6 +1,6 @@
 <ng-template #settingsModal let-dismiss="dismiss">
   <div class="modal-header">
-    <h4 class="modal-title" style="color: #474747">Harvester Settings</h4>
+    <h4 class="modal-title settings-modal-text">Harvester Settings</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">

src/app/integration-settings/integration-settings.component.html

@@ -1,5 +1,5 @@
 <div>
-  <h6 style="color: #474747"><a href="https://dashboard.chia.foxypool.io" target="_blank">Chia-Dashboard</a> Share Key</h6>
+  <h6 class="settings-modal-text"><a href="https://dashboard.chia.foxypool.io" target="_blank">Chia-Dashboard</a> Share Key</h6>
   <div class="row">
     <div class="col-12">
       <form [formGroup]="form">

src/app/integrations/chia-dashboard-api/types/satellite.ts

@@ -98,7 +98,7 @@ export interface Satellite {
   _id: string
   name: string
   hidden: boolean
-  services: {
+  services?: {
     daemon?: ChiaService<DaemonStats>
     farmer: ChiaService<FarmerStats>
     harvester: ChiaService<HarvesterStats>

src/app/leave-pool-modal/leave-pool.component.html

@@ -1,4 +1,4 @@
-<h5 style="color: #474747">{{snippetService.getSnippet('leave-pool-modal.title')}}</h5>
+<h5 class="settings-modal-text">{{snippetService.getSnippet('leave-pool-modal.title')}}</h5>
 <div class="row">
   <div class="col-12" *ngIf="haveCollateral">
     <div class="form-check checkbox-lg" style="padding-bottom: 1rem">
@@ -7,17 +7,17 @@ <h5 style="color: #474747">{{snippetService.getSnippet('leave-pool-modal.title')
         {{ snippetService.getSnippet('leave-pool-modal.leave-forever') }}
       </label>
     </div>
-    <div class="alert alert-danger" role="alert" style="font-size: 1.1rem" *ngIf="leaveForEver">
+    <div class="alert alert-danger bigger-text" role="alert" *ngIf="leaveForEver">
       {{snippetService.getSnippet('leave-pool-modal.collateral-warning')}}
     </div>
   </div>
   <div class="col-12" >
-    <div class="alert alert-info" role="alert" style="font-size: 1.1rem" *ngIf="!leaveForEver">
+    <div class="alert alert-info bigger-text" role="alert" *ngIf="!leaveForEver">
       {{snippetService.getSnippet('leave-pool-modal.rejoin-info')}}
     </div>
   </div>
   <div class="col-12" >
-    <div class="alert alert-warning" role="alert" style="font-size: 1.1rem">
+    <div class="alert alert-warning bigger-text" role="alert">
       <span [innerHTML]="snippetService.getSnippet('leave-pool-modal.read-leave-guide-info', leavePoolGuideUrl)"></span>
     </div>
   </div>

src/app/my-farmer/my-farmer.component.html

@@ -16,10 +16,10 @@
   </div>
   <div class="col-12" *ngIf="(accountService.haveAccountIdentifier$ | async) && (accountService.haveAccount$ | async)">
     <div *ngIf="isPoolMember && (accountHasNeverSubmittedAPartial || showNewAccountFarmingAlert)" class="row mb-1 ps-2 pe-2">
-      <ngb-alert *ngIf="accountHasNeverSubmittedAPartial" type="primary" class="mb-1 text-center" [dismissible]="false">
+      <ngb-alert *ngIf="accountHasNeverSubmittedAPartial" type="primary" class="mb-1 text-center no-border-color" [dismissible]="false">
         {{accountHasNeverSubmittedPartialsAlertMessage}}
       </ngb-alert>
-      <ngb-alert *ngIf="!accountHasNeverSubmittedAPartial && showNewAccountFarmingAlert" type="primary" class="mb-1 text-center" (closed)="hideNewAccountInfoAlert()">
+      <ngb-alert *ngIf="!accountHasNeverSubmittedAPartial && showNewAccountFarmingAlert" type="primary" class="mb-1 text-center no-border-color" (closed)="hideNewAccountInfoAlert()">
         You just started farming, it will take 24h to show accurate estimations based on farm size.
       </ngb-alert>
     </div>

src/app/my-farmer/my-farmer.component.scss

@@ -1,6 +1,9 @@
 .text-align-center {
   text-align: center;
 }
+.no-border-color {
+  border-color: transparent;
+}
 .card-header {
   padding-bottom: 0.15rem;
 }

src/app/my-farmer/my-farmer.component.ts

@@ -422,8 +422,8 @@ export class MyFarmerComponent implements OnInit, OnDestroy {
       filter(satellites => satellites !== undefined),
       map(satellites => satellites
         .filter(satellite => !satellite.hidden)
-        .map(satellite => satellite.services.harvester)
-        .filter(harvester => harvester.stats !== undefined && harvester.lastUpdate !== undefined && moment(harvester.lastUpdate).isAfter(moment().subtract(5, 'minutes')))
+        .map(satellite => satellite.services?.harvester)
+        .filter(harvester => harvester !== undefined && harvester.stats !== undefined && harvester.lastUpdate !== undefined && moment(harvester.lastUpdate).isAfter(moment().subtract(5, 'minutes')))
       ),
       shareReplay(),
     )
@@ -483,9 +483,6 @@ export class MyFarmerComponent implements OnInit, OnDestroy {
               color: textColor,
             },
           },
-          series: [{}, {}, {}, {}, {
-            color: this.themeProvider.isDarkTheme ? colors.darkTheme.partialsChartColor : colors.lightTheme.partialsChartColor,
-          }],
         }
       })
     )

src/app/settings-modal/settings-modal.component.html

@@ -1,6 +1,6 @@
 <ng-template #settingsModal let-dismiss="dismiss">
   <div class="modal-header">
-    <h4 class="modal-title" style="color: #474747">Settings</h4>
+    <h4 class="modal-title settings-modal-text">Settings</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">

src/app/theme-provider.ts

@@ -62,8 +62,10 @@ export class ThemeProvider implements OnDestroy {
       this.theme$.subscribe(theme => {
         if (theme === Theme.dark) {
           document.body.classList.add('dark-theme')
+          document.body.setAttribute('data-bs-theme', 'dark')
         } else {
           document.body.classList.remove('dark-theme')
+          document.body.setAttribute('data-bs-theme', 'light')
         }
       }),
       this.theme$.pipe(skip(1)).subscribe(theme => {

src/app/update-difficulty/update-difficulty.component.html

@@ -1,9 +1,9 @@
-<h5 style="color: #474747">Update your Farmer difficulty</h5>
+<h5 class="settings-modal-text">Update your Farmer difficulty</h5>
 <div class="row">
   <div class="col-12">
     <div class="form-check form-switch" style="padding-bottom: 0.5rem">
       <input type="checkbox" class="form-check-input" role="switch" id="isFixedDifficultyCheckbox" [(ngModel)]="isFixedDifficulty">
-      <label class="form-check-label text-color-and-size" for="isFixedDifficultyCheckbox" style="display: inline">Fixed difficulty</label>
+      <label class="form-check-label settings-modal-text bigger-text" for="isFixedDifficultyCheckbox" style="display: inline">Fixed difficulty</label>
     </div>
   </div>
 </div>

src/app/update-difficulty/update-difficulty.component.scss

@@ -1,4 +0,0 @@
-.text-color-and-size {
-  color: #474747;
-  font-size: 1.1rem;
-}

src/app/update-harvester-notification-settings/update-harvester-notification-settings.component.html

@@ -1,11 +1,11 @@
-<h5 style="color: #474747">Notification settings</h5>
+<h5 class="settings-modal-text">Notification settings</h5>
 <div class="row mt-3">
   <div class="col-12">
     <div class="form-group">
       <label for="harvesterOfflineDuration" class="form-label">
         <div class="form-check form-switch">
           <input class="form-check-input" [ngClass]="{ 'inherited-switch': isInheritedAreOfflineNotificationsEnabled }" type="checkbox" role="switch" id="enableHarvesterOfflineNotifications" [(ngModel)]="areOfflineNotificationsEnabled">
-          <label class="form-check-label text-color-and-size" for="enableHarvesterOfflineNotifications" style="display: inline">
+          <label class="form-check-label settings-modal-text bigger-text" for="enableHarvesterOfflineNotifications" style="display: inline">
             Notify when this Harvester does not send any partials for
           </label>
         </div>
@@ -18,7 +18,7 @@ <h5 style="color: #474747">Notification settings</h5>
 </div>
 <div class="row mt-4">
   <div class="col-12" >
-    <div class="alert alert-info" role="alert" style="font-size: 1.1rem">
+    <div class="alert alert-info bigger-text" role="alert">
       You can subscribe and unsubscribe to your accounts notification using your discord account by using the corresponding slash command:<br>
       <code>/subscribe-to-notifications</code><br>
       or <code>/unsubscribe-from-notifications</code>

src/app/update-harvester-notification-settings/update-harvester-notification-settings.component.scss

@@ -1,7 +1,3 @@
-.text-color-and-size {
-  color: #474747;
-  font-size: 1.1rem;
-}
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;

src/app/update-minimum-payout/update-payout-options.component.html

@@ -1,5 +1,5 @@
 <div>
-  <h6 style="color: #474747">Configure a minimum payout amount</h6>
+  <h6 class="settings-modal-text">Configure a minimum payout amount</h6>
   <div class="row">
     <div class="col-12">
       <div class="input-group">
@@ -22,7 +22,7 @@ <h6 style="color: #474747">Configure a minimum payout amount</h6>
   </div>
 </div>
 <div class="mt-2">
-  <h6 style="color: #474747">Payout multiples of</h6>
+  <h6 class="settings-modal-text">Payout multiples of</h6>
   <div class="row">
     <div class="col-12">
       <div class="input-group">

src/app/update-minimum-payout/update-payout-options.component.scss

@@ -1,7 +1,3 @@
 input[type=number] {
   -moz-appearance: textfield;
 }
-.text-color-and-size {
-  color: #474747;
-  font-size: 1.1rem;
-}

src/app/update-name/update-name.component.html

@@ -1,4 +1,4 @@
-<h5 style="color: #474747">{{snippetService.getSnippet('update-name-modal.title')}}</h5>
+<h5 class="settings-modal-text">{{snippetService.getSnippet('update-name-modal.title')}}</h5>
 <div class="row">
   <div class="col-12">
     <input type="text"

src/app/update-notification-settings/update-notification-settings.component.html

@@ -1,11 +1,11 @@
-<h5 style="color: #474747">Notification settings</h5>
+<h5 class="settings-modal-text">Notification settings</h5>
 <div class="row">
   <div class="col-12">
     <div class="form-group">
       <label for="ecLastHourThreshold" class="form-label">
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="enableEcChangeNotifications" [(ngModel)]="areEcChangeNotificationsEnabled">
-          <label class="form-check-label text-color-and-size" for="enableEcChangeNotifications" style="display: inline">
+          <label class="form-check-label settings-modal-text bigger-text" for="enableEcChangeNotifications" style="display: inline">
             Notify when the current EC drops below
           </label>
         </div>
@@ -39,7 +39,7 @@ <h5 style="color: #474747">Notification settings</h5>
       <label for="harvesterOfflineDuration" class="form-label">
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="enableHarvesterOfflineNotifications" [(ngModel)]="areHarvesterOfflineNotificationsEnabled">
-          <label class="form-check-label text-color-and-size" for="enableHarvesterOfflineNotifications" style="display: inline">
+          <label class="form-check-label settings-modal-text bigger-text" for="enableHarvesterOfflineNotifications" style="display: inline">
             Notify when a Harvester does not send any partials for
           </label>
         </div>
@@ -54,7 +54,7 @@ <h5 style="color: #474747">Notification settings</h5>
   <div class="col-12">
     <div class="form-check form-switch" style="padding-bottom: 1rem">
       <input class="form-check-input" type="checkbox" role="switch" id="enableBlockWonNotifications" [(ngModel)]="areBlockWonNotificationsEnabled">
-      <label class="form-check-label text-color-and-size" for="enableBlockWonNotifications" style="display: inline">
+      <label class="form-check-label settings-modal-text bigger-text" for="enableBlockWonNotifications" style="display: inline">
         Notify on block win
       </label>
     </div>
@@ -64,7 +64,7 @@ <h5 style="color: #474747">Notification settings</h5>
   <div class="col-12">
     <div class="form-check form-switch" style="padding-bottom: 1rem">
       <input class="form-check-input" type="checkbox" role="switch" id="enablePayoutAddressChangeNotifications" [(ngModel)]="arePayoutAddressChangeNotificationsEnabled">
-      <label class="form-check-label text-color-and-size" for="enablePayoutAddressChangeNotifications" style="display: inline">
+      <label class="form-check-label settings-modal-text bigger-text" for="enablePayoutAddressChangeNotifications" style="display: inline">
         Notify on payout address change
       </label>
     </div>

src/app/update-notification-settings/update-notification-settings.component.scss

@@ -1,7 +1,3 @@
-.text-color-and-size {
-  color: #474747;
-  font-size: 1.1rem;
-}
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -11,13 +7,13 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 .input-group-text {
-  border: 1px solid black;
+  border: 1px solid var(--settings-input-field-border-color);
 }
 .form-control {
-  border: 1px solid black;
+  border: 1px solid var(--settings-input-field-border-color);
 }
 .custom-select {
-  border: 1px solid black;
+  border: 1px solid var(--settings-input-field-border-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

src/index.html

@@ -33,7 +33,7 @@
   <meta property="og:description" content="Easily farm CHIA with your OG & NFT plots. Low fees and hosted in Europe. Supports compressed plots with BladeBit and Gigahorse.">
   <meta property="og:image" content="https://static.foxypool.io/assets/icon/fox/icon-384x384.png">
 </head>
-<body class="dark-theme">
+<body class="dark-theme" data-bs-theme="dark">
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>

src/styles.scss

@@ -37,6 +37,13 @@ body {
   --page-link-border-color: rgba(0, 0, 0, 0.4);
   --nav-tabs-bottom-border-color: #e9ecef;
   --brand-text-color: #000;
+  --settings-modal-text-color: #474747;
+  --settings-input-field-border-color: black;
+  --slider-selection-background-color-disabled: #8b91a2;
+  --slider-pointer-background-color-disabled: #d8e0f3;
+  --slider-legend-color: #474747;
+  --slider-tick-color: #474747;
+  --slider-bubble-color: #55637d;
 }
 
 body.dark-theme {
@@ -69,8 +76,20 @@ body.dark-theme {
   --page-link-border-color: #18191c;
   --nav-tabs-bottom-border-color: #2b2e33;
   --brand-text-color: #fff;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --settings-modal-text-color: initial;
+  --settings-input-field-border-color: var(--bs-border-color);
+  --slider-selection-background-color-disabled: #8b91a2;
+  --slider-pointer-background-color-disabled: #d8e0f3;
+  --slider-legend-color: #cfd0d1;
+  --slider-tick-color: #cfd0d1;
+  --slider-bubble-color: #cfd0d1;
 }
 
+.tooltip {
+  --bs-tooltip-color: white;
+  --bs-tooltip-bg: black;
+}
 .pagination {
   --bs-pagination-disabled-color: rgb(108, 117, 125);
 }
@@ -95,11 +114,6 @@ body {
   color: var(--text-color);
 }
 
-table {
-  background-color: var(--background-color) !important;
-  color: var(--text-color) !important;
-}
-
 .table th {
   border-color: var(--table-border-color);
   background-color: var(--background-color);
@@ -230,3 +244,11 @@ $color-green-orange: #b9a44c;
 .farmer-page-link:hover {
   border-bottom: 2px solid rgb(66, 134, 244);
 }
+
+.settings-modal-text {
+  color: var(--settings-modal-text-color);
+}
+
+.bigger-text {
+  font-size: 1.1rem;
+}