Revert Arrow and remove roast

Author: eetu

frontend/src/components/Arrow.tsx

@@ -31,18 +31,16 @@ const Arrow: React.FC<ArrowProps> = ({ className, deg }) => {
           opacity: 0.5,
         }}
       />
-      <svg
-        viewBox="0 0 24 24"
+      <div
         css={{
           position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
+          left: 7,
+          top: 6,
+          borderLeft: "5px solid transparent",
+          borderRight: "5px solid transparent",
+          borderBottom: `10px solid ${theme.colors.text.main}`,
         }}
-      >
-        <path d="M12 5 L17 14 L12 11 L7 14 Z" fill={theme.colors.text.main} />
-      </svg>
+      />
     </div>
   );
 };

frontend/src/components/FmiWeatherBox.tsx

@@ -1,12 +1,11 @@
 import { useTheme } from "@emotion/react";
 import { format } from "date-fns";
 import { fi } from "date-fns/locale/fi";
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import useSWR from "swr";
 
 import { api, fetcher } from "../api";
 import useLocationSettings from "../hooks/useLocationSettings";
-import { getTemperatureRoast } from "../temperatureRoast";
 import { WeatherData } from "../types/weather/fmi";
 import {
   getFmiWeatherDescription,
@@ -42,16 +41,6 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
   const today = daily[0];
   const hourly = data?.hourly;
 
-  const currentTemp = current?.temperature;
-  const roundedTemp =
-    currentTemp !== undefined ? Math.round(currentTemp) : undefined;
-  /* eslint-disable react-hooks/exhaustive-deps -- intentionally keyed on roundedTemp to avoid re-randomizing on fractional changes */
-  const roast = useMemo(
-    () => (currentTemp !== undefined ? getTemperatureRoast(currentTemp) : null),
-    [roundedTemp],
-  );
-  /* eslint-enable react-hooks/exhaustive-deps */
-
   if (!location && !locationLoading) {
     return (
       <Box className={className}>
@@ -132,7 +121,7 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
               textTransform: "none",
             }}
           >
-            {[location?.displayName, roast].filter(Boolean).join(" – ")}
+            {location?.displayName ?? ""}
           </span>
         </div>
         <div

frontend/src/components/TomorrowWeatherBox.tsx

@@ -1,11 +1,9 @@
 import { useTheme } from "@emotion/react";
 import { format } from "date-fns";
 import { fi } from "date-fns/locale/fi";
-import { useMemo } from "react";
 import useSWR from "swr";
 
 import { api, fetcher } from "../api";
-import { getTemperatureRoast } from "../temperatureRoast";
 import { TomorrowWeatherData } from "../types/weather/tomorrow";
 import { getWeatherIcon } from "../weather/tomorrow/icons";
 import { getTemperatureSegments } from "../weather/tomorrow/utils";
@@ -78,16 +76,6 @@ const TomorrowWeatherBox: React.FC<TomorrowWeatherBoxProps> = ({
 
   const segments = getTemperatureSegments(hourly?.intervals);
 
-  const currentTemp = weather?.values.temperature;
-  const roundedTemp =
-    currentTemp !== undefined ? Math.round(currentTemp) : undefined;
-  /* eslint-disable react-hooks/exhaustive-deps -- intentionally keyed on roundedTemp to avoid re-randomizing on fractional changes */
-  const roast = useMemo(
-    () => (currentTemp !== undefined ? getTemperatureRoast(currentTemp) : null),
-    [roundedTemp],
-  );
-  /* eslint-enable react-hooks/exhaustive-deps */
-
   if (!(data && weather && today)) {
     return null;
   }
@@ -128,15 +116,6 @@ const TomorrowWeatherBox: React.FC<TomorrowWeatherBoxProps> = ({
           }}
         >
           {title}
-          <span
-            css={{
-              ...theme.typography.caption,
-              color: theme.colors.text.muted,
-              textTransform: "none",
-            }}
-          >
-            {roast}
-          </span>
           {alerts && alerts.length > 0 && (
             <Tooltip
               content={