From c799d144eb2a56414f761d9ea6c41078b46d0a0a Mon Sep 17 00:00:00 2001
From: IrohDW <randomprogrammer@protonmail.com>
Date: Fri, 20 Dec 2024 17:58:21 -0700
Subject: [PATCH 1/2] Added Close Button to ListSuperLikeContainer.tsx

---
 .../ListSuperLikes/ListSuperLikeContainer.tsx | 55 +++++++++++++------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx b/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
index 3afd50c..3bd617f 100644
--- a/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
+++ b/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
@@ -1,6 +1,8 @@
 import { Box, Tooltip, Typography, useMediaQuery } from "@mui/material";
-import React from "react";
-import { PopMenu } from "../PopMenu.tsx";
+import React, { useRef } from "react";
+import { fontSizeSmall } from "../../../constants/Misc.ts";
+import { CrowdfundActionButton } from "../../Publish/PublishVideo/PublishVideo-styles.tsx";
+import { PopMenu, PopMenuRefType } from "../PopMenu.tsx";
 import ListSuperLikes from "./ListSuperLikes";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../state/store";
@@ -11,25 +13,17 @@ export const ListSuperLikeContainer = () => {
   );
 
   const isScreenLarge = useMediaQuery("(min-width:1200px)");
-  const superlikeListComponent = (
-    <>
-      <Typography
-        sx={{
-          fontSize: "18px",
-          color: "gold",
-        }}
-      >
-        Recent Super likes
-      </Typography>
-      <ListSuperLikes superlikes={superlikelist} />
-    </>
-  );
 
-  // @ts-ignore
+  const headerSX = { fontSize: fontSizeSmall, color: "gold" };
+
+  const popoverRef = useRef<PopMenuRefType>(null);
   return (
     <Box sx={{ paddingLeft: "5px" }}>
       {isScreenLarge ? (
-        <>{superlikeListComponent}</>
+        <>
+          <Typography sx={headerSX}>Recent Super likes</Typography>
+          <ListSuperLikes superlikes={superlikelist} />
+        </>
       ) : (
         <PopMenu
           showExpandIcon={false}
@@ -39,9 +33,11 @@ export const ListSuperLikeContainer = () => {
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
+              marginTop: "60px",
             },
             anchorReference: "none",
           }}
+          ref={popoverRef}
           MenuHeader={
             <Tooltip title={"Show recent Superlikes"} placement={"left"} arrow>
               <Box
@@ -66,7 +62,30 @@ export const ListSuperLikeContainer = () => {
             </Tooltip>
           }
         >
-          {superlikeListComponent}
+          <Box
+            sx={{
+              display: "flex",
+              backgroundColor: "#1A1C1E",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography sx={headerSX}>Recent Superlikes</Typography>
+            <CrowdfundActionButton
+              variant="contained"
+              color="error"
+              sx={{
+                height: "25px",
+                width: "75px",
+                marginRight: "5px",
+              }}
+              onClick={() => {
+                if (popoverRef?.current) popoverRef.current.closePopover();
+              }}
+            >
+              CLOSE
+            </CrowdfundActionButton>
+          </Box>
+          <ListSuperLikes superlikes={superlikelist} />
         </PopMenu>
       )}
     </Box>

From 5fad85baa76b67bfb676fff57ad19981f34a9733 Mon Sep 17 00:00:00 2001
From: IrohDW <randomprogrammer@protonmail.com>
Date: Fri, 20 Dec 2024 18:01:54 -0700
Subject: [PATCH 2/2] Added Close Button to ListSuperLikeContainer.tsx

---
 src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx b/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
index 3bd617f..82dc669 100644
--- a/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
+++ b/src/components/common/ListSuperLikes/ListSuperLikeContainer.tsx
@@ -67,6 +67,7 @@ export const ListSuperLikeContainer = () => {
               display: "flex",
               backgroundColor: "#1A1C1E",
               justifyContent: "space-between",
+              alignItems: "center",
             }}
           >
             <Typography sx={headerSX}>Recent Superlikes</Typography>