improve components

src/components/Collections/CollectionBar.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react';
 import { Collection, CollectionSummaries } from 'types/collection';
 import constants from 'utils/strings/constants';
 import { ALL_SECTION } from 'constants/collection';
-import { Link, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import {
     Hider,
     CollectionBarWrapper,
@@ -15,6 +15,7 @@ import {
 import CollectionCardWithActiveIndicator from 'components/Collections/CollectionCardWithActiveIndicator';
 import useComponentScroll from 'hooks/useComponentScroll';
 import useWindowSize from 'hooks/useWindowSize';
+import LinkButton from 'components/pages/gallery/LinkButton';
 
 interface IProps {
     collections: Collection[];
@@ -68,9 +69,9 @@ export default function CollectionBar(props: IProps) {
             <PaddedSpaceBetweenFlex>
                 <Typography>{constants.ALBUMS}</Typography>
                 {hasScrollBar && (
-                    <Link component="button" onClick={showAllCollections}>
+                    <LinkButton onClick={showAllCollections}>
                         {constants.VIEW_ALL_ALBUMS}
-                    </Link>
+                    </LinkButton>
                 )}
             </PaddedSpaceBetweenFlex>
             <CollectionBarWrapper>

src/components/Sidebar/Button.tsx

@@ -1,20 +1,12 @@
 import React from 'react';
-import { Button } from '@mui/material';
+import { Button, ButtonProps } from '@mui/material';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 interface IProps {
     children: any;
     bgDark?: boolean;
     hideArrow?: boolean;
     onClick: () => void;
-    color?:
-        | 'inherit'
-        | 'danger'
-        | 'primary'
-        | 'secondary'
-        | 'success'
-        | 'error'
-        | 'info'
-        | 'warning';
+    color?: ButtonProps['color'];
 }
 export default function SidebarButton({
     children,
@@ -34,7 +26,6 @@ export default function SidebarButton({
                 bgcolor: bgDark && 'grey.800',
                 padding: '10px',
                 borderRadius: '8px',
-                textTransform: 'none',
                 fontSize: '18px',
             }}>
             {children}