clear on focus

pages/index.js

@@ -38,15 +38,16 @@ export default function Home() {
             {Math.round(weatherData.main.temp)}°
           </h1>
           <p>Feels like {weatherData.main.feels_like}°</p>
+        </>
+      )}
       <input
         className={styles.search}
         defaultValue="Search city"
         type="text"
+        onFocus={(e) => (e.target.value = "")}
         onChange={(e) => setInput(e.target.value)}
       />
-          <button onClick={clickHandler}>Send</button>
-        </>
-      )}
+      <button onClick={clickHandler}>Search</button>
     </div>
   );
 }

styles/Home.module.css

@@ -12,10 +12,12 @@
 
 .search {
   margin-top: 300px;
-  height: 30px;
-  width: 200px;
-  border-radius: 10px;
-  border: none;
+  height: 40px;
+  width: 300px;
+  border-radius: 5px;
+  border: 1px solid rgb(209, 209, 252);
+
   color: rgb(224, 237, 241);
   padding: 0 10px;
+  color: grey;
 }