fix: css gap

fractaldotbox · Sep 25, 2024 · 0b5652c · 0b5652c
1 parent a75d18f
commit 0b5652c
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 33 deletions.
diff --git a/page-container/case-study-page/CaseStudiesPageContainer.tsx b/page-container/case-study-page/CaseStudiesPageContainer.tsx
@@ -41,7 +41,7 @@ const CaseStudiesPage = ({ articleCards }: { articleCards: ArticleCardProps[] })
         <h2 className="text-4xl font-bold p-4 m-4">
           Case Studies
         </h2>
-        <ArticleCardList articleCards={articleCards} className={classes.caseStudyList} />
+        <ArticleCardList articleCards={articleCards} className="flex flex-row w-full gap-2" />
         <Footer className={classes.footer} />
       </Grid>
     </Box>

diff --git a/page-container/index-page/CaseStudies.tsx b/page-container/index-page/CaseStudies.tsx
@@ -62,7 +62,7 @@ const useStyle = makeStyles((theme) => ({
 const CaseStudies = ({ className }: Partial<{ className: string }>) => {
   const classes = useStyle();
   return (
-    <Grid id="case-studies" container component="article" className={className}>
+    <Grid id="case-studies" container component="article" className="mt-4">
       <Grid item xs={12}>
         <Typography className="mb-3" variant="h2" color="textSecondary">
           Case Studies

diff --git a/page-container/index-page/ClientCompanies.tsx b/page-container/index-page/ClientCompanies.tsx
@@ -42,13 +42,13 @@ const ClientCompanies = ({ className }: Partial<{ className: string }>) => {
   const { title, brands } = content;
   const classes = useStyle();
   return (
-    <Box component="article">
+    <div>
       <LogoList
         className={classes.listRoot}
         title={title}
         brands={brands}
       />
-    </Box>
+    </div>
   );
 };
 export default ClientCompanies;
diff --git a/page-container/index-page/IndexPageContainer.tsx b/page-container/index-page/IndexPageContainer.tsx
@@ -132,9 +132,9 @@ const IndexPageContainer = () => {
       <Box mx={{ xs: '5.8%', md: '10%' }}>
         <Grid container direction="column">
           <Header isIndexPage />
-          <HeroContent className={classes.heroContent} />
-          <OurCompany className={classes.ourCompany} />
-          <ClientCompanies className={classes.clientCompanies} />
+          <HeroContent />
+          <OurCompany />
+          <ClientCompanies />
           {/* <SoftwareDelivery className={classes.softwareDelivery} /> */}
         </Grid>
       </Box>

diff --git a/page-container/index-page/Testimonial.tsx b/page-container/index-page/Testimonial.tsx
@@ -61,7 +61,7 @@ const Testimonial = ({ className }: Partial<{ className: string }>) => {
   const classes = useStyle();
 
   return (
-    <Grid component="article" container justify="space-around" className={[className, classes.root].join(' ')}>
+    <Grid component="article" container justify="space-around">
       <Grid item sm={12} className={classes.title}>
         <Typography variant="h2" color="primary">
           Testimonial

diff --git a/shared/components/ArticleCard.tsx b/shared/components/ArticleCard.tsx
@@ -33,21 +33,23 @@ const ArticleCard = ({
 }: ArticleCardProps) => {
   const classes = useStyles();
   return (
-    <a href={link} title={`go to ${title} article page`}>
-      <Grid component="article" container direction="column" className={classes.root}>
-        <Grid item className={classes.image}>
-          <img src={imgSrc} alt={title} width="448" height="266" loading="lazy" />
-        </Grid>
-        <Grid item className={classes.title}>
-          <Typography variant="h3">{title}</Typography>
-        </Grid>
-        <Grid item>
-          <Typography variant="body2" color="secondary" className={classes.content}>
-            {content}
-          </Typography>
-        </Grid>
-      </Grid>
-    </a>
+    <div className="p-4 w-1/4">
+      <a href={link} title={`go to ${title} article page`}>
+        <div className="card bg-base-300 p-4 rounded-3xl" role="article">
+          <div className="w-full" >
+            <img src={imgSrc} alt={title} loading="lazy" />
+          </div>
+          <div className={classes.title}>
+            <h3 className="text-3xl">{title}</h3>
+          </div>
+          <div>
+            <p >
+              {content}
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
   );
 };
 

diff --git a/shared/components/ArticleCardList.tsx b/shared/components/ArticleCardList.tsx
@@ -28,21 +28,19 @@ const ArticleCardList = ({ articleCards, className }: ArticleCardListProps) => {
   const classes = useStyles();
   const items = useMemo(
     () => articleCards.map((articleCard) => (
-      <div className="w-80">
-        <ArticleCard
-          link={articleCard.link}
-          title={articleCard.title}
-          imgSrc={articleCard.imgSrc}
-          content={articleCard.content}
-        />
-      </div>
+      <ArticleCard
+        link={articleCard.link}
+        title={articleCard.title}
+        imgSrc={articleCard.imgSrc}
+        content={articleCard.content}
+      />
     )),
     [articleCards, classes]
   );
   return (
-    <Grid className="flex flex-wrap gap-4 m-auto justify-center">
+    <div className="flex flex-row flex-wrap gap-4 justify-center">
       {items}
-    </Grid>
+    </div>
   );
 };