From ef9328f41439a87b22a24cedf26540335cc806dd Mon Sep 17 00:00:00 2001
From: Bogdan Crisan <bogdan@crbl.studio>
Date: Tue, 12 Nov 2024 06:20:43 +0100
Subject: [PATCH] [ECO-2383] Add pagination navigation at the top of the market
 grid (#337)

Co-authored-by: Matt <90358481+xbtmatt@users.noreply.github.com>
---
 src/typescript/frontend/src/app/global.css    |  22 +++
 .../components/buttons-block/index.tsx        |   8 +-
 .../home/components/emoji-table/index.tsx     | 152 ++++++++++--------
 3 files changed, 111 insertions(+), 71 deletions(-)

diff --git a/src/typescript/frontend/src/app/global.css b/src/typescript/frontend/src/app/global.css
index 1a915191d..37edd9c90 100644
--- a/src/typescript/frontend/src/app/global.css
+++ b/src/typescript/frontend/src/app/global.css
@@ -61,6 +61,28 @@
   width: 18px;
 }
 
+.med-pixel-search-arrows {
+  width: 11px;
+}
+
+@media screen and (min-width: 768px) {
+  .med-pixel-search-arrows {
+    width: 12px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .med-pixel-search-arrows {
+    width: 14px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .med-pixel-search-arrows {
+    width: 18px;
+  }
+}
+
 .med-pixel-close {
   width: 12px;
 }
diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/buttons-block/index.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/buttons-block/index.tsx
index e0b9313b6..7455a1beb 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/buttons-block/index.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/emoji-table/components/buttons-block/index.tsx
@@ -11,17 +11,19 @@ export type ButtonsBlockProps = {
   value: number;
   numPages: number;
   onChange: (page: number) => void;
+  className?: string;
 };
 
 const ButtonsBlock: React.FC<ButtonsBlockProps> = ({
   value,
   numPages,
   onChange,
+  className,
 }: ButtonsBlockProps) => {
   const { isMobile } = useMatchBreakpoints();
   const gap = isMobile ? "12px" : "17px";
   return (
-    <FlexGap gap={gap} justifyContent="center" marginTop="30px">
+    <FlexGap className={className} gap={gap} justifyContent="center">
       {/* First */}
       <StyledBtn onClick={() => onChange(1)}>
         <Text className="med-pixel-text" fontSize="48px" color="darkGray">
@@ -49,7 +51,7 @@ const ButtonsBlock: React.FC<ButtonsBlockProps> = ({
           {"{"}
         </Text>
 
-        <Arrow className="med-pixel-search" rotate="180deg" />
+        <Arrow className="med-pixel-search-arrows" rotate="180deg" />
 
         <Text className="med-pixel-text" fontSize="48px" color="darkGray">
           {"}"}
@@ -95,7 +97,7 @@ const ButtonsBlock: React.FC<ButtonsBlockProps> = ({
           {"{"}
         </Text>
 
-        <Arrow className="med-pixel-search" />
+        <Arrow className="med-pixel-search-arrows" />
 
         <Text className="med-pixel-text" fontSize="48px" color="darkGray">
           {"}"}
diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/index.tsx b/src/typescript/frontend/src/components/pages/home/components/emoji-table/index.tsx
index 97000d53d..48e61b471 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/index.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/emoji-table/index.tsx
@@ -103,74 +103,90 @@ const EmojiTable = (props: EmojiTableProps) => {
   });
 
   return (
-    <OutermostContainer>
-      <OuterContainer>
-        <InnerGridContainer>
-          <motion.div
-            key={rowLength}
-            id="emoji-grid-header"
-            exit={{
-              opacity: 0,
-              transition: {
-                duration: 0.5,
-                type: "just",
-              },
-            }}
-          >
-            <SearchWrapper>
-              <SearchBar geoblocked={props.geoblocked} />
-            </SearchWrapper>
-            <FilterOptionsWrapper>
-              <FilterOptions filter={sort ?? SortMarketsBy.MarketCap} onChange={handleSortChange} />
-            </FilterOptionsWrapper>
-          </motion.div>
-          {/* Each version of the grid must wait for the other to fully exit animate out before appearing.
-              This provides a smooth transition from grids of varying row lengths. */}
-          {markets.length > 0 ? (
-            <>
-              <AnimatePresence mode="wait">
-                <motion.div
-                  className="relative w-full h-full"
-                  id="emoji-grid"
-                  key={rowLength}
-                  style={{
-                    // We set these so the grid layout doesn't snap when the number of items per row changes.
-                    // This actually seems to work better than the css media queries, although I've left them in module.css
-                    // in case we want to use them for other things.
-                    maxWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
-                    minWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
-                  }}
-                  exit={{
-                    opacity: 0,
-                    transition: {
-                      duration: 0.35,
-                      type: "just",
-                    },
-                  }}
-                >
-                  <StyledGrid>
-                    {shouldAnimateGrid ? (
-                      <LiveClientGrid markets={markets} sortBy={sort} />
-                    ) : (
-                      <ClientGrid markets={markets} page={page} sortBy={sort} />
-                    )}
-                  </StyledGrid>
-                </motion.div>
-              </AnimatePresence>
-              <ButtonsBlock value={page} onChange={handlePageChange} numPages={pages} />
-            </>
-          ) : (
-            <div className="py-10">
-              <Link href={`${ROUTES.launch}?emojis=${emojis.join("")}`}>
-                <Text textScale="pixelHeading3" color="econiaBlue" className="uppercase">
-                  Click here to launch {emojis.join("")} !
-                </Text>
-              </Link>
-            </div>
-          )}
-        </InnerGridContainer>
-      </OuterContainer>
-    </OutermostContainer>
+    <>
+      <ButtonsBlock
+        className="mb-[30px]"
+        value={page}
+        onChange={handlePageChange}
+        numPages={pages}
+      />
+      <OutermostContainer>
+        <OuterContainer>
+          <InnerGridContainer>
+            <motion.div
+              key={rowLength}
+              id="emoji-grid-header"
+              exit={{
+                opacity: 0,
+                transition: {
+                  duration: 0.5,
+                  type: "just",
+                },
+              }}
+            >
+              <SearchWrapper>
+                <SearchBar geoblocked={props.geoblocked} />
+              </SearchWrapper>
+              <FilterOptionsWrapper>
+                <FilterOptions
+                  filter={sort ?? SortMarketsBy.MarketCap}
+                  onChange={handleSortChange}
+                />
+              </FilterOptionsWrapper>
+            </motion.div>
+            {/* Each version of the grid must wait for the other to fully exit animate out before appearing.
+                This provides a smooth transition from grids of varying row lengths. */}
+            {markets.length > 0 ? (
+              <>
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    className="relative w-full h-full"
+                    id="emoji-grid"
+                    key={rowLength}
+                    style={{
+                      // We set these so the grid layout doesn't snap when the number of items per row changes.
+                      // This actually seems to work better than the css media queries, although I've left them in module.css
+                      // in case we want to use them for other things.
+                      maxWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
+                      minWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
+                    }}
+                    exit={{
+                      opacity: 0,
+                      transition: {
+                        duration: 0.35,
+                        type: "just",
+                      },
+                    }}
+                  >
+                    <StyledGrid>
+                      {shouldAnimateGrid ? (
+                        <LiveClientGrid markets={markets} sortBy={sort} />
+                      ) : (
+                        <ClientGrid markets={markets} page={page} sortBy={sort} />
+                      )}
+                    </StyledGrid>
+                  </motion.div>
+                </AnimatePresence>
+                <ButtonsBlock
+                  className="mt-[30px]"
+                  value={page}
+                  onChange={handlePageChange}
+                  numPages={pages}
+                />
+              </>
+            ) : (
+              <div className="py-10">
+                <Link href={`${ROUTES.launch}?emojis=${emojis.join("")}`}>
+                  <Text textScale="pixelHeading3" color="econiaBlue" className="uppercase">
+                    Click here to launch {emojis.join("")} !
+                  </Text>
+                </Link>
+              </div>
+            )}
+          </InnerGridContainer>
+        </OuterContainer>
+      </OutermostContainer>
+    </>
   );
 };