diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0807efa..23faa2c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,6 +12,7 @@ "bootstrap-icons": "^1.13.1", "js-cookie": "^3.0.5", "jscookie": "^1.1.0", + "lucide-react": "^0.536.0", "react": "^19.1.0", "react-dom": "^19.1.0", "react-toastify": "^11.0.5", @@ -3221,6 +3222,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.536.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz", + "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", diff --git a/frontend/package.json b/frontend/package.json index c95ef22..1104ecf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "bootstrap-icons": "^1.13.1", "js-cookie": "^3.0.5", "jscookie": "^1.1.0", + "lucide-react": "^0.536.0", "react": "^19.1.0", "react-dom": "^19.1.0", "react-toastify": "^11.0.5", diff --git a/frontend/src/components/ChangeAPI.tsx b/frontend/src/components/ChangeAPI.tsx index ded28d8..1386233 100644 --- a/frontend/src/components/ChangeAPI.tsx +++ b/frontend/src/components/ChangeAPI.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import React from "react"; import { changeAPIcookie } from "../utils/changeAPIcookie"; +import { KeyRound } from "lucide-react"; interface Props { currentAPIKey: string; @@ -38,20 +39,7 @@ const ChangeAPI: React.FC = ({ currentAPIKey, onClose }) => { API Key:
- - - + localStorage.getItem("theme") || "light"; const getInitialUnit = () => localStorage.getItem("unit") || "metric"; @@ -35,39 +36,14 @@ const ChangePreferences: React.FC = ({ onClose }) => { return (

- - - + Preferences

{/* Unit */}
{ const [apiCard, setApiCard] = useState(false); @@ -31,20 +32,7 @@ const Header: React.FC = () => { onClick={() => setApiCard(true)} > - - - + Set API Key @@ -53,25 +41,7 @@ const Header: React.FC = () => { onClick={() => setPreferencesCard(true)} > - - - - + Preferences @@ -82,21 +52,7 @@ const Header: React.FC = () => { > diff --git a/frontend/src/components/WeatherData.tsx b/frontend/src/components/WeatherData.tsx index 005d88b..665d42d 100644 --- a/frontend/src/components/WeatherData.tsx +++ b/frontend/src/components/WeatherData.tsx @@ -1,6 +1,5 @@ import React from "react"; -import sunriseIcon from "../assets/icons/sunrise-fill.svg"; -import sunsetIcon from "../assets/icons/sunset-fill.svg"; +import { Sunrise, Sunset } from "lucide-react"; const WeatherData: React.FC = () => { const weatherRaw = localStorage.getItem("weather"); @@ -53,7 +52,7 @@ const WeatherData: React.FC = () => { )}
- Sunrise Icon + Sunrise:{" "} {weatherData?.sys?.sunrise @@ -65,7 +64,7 @@ const WeatherData: React.FC = () => {
- Sunset Icon + Sunset:{" "} {weatherData?.sys?.sunset diff --git a/frontend/src/components/WeatherForm.tsx b/frontend/src/components/WeatherForm.tsx index 7e459b3..f777fcc 100644 --- a/frontend/src/components/WeatherForm.tsx +++ b/frontend/src/components/WeatherForm.tsx @@ -5,6 +5,7 @@ import Cookies from "js-cookie"; import { toast } from "react-toastify"; import WeatherData from "./WeatherData"; import { useEffect } from "react"; +import { X } from "lucide-react"; const WeatherCard: React.FC = () => { const [city, setCity] = useState(""); @@ -85,20 +86,7 @@ const WeatherCard: React.FC = () => { className="flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400" aria-label="Close weather data" > - - - + )}
diff --git a/frontend/src/utils/apiFunc.ts b/frontend/src/utils/apiFunc.ts index 8ae31ba..2bac1be 100644 --- a/frontend/src/utils/apiFunc.ts +++ b/frontend/src/utils/apiFunc.ts @@ -1,4 +1,5 @@ import { myToast } from "./toastify"; +import Cookies from "js-cookie"; export const fetchWeather = async ( city: string, @@ -10,10 +11,14 @@ export const fetchWeather = async ( `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}` ).then((response) => { if (response.status === 401) { - myToast( - "You are not authorized to access this resource. Please check your API key. (Error: x4010)", - "error" - ); + if (Cookies.get("apiKey") === undefined || Cookies.get("apiKey") === "") { + myToast("You have to enter an API key!", "error"); + } else { + myToast( + "You are not authorized to access this resource. Please check your API key. (Error: x4010)", + "error" + ); + } } else if (response.ok) { return response.json(); } else {