style: fix blog-article header structure (#1252)

jumperexchange · Sep 6, 2024 · a1b9707 · a1b9707
1 parent e1be850
commit a1b9707
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 68 deletions.
diff --git a/src/components/Blog/BlogArticle/BlogArticle.style.ts b/src/components/Blog/BlogArticle/BlogArticle.style.ts
@@ -170,11 +170,11 @@ export const BlogArticleContentContainer = styled(Box)(({ theme }) => ({
   },
 
   [theme.breakpoints.up('sm' as Breakpoint)]: {
-    margin: theme.spacing(4, 'auto'),
+    margin: theme.spacing(0, 'auto'),
     maxWidth: '100%',
   },
   [theme.breakpoints.up('md' as Breakpoint)]: {
-    margin: theme.spacing(8, 'auto'),
+    margin: theme.spacing(0, 'auto'),
     maxWidth: '100%',
   },
   [theme.breakpoints.up('lg' as Breakpoint)]: {
@@ -195,10 +195,10 @@ export const BlogMetaContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'flex-start',
-  marginTop: theme.spacing(8),
   gap: theme.spacing(2),
   flexDirection: 'column',
   [theme.breakpoints.up('sm' as Breakpoint)]: {
+    marginTop: theme.spacing(8),
     alignItems: 'center',
     flexDirection: 'row',
   },

diff --git a/src/components/Blog/BlogArticle/BlogArticle.tsx b/src/components/Blog/BlogArticle/BlogArticle.tsx
@@ -75,58 +75,72 @@ export const BlogArticle = ({
   return (
     <>
       <BlogArticleContainer>
-        <BlogArticleTopHeader>
-          {!!tags?.data[0]?.attributes.Title ? (
-            <Tag
-              color={tags.data[0]?.attributes.TextColor}
-              backgroundColor={tags.data[0]?.attributes.BackgroundColor}
-              component="span"
-              variant="bodyMediumStrong"
-              key={`blog-article-tag-${tags.data[0]?.id}`}
-            >
-              {tags.data[0].attributes?.Title}
-            </Tag>
-          ) : (
-            <BlogArticleHeaderTagSkeleton variant="rectangular" />
-          )}
-          {!!createdAt ? (
-            <BlogArticleHeaderMeta>
-              <BlogArticleHeaderMetaDate variant="bodyXSmall" as="span">
-                {formatDate(publishedAt || createdAt)}
-              </BlogArticleHeaderMetaDate>
-              <span>{t('blog.minRead', { minRead: minRead })}</span>
-            </BlogArticleHeaderMeta>
-          ) : (
-            <BlogArticleMetaSkeleton variant="text" />
-          )}
-        </BlogArticleTopHeader>
-        {title ? (
-          <BlogArticleTitle variant="h1">{title}</BlogArticleTitle>
-        ) : (
-          <BlogArticleTitleSkeleton />
-        )}
-        <BlogMetaContainer>
-          <BlogAuthorContainer>
-            {author?.data?.attributes?.Avatar.data?.attributes?.url ? (
-              <BlogAuthorAvatar
-                src={`${baseUrl}${author.data.attributes.Avatar.data.attributes.url}`}
-                alt="author-avatar"
-              />
+        <BlogArticleContentContainer sx={{ marginTop: 0 }}>
+          <BlogArticleTopHeader>
+            {tags?.data[0]?.attributes.Title ? (
+              <Tag
+                color={tags.data[0]?.attributes.TextColor}
+                backgroundColor={tags.data[0]?.attributes.BackgroundColor}
+                component="span"
+                variant="bodyMediumStrong"
+                key={`blog-article-tag-${tags.data[0]?.id}`}
+              >
+                {tags.data[0].attributes?.Title}
+              </Tag>
             ) : (
-              <BlogAuthorAvatarSkeleton variant="rounded" />
+              <BlogArticleHeaderTagSkeleton variant="rectangular" />
             )}
-            {author?.data ? (
-              <BlogArticlAuthorName variant="bodyXSmallStrong" component="span">
-                {author.data?.attributes.Name}
-              </BlogArticlAuthorName>
+            {createdAt ? (
+              <BlogArticleHeaderMeta>
+                <BlogArticleHeaderMetaDate variant="bodyXSmall" as="span">
+                  {formatDate(publishedAt || createdAt)}
+                </BlogArticleHeaderMetaDate>
+                <span>{t('blog.minRead', { minRead: minRead })}</span>
+              </BlogArticleHeaderMeta>
             ) : (
-              <BlogArticlAuthorNameSkeleton variant="text" />
+              <BlogArticleMetaSkeleton variant="text" />
             )}
-          </BlogAuthorContainer>
-          <ShareArticleIcons title={title} slug={slug} />
-        </BlogMetaContainer>
-      </BlogArticleContainer>
+          </BlogArticleTopHeader>
 
+          {title ? (
+            <BlogArticleTitle variant="h1">{title}</BlogArticleTitle>
+          ) : (
+            <BlogArticleTitleSkeleton />
+          )}
+
+          {subtitle ? (
+            <BlogArticleSubtitle variant="headerMedium" as="h4">
+              {subtitle}
+            </BlogArticleSubtitle>
+          ) : (
+            <BlogArticleSubtitleSkeleton variant="text" />
+          )}
+
+          <BlogMetaContainer>
+            <BlogAuthorContainer>
+              {author?.data?.attributes?.Avatar.data?.attributes?.url ? (
+                <BlogAuthorAvatar
+                  src={`${baseUrl}${author.data.attributes.Avatar.data.attributes.url}`}
+                  alt="author-avatar"
+                />
+              ) : (
+                <BlogAuthorAvatarSkeleton variant="rounded" />
+              )}
+              {author?.data ? (
+                <BlogArticlAuthorName
+                  variant="bodyXSmallStrong"
+                  component="span"
+                >
+                  {author.data?.attributes.Name}
+                </BlogArticlAuthorName>
+              ) : (
+                <BlogArticlAuthorNameSkeleton variant="text" />
+              )}
+            </BlogAuthorContainer>
+            <ShareArticleIcons title={title} slug={slug} />
+          </BlogMetaContainer>
+        </BlogArticleContentContainer>
+      </BlogArticleContainer>
       <BlogArticleImageContainer>
         {image?.data && (
           <BlogArticleImage
@@ -137,13 +151,6 @@ export const BlogArticle = ({
       </BlogArticleImageContainer>
       <BlogArticleContainer>
         <BlogArticleContentContainer>
-          {subtitle ? (
-            <BlogArticleSubtitle variant="headerMedium" as="h4">
-              {subtitle}
-            </BlogArticleSubtitle>
-          ) : (
-            <BlogArticleSubtitleSkeleton variant="text" />
-          )}
           {content ? (
             <CustomRichBlocks
               id={id}

diff --git a/tests/testData/commonFunctions.ts b/tests/testData/commonFunctions.ts
@@ -1,4 +1,5 @@
-import { expect , Page } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 export async function findTheBestRoute(page) {
   await page.getByRole('heading', { name: 'Find the best route' });
@@ -19,10 +20,10 @@ export async function tabInHeader(page, name: string) {
   await page.getByRole('tab', { name }).click();
 }
 
-export async function expectMenuToBeVisible(page){
+export async function expectMenuToBeVisible(page) {
   await expect(page.getByRole('menu')).toBeVisible();
 }
-export async function expectBackgroundColorToHaveCss(page, rgb: string){
+export async function expectBackgroundColorToHaveCss(page, rgb: string) {
   const backgroundColor = await page.locator('xpath=/html/body/div[1]');
   expect(backgroundColor).toHaveCSS(`background-color`, rgb);
 }
@@ -36,4 +37,4 @@ export async function itemInSettingsMenuToBeVisible(page, selector: string) {
     `xpath=//button[normalize-space(text())="${selector}"]`,
   );
   expect(itemName).toBeVisible();
-}
+}
diff --git a/tests/testData/values.json b/tests/testData/values.json
@@ -1,8 +1,8 @@
 {
-    "localJumperScanURL":"http://localhost:3000/scan/",
-    "localSuperfestURL":"http://localhost:3000/superfest/",
-    "xUrl": "https://x.com/JumperExchange",
-    "discordURL": "https://discord.com/invite/jumperexchange",
-    "exploreFluidURL":"https://jumper.exchange/superfest/rewards-from-fluid-on-base/",
-    "aerodromeQuestsURL":"http://localhost:3000/quests/rewards-from-aerodrome-on-base/"
-}
+  "localJumperScanURL": "http://localhost:3000/scan/",
+  "localSuperfestURL": "http://localhost:3000/superfest/",
+  "xUrl": "https://x.com/JumperExchange",
+  "discordURL": "https://discord.com/invite/jumperexchange",
+  "exploreFluidURL": "https://jumper.exchange/superfest/rewards-from-fluid-on-base/",
+  "aerodromeQuestsURL": "http://localhost:3000/quests/rewards-from-aerodrome-on-base/"
+}