Merge pull request #1090 from vr-varad/fix/catalog_btns_2

Fix: Catalog Btns Fix

Author: leecalcote

src/custom/PerformersSection/PerformersSection.tsx

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 import { Box, Button } from '../../base';
 import { iconXSmall } from '../../constants/iconsSizes';
 import { LeaderBoardIcon, TropyIcon } from '../../icons';
-import { useTheme } from '../../theme';
+import { useMediaQuery, useTheme } from '../../theme';
 import { Carousel } from '../Carousel';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
@@ -228,6 +228,7 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
 }) => {
   const theme = useTheme();
   const { queries, isLoading, hasError } = useMetricQueries(useGetCatalogFilters);
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const stats = useMemo(
     () =>
@@ -265,20 +266,31 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
               style={{
                 height: '2rem',
                 width: '2rem',
-                color: theme.palette.icon.secondary
+                color: theme.palette.icon.secondary,
+                display: smallScreen ? 'none' : 'inline-flex'
               }}
             />
           </Box>
           {onOpenLeaderboard && (
-            <Button
-              variant="contained"
-              onClick={() => onOpenLeaderboard()}
-              sx={{
-                display: { xs: 'none', md: 'inline-flex' }
-              }}
-            >
-              Open Leaderboard
-            </Button>
+            <div>
+              <Button variant="contained" onClick={() => onOpenLeaderboard()}>
+                <TropyIcon
+                  style={{
+                    height: '2rem',
+                    width: '2rem',
+                    display: smallScreen ? 'inline-flex' : 'none'
+                  }}
+                />
+                <p
+                  style={{
+                    margin: 0,
+                    display: smallScreen ? 'none' : 'inline-flex'
+                  }}
+                >
+                  Open Leaderboard
+                </p>
+              </Button>
+            </div>
           )}
         </TitleBox>
         <CardsContainer>

src/custom/PerformersSection/PerformersToogleButton.tsx

@@ -10,6 +10,10 @@ interface PerformersSectionButtonProps {
   handleClick: () => void;
 }
 
+interface OpenLeaderBoardButtonProps {
+  handleClick: () => void;
+}
+
 const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open, handleClick }) => {
   const theme = useTheme();
 
@@ -35,22 +39,20 @@ const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open,
   );
 };
 
-const OpenLeaderBoardButton: React.FC<PerformersSectionButtonProps> = ({ handleClick }) => {
+const OpenLeaderBoardButton: React.FC<OpenLeaderBoardButtonProps> = ({ handleClick }) => {
   return (
     <CustomTooltip title={'Open Leaderboard'} placement="bottom">
-      <span>
-        <Button
-          variant="contained"
-          onClick={handleClick}
-          sx={{
-            height: '3.7rem',
-            padding: '0.3rem',
-            display: { xs: 'inline-flex', md: 'none' }
-          }}
-        >
-          <TropyIcon style={{ height: '2rem', width: '2rem' }} />
-        </Button>
-      </span>
+      <Button
+        variant="contained"
+        onClick={handleClick}
+        sx={{
+          height: '3.7rem',
+          padding: '0.3rem',
+          display: { xs: 'inline-flex', sm: 'none' }
+        }}
+      >
+        <TropyIcon style={{ height: '2rem', width: '2rem' }} />
+      </Button>
     </CustomTooltip>
   );
 };