From 64a6e6ab20e2781f42dedfdcb7c1d2ea4c82a730 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 17 Oct 2022 13:08:24 +0300
Subject: [PATCH] resolve the margin of topic in the article info and article
 content pages

---
 src/components/fetchAnArticle/AnArticle.tsx     | 17 +++++------------
 src/components/fetchAnArticle/AnArticleBody.tsx |  4 ++--
 .../fetchAnArticle/AskeletonArticle.tsx         |  2 +-
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/fetchAnArticle/AnArticle.tsx b/src/components/fetchAnArticle/AnArticle.tsx
index 11c8d26..73a8f91 100644
--- a/src/components/fetchAnArticle/AnArticle.tsx
+++ b/src/components/fetchAnArticle/AnArticle.tsx
@@ -33,7 +33,7 @@ const AnArticle = () => {
           <AskeletonArticle />
         ) : (
           <>
-            <ArticlePart.Article.Breadcumbs>
+            <ArticlePart.Article.Breadcumbs className="py-4">
               {article?.topic}
             </ArticlePart.Article.Breadcumbs>
             <div className="flex flex-col gap-4 pb-4">
@@ -52,25 +52,18 @@ const AnArticle = () => {
             />
             {article?.tags && (
               <div className="keywords my-10 flex flex-col gap-2">
-                <Typography
-                  className="text-2xl"
-                  fontWeightVariant="semibold"
-                >
-                  {t('articlePage.keywords')}
+                <Typography className="text-2xl" fontWeightVariant="semibold">
+                  {t("articlePage.keywords")}
                 </Typography>
 
-
                 <ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
                   {article?.tags}
                 </ArticlePart.Article.Keywords>
               </div>
             )}
             <div className="abstract my-10 flex flex-col gap-2">
-              <Typography
-                className="text-2xl"
-                fontWeightVariant="semibold"
-              >
-                {t('articlePage.abstract')}
+              <Typography className="text-2xl" fontWeightVariant="semibold">
+                {t("articlePage.abstract")}
               </Typography>
               <ArticlePart.Article.Description>
                 {article?.summary !== undefined ? (
diff --git a/src/components/fetchAnArticle/AnArticleBody.tsx b/src/components/fetchAnArticle/AnArticleBody.tsx
index 55d7f95..0329981 100644
--- a/src/components/fetchAnArticle/AnArticleBody.tsx
+++ b/src/components/fetchAnArticle/AnArticleBody.tsx
@@ -27,7 +27,7 @@ const AnArticleBody = () => {
       <Container variant="straight">
         {shouldShowLoading ? (
           <>
-            <Skeleton count={1} />
+            <Skeleton count={1} className="my-4" />
             <div className="gap-4 py-12 px-20">
               <Skeleton
                 count={1}
@@ -39,7 +39,7 @@ const AnArticleBody = () => {
           </>
         ) : (
           <>
-            <ArticlePart.Article.Breadcumbs>
+            <ArticlePart.Article.Breadcumbs className="py-4">
               {article?.topic}
             </ArticlePart.Article.Breadcumbs>
             <div className="gap-4 py-12 px-20">
diff --git a/src/components/fetchAnArticle/AskeletonArticle.tsx b/src/components/fetchAnArticle/AskeletonArticle.tsx
index f0b9702..d8bdcfc 100644
--- a/src/components/fetchAnArticle/AskeletonArticle.tsx
+++ b/src/components/fetchAnArticle/AskeletonArticle.tsx
@@ -3,7 +3,7 @@ import "react-loading-skeleton/dist/skeleton.css";
 const AskeletonArticle = () => {
   return (
     <>
-      <Skeleton count={1} />
+      <Skeleton count={1} className="my-4" />
       <div className="flex flex-col gap-4 pb-4">
         <Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
         <Skeleton count={1} containerClassName="authors w-1/4" />