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

…es (#591) * fix: open terms and package.json details * fix: open github commit from current version * feat: set matomo env vars * feat: parse matomo project id * feat: add trackEvents * feat: set VITE_MATOMO_PROJECT_ID 1 by default * fix: remove debugs * fix: update status page * feat: multiple winners * fix: winner learn more * fix: include missing VERY_HIGH state * fix: dispatch update receipt * fix: view viewOnChainVote when STATE.FULL * fix: selected category id and run prettier * fix: remove debugs * fix: add debugs * fix: ConnectWalletButton styles * fix: options hover bg in header * fix: link categories and leaderboard cards in home * feat: add share icon in bio modal * feat: align share icon in bio modal * feat: remove border for share button * feat: terms and conditions * feat: toast message on decline terms * fix: cookies open privacy policy * fix: Optim Finance url * fix: share icon * fix: I am not a robot click check box * fix: nominees grid left align * fix: modal fontWeight * fix: layout menu padding * fix: home background hover
cardano-foundation · Sep 25, 2024 · f02fb4d · f02fb4d
1 parent 53eae89
commit f02fb4d
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 87 deletions.
diff --git a/ui/summit-2024/src/assets/share.svg b/ui/summit-2024/src/assets/share.svg
diff --git a/ui/summit-2024/src/common/resources/data/privacyPolicy.json b/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."

diff --git a/ui/summit-2024/src/common/resources/data/summit2024MainnetContent.json b/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/"
         }
       ]
     },

diff --git a/ui/summit-2024/src/common/resources/data/termsAndConditions.json b/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",

diff --git a/ui/summit-2024/src/components/ConnectWalletButton/ConnectWalletButton.scss b/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;

diff --git a/ui/summit-2024/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/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

diff --git a/ui/summit-2024/src/components/Header/Header.tsx b/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 />

diff --git a/ui/summit-2024/src/components/Layout/Layout.tsx b/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>

diff --git a/ui/summit-2024/src/components/LegalOptInModal/Cookies.tsx b/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;

diff --git a/ui/summit-2024/src/components/LegalOptInModal/TermsAndConditionsModal.tsx b/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",

diff --git a/ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx b/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" }}
         >

diff --git a/ui/summit-2024/src/components/common/Modal/Modal.tsx b/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",
           }}