Minor adjustments to the layout and style of the (React) blog-client.

semsion · Jul 1, 2024 · 496d27b · 496d27b
1 parent 7357c66
commit 496d27b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
 }
diff --git 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>