UI improvements

CONTRIBUTING.md

@@ -2,3 +2,4 @@
 
 1. zetabug
 2. AnthonyHad
+3. Aryann15

src/App.js

@@ -1,24 +1,24 @@
-import React, { useCallback } from 'react';
-import { useState, useEffect } from 'react';
+import React, { useCallback } from "react";
+import { useState, useEffect } from "react";
 
-import Weather from './components/Weather';
-import LoadingIndicator from './UI/LoadingIndicator';
+import Weather from "./components/Weather";
+import LoadingIndicator from "./UI/LoadingIndicator";
 
-import './app.css';
+import "./app.css";
 
 function App() {
   const [data, setData] = useState(null);
   const [place, setPlace] = useState(null);
-  const [search, setSearch] = useState('');
-  const [location, setLocation] = useState('');
+  const [search, setSearch] = useState("");
+  const [location, setLocation] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
   function handleSearch(e) {
     setSearch(e.target.value);
   }
 
   async function geoHandler() {
-    setSearch('');
+    setSearch("");
     setIsLoading(true);
     await navigator.geolocation.getCurrentPosition((position) => {
       const crd = position.coords;
@@ -30,10 +30,10 @@ function App() {
 
   const fetchData = useCallback(async (search, location) => {
     const options = {
-      method: 'GET',
+      method: "GET",
       headers: {
-        'X-RapidAPI-Key': '0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708',
-        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com',
+        "X-RapidAPI-Key": "0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708",
+        "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com",
       },
     };
     const url = `https://weatherapi-com.p.rapidapi.com/current.json?q=${
@@ -81,7 +81,17 @@ function App() {
         {isLoading && <LoadingIndicator />}
         {display}
       </div>
-      <span className="credit">Ranvir@zetabug/github</span>
+      <div className="footer">
+        <p className="credit">
+          <h3>Ranvir@zetabug/github</h3>
+          <img
+            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+            alt="GitHub Logo"
+            width="20"
+            height="20"
+          />
+        </p>
+      </div>
     </>
   );
 }

src/app.css

@@ -1,52 +1,50 @@
-*,
-::after,
-::before {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-}
 h1 {
+  font-size: 3rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
   text-align: center;
-  margin-top: 3rem;
 }
-.container {
-  height: 100vh;
-  width: 100%;
+
+/* Styling for main div */
+.main_div {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2rem;
-}
-input {
-  outline: none;
-  border: 1px solid black;
-  width: 300px;
-  height: 30px;
-  padding: 4px;
-  color: #000;
+  justify-content: center;
+  height: 100vh;
+  background-color: rgba(180, 58, 204, 0.5);
 }
 
-img {
-  height: 100px;
+/* Styling for container div */
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(53, 93, 202, 0.5);
+  padding: 2rem;
+  border-radius: 1rem;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-width: 800px;
+  margin: 0 auto;
+  margin-top: 2rem;
 }
 .credit {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  font-size: 1.5rem;
-}
-p {
-  font-size: 2rem;
+  font-size: 0.8rem;
+  color: #777;
+  margin-top: 1rem;
+  text-align: center;
 }
 
-button {
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid #8a2b06;
-  padding: 0.5rem 2rem;
-  border-radius: 25px;
-  margin-left: 1rem;
-  font-family: 'Courier New', Courier, monospace;
-  font-weight: bold;
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 1rem;
+  background-color: #aedbe3;
 }
+body {
+  background-color: #a5c6e9; /*light orange*/
+}