fix: missing very_high state and update vote receipt and other UI fixes

ui/summit-2024/src/common/resources/data/privacyPolicy.json

@@ -1,6 +1,6 @@
 {
     "title": "Privacy Policy",
-    "date": "Last updated: July, 2023",
+    "date": "Last updated: July, 2024",
     "description": [
       "This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.",
       "We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy."

ui/summit-2024/src/common/resources/data/summit2024MainnetContent.json

@@ -402,7 +402,7 @@
           "presentationName": "Optim Finance",
           "x": "https://x.com/optimfi",
           "linkedin": "",
-          "url": "https://dao.optim.finance/"
+          "url": "https://optim.finance/"
         }
       ]
     },

ui/summit-2024/src/common/resources/data/termsAndConditions.json

@@ -1,6 +1,6 @@
 {
   "title": "Terms and Conditions",
-  "date": "Last updated: August, 2023",
+  "date": "Last updated: August, 2024",
   "sections": [
     {
       "title": "Interpretation and Definitions",
@@ -13,7 +13,7 @@
           "title": "Definitions",
           "content": ["For the purposes of these Terms and Conditions:"],
           "definitions": {
-            "Website": "<b>Website</b> means the server provided by the Company to You on any electronic device, named <b>Cardano Summit 2023.</b>",
+            "Website": "<b>Website</b> means the server provided by the Company to You on any electronic device, named <b>Cardano Summit 2024.</b>",
             "Country": "<b>Country</b> refers to Switzerland.",
             "Company": "<b>Company</b> refers to Cardano Foundation, Dammstrasse 16, 6300 Zug, Switzerland, and is referred to as either 'the Company,' 'We,' 'Us,' or 'Our' in this Agreement.",
             "Device": "<b>Device</b> means any device that can access the Service such as a computer, a mobile phone, or a digital tablet.",
@@ -133,7 +133,7 @@
       "list": [
         {
           "number": "2.1",
-          "content": ["2.1 The Web Application is a platform that offers a verified e-voting platform. The Web Application Cardano Ballot is only being made available for the Cardano Summit 2023 as is designed only for the Summit use case. This is a platform where users can choose between two methods of registration and authentication. One method is via email and SMS, the other is via a Cardano Wallet and Discord bot.  (User Discord account required). The site provides a facility for users to generate ballots and submit votes for the Cardano Summit 2023. The process will be anonymously recorded on the Cardano blockchain."]
+          "content": ["2.1 The Web Application is a platform that offers a verified e-voting platform. The Web Application Cardano Ballot is only being made available for the Cardano Summit 2024 as is designed only for the Summit use case. This is a platform where users can choose between two methods of registration and authentication. One method is via email and SMS, the other is via a Cardano Wallet and Discord bot.  (User Discord account required). The site provides a facility for users to generate ballots and submit votes for the Cardano Summit 2024. The process will be anonymously recorded on the Cardano blockchain."]
         },
         {
           "number": "2.2",

ui/summit-2024/src/components/ConnectWalletButton/ConnectWalletButton.scss

@@ -1,7 +1,9 @@
 .button-container {
   position: relative;
-
+  z-index: 1300;
   .main-button {
+    position: relative;
+    z-index: 1301;
     border-radius: 12px;
     border: 1px solid var(--orange, #ee9766);
     display: inline-flex;
@@ -72,6 +74,10 @@
   line-height: 20px;
   height: 44px;
 
+  &:hover {
+    background-color: #282828;
+  }
+
   .MuiTypography-root {
     font-size: 12px;
   }
@@ -102,7 +108,6 @@
   border: 1px solid #d2d2d9;
   background: var(--color-light-blue);
   display: inline-flex;
-  padding: 16px 20px;
   justify-content: center;
   align-items: center;
   gap: 10px;

ui/summit-2024/src/components/ConnectWalletButton/ConnectWalletButton.tsx

@@ -73,7 +73,7 @@ const ConnectWalletButton = (props: ConnectWalletButtonProps) => {
     >
       <Button
         sx={{
-          zIndex: "99",
+          zIndex: 1300,
           padding: isMobile ? "10px 10px" : "16px 20px",
           width: "90%",
           margin: showAddress ? "20px" : null,
@@ -165,7 +165,7 @@ const ConnectWalletButton = (props: ConnectWalletButtonProps) => {
                 color="inherit"
                 onClick={handleOpenVoteReceipts}
               >
-                <ListItemText primary="Votes Receipts" />
+                <ListItemText primary="Vote Receipts" />
               </ListItem>
             ) : null}
             <ListItem

ui/summit-2024/src/components/Header/Header.tsx

@@ -309,9 +309,13 @@ const Header = () => {
                   <Typography
                     sx={{
                       color: "inherit",
-                      px: "24px",
+                      padding: " 16px 24px",
                       textDecoration: "none",
+                      borderRadius: "12px",
                       cursor: "pointer",
+                      "&:hover": {
+                        backgroundColor: "#282828",
+                      },
                     }}
                     onClick={() => handleClickMenu(ROUTES.CATEGORIES)}
                   >
@@ -320,9 +324,13 @@ const Header = () => {
                   <Typography
                     sx={{
                       color: "inherit",
+                      padding: " 16px 24px",
                       textDecoration: "none",
-                      px: "24px",
+                      borderRadius: "12px",
                       cursor: "pointer",
+                      "&:hover": {
+                        backgroundColor: "#282828",
+                      },
                     }}
                     onClick={() => handleClickMenu(ROUTES.LEADERBOARD)}
                   >
@@ -331,9 +339,13 @@ const Header = () => {
                   <Typography
                     sx={{
                       color: "inherit",
+                      padding: " 16px 24px",
                       textDecoration: "none",
-                      px: "24px",
+                      borderRadius: "12px",
                       cursor: "pointer",
+                      "&:hover": {
+                        backgroundColor: "#282828",
+                      },
                     }}
                     onClick={() => handleClickMenu(ROUTES.USER_GUIDE)}
                   >
@@ -356,14 +368,17 @@ const Header = () => {
 
                 {isPortrait ? (
                   <IconButton
-                    color="inherit"
                     onClick={() => setMenuIsOpen(true)}
                     sx={{
                       marginLeft: "auto",
                       padding: "10px",
                       borderRadius: "12px",
                       background:
                         "linear-gradient(258deg, #EE9766 0%, #40407D 187.58%, #0C7BC5 249.97%)",
+                      color: theme.palette.background.default,
+                      "&:hover": {
+                        color: theme.palette.text.neutralLight,
+                      },
                     }}
                   >
                     <MenuOutlinedIcon />

ui/summit-2024/src/components/Layout/Layout.tsx

@@ -80,7 +80,7 @@ const Layout: React.FC<LayoutProps> = ({
       }}
     >
       <Grid container>
-        <Grid item xs={12} md={2.4} lg={2} sx={{}}>
+        <Grid item xs={12} md={2.4} lg={2}>
           {isMobile ? (
             <>
               <Box
@@ -96,8 +96,8 @@ const Layout: React.FC<LayoutProps> = ({
                   },
                   marginTop: "14px",
                   position: "fixed",
-                  top: 72,
-                  zIndex: 1200,
+                  top: 82,
+                  zIndex: 1092,
                   background: theme.palette.background.default,
                 }}
               >
@@ -153,12 +153,13 @@ const Layout: React.FC<LayoutProps> = ({
                   overflowY: "auto",
                   maxHeight: "calc(100vh - 102px)",
                   borderRight: "1px solid #737380",
+                  paddingRight: "8px",
                 }}
               >
                 {title ? (
                   <ListItem
                     sx={{
-                      paddingLeft: "0px",
+                      paddingLeft: "10px",
                       marginBottom: "16px",
                     }}
                   >
@@ -181,63 +182,41 @@ const Layout: React.FC<LayoutProps> = ({
                     onClick={() => handleClickMenuItem(option.label)}
                     key={index}
                     sx={{
-                      paddingLeft: "0px",
+                      marginTop: "12px",
+                      paddingLeft: "10px",
+                      paddingRight: "0px",
+                      paddingTop: "8px",
+                      paddingBottom: "8px",
+                      cursor: "pointer",
+                      transition: "background-color 0.3s",
+                      backgroundColor:
+                        option.label === selectedOption
+                          ? theme.palette.secondary.main
+                          : "transparent",
+                      "&:hover": {
+                        backgroundColor: theme.palette.action.hover,
+                      },
+                      display: "flex",
+                      alignItems: "center",
+                      width: "100%",
+                      borderRadius: "12px",
                     }}
                   >
-                    {option.label === selectedOption ? (
-                      <>
-                        <Box
-                          component="div"
-                          sx={{
-                            display: "flex",
-                            padding: "8px 12px",
-                            alignItems: "center",
-                            gap: "10px",
-                            alignSelf: "stretch",
-                            borderRadius: "12px",
-                            background: theme.palette.secondary.main,
-                            color: theme.palette.background.default,
-                            fontSize: "16px",
-                            fontStyle: "normal",
-                            fontWeight: 500,
-                            lineHeight: "24px",
-                            cursor: "pointer",
-                            width: "100%",
-                          }}
-                        >
-                          <Typography
-                            sx={{
-                              gap: "10px",
-                              alignSelf: "stretch",
-                              borderRadius: "12px",
-                              fontSize: "16px",
-                              fontStyle: "normal",
-                              fontWeight: 500,
-                              lineHeight: "24px",
-                              cursor: "pointer",
-                              width: "100%",
-                            }}
-                          >
-                            {option.label}
-                          </Typography>
-                        </Box>
-                      </>
-                    ) : (
-                      <>
-                        <Typography
-                          sx={{
-                            color: theme.palette.text.neutralLightest,
-                            fontSize: "16px",
-                            fontStyle: "normal",
-                            fontWeight: 500,
-                            lineHeight: "24px",
-                            cursor: "pointer",
-                          }}
-                        >
-                          {option.label}
-                        </Typography>
-                      </>
-                    )}
+                    <Typography
+                      sx={{
+                        color:
+                          option.label === selectedOption
+                            ? theme.palette.background.default
+                            : theme.palette.text.neutralLightest,
+                        fontSize: "16px",
+                        fontWeight: 500,
+                        lineHeight: "24px",
+                        flexGrow: 1,
+                        textAlign: "left",
+                      }}
+                    >
+                      {option.label}
+                    </Typography>
                   </ListItem>
                 ))}
               </List>

ui/summit-2024/src/components/LegalOptInModal/Cookies.tsx

@@ -3,6 +3,7 @@ import { CB_COOKIES } from "../../common/constants/local";
 import { Box, Typography } from "@mui/material";
 import theme from "../../common/styles/theme";
 import { CustomButton } from "../common/CustomButton/CustomButton";
+import { eventBus, EventName } from "../../utils/EventBus";
 
 export enum CookiesStatus {
   ACCEPT = "ACCEPT",
@@ -22,7 +23,7 @@ const Cookies = () => {
   };
 
   const handlePrivacyPolicy = () => {
-    // TODO: Open privacy and policy page
+    eventBus.publish(EventName.OpenTermsModal);
   };
 
   if (!showCookies) return null;

ui/summit-2024/src/components/LegalOptInModal/TermsAndConditionsModal.tsx

@@ -29,10 +29,11 @@ const TermsAndConditionsModal = () => {
   ];
 
   const [currentTab, setCurrentTab] = useState(tabs[0]);
-  const [isChecked, setIsChecked] = useState(false);
+
   const [forceOpenModal, setForceOpenModal] = useState(false);
   const [termsAndConditionsChecked, setTermsAndConditionsChecked] =
     useLocalStorage(CB_TERMS_AND_PRIVACY, false);
+  const [isChecked, setIsChecked] = useState(termsAndConditionsChecked);
 
   useEffect(() => {
     const openModal = () => {
@@ -53,6 +54,14 @@ const TermsAndConditionsModal = () => {
   const handleSetCurrentTab = (option: string) => {
     setCurrentTab(option);
   };
+
+  const handleDecline = () => {
+    eventBus.publish(
+      EventName.ShowToast,
+      "To use the app, you must accept the Terms and Conditions and Privacy Policy",
+    );
+  };
+
   const handleAccept = () => {
     setTermsAndConditionsChecked(true);
     setForceOpenModal(false);
@@ -513,6 +522,7 @@ const TermsAndConditionsModal = () => {
             Accept
           </Button>
           <Button
+            onClick={() => handleDecline()}
             variant="outlined"
             sx={{
               padding: "16px 24px",

ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx

@@ -521,6 +521,7 @@ const VerifyWalletModal = () => {
         </Box>
 
         <Box
+          onClick={() => setCheckImNotARobot(!checkImNotARobot)}
           component="div"
           sx={{ display: "flex", alignItems: "center", marginTop: "4px" }}
         >

ui/summit-2024/src/components/common/Modal/Modal.tsx

@@ -92,14 +92,13 @@ const Modal = (props: ModalProps) => {
           </IconButton>
         ) : null}
         <Typography
-          variant="h6"
           component="div"
           sx={{
             flex: 1,
             maxWidth: "320px",
             textAlign: props.leftTitle ? "left" : "center",
             fontFamily: "Dosis",
-            weight: 700,
+            fontWeight: 700,
             fontSize: "28px",
             lineHeight: "32px",
           }}