fix: styling

Signed-off-by: Amit Amrutiya <[email protected]>

Author: amitamrutiya

src/custom/Carousel/style.tsx

@@ -36,7 +36,7 @@ export const CarouselContainer = styled('div')({
   overflowX: 'auto',
   scrollBehavior: 'smooth',
   scrollSnapType: 'x mandatory',
-  gap: '1rem',
+  gap: '0.5rem',
   paddingBottom: '1rem',
   width: '100%',
   msOverflowStyle: 'none',

src/custom/PerformersSection/PerformersSection.tsx

@@ -18,7 +18,6 @@ import {
   MainContainer,
   RepoTitle,
   StatsValue,
-  StatusLabel,
   StyledCard,
   Title,
   UserNameText
@@ -120,8 +119,7 @@ const StatCardComponent: React.FC<StatCardProps> = ({
   id,
   onCardClick,
   onIconClick,
-  onAuthorClick,
-  onStatusClick
+  onAuthorClick
 }) => {
   const handleCardClick = () => {
     onCardClick(pattern);
@@ -136,19 +134,14 @@ const StatCardComponent: React.FC<StatCardProps> = ({
     e.stopPropagation();
     onAuthorClick(userid);
   };
-
-  const handleStatusClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onStatusClick(status);
-  };
-
+  const theme = useTheme();
   return (
     <StyledCard elevation={0} status={status} onClick={handleCardClick}>
       <ContentWrapper cardId={id}>
         <HeaderSection>
           <HeaderTitle>{label}</HeaderTitle>
           <IconContainer onClick={(e) => handleIconClick(e, `${countKey}+desc`)}>
-            <LeaderBoardIcon {...iconXSmall} />
+            <LeaderBoardIcon {...iconXSmall} fill={theme.palette.common.black} />
           </IconContainer>
         </HeaderSection>
 
@@ -159,9 +152,6 @@ const StatCardComponent: React.FC<StatCardProps> = ({
           <UserNameText onClick={handleAuthorClick}>by {userName}</UserNameText>
         </Box>
       </ContentWrapper>
-      <StatusLabel labelType={status} onClick={handleStatusClick}>
-        {status}
-      </StatusLabel>
     </StyledCard>
   );
 };

src/custom/PerformersSection/styles.tsx

@@ -2,10 +2,6 @@ import { Box, Card, CardContent, Typography } from '../../base';
 import { DARK_TEAL, styled } from '../../theme';
 import { getCatalogCardBackground } from '../CustomCatalog/style';
 
-interface StatusLabelProps {
-  labelType?: 'community' | 'official' | string;
-}
-
 interface ContentWrapperProps {
   cardId?: string;
 }
@@ -90,8 +86,10 @@ export const Title = styled(Typography)(({ theme }) => ({
 }));
 
 export const StyledCard = styled(Card)<StyledCardProps>(({ theme }) => ({
-  width: '10rem',
-  borderRadius: '16px',
+  width: '200px',
+  margin: '0.5rem',
+  height: '100%',
+  borderRadius: '1rem',
   position: 'relative',
   overflow: 'hidden',
   transition: 'all 0.3s ease-in-out',
@@ -140,9 +138,7 @@ export const ContentWrapper = styled(CardContent)<ContentWrapperProps>(() => ({
   display: 'flex',
   flexDirection: 'column',
   padding: '12px',
-  '&:last-child': {
-    paddingBottom: '12px'
-  }
+  paddingBottom: '0px !important'
 }));
 
 export const HeaderSection = styled(Box)({
@@ -233,30 +229,6 @@ export const CardsContainer = styled(Box)(({ theme }) => ({
   paddingBottom: theme.spacing(3)
 }));
 
-export const StatusLabel = styled(Box)<StatusLabelProps>(({ labelType, theme }) => ({
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  background:
-    labelType === 'community'
-      ? 'rgba(122,132,142,.8)'
-      : labelType === 'official'
-        ? theme.palette.background.cta?.default
-        : theme.palette.text.brand,
-  color: labelType === 'official' ? 'black' : 'white',
-  paddingInline: '1rem',
-  borderTopRightRadius: '1rem',
-  fontSize: '0.75rem',
-  fontWeight: 'bold',
-  letterSpacing: '0.5px',
-  textTransform: 'lowercase',
-  zIndex: 2,
-  transition: 'all 0.3s ease',
-  '&:hover': {
-    filter: 'brightness(1.2)'
-  }
-}));
-
 export const ErrorContainer = styled(Box)(({ theme }) => ({
   padding: '1rem',
   color: theme.palette.text.error,