style: UI improvements

safe-global · Jan 24, 2024 · 79b1982 · 79b1982
1 parent e125d07
commit 79b1982
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 87 deletions.
diff --git a/public/images/Blog/category-icon.svg b/public/images/Blog/category-icon.svg
diff --git a/src/components/Blog/BannerGradientForm/index.tsx b/src/components/Blog/BannerGradientForm/index.tsx
@@ -12,7 +12,7 @@ const BannerGradientForm = ({ title, subtitle }: { title: string; subtitle: stri
               {subtitle}
             </Typography>
           </Grid>
-          <Grid item xs={12} md={6} display="flex" alignItems="center">
+          <Grid item xs={12} md={5} display="flex" alignItems="center">
             <form
               className={css.form}
               onSubmit={(e) => {

diff --git a/src/components/Blog/BannerGradientForm/styles.module.css b/src/components/Blog/BannerGradientForm/styles.module.css
@@ -3,14 +3,15 @@
   border-radius: 24px;
   color: var(--mui-palette-text-dark);
   padding: 60px 24px;
-  margin-top: 60px;
+  margin-top: 120px;
   justify-content: space-between;
   position: relative;
   background: rgba(15, 255, 128, 1);
   background-image: linear-gradient(-45deg, rgba(15, 255, 128, 1) 0%, rgba(94, 221, 255, 1) 100%);
 }
 
 .form {
+  width: 100%;
   margin: 0px;
   display: flex;
   flex-direction: column;

diff --git a/src/components/Blog/BlogHome/index.tsx b/src/components/Blog/BlogHome/index.tsx
@@ -33,7 +33,7 @@ const BlogHome = (props: BlogHomeProps) => {
 
         <FeaturedPost {...featuredPost} />
 
-        <Typography variant="h3" mt={{ xs: '60px', md: '100px' }} mb={4}>
+        <Typography variant="h2" mt={{ xs: '60px', md: '100px' }} mb={4}>
           Trending
         </Typography>
         <Grid container spacing={{ xs: '30px', md: 2 }}>

diff --git a/src/components/Blog/Card/index.tsx b/src/components/Blog/Card/index.tsx
@@ -1,8 +1,9 @@
 import Link from 'next/link'
-import { Typography } from '@mui/material'
-import css from '../styles.module.css'
+import { Box, Typography } from '@mui/material'
+import css from './styles.module.css'
 import { calculateReadingTime } from '@/components/Blog/utils/calculateReadingTime'
 import Tags from '@/components/Blog/Tags'
+import CategoryIcon from '@/public/images/Blog/category-icon.svg'
 
 const Card = (props: any) => {
   const { slug, title, content, coverImage, tags, category } = props.fields
@@ -19,18 +20,23 @@ const Card = (props: any) => {
       <img src={image.src} alt={image.alt} className={css.cardImage} />
 
       <div className={css.cardBody}>
-        <div className={css.metaStart}>
-          <Typography>#{category}</Typography>
+        <div className={css.meta}>
+          <Typography className={css.category}>
+            <CategoryIcon />
+            {category}
+          </Typography>
           <Typography variant="caption">{calculateReadingTime(content)}min</Typography>
         </div>
 
-        <div className={css.cardTitle}>
+        <div className={css.title}>
           <Typography variant="h4">{title}</Typography>
         </div>
 
         <span style={{ flexGrow: 1 }} />
 
-        <Tags tags={tags} />
+        <Box mt={2}>
+          <Tags tags={tags} />
+        </Box>
       </div>
     </div>
   )

diff --git a/src/components/Blog/Card/styles.module.css b/src/components/Blog/Card/styles.module.css
@@ -0,0 +1,61 @@
+.postCard {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  border: 1px solid var(--mui-palette-border-main);
+  overflow: hidden;
+  transition-duration: var(--transition-duration);
+}
+
+.postCard:hover {
+  border: 1px solid var(--mui-palette-primary-main);
+}
+
+.postCard:hover .cardImage {
+  border-bottom: 1px solid var(--mui-palette-primary-main);
+}
+
+.link {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.cardImage {
+  height: 200px;
+  object-fit: cover;
+  object-position: center left;
+  border-bottom: 1px solid var(--mui-palette-border-main);
+  transition-duration: var(--transition-duration);
+}
+
+.cardBody {
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.meta {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.category {
+  display: flex;
+  gap: 4px;
+  align-items: baseline;
+}
+
+.title {
+  margin-top: 16px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
diff --git a/src/components/Blog/FeaturedPost/index.tsx b/src/components/Blog/FeaturedPost/index.tsx
@@ -1,31 +1,41 @@
 import Tags from '@/components/Blog/Tags'
-import { Grid, Link, Typography } from '@mui/material'
+import { Box, Grid, Link, Typography } from '@mui/material'
 import css from './styles.module.css'
 import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate'
 import { calculateReadingTime } from '@/components/Blog/utils/calculateReadingTime'
 import { type BlogPostEntry } from '@/components/Blog/Post'
+import { isAsset, isEntryTypeTag } from '@/lib/typeGuards'
 
 const FeaturedPost = (props: BlogPostEntry) => {
   const { slug, coverImage, category, date, title, excerpt, tags, content } = props.fields
 
   return (
     <Grid container columnSpacing="60px" rowGap={3} mt="60px">
       <Grid item md={7}>
-        <Link href={`/blog/${slug}`}>
-          <img src={image.src} alt={image.alt} className={css.image} />
-        </Link>
+        {isAsset(coverImage) && coverImage.fields.file?.url ? (
+          <Link href={`/blog/${slug}`}>
+            <img src={coverImage.fields.file.url} alt={coverImage.fields.title} className={css.image} />
+          </Link>
+        ) : undefined}
       </Grid>
+
       <Grid item md={5} className={css.body}>
         <div className={css.meta}>
-          <Typography variant="h4">#{category}</Typography>
-          <Typography variant="caption">{calculateReadingTime(content)}min</Typography>
+          <div className={css.metaStart}>
+            <Typography variant="h4">#{category}</Typography>
+            <Typography variant="caption">{calculateReadingTime(content)}min</Typography>
+          </div>
           <Typography variant="caption">{formatBlogDate(date)}</Typography>
         </div>
         <Typography variant="h3" className={css.title}>
-          {title}
+          <Link href={`/blog/${slug}`}>{title}</Link>
         </Typography>
         <Typography className={css.excerpt}>{excerpt}</Typography>
-        <Tags tags={tags} />
+
+        <span style={{ flexGrow: 1 }} />
+        <Box mt={2}>
+          <Tags tags={tags.filter(isEntryTypeTag)} />
+        </Box>
       </Grid>
     </Grid>
   )

diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css
@@ -5,6 +5,7 @@
   border: 1px solid transparent;
   border-radius: 6px;
   transition-duration: var(--transition-duration);
+  border: 1px solid var(--mui-palette-border-main);
 }
 
 .image:hover {
@@ -24,11 +25,29 @@
   align-items: baseline;
 }
 
+.metaStart {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+  align-items: baseline;
+}
+
 .title,
 .excerpt {
   margin-top: 16px;
 }
 
+.title a {
+  color: var(--mui-palette-text-primary);
+  text-decoration-color: var(--mui-palette-background-default);
+  transition-duration: var(--transition-duration);
+}
+
+.title a:hover {
+  color: var(--mui-palette-primary-main);
+  text-decoration-color: var(--mui-palette-primary-main);
+}
+
 @media (min-width: 900px) {
   .title {
     margin-top: 24px;

diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { Container, Divider, Grid, Typography } from '@mui/material'
+import { Box, Container, Divider, Grid, Typography } from '@mui/material'
 import { type Entry } from 'contentful'
 import { type TypePostSkeleton } from '@/contentful/types'
 import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate'
@@ -13,6 +13,7 @@ import Authors from '@/components/Blog/Authors'
 import RichText from '@/components/Campaign/RichText'
 import ContentTable from '@/components/Blog/ContentTable'
 import RelatedPosts from '@/components/Blog/RelatedPosts'
+import CategoryIcon from '@/public/images/Blog/category-icon.svg'
 import css from '../styles.module.css'
 
 export type BlogPostEntry = Entry<TypePostSkeleton, undefined, string>
@@ -37,7 +38,10 @@ const BlogPost = ({ blogPost }: { blogPost: BlogPostEntry }) => {
 
         <div className={css.meta}>
           <div className={css.metaStart}>
-            <Typography>#{category}</Typography>
+            <Typography className={css.category}>
+              <CategoryIcon />
+              {category}
+            </Typography>
             <Typography variant="caption">{calculateReadingTime(content)}min</Typography>
           </div>
           <Typography variant="caption">{formatBlogDate(date)}</Typography>
@@ -51,7 +55,9 @@ const BlogPost = ({ blogPost }: { blogPost: BlogPostEntry }) => {
           {excerpt}
         </Typography>
 
-        <Tags tags={tags.filter(isEntryTypeTag)} />
+        <Box mt={{ xs: 2, md: 3 }}>
+          <Tags tags={tags.filter(isEntryTypeTag)} />
+        </Box>
 
         <Authors authors={authors.filter(isEntryTypeAuthor)} />
 

diff --git a/src/components/Blog/ProgressBar/index.tsx b/src/components/Blog/ProgressBar/index.tsx
@@ -7,7 +7,7 @@ const ProgressBar = () => {
 
   return (
     <div className={css.progressBar}>
-      <LinearProgress variant="determinate" color="primary" value={readProgress} style={{ left: '0' }} />
+      <LinearProgress variant="determinate" value={readProgress} className={css.progressBar} />
     </div>
   )
 }

diff --git a/src/components/Blog/SearchFilterResults/index.tsx b/src/components/Blog/SearchFilterResults/index.tsx
@@ -117,16 +117,18 @@ const SearchFilterResults = ({ allPosts, categories }: { allPosts: BlogPostEntry
       </Grid>
 
       {visibleResults.length > 0 ? (
-        <Grid container className={css.resultsWrapper}>
-          {visibleResults.map((post: any, index: number) => (
-            // TODO: remove the index when enough posts are available
-            <Grid key={`${post.fields.slug}-$${index}`} item xs={12} md={4}>
-              <Card {...post} />
-            </Grid>
-          ))}
+        <>
+          <Grid container className={css.resultsWrapper}>
+            {visibleResults.map((post: any, index: number) => (
+              // TODO: remove the index when enough posts are available
+              <Grid key={`${post.fields.slug}-$${index}`} item xs={12} md={4}>
+                <Card {...post} />
+              </Grid>
+            ))}
+          </Grid>
 
           {shouldShowMoreButton && (
-            <Grid item xs={12} display="flex" justifyContent="center">
+            <Box display="flex" justifyContent="center" mt="60px">
               <NextLink
                 href={{ query: { [PAGE_QUERY_PARAM]: page + 1 } }}
                 shallow
@@ -137,9 +139,9 @@ const SearchFilterResults = ({ allPosts, categories }: { allPosts: BlogPostEntry
                   Show more
                 </Button>
               </NextLink>
-            </Grid>
+            </Box>
           )}
-        </Grid>
+        </>
       ) : (
         <div style={{ textAlign: 'center' }}>
           <SearchIcon />

diff --git a/src/components/Blog/SearchFilterResults/styles.module.css b/src/components/Blog/SearchFilterResults/styles.module.css
@@ -2,7 +2,7 @@
   border-radius: 6px;
   border: 1px solid var(--mui-palette-border-light);
   overflow: hidden;
-  margin-top: 30px;
+  margin-top: 40px;
 }
 
 .filterCard {
@@ -22,7 +22,7 @@
 }
 
 .resultsWrapper {
-  margin-top: 30px;
+  margin-top: 60px;
   gap: 30px;
 }