From ed12368a26781df7b66297ddc6844d39a28b3c8f Mon Sep 17 00:00:00 2001 From: Rajneesh Kumar Date: Wed, 18 Oct 2023 15:17:12 +0530 Subject: [PATCH 1/2] enhanced the ui --- package-lock.json | 15 ++++++++++ package.json | 1 + src/Footer.js | 38 ++++++++++++++---------- src/index.css | 74 +++++++++++++++++++++++++++++++---------------- 4 files changed, 87 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index b8014f1..31cf40f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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" } @@ -15759,6 +15760,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -29878,6 +29887,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 25667b2..e2e5ccb 100644 --- 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/Footer.js b/src/Footer.js index feea41a..240369c 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,19 +1,25 @@ -import React from "react" -import "./index.css" +import React from 'react'; +import { BsGithub } from 'react-icons/bs'; -function Footer(){ - return( - - ) -} +const Footer = () => { + // Get the current year + const currentYear = new Date().getFullYear(); -export default Footer + return ( + + ); +} +export default Footer; diff --git a/src/index.css b/src/index.css index ab64a07..79ff176 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,11 @@ html { font-size: 16px; } + body { margin: 0 auto; - font-family: Arial, sans-serif; - background-color: #161d28; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + background-color: #202c3f; } img:not(.large-icon) { @@ -12,7 +13,7 @@ img:not(.large-icon) { margin-top: 2rem; } -header, + footer { color: white; background-color: #192733; @@ -21,6 +22,9 @@ footer { header { margin-bottom: 2rem; + text-align: center; + color: white; +font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } footer { @@ -44,8 +48,8 @@ a:hover { /* TYPOGRAPHY */ .title { - font-size: 2.5rem; - font-weight: 20px; + font-size: 4rem; + font-weight: 50px; padding-left: 0.6rem; } @@ -122,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); } @@ -180,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; From 3ce6c43e15323cd02370251c4bd0ca63a50a3f41 Mon Sep 17 00:00:00 2001 From: Rajneesh Kumar Date: Sat, 21 Oct 2023 01:24:00 +0530 Subject: [PATCH 2/2] fixed the broken image of humidiy --- src/Appcontainer.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/Appcontainer.js b/src/Appcontainer.js index 98d6a29..e549bb0 100644 --- 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) {
- {'Humidity'} -
-

Humidity

-

{props.humidity}%

-
-
+ {/* Adjust the '2em' value to change the size */} +
+

Humidity

+

{props.humidity}%

+
+ +