Merge pull request #1088 from vr-varad/fix/catalog_btns

Fix: Update for Catalog Btns

Author: leecalcote

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -5,15 +5,10 @@ import { Box, Drawer, Typography } from '../../base';
 import { CloseIcon } from '../../icons';
 import { darkTeal } from '../../theme';
 import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
+import { CustomTooltip } from '../CustomTooltip';
 import { CloseBtn } from '../Modal';
 import CatalogFilterSidebarState from './CatalogFilterSidebarState';
-import {
-  FilterButton,
-  FilterDrawerDiv,
-  FilterText,
-  FiltersCardDiv,
-  FiltersDrawerHeader
-} from './style';
+import { FilterButton, FilterDrawerDiv, FiltersCardDiv, FiltersDrawerHeader } from './style';
 
 export interface FilterOption {
   value: string;
@@ -109,13 +104,14 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
         />
       </FiltersCardDiv>
       <FilterDrawerDiv>
-        <FilterButton variant="contained" onClick={handleDrawerOpen}>
-          <FilterAltIcon
-            style={{ height: '28px', width: '28px' }}
-            fill={theme.palette.text.default}
-          />
-          <FilterText>Filters</FilterText>
-        </FilterButton>
+        <CustomTooltip title="Filters" placement="bottom">
+          <FilterButton variant="contained" onClick={handleDrawerOpen}>
+            <FilterAltIcon
+              style={{ height: '28px', width: '28px' }}
+              fill={theme.palette.text.default}
+            />
+          </FilterButton>
+        </CustomTooltip>
 
         <Drawer
           anchor="bottom"

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

@@ -35,6 +35,26 @@ const PerformersSectionButton: React.FC<PerformersSectionButtonProps> = ({ open,
   );
 };
 
+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>
+      </span>
+    </CustomTooltip>
+  );
+};
+
 export const StateCardSekeleton = () => {
   return (
     <CardSkeleton>
@@ -53,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/StyledSearchBar/style.tsx

@@ -17,8 +17,5 @@ export const StyledSearchInput = styled(OutlinedInput)(({ style, theme }) => ({
 export const InputAdornmentEnd = styled(InputAdornment)(({ theme }) => ({
   borderLeft: `1px solid ${theme.palette.background.tertiary}`,
   height: '30px',
-  paddingLeft: '10px',
-  '@media (max-width: 590px)': {
-    paddingLeft: '0px'
-  }
+  paddingLeft: '10px'
 }));

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';