Pretty up the prompt

Equal-Vote · Jan 20, 2024 · 8c521ac · 8c521ac
1 parent 888ecf4
commit 8c521ac
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 41 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -17,6 +17,7 @@ import ElectionInvitations from './components/Elections/ElectionInvitations'
 import ElectionsYouManage from './components/Elections/ElectionsYouManage'
 import ElectionsYouVotedIn from './components/Elections/ElectionsYouVotedIn'
 import OpenElections from './components/Elections/OpenElections'
+import ClassicPrompt from './components/ClassicPrompt'
 
 const App = () => {
   return (
@@ -47,6 +48,7 @@ const App = () => {
                 </Box>
                 <Footer />
               </Box>
+              <ClassicPrompt/>
             </SnackbarContextProvider>
           </ConfirmDialogProvider>
         </AuthSessionContextProvider>

diff --git a/frontend/src/components/ClassicPrompt.tsx b/frontend/src/components/ClassicPrompt.tsx
@@ -1,61 +1,73 @@
 import React, { useState, useEffect } from 'react';
 import { useLocalStorage } from '../hooks/useLocalStorage'
 import { useNavigate } from 'react-router'
+import { BallotContext } from './Election/Voting/VotePage';
+import {Typography, Stack, Button, Dialog, Box} from '@mui/material';
 
 const ClassicPrompt = () => {
     const navigate = useNavigate()
 
     const [prevClassicPrompt, setPrevClassicPrompt] = useLocalStorage('prev_classic_prompt', '')
-    const [rememberPrompt, setRememberPrompt] = useState(false)
 
     function goToOriginal(){
-        if(rememberPrompt) setPrevClassicPrompt('classic')
+        setPrevClassicPrompt('classic')
 
-        window.location.href = 'https://www.star.vote';
+        window.location.href = 'https://www.classic.star.vote';
     }
 
     function goToNewVersion(){
-
-        // navigate({ pathname: '/Landing'});
-
-        window.location.href = 'Landing';
-
-        if(rememberPrompt) setPrevClassicPrompt('new_version')
-    }
-
-    function handleCheckbox(event){
-       setRememberPrompt(event.target.checked) 
+        setPrevClassicPrompt('new_version')
     }
 
-    useEffect(() => {
-        if(prevClassicPrompt == 'classic'){
-            goToOriginal()
-        }
-
-        if(prevClassicPrompt == 'new_version'){
-            goToNewVersion()
-        }
-    });
-
     if(prevClassicPrompt != '') return <></> // save on rendering time so the redirect is faster
 
     return (
         <>
-            <div className="classicPageWrapper">
-                <iframe src='classic_star_vote.html' style={{width: '100%', height: '100%'}} scrolling="no"></iframe>
-            </div>
-            <div className="classicPopupBkg">
-                <div className="classicPopupInner">
-                    We're working on a new and improved version of star.vote!
-                    <br/>
-                    Want to try it?
+            <Box className="classicPageWrapper">
+                <iframe src='/classic_star_vote.html' style={{width: '100%', height: '100%'}} scrolling="no"></iframe>
+            </Box>
+            <Dialog open={true} className="classicPopupBkg" keepMounted>
+                <Stack className="classicPopupInner">
+                    <Typography align='center' component='h4'>
+                        The original star.vote has been moved to classic.star.vote, but the new and improved version is live!
+                    </Typography>
                     <br/>
-                    <button onClick={goToOriginal}>Continue to Original</button>
-                    <button onClick={goToNewVersion}>Try New Verison</button>
+                    <Typography align='center' component='h4'>
+                        Want to try new version?
+                    </Typography>
                     <br/>
-                    <input type="checkbox" onChange={handleCheckbox}/> Remember my selection
-                </div>
-            </div>
+                    <Button
+                        variant="contained"
+                        sx={{
+                            width: '80%',
+                            m: 'auto',
+                            p: 1,
+                            boxShadow: 2,
+                            backgroundColor: 'primary.main',
+                            fontWeight: 'bold',
+                            fontSize: 18,
+                        }}
+                        onClick={goToNewVersion}
+                    >
+                        Try the New Version!
+                    </Button>
+                    <Button
+                        variant="outlined"
+                        sx={{
+                            width: '70%',
+                            m: 'auto',
+                            mt: 2,
+                            p: 1,
+                            boxShadow: 2,
+                            fontWeight: 'bold',
+                            fontSize: 18,
+                        }}
+                        onClick={goToNewVersion}
+                    >
+                        Return to Classic
+                    </Button>
+                </Stack>
+            </Dialog>
         </>
     )
 }

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -395,6 +395,7 @@ code {
   width: 100%;
   height: 100vh;
   z-index:1300;
+  filter: blur(0rem);
 }
 
 .classicPopupBkg {
@@ -404,7 +405,6 @@ code {
   width: 100%;
   height: 100vh;
   z-index:1301;
-  background-color: rgba(0, 0, 0, .8);
 
   display: flex;
   justify-content: center;
@@ -417,8 +417,4 @@ code {
   width: 100%;
   max-width: 640px;
   background-color: #FFF;
-}
-
-.classicPopupInner button {
-  margin: 10px;
 }