add post details styles

KRRISH96 · Feb 25, 2021 · e36e0d1 · e36e0d1
1 parent fa7de58
commit e36e0d1
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 28 deletions.
diff --git a/src/components/PostDetails/PostDetails.tsx b/src/components/PostDetails/PostDetails.tsx
@@ -7,6 +7,7 @@ import BackButton from '../BackButton';
 import { PostData } from '../Posts/Posts';
 import TextHighlighter from '../TextHighlighter';
 import Comments from './Comments';
+import './postDetailsStyles.scss';
 
 interface ParamsData {
   id: string;
@@ -42,7 +43,7 @@ function PostDetails() {
   };
 
   return (
-    <div>
+    <div className="post-details-page">
       <h2>
         <Link to="/">Users</Link>
         <span>{' > '}</span>
@@ -70,27 +71,29 @@ function PostDetails() {
         )}
       </div>
       {loading && <h2>Fetching Post Details... Hang Tight!</h2>}
-      <p>
-        <TextHighlighter
-          text={postDetails?.title ?? ''}
-          highlight={searchText}
-        />
-      </p>
-      <p>
-        <TextHighlighter
-          text={postDetails?.body ?? ''}
-          highlight={searchText}
-        />
-      </p>
-      {postDetails?.id && (
-        <button
-          className="danger"
-          onClick={() => deletePost(postDetails.id)}
-          disabled={loading}
-        >
-          {deleteLoading ? 'Deleting...' : 'Delete Post'}
-        </button>
-      )}
+      <article className="post-content card">
+        <h2 className="post-content__title">
+          <TextHighlighter
+            text={postDetails?.title ?? ''}
+            highlight={searchText}
+          />
+        </h2>
+        <p className="post-content__body">
+          <TextHighlighter
+            text={postDetails?.body ?? ''}
+            highlight={searchText}
+          />
+        </p>
+        {postDetails?.id && (
+          <button
+            className="danger"
+            onClick={() => deletePost(postDetails.id)}
+            disabled={loading}
+          >
+            {deleteLoading ? 'Deleting...' : 'Delete Post'}
+          </button>
+        )}
+      </article>
       {showComments ? (
         <Comments postId={Number(id)} />
       ) : (

diff --git a/src/components/PostDetails/postDetailsStyles.scss b/src/components/PostDetails/postDetailsStyles.scss
@@ -0,0 +1,12 @@
+.post-details-page {
+  .post-content {
+    padding: var(--s-1);
+    &__title {
+      text-transform: capitalize;
+    }
+    &__body {
+      line-height: 1.5rem;
+      letter-spacing: 0.05rem;
+    }
+  }
+}
diff --git a/src/components/Posts/PostsList.tsx b/src/components/Posts/PostsList.tsx
@@ -8,7 +8,7 @@ interface PostsListProps {
 }
 function PostsList({ posts, titleFilter }: PostsListProps) {
   return (
-    <ul className="posts-list">
+    <ul className="posts-list card">
       {posts.map(({ userId, id, title }) => (
         <li key={`${userId}-${id}`} className="posts-list__item">
           <a href={`/posts/${id}`} className="posts-list__item-link">

diff --git a/src/components/Posts/postsStyles.scss b/src/components/Posts/postsStyles.scss
@@ -1,10 +1,5 @@
 .posts-page {
   .posts-list {
-    margin-bottom: var(--s-1);
-    background-color: var(--bg-secondary);
-    box-shadow: var(--shadow-secondary);
-    padding: var(--s-1) var(--s-0_75);
-    border-radius: 0.4rem;
     font-size: var(--font-20);
     text-transform: capitalize;
     &__item {

diff --git a/src/index.scss b/src/index.scss
@@ -188,3 +188,11 @@ button {
     flex-direction: column;
   }
 }
+
+.card {
+  margin-bottom: var(--s-1);
+  background-color: var(--bg-secondary);
+  box-shadow: var(--shadow-secondary);
+  padding: var(--s-1) var(--s-0_75);
+  border-radius: 0.4rem;
+}