From 496d27bd75d202137cc355d2822e41da433dd8e5 Mon Sep 17 00:00:00 2001
From: semsion <semsiono@gmail.com>
Date: Mon, 1 Jul 2024 18:19:53 +0100
Subject: [PATCH] Minor adjustments to the layout and style of the (React)
 blog-client.

---
 blog-client/src/App.css                 | 5 +++++
 blog-client/src/App.tsx                 | 4 ++--
 blog-client/src/articles.css            | 9 +++++++++
 blog-client/src/components/articles.tsx | 4 ++--
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/blog-client/src/App.css b/blog-client/src/App.css
index 4014cd7..5c2a0ad 100644
--- a/blog-client/src/App.css
+++ b/blog-client/src/App.css
@@ -5,3 +5,8 @@
   text-align: center;
 }
 
+.blog-title {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
diff --git a/blog-client/src/App.tsx b/blog-client/src/App.tsx
index 0c329a3..3d54b35 100644
--- a/blog-client/src/App.tsx
+++ b/blog-client/src/App.tsx
@@ -26,8 +26,8 @@ const App: React.FC = () => {
 
   return (
     <div>
-      <h1>Blog Client</h1>
-      <p>Blog Client is a React application that consumes an API from Ruby on Rails.</p>
+      <h1 className='blog-title' >Blog Client</h1>
+      <p>Blog Client is a React application that consumes an article API from Ruby on Rails</p>
       <Articles articles={articles} title={''} body={''} />
     </div>
   );
diff --git a/blog-client/src/articles.css b/blog-client/src/articles.css
index 832f452..d48c749 100644
--- a/blog-client/src/articles.css
+++ b/blog-client/src/articles.css
@@ -1,4 +1,13 @@
 .articles-ul {
   padding-left: 0;
   margin-top: 83px;
+}
+
+.article-body {
+  font-size: 0.75rem;
+}
+
+.article-header {
+  margin-top: 0;
+  margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/blog-client/src/components/articles.tsx b/blog-client/src/components/articles.tsx
index 1cc936c..a5a7f9e 100644
--- a/blog-client/src/components/articles.tsx
+++ b/blog-client/src/components/articles.tsx
@@ -20,8 +20,8 @@ const Articles: React.FunctionComponent<ArticleProps> = (props) => {
       <ul className='articles-ul' >
         {props.articles.map((article, index) => (
           <div key={index}>
-            <h2>{article.title}</h2>
-            <p>{article.body}</p>
+            <h2 className='article-header'>{article.title}</h2>
+            <p className="article-body">{article.body}</p>
           </div>
         ))}
       </ul>