Add additional customizations for Card prop

- Change image visibility default
- Removable info panel
- Removable modal overlay button

src/components/card/Card.tsx

@@ -47,6 +47,9 @@ const Card = ({
   cacheImages,
   cachePath,
   handleFavorite,
+  notVisibleByDefault,
+  noInfoPanel,
+  noModalButton,
   ...rest
 }: any) => {
   const history = useHistory();
@@ -190,18 +193,16 @@ const Card = ({
 
   return (
     <>
-      <CardPanel
+      <CardPanel cardsize={size} style={rest.style}>
+        <Overlay cardsize={size}>
+          <ImgPanel
             tabIndex={0}
-        cardsize={size}
             onKeyDown={(e: any) => {
               if (e.key === ' ' || e.key === 'Enter') {
                 handleClick();
               }
             }}
-        style={rest.style}
           >
-        <Overlay cardsize={size}>
-          <ImgPanel>
             {rest.coverArt.match('placeholder') ? (
               <CardImgWrapper
                 id="placeholder-wrapper"
@@ -234,7 +235,7 @@ const Card = ({
                     alt="img"
                     effect="opacity"
                     cardsize={size}
-                    visibleByDefault={cacheImages}
+                    visibleByDefault={notVisibleByDefault ? false : cacheImages}
                     afterLoad={() => {
                       if (cacheImages) {
                         cacheImage(
@@ -285,7 +286,7 @@ const Card = ({
                     />
                   </CustomTooltip>
                 )}
-                {!rest.isModal && (
+                {!rest.isModal && !noModalButton && (
                   <CustomTooltip text="View in modal" delay={1000}>
                     <ModalViewOverlayButton
                       size={size <= 160 ? 'xs' : 'sm'}
@@ -299,6 +300,7 @@ const Card = ({
           </ImgPanel>
         </Overlay>
 
+        {!noInfoPanel && (
           <InfoPanel cardsize={size}>
             <InfoSpan>
               <CardTitleWrapper>
@@ -337,6 +339,7 @@ const Card = ({
               )}
             </InfoSpan>
           </InfoPanel>
+        )}
       </CardPanel>
     </>
   );

src/components/card/styled.tsx

@@ -59,10 +59,6 @@ export const CardPanel = styled(Panel)<Card>`
     filter: ${(props) => props.theme.other.card.hover.filter};
     transition: ${(props) => props.theme.other.card.hover.transition};
   }
-
-  &:focus-visible {
-    outline: 2px ${(props) => props.theme.colors.primary} solid;
-  }
 `;
 
 export const InfoPanel = styled(Panel)<Card>`
@@ -82,6 +78,11 @@ export const ImgPanel = styled(Panel)<Card>`
   border-left: ${(props) => props.theme.other.card.image.borderLeft} !important;
   border-radius: ${(props) => props.theme.other.card.image.borderRadius} !important;
 
+  &:focus-visible {
+    border-color: ${(props) => props.theme.colors.primary} !important;
+    outline: none !important;
+  }
+
   &:hover {
     border-color: ${(props) => props.theme.colors.primary} !important;
 
@@ -109,6 +110,7 @@ export const CardButton = styled(Button)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: 0s;
 `;
 
 export const CardTitleWrapper = styled.span`
@@ -156,7 +158,6 @@ export const CardSubtitle = styled.div<Card>`
 
 export const CardImg = styled.img<Card>`
   height: ${(props) => `${props.cardsize}px`};
-  width: ${(props) => `${props.cardsize}px`};
 `;
 
 export const LazyCardImg = styled(LazyLoadImage)<Card>`