From c745820922bb5a4dcb15fe41a49cc8a10f0005c2 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Mar 2022 13:36:36 +0530 Subject: [PATCH 1/2] added start over button --- .../components/HomeSection/HomeSection.jsx | 20 +++++++++++++++--- frontend/package-lock.json | 15 +++++++++++++ frontend/package.json | 1 + frontend/pages/index.js | 2 +- frontend/yarn.lock | 21 ++++++++++++------- 5 files changed, 47 insertions(+), 12 deletions(-) diff --git a/frontend/components/HomeSection/HomeSection.jsx b/frontend/components/HomeSection/HomeSection.jsx index 297d7f8..2bf60a2 100644 --- a/frontend/components/HomeSection/HomeSection.jsx +++ b/frontend/components/HomeSection/HomeSection.jsx @@ -5,6 +5,7 @@ import { motion } from 'framer-motion' import Image from 'next/image' import Axios from 'helpers/Axios' import { Alert, Button, Collapse, IconButton } from '@mui/material' +import ReplayIcon from '@mui/icons-material/Replay'; import CloseIcon from '@mui/icons-material/Close' import ContentCopyIcon from '@mui/icons-material/ContentCopy' import QRCode from 'qrcode' @@ -67,8 +68,7 @@ function HomeSection(props) { } else { setdisabled(true) - setTimeout(() => { setdisabled(false) }, 6000) - setOpen(false) + setTimeout(() => { setdisabled(false) }, 5000) let res try { res = await Axios.post(`/minify/add`, { @@ -107,6 +107,11 @@ function HomeSection(props) { toast.success("URL copied to clipboard !!") } + const handleResponse = async () => { + setOpen(false) + props.setLongUrl('') + } + const text1 = "Url"; const text2 = "MiniFy"; @@ -163,7 +168,7 @@ function HomeSection(props) { { // show QR code if a url is generated props.showQrCode && open ? ( - + +
+ +
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7659774..c9c2453 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -31,6 +31,7 @@ "react-bootstrap": "^2.2.0", "react-dom": "17.0.2", "react-hot-toast": "^2.2.0", + "react-icons": "^4.3.1", "react-page-loading": "^1.0.2", "styled-components": "^5.3.3", "styled-jsx": "^5.0.0" @@ -2033,6 +2034,14 @@ "react-dom": ">=16" } }, + "node_modules/react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -3981,6 +3990,12 @@ "goober": "^2.1.1" } }, + "react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 76438db..1e24fe8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -32,6 +32,7 @@ "react-bootstrap": "^2.2.0", "react-dom": "17.0.2", "react-hot-toast": "^2.2.0", + "react-icons": "^4.3.1", "react-page-loading": "^1.0.2", "styled-components": "^5.3.3", "styled-jsx": "^5.0.0" diff --git a/frontend/pages/index.js b/frontend/pages/index.js index abb2b92..97a6b3f 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -3,7 +3,7 @@ import Head from 'next/head' import HomeSection from 'components/HomeSection/HomeSection' import NavBar from 'components/NavBar' import Features from 'components/Features' -import Toaster from 'react-hot-toast' + export default function Home() { const [shortUrl, setShortUrl] = useState(null) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index e7bb1bb..7d0a39a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1208,6 +1208,11 @@ dependencies: "goober" "^2.1.1" +"react-icons@^4.3.1": + "integrity" "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==" + "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz" + "version" "4.3.1" + "react-is@^16.13.1": "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" @@ -1258,6 +1263,14 @@ "loose-envify" "^1.4.0" "prop-types" "^15.6.2" +"react@*", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0-rc.1", "react@^17.0.0", "react@^17.0.2 || ^18.0.0-0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || 18.x.x", "react@>=0.13", "react@>=0.14.0", "react@>=15.0.0", "react@>=16", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2": + "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" + "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" + "version" "17.0.2" + dependencies: + "loose-envify" "^1.1.0" + "object-assign" "^4.1.1" + "react@^15.5.4", "react@^15.7.0", "react@>= 0.14.0 < 17.0.0-0": "integrity" "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==" "resolved" "https://registry.npmjs.org/react/-/react-15.7.0.tgz" @@ -1269,14 +1282,6 @@ "object-assign" "^4.1.0" "prop-types" "^15.5.10" -"react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0-rc.1", "react@^17.0.0", "react@^17.0.2 || ^18.0.0-0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || 18.x.x", "react@>=0.13", "react@>=0.14.0", "react@>=15.0.0", "react@>=16", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@>=16.x", "react@17.0.2": - "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" - "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" - "version" "17.0.2" - dependencies: - "loose-envify" "^1.1.0" - "object-assign" "^4.1.1" - "regenerator-runtime@^0.13.4": "integrity" "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" "resolved" "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz" From ed851685f1d2d2ca33e026bc57e425e8738133ea Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 16 Mar 2022 12:28:44 +0530 Subject: [PATCH 2/2] Added start again button --- .../components/HomeSection/HomeSection.jsx | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/frontend/components/HomeSection/HomeSection.jsx b/frontend/components/HomeSection/HomeSection.jsx index 2bf60a2..fd220e4 100644 --- a/frontend/components/HomeSection/HomeSection.jsx +++ b/frontend/components/HomeSection/HomeSection.jsx @@ -13,6 +13,17 @@ import { signup } from '@pages/signup' import styles from '../../styles/HomeSection.module.css' import toast from 'react-hot-toast' import { Toaster } from 'react-hot-toast' +import { createTheme } from '@mui/material/styles' +import { ThemeProvider } from '@mui/material/styles' + +const theme = createTheme({ + palette: { + action: { + disabledBackground: '#222831', + disabled: 'white' + } + } +}) const spanVariants = { visible: { y: 0, scaleY: 1 }, @@ -68,7 +79,6 @@ function HomeSection(props) { } else { setdisabled(true) - setTimeout(() => { setdisabled(false) }, 5000) let res try { res = await Axios.post(`/minify/add`, { @@ -110,12 +120,15 @@ function HomeSection(props) { const handleResponse = async () => { setOpen(false) props.setLongUrl('') + setdisabled(false) } const text1 = "Url"; const text2 = "MiniFy"; + + return (
@@ -141,7 +154,7 @@ function HomeSection(props) { props.setLongUrl(e.target.value) }} /> - + {disabled ? 'MINIFIED' : 'MINIFY'} +
@@ -194,6 +207,7 @@ function HomeSection(props) { sx={{ padding: '5px 0 0 0' }} onClick={() => { setOpen(false) + setdisabled(false) }} > @@ -215,8 +229,8 @@ function HomeSection(props) { component={motion.div} whileHover={{ scale: 1.1, transition: { ease: 'easeOut' } }} whileTap={{ scale: 0.8, transition: { ease: 'easeOut' } }} - sx={{ background: '#D82148', boxShadow: 'inset 0 -5px 0 0 #470D21', marginTop: '10px', gap: '10px', borderRadius: '20px', padding: '10px 25px 13px', '&:hover': { background: '#F90716', boxShadow: 'inset 0 -5px 0 0 #470D21' } }} - onClick={handleResponse}>Start Over + sx={{ background: '#D82148', boxShadow: 'inset 0 -5px 0 0 #470D21', marginTop: '10px', gap: '5px', textTransform: 'none', borderRadius: '20px', padding: '10px 25px 13px', '&:hover': { background: '#F90716', boxShadow: 'inset 0 -5px 0 0 #470D21' } }} + onClick={handleResponse}>Have another URL?