From 2b92d0f119c7ea92f938431210143041415542f3 Mon Sep 17 00:00:00 2001
From: Matt Hill <MattDHill@users.noreply.github.com>
Date: Mon, 13 Jun 2022 10:42:21 -0600
Subject: [PATCH] Swtich certain inputs and displays to courier for readability
 (#1521)

swtich certain inputs and displays to courier for readability

Co-authored-by: Matt Hill <matthill@Matt-M1.local>
---
 frontend/projects/shared/styles/shared.scss   |  4 +
 .../form-object/form-object.component.scss    |  1 +
 .../app-interfaces/app-interfaces.page.scss   |  3 +
 .../app-properties/app-properties.page.html   | 77 +++++++++++++++----
 .../server-specs/server-specs.page.scss       |  3 +
 5 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/frontend/projects/shared/styles/shared.scss b/frontend/projects/shared/styles/shared.scss
index 136e4c843..e794788c3 100644
--- a/frontend/projects/shared/styles/shared.scss
+++ b/frontend/projects/shared/styles/shared.scss
@@ -104,6 +104,10 @@ ion-modal::part(content) {
   width: 1em;
 }
 
+.courier-new {
+  font-family: 'Courier New';
+}
+
 .montserrat {
   font-family: 'Montserrat', sans-serif !important;
 }
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/components/form-object/form-object.component.scss b/frontend/projects/ui/src/app/components/form-object/form-object.component.scss
index fe4454c5a..3ffa22fb3 100644
--- a/frontend/projects/ui/src/app/components/form-object/form-object.component.scss
+++ b/frontend/projects/ui/src/app/components/form-object/form-object.component.scss
@@ -4,6 +4,7 @@
 }
 
 ion-input {
+  font-family: 'Courier New';
   font-weight: bold;
   --placeholder-font-weight: 400;
 }
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss
index e69de29bb..61ead3b94 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss
@@ -0,0 +1,3 @@
+p {
+    font-family: 'Courier New';
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
index d2907ba15..4e374ab78 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
@@ -14,13 +14,21 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <text-spinner *ngIf="loading; else loaded" text="Loading Properties"></text-spinner>
+  <text-spinner
+    *ngIf="loading; else loaded"
+    text="Loading Properties"
+  ></text-spinner>
 
   <ng-template #loaded>
     <!-- not running -->
     <ion-item *ngIf="!running" class="ion-margin-bottom">
       <ion-label>
-        <p><ion-text color="warning">Service not running. Information on this page could be inaccurate.</ion-text></p>
+        <p>
+          <ion-text color="warning"
+            >Service not running. Information on this page could be
+            inaccurate.</ion-text
+          >
+        </p>
       </ion-label>
     </ion-item>
 
@@ -35,8 +43,18 @@
     <ion-item-group *ngIf="!(properties | empty)">
       <div *ngFor="let prop of node | keyvalue: asIsOrder">
         <!-- object -->
-        <ion-item button detail="true" *ngIf="prop.value.type === 'object'" (click)="goToNested(prop.key)">
-          <ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
+        <ion-item
+          button
+          detail="true"
+          *ngIf="prop.value.type === 'object'"
+          (click)="goToNested(prop.key)"
+        >
+          <ion-button
+            *ngIf="prop.value.description"
+            fill="clear"
+            slot="start"
+            (click)="presentDescription(prop, $event)"
+          >
             <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
           </ion-button>
           <ion-label>
@@ -45,26 +63,59 @@
         </ion-item>
         <!-- not object -->
         <ion-item *ngIf="prop.value.type === 'string'">
-          <ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
+          <ion-button
+            *ngIf="prop.value.description"
+            fill="clear"
+            slot="start"
+            (click)="presentDescription(prop, $event)"
+          >
             <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
           </ion-button>
           <ion-label>
             <h2>{{ prop.key }}</h2>
-            <p>{{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value | mask ) : prop.value.value }}</p>
+            <p class="courier-new">
+              {{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value |
+              mask ) : prop.value.value }}
+            </p>
           </ion-label>
           <div slot="end" *ngIf="prop.value.copyable || prop.value.qr">
-            <ion-button *ngIf="prop.value.masked" fill="clear" (click)="toggleMask(prop.key)">
-              <ion-icon slot="icon-only" [name]="unmasked[prop.key] ? 'eye-off-outline' : 'eye-outline'" [color]="unmasked[prop.key] ? 'danger' : 'dark'" size="small"></ion-icon>
+            <ion-button
+              *ngIf="prop.value.masked"
+              fill="clear"
+              (click)="toggleMask(prop.key)"
+            >
+              <ion-icon
+                slot="icon-only"
+                [name]="unmasked[prop.key] ? 'eye-off-outline' : 'eye-outline'"
+                [color]="unmasked[prop.key] ? 'danger' : 'dark'"
+                size="small"
+              ></ion-icon>
             </ion-button>
-            <ion-button *ngIf="prop.value.qr" fill="clear" (click)="showQR(prop.value.value)">
-              <ion-icon slot="icon-only" name="qr-code-outline" size="small"></ion-icon>
+            <ion-button
+              *ngIf="prop.value.qr"
+              fill="clear"
+              (click)="showQR(prop.value.value)"
+            >
+              <ion-icon
+                slot="icon-only"
+                name="qr-code-outline"
+                size="small"
+              ></ion-icon>
             </ion-button>
-            <ion-button *ngIf="prop.value.copyable" fill="clear" (click)="copy(prop.value.value)">
-              <ion-icon slot="icon-only" name="copy-outline" size="small"></ion-icon>
+            <ion-button
+              *ngIf="prop.value.copyable"
+              fill="clear"
+              (click)="copy(prop.value.value)"
+            >
+              <ion-icon
+                slot="icon-only"
+                name="copy-outline"
+                size="small"
+              ></ion-icon>
             </ion-button>
           </div>
         </ion-item>
       </div>
     </ion-item-group>
   </ng-template>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.scss b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.scss
index e69de29bb..61ead3b94 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.scss
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.scss
@@ -0,0 +1,3 @@
+p {
+    font-family: 'Courier New';
+}
\ No newline at end of file