formatting improvements

codeforboston · Jan 16, 2024 · 72d56b5 · 72d56b5
1 parent e546cc8
commit 72d56b5
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 44 deletions.
diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/CurrentHeatingSystem.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/CurrentHeatingSystem.tsx
@@ -7,64 +7,69 @@ import { Label } from '#/app/components/ui/label.tsx'
 export function CurrentHeatingSystem() {
 	const titleClassTailwind = 'text-5xl font-extrabold tracking-wide'
 	const subTitleClassTailwind = 'text-2xl font-semibold text-zinc-950'
+	const componentMargin = 'mt-10'
 	return (
 		<div>
-			<h2 className={`${titleClassTailwind}`}>Existing Heating System</h2>
+			<h2 className={`${titleClassTailwind} ${componentMargin}`}>
+				Existing Heating System
+			</h2>
 
 			<Form method="post" action="/current">
-				<div>
-					<Label htmlFor="fuelType">
-						<b>Fuel Type</b>
-					</Label>
+				<div className={`${componentMargin}`}>
+					<Label htmlFor="fuelType">Fuel Type</Label>
 					<Input name="fuelType" id="fuelType" type="text" />
 				</div>
 
-				<div>
-					<Label htmlFor="heatingSystemEfficiency">
-						<b>Heating system efficiency %</b>
-					</Label>
-					<Input
-						name="heatingSystemEfficiency"
-						id="heatingSystemEfficiency"
-						type="text"
-					/>
-				</div>
-
-				<div>
-					<Label htmlFor="designTemperatureOverride">
-						<b>Design temperature override (°F)</b>
-					</Label>
-					<Input
-						name="designTemperatureOverride"
-						id="designTemperatureOverride"
-						type="text"
-					/>
-				</div>
-
-				<h6 className={`${subTitleClassTailwind}`}>Thermostat Settings</h6>
-
-				<div className="flex flex-row">
-					<div className="basis-1/3">
-						<Label htmlFor="setPoint">Set Point (°F) </Label>
+				<div className="mt-4 flex space-x-4">
+					<div>
+						<Label htmlFor="heatingSystemEfficiency">
+							Heating system efficiency %
+						</Label>
 						<Input
-							name="setPointTemperature"
-							id="setPointTemperature"
+							name="heatingSystemEfficiency"
+							id="heatingSystemEfficiency"
 							type="text"
 						/>
 					</div>
 
-					<div className="basis-1/3">
-						<Label htmlFor="setPoint">Setback Temperature (°F)</Label>
+					<div>
+						<Label htmlFor="designTemperatureOverride">
+							Design temperature override (°F)
+						</Label>
 						<Input
-							name="setBackTemperature"
-							id="setBackTemperature"
+							name="designTemperatureOverride"
+							id="designTemperatureOverride"
 							type="text"
 						/>
 					</div>
+				</div>
+
+				<div className="mt-9">
+					<h6 className={`${subTitleClassTailwind}`}>Thermostat Settings</h6>
+
+					<div className="mt-4 flex space-x-4">
+						<div className="basis-1/3">
+							<Label htmlFor="setPoint">Set Point (°F) </Label>
+							<Input
+								name="setPointTemperature"
+								id="setPointTemperature"
+								type="text"
+							/>
+						</div>
+
+						<div className="basis-1/3">
+							<Label htmlFor="setPoint">Setback Temperature (°F)</Label>
+							<Input
+								name="setBackTemperature"
+								id="setBackTemperature"
+								type="text"
+							/>
+						</div>
 
-					<div className="basis-1/3">
-						<Label htmlFor="setPoint">Setback hours per day</Label>
-						<Input name="setBackTime" id="setBackTime" type="text" />
+						<div className="basis-1/3">
+							<Label htmlFor="setPoint">Setback hours per day</Label>
+							<Input name="setBackTime" id="setBackTime" type="text" />
+						</div>
 					</div>
 				</div>
 			</Form>

diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx
@@ -3,9 +3,13 @@ import { EnergyUseHistoryChart } from './EnergyUseHistoryChart.tsx'
 
 export function EnergyUseHistory() {
 	const titleClassTailwind = 'text-5xl font-extrabold tracking-wide'
+	const componentMargin = 'mt-10'
+
 	return (
 		<div>
-			<h2 className={`${titleClassTailwind}`}>Energy Use History</h2>
+			<h2 className={`${titleClassTailwind} ${componentMargin}`}>
+				Energy Use History
+			</h2>
 			<AnalysisHeader />
 			<EnergyUseHistoryChart />
 		</div>

diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/HeatLoadAnalysis.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/HeatLoadAnalysis.tsx
@@ -5,9 +5,12 @@ import { WholeHomeUAComparison } from './Graphs/WholeHomeUAComparison.tsx'
 export function Graphs() {
 	const fuelType = 'Natural Gas'
 	const titleClassTailwind = 'text-5xl font-extrabold tracking-wide'
+	const componentMargin = 'mt-10'
 	return (
 		<div>
-			<h2 className={`${titleClassTailwind}`}>Heat Load Analysis</h2>
+			<h2 className={`${titleClassTailwind} ${componentMargin}`}>
+				Heat Load Analysis
+			</h2>
 			Fuel Type
 			{fuelType}
 			<AnalysisHeader />

diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx
@@ -6,12 +6,13 @@ import { Label } from '#/app/components/ui/label.tsx'
 export function HomeInformation() {
 	const titleClassTailwind = 'text-5xl font-extrabold tracking-wide'
 	const subTitleClassTailwind = 'text-2xl font-semibold text-zinc-950'
+	const componentMargin = 'mt-10'
 	return (
 		<div>
 			<h2 className={`${titleClassTailwind}`}>Home Information</h2>
 
 			<Form method="post" action="/homes">
-				<div className="mt-10">
+				<div className={`${componentMargin}`}>
 					<h6 className={`${subTitleClassTailwind}`}>Resident/Client</h6>
 
 					<div className="mt-4 flex space-x-4">