Add non-functional mark as read button

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -12,7 +12,6 @@ import {
 } from '../constants.js';
 import { formatDatetime } from '../../../utils.js';
 
-// TODO add "Mark as read" button
 class PostModal extends React.Component {
   modalListener = ::this.modalListener;
   readTimer = null;
@@ -65,12 +64,16 @@ class PostModal extends React.Component {
     return (
       <div className="modal post-modal">
         <div className="post">
+          <div className="post__actions">
+            {/* TODO: make button functional */}
+            <span className="button read-button">Mark as read</span>
             <span
               className="button post__close-button"
               onClick={() => this.props.unSelectPost()}
             >
               Close <i className="gg-close"></i>
             </span>
+          </div>
           <div className="post__header">
             <h2 className={titleClassName}>{`${post.title} `}</h2>
             <div className="post__meta-info">

src/newsreader/scss/components/post/_post.scss

@@ -15,6 +15,15 @@
 
   cursor: initial;
 
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+
+    padding: 20px 50px 0;
+    gap: 20px;
+  }
+
   &__header {
     display: flex;
     flex-direction: column;
@@ -81,9 +90,6 @@
   }
 
   &__close-button {
-    position: relative;
-    margin: 1% 2% 0 0;
-    align-self: flex-end;
     background-color: $blue;
     color: $white;
 

src/newsreader/scss/components/sidebar/_sidebar.scss

@@ -20,4 +20,8 @@
       padding: 2px 10px 5px 10px;
     }
   }
+
+  .read-button {
+    margin: 20px 0 0 0;
+  }
 }

src/newsreader/scss/elements/button/_read-button.scss

@@ -1,8 +1,6 @@
 .read-button {
   @extend .button;
 
-  margin: 20px 0 0 0;
-
   color: $white;
   background-color: $green;