Update

Signed-off-by: vr-varad <[email protected]>

Author: vr-varad

src/custom/PerformersSection/PerformersSection.tsx

@@ -270,7 +270,13 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
             />
           </Box>
           {onOpenLeaderboard && (
-            <Button variant="contained" onClick={() => onOpenLeaderboard()}>
+            <Button
+              variant="contained"
+              onClick={() => onOpenLeaderboard()}
+              sx={{
+                display: { xs: 'none', md: 'inline-flex' }
+              }}
+            >
               Open Leaderboard
             </Button>
           )}

src/custom/PerformersSection/PerformersToogleButton.tsx

@@ -21,11 +21,32 @@ const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open,
           onClick={handleClick}
           sx={{
             height: '3.7rem',
-            padding: '0.3rem'
+            padding: '0.3rem 1rem 0.3rem 0.3rem'
           }}
           style={{
             backgroundColor: open ? undefined : theme.palette.background.constant?.disabled
           }}
+        >
+          <TropyIcon style={{ height: '2rem', width: '2rem', marginRight: '10px' }} />
+          {open ? 'Hide Performers' : 'Show Performers'}
+        </Button>
+      </span>
+    </CustomTooltip>
+  );
+};
+
+const OpenLeaderBoardButton: React.FC<PerformersSectionButtonProps> = ({ 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>
@@ -52,4 +73,4 @@ export const StateCardSekeleton = () => {
     </CardSkeleton>
   );
 };
-export default PerformersSectionButton;
+export { OpenLeaderBoardButton, PerformersSectionButton };

src/custom/PerformersSection/index.ts

@@ -1,3 +1,3 @@
 import PerformersSection from './PerformersSection';
-import PerformersSectionButton from './PerformersToogleButton';
-export { PerformersSection, PerformersSectionButton };
+import { OpenLeaderBoardButton, PerformersSectionButton } from './PerformersToogleButton';
+export { OpenLeaderBoardButton, PerformersSection, PerformersSectionButton };

src/custom/index.tsx

@@ -60,7 +60,11 @@ export { LearningContent } from './LearningContent';
 export { NavigationNavbar } from './NavigationNavbar';
 export { Note } from './Note';
 export { Panel } from './Panel';
-export { PerformersSection, PerformersSectionButton } from './PerformersSection';
+export {
+  OpenLeaderBoardButton,
+  PerformersSection,
+  PerformersSectionButton
+} from './PerformersSection';
 export { SetupPreReq } from './SetupPrerequisite';
 export { StyledChapter } from './StyledChapter';
 export { StyledSearchBar } from './StyledSearchBar';