248 styling (#266)

* bold items and add total to denominator of Number of Periods Included

* added static help icons to AnalysisHeader and EnergyUseHistoryChart, updated table layout to more closely match design

* change icons from png to svg

* added gap between rows in AnalysisHeader

* replaced NonHeatingUsage icon including black line

* Apply suggestions from code review

Co-authored-by: plocket <[email protected]>

---------

Co-authored-by: Thad Kerosky <[email protected]>
Co-authored-by: plocket <[email protected]>

heat-stack/app/components/ui/heat/CaseSummaryComponents/AnalysisHeader.tsx

@@ -1,5 +1,6 @@
 import { type z } from 'zod';
 import { type UsageDataSchema } from '#/types/types.ts'; 
+import HelpCircle from './assets/help-circle.svg'
 
 export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) {
 	// Example usage_data
@@ -35,6 +36,8 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) {
 	// Extract the summary_output from usage_data
 	const summaryOutputs = usage_data?.summary_output;
 
+	const totalRecords = usage_data?.billing_records?.length || "-"
+
 	// Calculate the number of billing periods included in Heating calculations
 	const heatingAnalysisTypeRecords = usage_data?.billing_records?.filter(
 		(billingRecord) => billingRecord.analysis_type === 1,
@@ -58,40 +61,45 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) {
 
 
 	return (
-		<div className="section-title">
-			<div className="item-group-title">Heat Load Analysis</div>
-			<div className="flex flex-row">
+		<div className="section-title mt-12">
+			<div className="flex flex-row gap-0.5 mb-4">
+				<div className="item-group-title font-semibold text-2xl">Heat Load Analysis</div>
+				{/* TODO: add help text here */}
+				{/* <img src={HelpCircle} alt='help text'/> */}
+			</div>
+
+			<div className="flex flex-row gap-x-4">
 				<div className="basis-1/3">
-					<div className="item-title-small">
+					<div className="item-title-small text-xl text-slate-700 font-normal">
 						Average Indoor Temperature <br />
-						<div className="item">
+						<div className="item font-bold">
 							{summaryOutputs?.average_indoor_temperature} °F
 						</div>
 						<br />
 						Balance Point Temperature
 						<br />
-						<div className="item">
+						<div className="item font-bold">
 							{summaryOutputs?.estimated_balance_point} °F
 						</div>
 						<br />
 					</div>
 				</div>
 				<div className="basis-1/3">
-					<div className="item-title-small">
+					<div className="item-title-small text-xl text-slate-700 font-normal">
 						Number of Periods Included <br />
-						<div className="item">{numRecordsForHeatingCalculations}</div>
+						<div className="item font-bold">{numRecordsForHeatingCalculations} / {totalRecords}</div>
 						<br />
 						Daily non-heating Usage <br />
-						<div className="item">
+						<div className="item font-bold">
 							{/* Rounding to two decimal places */}
 							{summaryOutputs?.other_fuel_usage?.toFixed(2)} therms
 						</div>
 					</div>
 				</div>
 				<div className="basis-1/3">
-					<div className="item-title-small">
+					<div className="item-title-small text-xl text-slate-700 font-normal">
 						Standard Deviation of UA <br />
-						<div className="item">
+						<div className="item font-bold">
 							{/* Rounding to two decimal places */}
 							{(
 								summaryOutputs?.standard_deviation_of_heat_loss_rate * 100
@@ -101,7 +109,7 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) {
 						<br />
 						Whole-home UA
 						<br />
-						<div className="item">
+						<div className="item font-bold">
 							{/* Rounding to zero decimal places */}
 							{summaryOutputs?.whole_home_heat_loss_rate?.toFixed(0)} BTU/h-°F
 						</div>

heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistoryChart.tsx

@@ -12,9 +12,10 @@ import {
 	TableRow,
 } from '../../../../components/ui/table.tsx'
 
-import HeatingUsage from './assets/HeatingUsage.png'
-import NonHeatingUsage from './assets/NonHeatingUsage.png'
-import NotAllowedInCalculations from './assets/NotAllowedInCalculations.png'
+import HeatingUsage from './assets/HeatingUsage.svg'
+import HelpCircle from './assets/help-circle.svg'
+import NonHeatingUsage from './assets/NonHeatingUsage.svg'
+import NotAllowedInCalculations from './assets/NotAllowedInCalculations.svg'
 
 import { tr } from '@faker-js/faker'
 
@@ -82,19 +83,31 @@ export function EnergyUseHistoryChart({ usage_data }: { usage_data: UsageDataSch
 	}
 
 	return (
-		<Table id="EnergyUseHistoryChart">
+		<Table id="EnergyUseHistoryChart" className='text-center border rounded-md border-neutral-300'>
 			<TableHeader>
-				<TableRow>
-					<TableHead className="w-[100px]">#</TableHead>
-					<TableHead>Allowed Usage*</TableHead>
-					{/* TODO: add help text */}
-					<TableHead>Start Date</TableHead>
-					<TableHead>End Date</TableHead>
-					<TableHead>Days in Period</TableHead>
-					<TableHead>Gas Usage (therms)</TableHead>
-					<TableHead>Whole-home UA (BTU/h-°F)</TableHead>
-					<TableHead>Override Default</TableHead>
-					{/* TODO: add help text */}
+				<TableRow className='text-xs text-muted-foreground bg-neutral-50'>
+					<TableHead className="text-center">#</TableHead>
+					<TableHead className='text-center'>
+						<div className="flex flex-row">
+							<div className='text-right'>Allowed Usage</div>
+							{/* TODO: add help text */}
+							{/* <img src={HelpCircle} alt='help text' className='pl-2'/> */}
+						</div>
+					</TableHead>
+
+					<TableHead className='text-center'>Start Date</TableHead>
+					<TableHead className='text-center'>End Date</TableHead>
+					<TableHead className='text-center'>Days in Period</TableHead>
+					<TableHead className='text-center'>Gas Usage (therms)</TableHead>
+					<TableHead className='text-center'>Whole-home UA (BTU/h-°F)</TableHead>
+					<TableHead className='text-center'>
+						<div className="flex flex-row">
+							<div className='text-right'>Override Default</div>
+							{/* TODO: add help text */}
+							{/* <img src={HelpCircle} alt='help text' className='pl-2'/> */}
+						</div>
+					</TableHead>
+
 				</TableRow>
 			</TableHeader>
 			<TableBody>
@@ -136,7 +149,7 @@ export function EnergyUseHistoryChart({ usage_data }: { usage_data: UsageDataSch
 					return (
 						<TableRow key={index} variant={variant}>
 							<TableCell className="font-medium">{index + 1}</TableCell>
-							<TableCell>
+							<TableCell className='justify-items-center'>
 								<img src={analysisType_Image} alt="Analysis Type" />
 							</TableCell>
 							<TableCell>{startDate.toLocaleDateString()}</TableCell>