feat: add share icon in bio modal

cardano-foundation · Sep 24, 2024 · 0c407c7 · 0c407c7
1 parent 00d3e31
commit 0c407c7
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 deletions.
diff --git a/ui/summit-2024/src/components/Header/Header.tsx b/ui/summit-2024/src/components/Header/Header.tsx
@@ -309,13 +309,13 @@ const Header = () => {
                   <Typography
                     sx={{
                       color: "inherit",
-                      padding:" 16px 24px",
+                      padding: " 16px 24px",
                       textDecoration: "none",
                       borderRadius: "12px",
                       cursor: "pointer",
                       "&:hover": {
                         backgroundColor: "#282828",
-                      }
+                      },
                     }}
                     onClick={() => handleClickMenu(ROUTES.CATEGORIES)}
                   >
@@ -324,13 +324,13 @@ const Header = () => {
                   <Typography
                     sx={{
                       color: "inherit",
-                      padding:" 16px 24px",
+                      padding: " 16px 24px",
                       textDecoration: "none",
                       borderRadius: "12px",
                       cursor: "pointer",
                       "&:hover": {
                         backgroundColor: "#282828",
-                      }
+                      },
                     }}
                     onClick={() => handleClickMenu(ROUTES.LEADERBOARD)}
                   >
@@ -339,13 +339,13 @@ const Header = () => {
                   <Typography
                     sx={{
                       color: "inherit",
-                      padding:" 16px 24px",
+                      padding: " 16px 24px",
                       textDecoration: "none",
                       borderRadius: "12px",
                       cursor: "pointer",
                       "&:hover": {
                         backgroundColor: "#282828",
-                      }
+                      },
                     }}
                     onClick={() => handleClickMenu(ROUTES.USER_GUIDE)}
                   >
@@ -376,9 +376,9 @@ const Header = () => {
                       background:
                         "linear-gradient(258deg, #EE9766 0%, #40407D 187.58%, #0C7BC5 249.97%)",
                       color: theme.palette.background.default,
-                      '&:hover': {
-                        color: theme.palette.text.neutralLight
-                      }
+                      "&:hover": {
+                        color: theme.palette.text.neutralLight,
+                      },
                     }}
                   >
                     <MenuOutlinedIcon />

diff --git a/ui/summit-2024/src/pages/Categories/Categories.tsx b/ui/summit-2024/src/pages/Categories/Categories.tsx
@@ -552,6 +552,7 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
           onClose={() => setOpenVotingModal(false)}
         />
         <BioModal
+          categoryId={categoryToRender.id}
           nominee={bioModalContent}
           isOpen={openLearMoreCategory}
           title={bioModalContent?.name}

diff --git a/ui/summit-2024/src/pages/Categories/components/BioModal.tsx b/ui/summit-2024/src/pages/Categories/components/BioModal.tsx
@@ -1,25 +1,37 @@
 import React from "react";
 import Modal from "../../../components/common/Modal/Modal";
-import { Box, useMediaQuery } from "@mui/material";
+import { Box, IconButton, useMediaQuery } from "@mui/material";
 import XIcon from "../../../assets/x.svg";
 import LinkedinIcon from "../../../assets/linkedin.svg";
 import theme from "../../../common/styles/theme";
 import { CustomButton } from "../../../components/common/CustomButton/CustomButton";
+import { copyToClipboard } from "../../../utils/utils";
+import { eventBus, EventName } from "../../../utils/EventBus";
+import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
 
 interface BioModalProps {
+  categoryId: string;
   nominee: any;
   isOpen: boolean;
   title: string | null | undefined;
   onClose: () => void;
 }
 
 const BioModal: React.FC<BioModalProps> = ({
+  categoryId,
   nominee,
   isOpen,
   title,
   onClose,
 }) => {
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const baseUrl = `${window.location.protocol}//${window.location.host}`;
+  const urlToCopy = `${baseUrl}/categories?category=${categoryId}&nominee=${nominee?.id}`;
+
+  const handleCopyToClipBoard = () => {
+    copyToClipboard(urlToCopy);
+    eventBus.publish(EventName.ShowToast, "Copied to clipboard");
+  };
 
   return (
     <>
@@ -75,6 +87,26 @@ const BioModal: React.FC<BioModalProps> = ({
             </Box>
           ) : null}
         </Box>
+        <Box
+          component="div"
+          sx={{
+            width: "53px",
+
+            borderRadius: "12px",
+            cursor: "pointer",
+          }}
+          onClick={() => handleCopyToClipBoard()}
+        >
+          <IconButton>
+            <ShareOutlinedIcon
+              sx={{
+                width: "32px",
+                height: "32px",
+                color: theme.palette.text.neutralLight,
+              }}
+            />
+          </IconButton>
+        </Box>
         {nominee?.url ? (
           <CustomButton
             colorVariant="secondary"

diff --git a/ui/summit-2024/src/pages/Home/components/ExploreSection.tsx b/ui/summit-2024/src/pages/Home/components/ExploreSection.tsx
@@ -195,7 +195,7 @@ const ExploreSection = () => {
             backgroundImage: `url(${guideBg})`,
             backgroundSize: "180% 160%",
             backgroundPosition: "center",
-            cursor: "pointer"
+            cursor: "pointer",
           }}
         >
           <CardContent
@@ -289,7 +289,7 @@ const ExploreSection = () => {
             backgroundImage: `url(${guideBg})`,
             backgroundSize: "180% 160%",
             backgroundPosition: "center",
-            cursor: "pointer"
+            cursor: "pointer",
           }}
         >
           <CardContent sx={{ position: "relative", zIndex: 2 }}>

diff --git a/ui/summit-2024/src/pages/Home/components/TicketsSection.tsx b/ui/summit-2024/src/pages/Home/components/TicketsSection.tsx
@@ -41,6 +41,7 @@ const TicketsSection = () => {
         >
           <Grid item xs={12}>
             <Card
+              onClick={handleButtonClick}
               sx={{
                 position: "relative",
                 overflow: "hidden",
@@ -57,6 +58,7 @@ const TicketsSection = () => {
                   xs: "16px",
                   sm: "60px",
                 },
+                cursor: "pointer",
               }}
             >
               <Box