From 9474ed6aa61a3be139b4debf13325f6cf9fe9cbe Mon Sep 17 00:00:00 2001
From: Mathew Guest <mathew@zavage.net>
Date: Sun, 4 Aug 2024 10:44:52 -0600
Subject: [PATCH] build: styling on webpage, footer colors, ag-grid colors,
 scrollToTop()

---
 src/app/app.component.css                     |  6 ++++++
 src/app/app.component.html                    |  6 +++---
 src/app/app.component.ts                      |  6 ++++++
 .../scouting-crypto.component.html            |  2 +-
 .../scouting-crypto.component.ts              | 21 +++++++++++++++++++
 5 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 7aaeca8..b570667 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -5,3 +5,9 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+footer {
+  background: rgba(28, 45, 58.5);
+  border-top: 1px solid #545050;
+  color: #ccc;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1a2d9bd..8328bb7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -33,16 +33,16 @@
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3">
   <div class="container">
     <div class="col">
-      <span class="text-muted"
+      <span
         >Copyright &copy; 2024 Zavage Software Inc., all rights reserved.<br />
         Denver, CO</span
       >
     </div>
     <div class="col">
-      <button class="btn btn-primary" title="Go to top">Go to Top</button>
+      <button class="btn btn-primary" title="Go to top" (click)="scrollToTop()">Go to Top</button>
     </div>
   </div>
 </footer>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 038e15f..83c636f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,4 +12,10 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 })
 export class AppComponent {
   title = 'Skrill - get rich or die trying!!';
+
+  // When the user clicks on the button, scroll to the top of the document
+  scrollToTop() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  }
 }
diff --git a/src/app/scouting-crypto/scouting-crypto.component.html b/src/app/scouting-crypto/scouting-crypto.component.html
index 8b26303..57906d0 100644
--- a/src/app/scouting-crypto/scouting-crypto.component.html
+++ b/src/app/scouting-crypto/scouting-crypto.component.html
@@ -1,4 +1,4 @@
 <p>scouting-crypto works!</p>
 
 <!-- The AG Grid component -->
-<ag-grid-angular class="ag-theme-quartz" style="height: 500px" [rowData]="rowData" [columnDefs]="colDefs" />
+<ag-grid-angular class="ag-theme-quartz-dark" style="height: 2500px" [rowData]="rowData" [columnDefs]="colDefs" />
diff --git a/src/app/scouting-crypto/scouting-crypto.component.ts b/src/app/scouting-crypto/scouting-crypto.component.ts
index 356b521..82cdcf2 100644
--- a/src/app/scouting-crypto/scouting-crypto.component.ts
+++ b/src/app/scouting-crypto/scouting-crypto.component.ts
@@ -15,6 +15,27 @@ export class ScoutingCryptoComponent {
     { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
     { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
     { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
   ];
 
   // Column Definitions: Defines the columns to be displayed.