Added start again button

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 (
     <HomeSectionStyle>
       <div className="content">
@@ -141,7 +154,7 @@ function HomeSection(props) {
               props.setLongUrl(e.target.value)
             }}
           />
-          <Button
+          <ThemeProvider theme={theme}><Button
             variant={'contained'}
             disabled={disabled}
             className={styles.btn}
@@ -150,8 +163,8 @@ function HomeSection(props) {
             id="minify"
             onClick={setMinfy}
           >
-            MINIFY
-          </Button>
+            {disabled ? 'MINIFIED' : 'MINIFY'}
+          </Button></ThemeProvider>
         </motion.div>
 
         <div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
@@ -194,6 +207,7 @@ function HomeSection(props) {
               sx={{ padding: '5px 0 0 0' }}
               onClick={() => {
                 setOpen(false)
+                setdisabled(false)
               }}
             >
               <CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
@@ -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}><ReplayIcon />Start Over</Button>
+            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}><ReplayIcon />Have another URL?</Button>
         </div>
       </Collapse>
       <Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />