From 0782493412563619114c73308c6bf010a188bc97 Mon Sep 17 00:00:00 2001
From: Jeremy Brown <chase208@4JLT.com>
Date: Thu, 30 Jan 2025 17:26:05 -0500
Subject: [PATCH] More element details work

---
 .../element-detail.component.html             | 29 +++++++++----------
 .../element-detail.component.scss             |  4 ++-
 .../element-detail.component.ts               |  4 +--
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/app/elements/components/element-detail/element-detail.component.html b/src/app/elements/components/element-detail/element-detail.component.html
index 6520be4..c541639 100644
--- a/src/app/elements/components/element-detail/element-detail.component.html
+++ b/src/app/elements/components/element-detail/element-detail.component.html
@@ -26,7 +26,7 @@ <h2>{{elementDetails.symbol}}</h2>
         </div>
         <div class="element-highlights">
           <span class="element-highlight">
-            <p>{{formatDiscoverer(elementDetails.discoverer)}}</p>
+            <p>{{formatDiscoverer(elementDetails.discoverer, elementDetails.yearOfDiscovery)}}</p>
             <img class="icon" src="icons/microscope.svg" alt="Microscope" />
           </span>
           <span class="element-highlight">
@@ -66,27 +66,24 @@ <h2>{{elementDetails.symbol}}</h2>
   
       <div class="element-data">
         <div>
-          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Physical Properties</h3>
-          <p>Melting Point <span>{{elementDetails.meltingPointKelvin}}</span></p>
-          <p>Boiling Point <span>{{elementDetails.boilingPointKelvin}}</span></p>
-          <p>Density <span>{{elementDetails.density}}</span></p>
-          <p>Standard State <span>{{elementDetails.standardState}}</span></p>
+          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Atomic Structure</h3>
+          <p>Electron Configuration <span>{{elementDetails.electronConfiguration}}</span></p>
+          <p>Atomic Weight <span>{{elementDetails.atomicWeight}}</span></p>
+          <p>Isotopes <span>{{elementDetails.isotopes}}</span></p>
         </div>
         <div>
-          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Atomic Properties</h3>
-          <p>Atomic Radius <span>{{elementDetails.atomicRadius}}</span></p>
-          <p>Ionic Radius <span>{{elementDetails.ionicRadius}}</span></p>
-          <p>Electronegativity <span>{{elementDetails.electronegativity}}</span></p>
-          <p>First Ionization Potential <span>{{elementDetails.firstIonizationPotential}}</span></p>
-          <p>Electron Configuration <span>{{elementDetails.electronConfiguration}}</span></p>
+          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Size & Stability</h3>
+          <p>Density <span>{{elementDetails.density}}</span></p>
+          <p>Atomic Radius <span>{{elementDetails.atomicRadius === 0 ? 'N/A' : elementDetails.atomicRadius}}</span></p>
+          <p>Ionic Radius <span>{{elementDetails.ionicRadius === 0 ? 'N/A' : elementDetails.ionicRadius}}</span></p>
+          <p>Most Stable Crystal <span>{{elementDetails.mostStableCrystal}}</span></p>
+          <p>Specific Heat Capacity <span>{{elementDetails.specificHeatCapacity === 0 ? 'N/A' : elementDetails.specificHeatCapacity}}</span></p>
         </div>
         <div>
-          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Other Properties</h3>
-          <p>Atomic Radius <span>{{elementDetails.atomicRadius}}</span></p>
-          <p>Ionic Radius <span>{{elementDetails.ionicRadius}}</span></p>
+          <h3 class="{{elementDetails.type !== null ? elementDetails.type.toLocaleLowerCase().replace(' ', '-') : ''}}">Reactivity</h3>
           <p>Electronegativity <span>{{elementDetails.electronegativity}}</span></p>
           <p>First Ionization Potential <span>{{elementDetails.firstIonizationPotential}}</span></p>
-          <p>Electron Configuration <span>{{elementDetails.electronConfiguration}}</span></p>
+          <p>Oxidation States <span>{{elementDetails.oxidationStates}}</span></p>
         </div>
       </div>
     </div>
diff --git a/src/app/elements/components/element-detail/element-detail.component.scss b/src/app/elements/components/element-detail/element-detail.component.scss
index 385f8ea..0d6192d 100644
--- a/src/app/elements/components/element-detail/element-detail.component.scss
+++ b/src/app/elements/components/element-detail/element-detail.component.scss
@@ -35,6 +35,7 @@
 
   .row-one {
     display: flex;
+    justify-content: space-between;
     
     .element-card {
       display: flex;
@@ -81,7 +82,7 @@
     }
 
     .element-highlights {
-      width: 45vw;
+      width: 40vw;
       display: flex;
       flex-direction: column;
       align-items: end;
@@ -132,6 +133,7 @@
       justify-content: space-between;
 
       span {
+        text-align: right;
         font-weight: 400;
       }
     }
diff --git a/src/app/elements/components/element-detail/element-detail.component.ts b/src/app/elements/components/element-detail/element-detail.component.ts
index 90b5f1f..476c3b0 100644
--- a/src/app/elements/components/element-detail/element-detail.component.ts
+++ b/src/app/elements/components/element-detail/element-detail.component.ts
@@ -29,7 +29,7 @@ export class ElementDetailComponent implements OnInit {
     this.router.navigate(['/elements']);
   }
 
-  formatDiscoverer = (discoverer: string) => {
+  formatDiscoverer = (discoverer: string, year: number) => {
     if (discoverer === 'Prehistoric') {
       return discoverer;
     }
@@ -41,6 +41,6 @@ export class ElementDetailComponent implements OnInit {
     if (matches && matches.length === 1) {
       discoverer = discoverer.replace(',', ' and');
     }
-    return `Discovered by ${discoverer}`;
+    return `Discovered by ${discoverer} in ${year}`;
   }
 }