feat: Updates styles

Sources/ViewController/Views/MainPage.swift

@@ -31,7 +31,7 @@ struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
   }
 
   var body: some HTML {
-    main(.class("bg-white dark:bg-gray-800")) {
+    main(.class("bg-slate-100 dark:bg-gray-800")) {
       div(.class("min-h-screen")) {
         Header()
         PageContent(body: inner)
@@ -46,12 +46,13 @@ private struct Header: HTML {
     header(.class("\(bg: .blue) mb-8 flex flex-row gap-2 border \(border: .yellow)")) {
       a(
         .href(route: .index),
-        .class("flex flex-row gap-2 \(bg: .yellow) pe-2 rounded-e-lg \(text: .blue) hover:\(text: .darkBlue)")
+        .class("group flex flex-row gap-2 \(bg: .yellow) pe-2 rounded-e-lg \(text: .blue) hover:text-blue-600")
       ) {
         img(.src("/images/toolbox.svg"), .width(40), .height(40), .class("py-1"))
         div(.class("flex flex-row mt-2")) {
           h2(.class("text-2xl font-extrabold pe-3")) { "HVAC-Toolbox" }
           SVG(.wind, color: .blue)
+            .attributes(.class("group-hover:text-blue-600"))
         }
       }
       nav(.class("flex flex-row gap-2 p-2 mt-2")) {
@@ -78,7 +79,7 @@ private struct PageContent<Body: HTML>: HTML where Body: Sendable {
 
   var content: some HTML {
     div(.class("mx-5 lg:mx-20")) {
-      div(.class("rounded-xl shadow-lg \(bg: .slate) dark:\(bg: .darkSlate) p-8")) {
+      div(.class("rounded-xl shadow-lg bg-white dark:bg-slate-700 p-8")) {
         body()
       }
     }

Sources/ViewController/Views/MoldRisk.swift

@@ -7,7 +7,7 @@ struct MoldRiskForm: HTML {
 
   var content: some HTML {
     FormHeader(label: "Mold Risk Calculator", svg: .thermometer)
-    form {
+    form(.action("#")) {
       div(.class("space-y-6")) {
         LabeledContent(label: "Indoor Temperature (°F)") {
           Input(id: "temperature", placeholder: "Dry bulb temperature")
@@ -43,7 +43,7 @@ struct MoldRiskResponse: HTML {
             "Risk Level: \(response.riskLevel.rawValue.capitalized)"
           }
         } label: {
-          SVG(.exclamation, color: "\(text: .green) dark:text-lime-600")
+          SVG(.exclamation, color: "text-green-600 dark:text-lime-600")
         }
         .attributes(.class("flex items-center gap-2"))
       }
@@ -51,8 +51,8 @@ struct MoldRiskResponse: HTML {
       PsychrometricPropertiesGrid(properties: response.psychrometricProperties)
         .attributes(.class("mx-6"))
 
-      div(.class("mt-8 p-4 bg-gray-700 rounded-md shadow-md border border-blue-500")) {
-        p(.class("text-sm \(text: .blue)")) {
+      div(.class("mt-8 p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md border border-blue-500")) {
+        p(.class("text-sm text-blue-500")) {
           span(.class("font-extrabold pe-2")) { "Note:" }
           """
            These calculations are based on typical indoor conditions and common mold species. Actual mold growth can
@@ -70,22 +70,35 @@ struct PsychrometricPropertiesGrid: HTML {
 
   var content: some HTML<HTMLTag.div> {
     div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6 md:mx-20")) {
-      displayProperty("Dew Point", "\(properties.dewPoint.value) \(properties.dewPoint.units.symbol)")
-      displayProperty("Wet Bulb", "\(properties.wetBulb.value) \(properties.wetBulb.units.symbol)")
-      displayProperty("Enthalpy", "\(properties.enthalpy.value) \(properties.wetBulb.units.symbol)")
-      displayProperty("Density", "\(properties.density.value) \(properties.density.units.rawValue)")
-      displayProperty("Vapor Pressure", "\(properties.vaporPressure.value) \(properties.vaporPressure.units.symbol)")
-      displayProperty("Specific Volume", "\(properties.specificVolume.rawValue)")
-      displayProperty("Absolute Humidity", "\(properties.absoluteHumidity.value) \(properties.absoluteHumidity.units.symbol)")
-      displayProperty("Humidity Ratio", "\(properties.humidityRatio.value)")
-      displayProperty("Degree of Saturation", "\(properties.degreeOfSaturation.value)")
+      displayProperty("Dew Point", \.dewPoint.rawValue)
+      displayProperty("Wet Bulb", \.wetBulb.rawValue)
+      displayProperty("Enthalpy", \.enthalpy.rawValue)
+      displayProperty("Density", \.density.rawValue)
+      displayProperty("Vapor Pressure", \.vaporPressure.rawValue)
+      displayProperty("Specific Volume", properties.specificVolume.rawValue)
+      displayProperty("Absolute Humidity", \.absoluteHumidity)
+      displayProperty("Humidity Ratio", properties.humidityRatio.value)
+      displayProperty("Degree of Saturation", properties.degreeOfSaturation.value)
     }
   }
 
-  func displayProperty(_ label: String, _ value: String) -> some HTML {
-    p(.class("\(text: .darkGray) dark:\(text: .white)")) {
+  private func displayProperty(_ label: String, _ value: Double, _ symbol: String? = nil) -> some HTML {
+    let symbol = "\(symbol == nil ? "" : " \(symbol!)")"
+
+    return p(.class("text-blue-500 dark:text-slate-200")) {
       span(.class("font-semibold")) { "\(label): " }
-      span(.class("font-light")) { value }
+      span(.class("font-light")) {
+        "\(double: value)\(symbol)"
+      }
     }
   }
+
+  private func displayProperty<N: NumberWithUnitOfMeasure>(
+    _ label: String,
+    _ keyPath: KeyPath<PsychrometricProperties, N>
+  ) -> some HTML where N.Number == Double, N.Units: RawRepresentable, N.Units.RawValue == String {
+    let property = properties[keyPath: keyPath]
+    return displayProperty(label, property.rawValue, property.units.rawValue)
+  }
+
 }