change time formatting

time format for weather altered for more concise communication (19 to 1900)

src/app/components/TemperatureCard.tsx

@@ -35,17 +35,22 @@ const TemperatureCard: React.FC<TemperatureCardProps> = ({
 
         {/* right container */}
         <div className="flex flex-1 flex-col gap-3">
-          {Array.from(fiveHourForecast.entries()).map(([time, temperature], index) => (
-            <div
-              key={index}
-              className="flex flex-1 flex-col bg-primary rounded-lg gap-3 p-3 place-content-center"
-            >
-              <div className="flex justify-between content-center">
-                <div className="text-headers text-p para">{time}</div>
-                <div className="text-headers text-p para">{temperature}°</div>
+          {Array.from(fiveHourForecast.entries()).map(
+            ([time, temperature], index) => (
+              <div
+                key={index}
+                className="flex flex-1 flex-col bg-primary rounded-lg gap-3 p-3 place-content-center"
+              >
+                <div className="flex justify-between content-center">
+                  <div className="flex">
+                    <div className="text-headers text-p para">{time}</div>
+                    <div className="text-headers text-p parasmall">00</div>
+                  </div>
+                  <div className="text-headers text-p para">{temperature}°</div>
+                </div>
               </div>
-            </div>
-          ))}
+            )
+          )}
         </div>
       </div>
     </div>

src/app/globals.css

@@ -58,6 +58,13 @@ p {
   color: white !important;
 }
 
+.parasmall {
+  font-family: var(--font-nunito);
+  font-weight: 400;
+  font-size: 0.75rem;
+  color: white !important;
+}
+
 .time {
   font-family: var(--font-nunito);
   font-weight: 800;