Merge pull request #63 from manuel12/make-ui-responsive-and-ui-changes

Make UI responsive and UI changes
surajondev · Nov 17, 2023 · ac4bcfa · ac4bcfa
2 parents bfd07cc + d24f8aa
commit ac4bcfa
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 35 deletions.
diff --git 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,35 +174,35 @@ class App extends React.Component {
           toast("The location entered is invalid", {
             position: toast.POSITION.TOP_CENTER,
             autoClose: 1500,
-            className: 'toast-message'
+            className: "toast-message",
           });
         }
       });
   }
   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>
     );
   }

diff --git 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,30 +96,40 @@ 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;
   padding: 0 2rem;
   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,24 @@ 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;
+
+  }
+
+  .cancel-button {
+    max-width: 250px;
+  }
+}
+
 @media (max-width: 700px) {
   html {
     font-size: 14px;
@@ -227,7 +259,7 @@ p {
   }
 
   .container-medium {
-    margin: 1rem 0;
+    margin: 1rem auto;
     width: 90%;
     transition: transform 0.5s ease;
   }
@@ -237,7 +269,7 @@ p {
   }
 
   .container-small {
-    margin: 1rem 0;
+    margin: 1rem auto;
     width: 90%;
     transition: transform 0.5s ease;
   }