Figure out more stuff

src/components/ShoeCard/ShoeCard.js

@@ -35,25 +35,15 @@ const ShoeCard = ({
     <Link href={`/shoe/${slug}`}>
       <Wrapper>
         <ImageWrapper>
-          <ImageSizer />
           <Image alt="" src={imageSrc} />
-          {variant === 'on-sale' && <SaleFlag>Sale</SaleFlag>}
-          {variant === 'new-release' && (
-            <NewReleaseFlag>Just Released!</NewReleaseFlag>
-          )}
         </ImageWrapper>
         <Spacer size={12} />
         <Row>
           <Name>{name}</Name>
-          <Price isOnSale={typeof salePrice === 'number'}>
-            {formatPrice(price)}
-          </Price>
+          <Price>{formatPrice(price)}</Price>
         </Row>
         <Row>
           <ColorInfo>{pluralize('Color', numOfColors)}</ColorInfo>
-          {variant === 'on-sale' && (
-            <SalePrice>{formatPrice(salePrice)}</SalePrice>
-          )}
         </Row>
       </Wrapper>
     </Link>
@@ -63,7 +53,6 @@ const ShoeCard = ({
 const Link = styled.a`
   text-decoration: none;
   color: inherit;
-  margin-bottom: 24px;
 `;
 
 const Wrapper = styled.article``;
@@ -72,21 +61,7 @@ const ImageWrapper = styled.div`
   position: relative;
 `;
 
-const Image = styled.img`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 16px 16px 4px 4px;
-`;
-
-const ImageSizer = styled.div`
-  width: 100%;
-  height: 0;
-  padding-bottom: ${(312 / 340) * 100}%;
-`;
+const Image = styled.img``;
 
 const Row = styled.div`
   font-size: 1rem;
@@ -97,10 +72,7 @@ const Name = styled.h3`
   color: ${COLORS.gray[900]};
 `;
 
-const Price = styled.span`
-  color: ${(p) => (p.isOnSale ? COLORS.gray[700] : COLORS.gray[900])};
-  text-decoration: ${(p) => p.isOnSale && 'line-through'};
-`;
+const Price = styled.span``;
 
 const ColorInfo = styled.p`
   color: ${COLORS.gray[700]};
@@ -111,23 +83,4 @@ const SalePrice = styled.span`
   color: ${COLORS.primary};
 `;
 
-const Flag = styled.div`
-  position: absolute;
-  top: 12px;
-  right: -4px;
-  padding: 0 10px;
-  border-radius: 2px;
-  color: ${COLORS.white};
-  font-weight: ${WEIGHTS.medium};
-  line-height: 32px;
-  font-size: 0.875rem;
-`;
-
-const SaleFlag = styled(Flag)`
-  background-color: ${COLORS.primary};
-`;
-const NewReleaseFlag = styled(Flag)`
-  background-color: ${COLORS.secondary};
-`;
-
 export default ShoeCard;