From 4598c3e5a34de12b8c99887e5a8b2df4158d37c1 Mon Sep 17 00:00:00 2001
From: Manuel <manuelpinedacabeza@gmail.com>
Date: Wed, 1 Nov 2023 18:29:56 +0100
Subject: [PATCH 1/3] Removed .button class as it doens't exist. Added
 .submit-button and  .clear-button classes to their respective elements.
 Wrapped buttons around .button-container in order to apply flex properties.

---
 src/App.js | 47 +++++++++++++++++++++--------------------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/App.js b/src/App.js
index 658a58a..b1377dc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,13 @@
 import React from "react";
 import Appcontainer from "./Appcontainer.js";
 import "./index.css";
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 class App extends React.Component {
   constructor() {
     super();
-    
-    
+
     this.state = {
       city_name: "london",
       error: false,
@@ -45,8 +44,6 @@ class App extends React.Component {
       const reverseGeocodeData = await reverseGeocodeRes.json();
       const cityName = reverseGeocodeData[0]?.name || "london";
 
-
-
       this.setState({
         city_name: cityName,
       });
@@ -99,7 +96,7 @@ class App extends React.Component {
         toast("The location entered is invalid", {
           position: toast.POSITION.TOP_CENTER,
           autoClose: 1500,
-          className: 'toast-message'
+          className: "toast-message",
         });
       }
     }
@@ -177,7 +174,7 @@ class App extends React.Component {
           toast("The location entered is invalid", {
             position: toast.POSITION.TOP_CENTER,
             autoClose: 1500,
-            className: 'toast-message'
+            className: "toast-message",
           });
         }
       });
@@ -185,27 +182,27 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <div className="blur-wall"></div>
+        <div className='blur-wall'></div>
         <div
-          className="loader"
+          className='loader'
           style={{ display: this.state.displayLoader }}
         ></div>
-        <form className="container form">
+        <form className='container form'>
           <input
-            className="input-box"
-            name="t1"
-            type="text"
+            className='input-box'
+            name='t1'
+            type='text'
             onChange={this.city}
-            placeholder="Enter desired location"
+            placeholder='Enter desired location'
           ></input>
-          <button className="button" onClick={this.submit}>
-            <p className="p-submit">SUBMIT</p>
-          </button>
-
-          <button className="button" onClick={this.clear}>
-            <p className="p-submit">CLEAR</p>
-
-          </button>
+          <div className='button-container'>
+            <button className='submit-button' onClick={this.submit}>
+              <p className='p-submit'>SUBMIT</p>
+            </button>
+            <button className='cancel-button' onClick={this.clear}>
+              <p className='p-submit'>CLEAR</p>
+            </button>
+          </div>
         </form>
         <Appcontainer
           temp={this.state.temp}
@@ -217,9 +214,7 @@ class App extends React.Component {
           wind={this.state.wind}
           visibility={this.state.visibility}
         />
-        {this.state.error && (
-          <ToastContainer />
-        )}
+        {this.state.error && <ToastContainer />}
       </div>
     );
   }

From 35b2f15ab8a97b734ffea47401410b01c72af785 Mon Sep 17 00:00:00 2001
From: Manuel <manuelpinedacabeza@gmail.com>
Date: Wed, 1 Nov 2023 18:30:55 +0100
Subject: [PATCH 2/3] Added display, width, max-width and margin rules to
 .submit-button and .cancel-button.

Updated .cancel-button bg color.

Added min-width: 600px media query.

Added display flex and space around to .button-container and
added max-width to both buttons.
---
 src/index.css | 59 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/index.css b/src/index.css
index 79ff176..0671710 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,6 +83,10 @@ p {
   border: 3px solid gray;
 }
 .input-box {
+  display: block;
+  width: 90%;
+  max-width: 500px;
+  margin: 0 auto 20px !important;
   font-size: 1.2rem;
   padding: 1rem;
   border: 2px solid #161d28;
@@ -92,8 +96,9 @@ p {
 }
 
 .submit-button {
-  margin-top: 1rem;
-  margin-left: 1rem;
+  display: block;
+  width: 90%;
+  margin: 0 auto 5px;
   font-family: Arial, sans-serif;
   background-color: #7c77fe;
   border-radius: 10em;
@@ -101,21 +106,30 @@ p {
   cursor: pointer;
 }
 
+.submit-button:hover {
+  background-color: #6c7077;
+}
+
 .cancel-button {
+  display: block;
+  width: 90%;
+  margin: 0 auto 5px;
   color: white;
-  background-color: transparent;
-  border: none;
+  background-color: #91969d;
+  border-radius: 10em;
   outline: none;
   cursor: pointer;
 }
 
+.cancel-button:hover {
+  background-color: #5b5e62;
+}
+
 .form {
   justify-content: center;
 }
 
-.submit-button:hover {
-  background-color: #6c7077;
-}
+
 
 /* INFORMATION CARD */
 
@@ -217,6 +231,33 @@ p {
   justify-content: space-around;
 }
 
+@media (min-width: 600px) {
+  .button-container {
+    display: flex;
+    justify-content: space-around;
+    max-width: 550px;
+    margin: auto;
+  }
+
+  .submit-button {
+    max-width: 250px;
+    font-family: Arial, sans-serif;
+    background-color: #7c77fe;
+    border-radius: 10em;
+    padding: 0 2rem;
+    cursor: pointer;
+  }
+  
+  .cancel-button {
+    max-width: 250px;
+    color: white;
+    background-color: #91969d;
+    border-radius: 10em;
+    outline: none;
+    cursor: pointer;
+  }
+}
+
 @media (max-width: 700px) {
   html {
     font-size: 14px;
@@ -227,7 +268,7 @@ p {
   }
 
   .container-medium {
-    margin: 1rem 0;
+    margin: 1rem auto;
     width: 90%;
     transition: transform 0.5s ease;
   }
@@ -237,7 +278,7 @@ p {
   }
 
   .container-small {
-    margin: 1rem 0;
+    margin: 1rem auto;
     width: 90%;
     transition: transform 0.5s ease;
   }

From d24f8aa75f03a0bfa239df760d93ea71ee491df6 Mon Sep 17 00:00:00 2001
From: Manuel <manuelpinedacabeza@gmail.com>
Date: Wed, 1 Nov 2023 18:34:16 +0100
Subject: [PATCH 3/3] Removed unchanged styles from media query.

---
 src/index.css | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/index.css b/src/index.css
index 0671710..5439056 100644
--- a/src/index.css
+++ b/src/index.css
@@ -241,20 +241,11 @@ p {
 
   .submit-button {
     max-width: 250px;
-    font-family: Arial, sans-serif;
-    background-color: #7c77fe;
-    border-radius: 10em;
-    padding: 0 2rem;
-    cursor: pointer;
+
   }
   
   .cancel-button {
     max-width: 250px;
-    color: white;
-    background-color: #91969d;
-    border-radius: 10em;
-    outline: none;
-    cursor: pointer;
   }
 }