From 802f712b4c890df90ae5f879fd7fb0b04de88842 Mon Sep 17 00:00:00 2001
From: Benedek Robert George <benedek_robert2001@yahoo.com>
Date: Tue, 13 Feb 2024 12:36:19 +0200
Subject: [PATCH 1/2] fix: make visible all the tablist items

---
 src/components/CustomPagination.tsx           |  2 +-
 .../DataNFT/DataNFTMarketplaceMultiversX.tsx  | 42 ++++++++++++-------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/CustomPagination.tsx b/src/components/CustomPagination.tsx
index ccbefbf7..4cb4430e 100644
--- a/src/components/CustomPagination.tsx
+++ b/src/components/CustomPagination.tsx
@@ -25,7 +25,7 @@ export const CustomPagination: FC<PropsType> = ({ pageCount, pageIndex, gotoPage
   };
 
   return (
-    <Flex justifyContent="center" alignItems="center" gap={3}>
+    <Flex justifyContent="center" alignItems="center" gap={3} py={2}>
       <Flex>
         <Tooltip label="First Page">
           <IconButton
diff --git a/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx b/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
index f8aa37db..c2d042f2 100644
--- a/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
+++ b/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
@@ -308,8 +308,12 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
 
         <Box position="relative">
           <Tabs pt={10} index={tabState - 1}>
-            <TabList justifyContent={{ base: "start", lg: "space-between" }} overflowX={{ base: "scroll", md: "scroll", lg: "unset" }} overflowY="hidden">
-              <Flex>
+            <TabList
+              alignItems={{ base: "center", md: "start" }}
+              justifyContent={{ base: "center", lg: "space-between" }}
+              overflowX={{ base: "scroll", md: "scroll", lg: "unset" }}
+              flexDirection={{ base: "column", md: "row" }}>
+              <Flex flexDirection={{ base: "column", md: "row" }}>
                 <Tab
                   _selected={{ borderBottom: "5px solid", borderBottomColor: "teal.200" }}
                   flexDirection="row"
@@ -374,19 +378,27 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
                 </Tab>
               </Flex>
 
-              <Flex pr={{ lg: "10" }} gap={{ base: "5", lg: "20" }} ml={{ base: "1.7rem", xl: 0 }}>
-                {!window.location.href.includes("my") && (
-                  <Checkbox isChecked={!showGroupedDataNfts} onChange={() => setShowGroupedDataNfts(!showGroupedDataNfts)} colorScheme={"teal"}>
-                    <Tooltip colorScheme="teal" hasArrow label="Toggle this button to view all data NFTs ">
-                      <HStack spacing="10px" width={"100%"}>
-                        <Text align="center"> Show all offers </Text>
-                        <Stack>
-                          <MdOutlineInfo color={"teal"} />
-                        </Stack>
-                      </HStack>
-                    </Tooltip>
-                  </Checkbox>
-                )}
+              <Flex
+                pr={{ lg: "10" }}
+                gap={{ base: "5", lg: "20" }}
+                ml={{ base: "1.7rem", xl: 0 }}
+                flexDirection={{ base: "column", md: "row" }}
+                alignItems={"center"}
+                justifyContent={"center"}>
+                <Flex height={{ base: "20px", md: "100%" }}>
+                  {!window.location.href.includes("my") && (
+                    <Checkbox isChecked={!showGroupedDataNfts} onChange={() => setShowGroupedDataNfts(!showGroupedDataNfts)} colorScheme={"teal"}>
+                      <Tooltip colorScheme="teal" hasArrow label="Toggle this button to view all data NFTs ">
+                        <HStack spacing="10px" width={"100%"}>
+                          <Text align="center"> Show all offers </Text>
+                          <Stack>
+                            <MdOutlineInfo color={"teal"} />
+                          </Stack>
+                        </HStack>
+                      </Tooltip>
+                    </Checkbox>
+                  )}
+                </Flex>
                 {
                   <CustomPagination
                     pageCount={showGroupedDataNfts && tabState === 1 ? 1 : pageCount}

From e5c63ca432633669d5e28ea278eb919702472433 Mon Sep 17 00:00:00 2001
From: Benedek Robert George <benedek_robert2001@yahoo.com>
Date: Tue, 13 Feb 2024 15:48:21 +0200
Subject: [PATCH 2/2] fix: favorite card for mobile display tablist wallet

#1175
---
 src/components/CustomPagination.tsx                |  2 +-
 src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx |  9 ++++-----
 src/pages/DataNFT/DataNftCollection.tsx            |  8 ++++----
 src/pages/DataNFT/MyDataNFTsMultiversX.tsx         | 12 ++++++++++--
 src/pages/DataNFT/components/FavoriteCards.tsx     |  9 +++++----
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/CustomPagination.tsx b/src/components/CustomPagination.tsx
index 4cb4430e..713b8eea 100644
--- a/src/components/CustomPagination.tsx
+++ b/src/components/CustomPagination.tsx
@@ -62,7 +62,7 @@ export const CustomPagination: FC<PropsType> = ({ pageCount, pageIndex, gotoPage
         </Tooltip>
       </Flex>
 
-      <Flex alignItems="center" mx={2} fontSize="sm" w={{ base: "5rem", lg: "auto" }}>
+      <Flex alignItems="center" justify={"center"} mx={2} fontSize="sm" w={{ base: "5rem", lg: "auto" }}>
         <Box flexShrink="0">
           Page{" "}
           <Box fontWeight="bold" as="span">
diff --git a/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx b/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
index c2d042f2..ddcca85a 100644
--- a/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
+++ b/src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
@@ -50,7 +50,7 @@ import { DataNftCollectionType, DataNftMetadataType, OfferType } from "libs/Mult
 import { convertWeiToEsdt, createNftId, hexZero, sleep, tokenDecimals } from "libs/utils";
 import DataNFTDetails from "pages/DataNFT/DataNFTDetails";
 import { useMarketStore } from "store";
-import { DataNftCollection } from "./DataNftCollection";
+import { DataNftCollectionCard } from "./DataNftCollection";
 
 interface PropsType {
   tabState: number; // 1 for "Public Marketplace", 2 for "My Data NFTs"
@@ -324,7 +324,7 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
                     if (hasPendingTransactions) return;
                     navigate("/datanfts/marketplace/market");
                   }}>
-                  <Flex ml={{ base: "0.5rem", md: "4.7rem" }} alignItems="center" py={3}>
+                  <Flex ml={{ base: "0", md: "4.7rem" }} alignItems="center" py={3}>
                     <Icon as={FaStore} mx={2} size="0.95rem" textColor={colorMode === "dark" ? "white" : "black"} />
                     <ConditionalRender
                       fallback={
@@ -355,7 +355,7 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
                     navigate("/datanfts/marketplace/my");
                   }}>
                   {isMxLoggedIn && (
-                    <Flex ml={{ base: "0.5rem", md: "4.7rem" }} alignItems="center" py={3}>
+                    <Flex ml={{ base: "0", md: "4.7rem" }} alignItems="center" py={3}>
                       <Icon as={FaBrush} size="0.95rem" mx={2} textColor={colorMode === "dark" ? "white" : "black"} />
                       <ConditionalRender
                         fallback={
@@ -381,7 +381,6 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
               <Flex
                 pr={{ lg: "10" }}
                 gap={{ base: "5", lg: "20" }}
-                ml={{ base: "1.7rem", xl: 0 }}
                 flexDirection={{ base: "column", md: "row" }}
                 alignItems={"center"}
                 justifyContent={"center"}>
@@ -439,7 +438,7 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
                         ))
                       : Array.from(groupedOffers.entries()).map(([nonce, offer], index) => {
                           return (
-                            <DataNftCollection
+                            <DataNftCollectionCard
                               key={index}
                               index={index}
                               nftImageLoading={oneNFTImgLoaded && !loadingOffers}
diff --git a/src/pages/DataNFT/DataNftCollection.tsx b/src/pages/DataNFT/DataNftCollection.tsx
index fe2fdb4d..4e8aba3f 100644
--- a/src/pages/DataNFT/DataNftCollection.tsx
+++ b/src/pages/DataNFT/DataNftCollection.tsx
@@ -7,7 +7,7 @@ import { DEFAULT_NFT_IMAGE } from "libs/mxConstants";
 import { convertToLocalString, shouldPreviewDataBeEnabled, viewDataDisabledMessage } from "libs/utils";
 import { useMarketStore } from "store";
 
-type DataNftCollectionComponentProps = {
+type DataNftCollectionCardComponentProps = {
   index: number;
   nftImageLoading: boolean;
   imageUrl: string;
@@ -21,7 +21,7 @@ type DataNftCollectionComponentProps = {
   dataPreview?: string;
 };
 
-export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
+export const DataNftCollectionCard: FC<DataNftCollectionCardComponentProps> = ({
   index,
   nftImageLoading,
   imageUrl,
@@ -38,6 +38,7 @@ export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
   const { chainID } = useGetNetworkConfig();
   const { loginMethod } = useGetLoginInfo();
   const { colorMode } = useColorMode();
+
   return (
     <Skeleton
       transform={{ base: "scale(0.5) ", sm: "scale(0.6)", md: "scale(0.75)", xl: "scale(1)" }}
@@ -62,7 +63,7 @@ export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
         padding={"32px"}>
         <VStack height={"100%"} justifyContent="flex-start" alignItems="flex-start" width={"60%"} gap={"8px"}>
           <Tooltip label={title}>
-            <Text fontFamily="Satoshi-Medium" lineHeight="1" fontWeight="medium" fontSize="22px" noOfLines={1}>
+            <Text fontFamily="Satoshi-Medium" lineHeight="1" fontWeight="medium" fontSize="22px" noOfLines={1} p={1}>
               {title}
             </Text>
           </Tooltip>
@@ -79,7 +80,6 @@ export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
               />
             </Text>
           </Stack>
-
           <HStack>
             <Text opacity=".7" fontFamily="Satoshi-Regular" maxWidth="100%">
               Total supply: {supply}
diff --git a/src/pages/DataNFT/MyDataNFTsMultiversX.tsx b/src/pages/DataNFT/MyDataNFTsMultiversX.tsx
index aed8acc5..2acda9bd 100644
--- a/src/pages/DataNFT/MyDataNFTsMultiversX.tsx
+++ b/src/pages/DataNFT/MyDataNFTsMultiversX.tsx
@@ -182,8 +182,16 @@ export default function MyDataNFTsMx({ tabState }: { tabState: number }) {
                   isDisabled={tab.isDisabled}
                   p={{ base: "0", md: "initial" }}
                   _selected={{ borderBottom: "5px solid", borderBottomColor: "teal.200" }}
-                  onClick={() => onChangeTab(index + 1)}>
-                  <Flex ml={{ base: "0.5rem", md: "4.7rem" }} alignItems="center" py={3} overflow="hidden">
+                  onClick={() => onChangeTab(index + 1)}
+                  mx={"auto"}>
+                  <Flex
+                    height={"100%"}
+                    flexDirection={{ base: "column", md: "row" }}
+                    ml={{ base: "0", md: "4.7rem" }}
+                    alignItems={{ base: "center", md: "center" }}
+                    justify={{ md: "center" }}
+                    py={3}
+                    overflow="hidden">
                     <Icon as={tab.icon} mx={2} size="0.95rem" textColor={colorMode === "dark" ? "white" : "black"} />
                     <Text fontSize="lg" fontWeight="medium" color={colorMode === "dark" ? "white" : "black"} w="max-content">
                       {tab.tabName}
diff --git a/src/pages/DataNFT/components/FavoriteCards.tsx b/src/pages/DataNFT/components/FavoriteCards.tsx
index e801eca2..07eb27e6 100644
--- a/src/pages/DataNFT/components/FavoriteCards.tsx
+++ b/src/pages/DataNFT/components/FavoriteCards.tsx
@@ -20,7 +20,7 @@ export const FavoriteCards: React.FC = () => {
   const [favouriteItems, setFavouriteItems] = React.useState<Array<string>>([]);
   const [dataNfts, setDataNfts] = React.useState<Array<DataNft>>([]);
 
-  const skeletonHeight = { base: "260px", md: "190px", "2xl": "220px" };
+  const skeletonHeight = { base: "160px", md: "190px", "2xl": "220px" };
 
   useEffect(() => {
     (async () => {
@@ -62,7 +62,7 @@ export const FavoriteCards: React.FC = () => {
   // console.log(dataNfts);
   return (
     <Box>
-      <Flex flexDirection={{ base: "column", md: "row" }} flexWrap={"wrap"} gap={7} ml={16}>
+      <Flex flexDirection={{ base: "column", md: "row" }} flexWrap={"wrap"} gap={7} ml={{ base: 0, md: 16 }} alignItems={"center"}>
         {favouriteItems.length === 0 ? (
           <NoDataHere />
         ) : (
@@ -75,11 +75,12 @@ export const FavoriteCards: React.FC = () => {
                 backgroundColor="none"
                 border=".01rem solid transparent"
                 borderColor="#00C79740"
-                borderRadius="0.75rem">
+                borderRadius="0.75rem"
+                width={{ base: "250px", md: "300px" }}>
                 <CardBody mb={9}>
                   <Skeleton height={skeletonHeight} isLoaded={loadedOffers} fadeDuration={1} display="flex" justifyContent={"center"}>
                     <Link to={`/datanfts/marketplace/${dataNft.tokenIdentifier}`} as={ReactRouterLink}>
-                      <Image src={dataNft.nftImgUrl} alt="Data NFT Image" borderRadius="lg" boxSize={{ base: "250px", md: "200px" }} />
+                      <Image src={dataNft.nftImgUrl} alt="Data NFT Image" borderRadius="lg" boxSize={{ base: "150px", md: "200px" }} />
                     </Link>
                   </Skeleton>
                   <Skeleton height="76px" isLoaded={loadedOffers} fadeDuration={2}>