Merge pull request #755 from amitamrutiya/fix-catalog-card

Add some of the styling in custom catalog card
layer5io · Oct 10, 2024 · ec97bc5 · ec97bc5
2 parents 8895222 + 7224e57
commit ec97bc5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/custom-card.tsx
@@ -1,5 +1,5 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { Avatar, Typography, styled } from '@mui/material';
+import { Avatar, styled } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { Grid } from '../../base';
 import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
@@ -27,7 +27,8 @@ import {
   StyledInnerClassWrapper,
   TechnologiesSection,
   TechnologyText,
-  VersionTag
+  VersionDiv,
+  VersionText
 } from './style';
 
 export const DesignCardUrl = styled('a')(() => ({
@@ -166,6 +167,18 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (!shouldFlip) {
+    return (
+      <DesignCard shouldFlip={shouldFlip} isDetailed={isDetailed} outerStyles={outerStyles}>
+        <DesignInnerCard shouldFlip={shouldFlip} className="innerCard">
+          <CardFront shouldFlip={shouldFlip} isDetailed={isDetailed}>
+            {children}
+          </CardFront>
+        </DesignInnerCard>
+      </DesignCard>
+    );
+  }
+
   return (
     <DesignCardUrl href={cardLink} target="_blank" rel="noreferrer">
       <DesignCard shouldFlip={shouldFlip} isDetailed={isDetailed} outerStyles={outerStyles}>
@@ -329,11 +342,10 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                   </Grid>
                 </DesignDetailsDiv>
               )}
-
               {cardVersion && (
-                <VersionTag>
-                  <Typography variant="body2">v{cardVersion}</Typography>
-                </VersionTag>
+                <VersionDiv>
+                  <VersionText>v{cardVersion}</VersionText>
+                </VersionDiv>
               )}
             </CardBack>
           )}

diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx
@@ -212,6 +212,31 @@ export const VersionTag = styled('div')(({ theme }) => ({
   maxWidth: 'fit-content'
 }));
 
+export const VersionDiv = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  fontSize: '0.75',
+  color: theme.palette.text.constant?.white,
+  position: 'absolute',
+  bottom: '16px',
+  left: '16px',
+  borderRadius: '4px',
+  background: theme.palette.background.supplementary,
+  justifyContent: 'center'
+}));
+
+export const VersionText = styled('p')(({ theme }) => ({
+  fontSize: '0.75rem',
+  margin: '0',
+  padding: '0.25rem .5rem',
+  lineHeight: '1.5',
+  textTransform: 'lowercase',
+  fontWeight: '600',
+  borderRadius: '4.05px',
+  color: theme.palette.text.constant?.white
+}));
+
 export const FlipCard = styled('div')(() => ({
   perspective: '1000px',
   '&:hover .flipper': {
@@ -281,7 +306,6 @@ export const ProfileSection = styled('div')({
 });
 
 export const TechnologiesSection = styled('div')(() => ({
-  marginBottom: '16px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',