Merge pull request #61 from Rajneesh2223/icon/new

Icon/new
surajondev · Oct 23, 2023 · bcd3878 · bcd3878
2 parents d775863 + f385b66
commit bcd3878
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 101 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.11.0",
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.0.8"
   },

diff --git a/src/Appcontainer.js b/src/Appcontainer.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import './index.css'
+import {WiHumidity} from 'react-icons/wi'
 
 function Appcontainer(props) {
   return (
@@ -21,16 +22,13 @@ function Appcontainer(props) {
           </div>
         </div>
         <div className="container-small">
-          <img
-            alt={'Humidity'}
-            src="https://cdn-icons-png.flaticon.com/512/727/727790.png"
-            className="medium-icon"
-          ></img>
-          <center>
-            <p>Humidity</p>
-            <h1>{props.humidity}%</h1>
-          </center>
-        </div>
+  <WiHumidity style={{ fontSize: '8em' }} /> {/* Adjust the '2em' value to change the size */}
+  <center>
+    <p>Humidity</p>
+    <h1>{props.humidity}%</h1>
+  </center>
+</div>
+
       </div>
       <div className="row">
         <div className="container-small">

diff --git a/src/Footer.js b/src/Footer.js
@@ -1,30 +1,21 @@
-import React from "react";
-import "./index.css";
+import React from 'react';
+import { BsGithub } from 'react-icons/bs';
 
-
-function Footer(){
-    return(
-        <footer>
-            <div className="container">
-                <center>
-                    <p className="p-footer">Made with ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
-                </center>
-            </div>
-        </footer>
-    )
-}
-function Footer() {
-  const year = new Date().getFullYear();
+const Footer = () => {
+  // Get the current year
+  const currentYear = new Date().getFullYear();
 
   return (
     <footer>
       <div className="container">
         <center>
-
-          <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
-          <p  className='footer1' id="copyright">© {year} MADE WITH ❤️ BY SURAJ VISHWAKARMA</p>
+          <p className="p-footer">
+            © {currentYear} Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a> 
+          </p>
+          <div className="github-info">
+            <p className="p-footer">  Source <a href="https://openweathermap.org/">OpenWeather</a></p>
+            <a href="https://github.com/surajondev" className='github'> <BsGithub /></a>
+          </div>
         </center>
       </div>
     </footer>

diff --git a/src/index.css b/src/index.css
@@ -1,32 +1,30 @@
 html {
   font-size: 16px;
 }
+
 body {
   margin: 0 auto;
-  font-family:   cursive;
-  background-color: #161d28;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  background-color: #202c3f;
 }
 
 img:not(.large-icon) {
   min-width: 100px;
   margin-top: 2rem;
 }
 
-header,
+
 footer {
   color: white;
-  background-image: linear-gradient(to right, #051937, #0d2750, #16376b, #214786, #2c57a3);
+  background-color: #192733;
   padding: 1.5rem;
-
-  text-align: center;
 }
 
-
-
 header {
-  margin-bottom: 1rem;
   margin-bottom: 2rem;
-
+ text-align: center;
+ color: white;
+font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 
 footer {
@@ -46,26 +44,13 @@ a:hover {
   width: 90%;
   max-width: 1110px;
   margin: 0 auto;
-
 }
 
 /* TYPOGRAPHY */
 .title {
-  font-size: 2.5rem;
-  font-weight: 30px;
-  display: flex;
-  justify-content: center;
+  font-size: 4rem;
+  font-weight: 50px;
   padding-left: 0.6rem;
-  font-size: 3rem;
-  font-weight: 24px;
-  padding-left: 0.rem;
-  font-family:Arial, Helvetica, sans-serif  
-}
-.logo{
-  font-size: 50px;
-  vertical-align: middle;
-  margin-left: 10px; 
-
 }
 
 h2 {
@@ -106,27 +91,14 @@ p {
   margin-left: 0.8rem;
 }
 
-.button {
+.submit-button {
   margin-top: 1rem;
   margin-left: 1rem;
   font-family: Arial, sans-serif;
   background-color: #7c77fe;
   border-radius: 10em;
   padding: 0 2rem;
   cursor: pointer;
-  transition: 0.5s;
-}
-.clear-button{
-   font-size:17px ;
-  margin-top: 1rem;
-  margin-left: 1rem;
-  font-family: Arial, sans-serif;
-  background-color: #7c77fe;
-  border-radius: 10em;
-  padding: 1.1rem 2rem;
-  cursor: pointer;
-  color: white;
-
 }
 
 .cancel-button {
@@ -141,15 +113,7 @@ p {
   justify-content: center;
 }
 
-
-.clear-button:hover {
-  background-color: #6c7077;
-}
-
-
 .submit-button:hover {
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-  transform: scale(0.9);
   background-color: #6c7077;
 }
 
@@ -162,39 +126,53 @@ p {
   width: 100%;
   cursor: pointer;
 }
-
+/* Container styles */
+.container-small,
 .container-medium {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0 1rem 0 1rem;
-  padding: 1rem;
-  background: #7c77fe;
+  padding: 2%;
   border-radius: 10px;
-  width: 65%;
-  box-shadow: 10px 10px #6c7077;
-  justify-content: space-between;
   transition: transform 0.5s ease;
-}
-.container-medium:hover {
-  transform: scale(1.025);
+  cursor: pointer;
 }
 
+/* Small container styles */
 .container-small {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 0 1rem 0 1rem;
-  padding: 1rem;
   width: 30%;
-  background: #7c77fe;
-  border-radius: 10px;
-  box-shadow: 10px 10px #6c7077;
-  transition: transform 0.5s ease;
+  background: linear-gradient(135deg, #7c77fe, #835ef5); /* Gradient background */
+  box-shadow: 5px 5px 10px rgba(108, 112, 119, 0.4);
+}
+
+.container-small:hover {
+  background: linear-gradient(135deg, #835ef5, #7c77fe); /* Gradient background on hover */
+  transform: scale(1.05); /* Scale up on hover */
+}
+
+/* Medium container styles */
+.container-medium {
+  flex-direction: row;
+  justify-content: space-between;
+  width: 65%;
+  background: linear-gradient(135deg, #7c77fe, #835ef5); /* Gradient background */
+  box-shadow: 5px 5px 10px rgba(108, 112, 119, 0.4);
+}
+
+.container-medium:hover {
+  background: linear-gradient(135deg, #835ef5, #7c77fe); /* Gradient background on hover */
+  transform: scale(1.05); /* Scale up on hover */
+}
+
+
+.container-medium:hover {
+  transform: scale(1.025);
 }
 
+
+
 .container-small:hover {
   transform: scale(1.025);
 }
@@ -220,6 +198,12 @@ p {
   right: 0;
   margin: 0px auto;
 }
+.github{
+  font-size: 30px;
+}
+.github  :hover{
+  color:rgb(56, 44, 214);
+}
 
 .toast {
   padding: 0.3rem 0.75rem;
@@ -311,6 +295,3 @@ p {
     transform: rotate(360deg);
   }
 }
-.footer1{
-  font-size: 20px;
-}