diff --git a/src/newsreader/js/pages/homepage/components/PostModal.js b/src/newsreader/js/pages/homepage/components/PostModal.js index a17afbd..ee1c983 100644 --- a/src/newsreader/js/pages/homepage/components/PostModal.js +++ b/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 (
- this.props.unSelectPost()} - > - Close - +
+ {/* TODO: make button functional */} + Mark as read + this.props.unSelectPost()} + > + Close + +

{`${post.title} `}

diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss index ae94f6c..7a8ea22 100644 --- a/src/newsreader/scss/components/post/_post.scss +++ b/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; diff --git a/src/newsreader/scss/components/sidebar/_sidebar.scss b/src/newsreader/scss/components/sidebar/_sidebar.scss index f13faf3..c70594a 100644 --- a/src/newsreader/scss/components/sidebar/_sidebar.scss +++ b/src/newsreader/scss/components/sidebar/_sidebar.scss @@ -20,4 +20,8 @@ padding: 2px 10px 5px 10px; } } + + .read-button { + margin: 20px 0 0 0; + } } diff --git a/src/newsreader/scss/elements/button/_read-button.scss b/src/newsreader/scss/elements/button/_read-button.scss index 2c345b5..71e8e75 100644 --- a/src/newsreader/scss/elements/button/_read-button.scss +++ b/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;