feat: enhance ChangeAPI and ChangePreferences components; add "API key update" functionality and save preferences feature

frontend/src/components/ChangeAPI.tsx

@@ -4,19 +4,25 @@ import { changeAPIcookie } from "../utils/changeAPIcookie";
 
 interface Props {
   currentAPIKey: string;
+  onClose: () => void;
 }
 
-const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
+const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
   const [apiKey, setApiKey] = useState(currentAPIKey);
 
+  const handleUpdate = () => {
+    changeAPIcookie(apiKey);
+    onClose();
+  };
+
   return (
     <div className="w-full">
       <h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
-      <p className="mb-2 text-gray-600">
+      <h4 className="mb-2 font-semibold text-gray-600">
         Update your API key to fetch weather data.
-      </p>
-      <div className="mb-6 flex items-center gap-2 text-gray-600">
-        <span>We are using</span>
+      </h4>
+      <div className="mb-6 flex items-center gap-2 font-style: italic text-gray-500 flex-wrap text-">
+        <p>We are using</p>
         <a
           href="https://openweathermap.org/api"
           className="text-blue-600 font-semibold underline hover:text-blue-800"
@@ -25,26 +31,42 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey }) => {
         >
           OpenWeatherMap
         </a>
-        <span>API for fetching weather data.</span>
+        <p>API for fetching weather data.</p>
       </div>
       <form className="flex flex-col gap-4">
         <label htmlFor="apiKey" className="font-medium text-gray-700">
           API Key:
         </label>
-        <input
-          type="text"
-          id="apiKey"
-          name="apiKey"
-          placeholder="Enter your API key"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-          required
-          className="border border-blue-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono"
-        />
+        <div className="flex items-center gap-2 w-full">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={2}
+            stroke="currentColor"
+            className="w-7 h-7 flex-shrink-0"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+            />
+          </svg>
+          <input
+            type="text"
+            id="apiKey"
+            name="apiKey"
+            placeholder="Enter your API key"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            required
+            className="border border-blue-300 rounded-xl px-6 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono w-full"
+          />
+        </div>
         <button
           type="button"
           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"
-          onClick={() => changeAPIcookie(apiKey)}
+          onClick={handleUpdate}
         >
           Update API Key
         </button>