theis.gaedigk/weather-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: add cursor pointer to buttons for better UX and update WeatherForm instructions

Browse Source
This commit is contained in:
theis.gaedigk
2025-08-03 19:45:01 +02:00
parent 784822fa9a
commit 4c42bd94ea
4 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ChangeAPI.tsx
View File

@@ -53,7 +53,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
</div> </div>
<button <button
type="submit" type="submit"
className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all" className="cursor-pointer bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
onClick={handleUpdate} onClick={handleUpdate}
> >
Update API Key Update API Key

6
frontend/src/components/ChangePreferences.tsx
View File

@@ -47,7 +47,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
Temperature Unit Temperature Unit
</label> </label>
<select <select
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition" className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
value={unit} value={unit}
onChange={(e) => setUnit(e.target.value)} onChange={(e) => setUnit(e.target.value)}
> >
@@ -63,7 +63,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
Theme Theme
</label> </label>
<select <select
className="w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition" className="cursor-pointer w-full border-2 border-blue-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
value={theme} value={theme}
onChange={(e) => setTheme(e.target.value)} onChange={(e) => setTheme(e.target.value)}
> >
@@ -77,7 +77,7 @@ const ChangePreferences: React.FC<Props> = ({ onClose }) => {
{/* Submit */} {/* Submit */}
<button <button
type="submit" type="submit"
className="w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400" className="cursor-pointer w-full bg-gradient-to-r from-blue-600 to-blue-400 text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all focus:outline-none focus:ring-2 focus:ring-blue-400"
> >
Save Preferences Save Preferences
</button> </button>

8
frontend/src/components/Header.tsx
View File

@@ -21,14 +21,14 @@ const Header: React.FC = () => {
className="w-10 h-10 drop-shadow-lg" className="w-10 h-10 drop-shadow-lg"
/> />
<h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg"> <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
Weather App Weather App - <strong>Local hosted</strong>
</h1> </h1>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{" "} {" "}
{/* Added container for buttons */} {/* Added container for buttons */}
<button <button
className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2" className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
onClick={() => setApiCard(true)} onClick={() => setApiCard(true)}
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
@@ -37,7 +37,7 @@ const Header: React.FC = () => {
</span> </span>
</button> </button>
<button <button
className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2" className="cursor-pointer bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
onClick={() => setPreferencesCard(true)} onClick={() => setPreferencesCard(true)}
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
@@ -50,7 +50,7 @@ const Header: React.FC = () => {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<button className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"> <button className="cursor-help bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Github /> Docs <Github /> Docs
</span> </span>

7
frontend/src/components/WeatherForm.tsx
View File

@@ -52,6 +52,9 @@ const WeatherCard: React.FC = () => {
<p className="mb-2 text-gray-600"> <p className="mb-2 text-gray-600">
Current weather will be displayed here. Current weather will be displayed here.
</p> </p>
<p className="mb-2 text-gray-600">
<strong>Make sure to set your API key in the header section.</strong>
</p>
<form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4"> <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4">
<label htmlFor="city" className="font-medium text-gray-700"> <label htmlFor="city" className="font-medium text-gray-700">
Enter City: Enter City:
@@ -69,7 +72,7 @@ const WeatherCard: React.FC = () => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="submit" type="submit"
className="flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all" className="cursor-pointer flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
> >
Get Weather Get Weather
</button> </button>
@@ -80,7 +83,7 @@ const WeatherCard: React.FC = () => {
setWeatherData(false); setWeatherData(false);
localStorage.removeItem("weather"); localStorage.removeItem("weather");
}} }}
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" className="cursor-pointer 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" aria-label="Close weather data"
> >
<X /> <X />