Merge pull request #801 from TrustlessComputer/chore/fix-css

fix css explore page
TrustlessComputer · Sep 10, 2024 · ac934f6 · ac934f6
2 parents 5294924 + 2688ca9
commit ac934f6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/modules/ExploreModule/components/DappCard/index.tsx b/src/modules/ExploreModule/components/DappCard/index.tsx
@@ -4,6 +4,7 @@ import Fade from '@interactive/Fade';
 import ImagePlaceholder from '@components/ImagePlaceholder';
 import Link from 'next/link';
 import cn from 'classnames';
+import { Box } from '@chakra-ui/react';
 
 export type TDappCardProps = {
   id?: string;
@@ -24,7 +25,6 @@ export default function DappCard({
   idx,
   ...props
 }: TDappCardProps): React.JSX.Element {
-  console.log('props.bgColor', props.bgColor);
   const { link } = props;
   return (
     <Fade delayEnter={0.5 + idx / 10}>
@@ -36,14 +36,19 @@ export default function DappCard({
         })}
         style={{ background: props.bgColor }}
       >
-        <div className={s.wrapperDappCard_image}>
+        <Box
+          className={cn(s.wrapperDappCard_image, {
+            [s.wrapperDappCard_image__first]: props.title === 'Bitcoin Wars',
+          })}
+          aspectRatio={props.title === 'Bitcoin Wars' ? '17  / 15' : 'auto'}
+        >
           <ImagePlaceholder
             src={props.image}
             alt={'dapp1'}
             width={448}
             height={432}
           />
-        </div>
+        </Box>
         <div className={s.wrapperDappCardContent}>
           <p className={s.wrapperDappCard_heading}>{props.title}</p>
           <p

diff --git a/src/modules/ExploreModule/components/DappCard/styles.module.scss b/src/modules/ExploreModule/components/DappCard/styles.module.scss
@@ -10,10 +10,18 @@
   flex-direction: column;
 
   &_image {
-    max-height: 300px;
+    // max-height: 300px;
     width: 100%;
     flex: 1;
 
+    &__first {
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
 
     :global(.imagePreload) {
       // display: grid;
@@ -31,12 +39,11 @@
   &_heading {
     color: #FFF;
     font-family: "SF Pro Display";
-    font-size: 14px;
+    font-size: 28px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 120%;
-    /* 16.8px */
-    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 110%;
+    /* 30.8px */
   }
 
   &_decs {