change div to p

src/components/ViewCity.tsx

@@ -15,24 +15,213 @@ export default function ViewCity(arg: ViewCityProp) {
   )
 
   if (isLoading) {
-    return <p>Laster</p>
+    return (
+      <div
+        style={{
+          padding: "20px",
+          fontSize: "18px",
+          color: "var(--text-h)",
+        }}
+      >
+        Laster...
+      </div>
+    )
   }
+
   if (error) {
-    return <p>Det skjedde en feil</p>
+    return (
+      <div
+        style={{
+          padding: "20px",
+          fontSize: "18px",
+          color: "var(--accent)",
+        }}
+      >
+        Det skjedde en feil
+      </div>
+    )
   }
+
   const firstTimeStep = result?.properties.timeseries[0]
   const windSpeed = firstTimeStep?.data.instant.details?.wind_speed
   const temperature = firstTimeStep?.data.instant.details?.air_temperature
+  const humidity = firstTimeStep?.data.instant.details?.relative_humidity
   const country = data.result[0]?.country
 
+  //Weather icon based on temperature
+  const getWeatherIcon = () => {
+    if (temperature === undefined) return "🌐"
+    if (temperature > 20) return "☀️"
+    if (temperature > 10) return "⛅"
+    if (temperature > 0) return "☁️"
+    if (temperature > -10) return "🌫️"
+    return "❄️"
+  }
+
   return (
-    <div>
-      <div>
-        Været i {arg.city}, {country}
+    <div
+      style={{
+        background: "var(--bg)",
+        borderRadius: "16px",
+        padding: "24px",
+        width: "80%",
+        maxWidth: "70%",
+        margin: "0 auto",
+        border: "1px solid var(--border)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: "8px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            flex: "1",
+            minWidth: "200px",
+          }}
+        >
+          <span style={{ fontSize: "40px" }}>{getWeatherIcon()}</span>
+          <div>
+            <h2
+              style={{
+                margin: "0",
+                fontSize: "24px",
+                color: "var(--text-h)",
+                fontWeight: "500",
+              }}
+            >
+              {arg.city}
+            </h2>
+            <p
+              style={{
+                margin: "0",
+                fontSize: "14px",
+                color: "var(--text)",
+              }}
+            >
+              {country}
+            </p>
+          </div>
+        </div>
+        <StarButton cityName={arg.city} />
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "16px",
+          justifyContent: "space-between",
+          marginTop: "8px",
+        }}
+      >
+        <div
+          style={{
+            background: "var(--code-bg)",
+            borderRadius: "12px",
+            padding: "12px 16px",
+            minWidth: "120px",
+            flex: "1",
+          }}
+        >
+          <p
+            style={{
+              margin: "0",
+              fontSize: "12px",
+              color: "var(--text)",
+              textAlign: "center",
+            }}
+          >
+            Temperatur
+          </p>
+          <p
+            style={{
+              margin: "4px 0 0",
+              fontSize: "28px",
+              fontWeight: "600",
+              color: "var(--text-h)",
+              textAlign: "center",
+            }}
+          >
+            {temperature ? `${Math.round(temperature * 10) / 10}°C` : "N/A"}
+          </p>
+        </div>
+
+        <div
+          style={{
+            background: "var(--code-bg)",
+            borderRadius: "12px",
+            padding: "12px 16px",
+            minWidth: "120px",
+            flex: "1",
+          }}
+        >
+          <p
+            style={{
+              margin: "0",
+              fontSize: "12px",
+              color: "var(--text)",
+              textAlign: "center",
+            }}
+          >
+            Vind
+          </p>
+          <p
+            style={{
+              margin: "4px 0 0",
+              fontSize: "28px",
+              fontWeight: "600",
+              color: "var(--text-h)",
+              textAlign: "center",
+            }}
+          >
+            {windSpeed ? `${Math.round(windSpeed * 10) / 10} m/s` : "N/A"}
+          </p>
+        </div>
+
+        <div
+          style={{
+            background: "var(--code-bg)",
+            borderRadius: "12px",
+            padding: "12px 16px",
+            minWidth: "120px",
+            flex: "1",
+          }}
+        >
+          <p
+            style={{
+              margin: "0",
+              fontSize: "12px",
+              color: "var(--text)",
+              textAlign: "center",
+            }}
+          >
+            Fuktighet
+          </p>
+          <p
+            style={{
+              margin: "4px 0 0",
+              fontSize: "28px",
+              fontWeight: "600",
+              color: "var(--text-h)",
+              textAlign: "center",
+            }}
+          >
+            {humidity ? `${Math.round(humidity)}%` : "N/A"}
+          </p>
+        </div>
       </div>
-      <p>Temperatur: {temperature}°C</p>
-      <p>Vindhastighet: {windSpeed} m/s</p>
-      <StarButton cityName={arg.city} />
     </div>
   )
 }

tests/components/ViewCity.test.tsx

@@ -34,7 +34,11 @@ describe("ViewCity", () => {
             {
               data: {
                 instant: {
-                  details: { air_temperature: 12.5, wind_speed: 4.2 },
+                  details: {
+                    air_temperature: 12.5,
+                    wind_speed: 4.2,
+                    relative_humidity: 65.5,
+                  },
                 },
               },
             },
@@ -43,11 +47,20 @@ describe("ViewCity", () => {
       },
     })
 
+    mockUseGetCityCoordinates.mockReturnValue({
+      result: [{ latitude: 59.9, longitude: 10.7, country: "Norway" }],
+    })
+
     render(<ViewCity city="Oslo" />)
 
-    expect(screen.getByText("Været i Oslo,")).toBeTruthy()
-    expect(screen.getByText("Temperatur: 12.5°C")).toBeTruthy()
-    expect(screen.getByText("Vindhastighet: 4.2 m/s")).toBeTruthy()
+    expect(screen.getByText("Oslo")).toBeTruthy()
+    expect(screen.getByText("Norway")).toBeTruthy()
+    expect(screen.getByText("12.5°C")).toBeTruthy()
+    expect(screen.getByText("4.2 m/s")).toBeTruthy()
+    expect(screen.getByText("66%")).toBeTruthy()
+    expect(screen.getByText("Temperatur")).toBeTruthy()
+    expect(screen.getByText("Vind")).toBeTruthy()
+    expect(screen.getByText("Fuktighet")).toBeTruthy()
     expect(mockUseGetCityCoordinates).toHaveBeenCalledWith({ cityName: "Oslo" })
     expect(mockUseGetWeather).toHaveBeenCalledWith(59.9, 10.7)
   })
@@ -57,7 +70,7 @@ describe("ViewCity", () => {
 
     render(<ViewCity city="Oslo" />)
 
-    expect(screen.getByText("Laster")).toBeTruthy()
+    expect(screen.getByText("Laster...")).toBeTruthy()
   })
 
   it("should render an error message when the weather request fails", () => {