From 2990f48f1d49ff8152c7ff3613a3a466943eab29 Mon Sep 17 00:00:00 2001
From: Nkunzi Innocent <innocentnkunzi@yahoo.com>
Date: Fri, 28 Jun 2019 12:39:44 +0200
Subject: [PATCH] fixing verify account bug

---
 src/components/Category.jsx                   |   2 +-
 .../article/AllArticlesComponents.jsx         |  95 +-
 src/components/article/ArticleForm.jsx        |   4 +
 src/components/comment/commentForm.jsx        |  38 +-
 src/components/homeNavBar.jsx                 |  62 +-
 src/css/Home-styles/home-style.css            |   9 +-
 src/css/Home-styles/home-style.scss           |  10 +
 src/styles/css/article.css                    | 515 +++++++----
 src/styles/scss/article.scss                  | 837 +++++++++---------
 .../__snapshots__/commentForm.test.js.snap    |   2 +-
 .../__snapshots__/homeNavBar.test.js.snap     |   2 +-
 src/tests/commentForm.test.js                 |   8 +
 12 files changed, 935 insertions(+), 649 deletions(-)

diff --git a/src/components/Category.jsx b/src/components/Category.jsx
index 45021ed..cad7600 100644
--- a/src/components/Category.jsx
+++ b/src/components/Category.jsx
@@ -69,7 +69,7 @@ export class Category extends Component {
           <div className="cardTitle">
             <span className="articleTitle">{item.title} </span>
             {/* <span className="articleDescription"> */}
-            {htmlReactParser(item.description)}
+            <span>{htmlReactParser(item.description)}</span>
             <div className="likeAndBookMarkDiv">
               <FontAwesomeIcon icon={faHeart} id="views" />
               {item.views} Views
diff --git a/src/components/article/AllArticlesComponents.jsx b/src/components/article/AllArticlesComponents.jsx
index 215c45e..d88b877 100644
--- a/src/components/article/AllArticlesComponents.jsx
+++ b/src/components/article/AllArticlesComponents.jsx
@@ -110,54 +110,59 @@ export class AllArticles extends Component {
             <div className="container">
               <div className="allArticlecontents">
                 {
-                  (allArticle = arr.map(item => (
-                    <Fragment key={item.id}>
-                      <div className="card">
-                        <img
-                          className="image"
-                          alt="articleImage"
-                          src={this.handleImage(item)}
-                        />
-                        <div className="contentDescription">
-                          <a href={`/article/${item.slug}`}>
-                            <div className="articleCardHeader">
-                              <p>{reactParser(item.title)}</p>
-                            </div>
-                            <div className="articleDescription">
-                              <p>{reactParser(item.description)}</p>
-                            </div>
-                          </a>
-                          <div className="buttons">
-                            {decodedToken !== undefined &&
-                            decodedToken.id === item.authorid ? (
-                              <div>
-                                <button
-                                  type="submit"
-                                  className="redButton"
-                                  onClick={() => this.handleDelete(item.slug)}
-                                  id="submit-data"
-                                  data-test="submit-data"
-                                >
-                                  Delete
-                                </button>
-
-                                <button
-                                  type="submit"
-                                  className="lightBlueButton"
-                                >
-                                  <a href={`/articlesedit/${item.slug}/edit`}>
-                                    Edit
-                                  </a>
-                                </button>
+                  (allArticle = arr.map(item =>
+                    decodedToken !== undefined &&
+                    decodedToken.id === item.authorid ? (
+                      <Fragment key={item.id}>
+                        <div className="card">
+                          <img
+                            className="image"
+                            alt="articleImage"
+                            src={this.handleImage(item)}
+                          />
+                          <div className="contentDescription">
+                            <a href={`/article/${item.slug}`}>
+                              <div className="articleCardHeader">
+                                <p>{reactParser(item.title)}</p>
                               </div>
-                            ) : (
-                              ''
-                            )}
+                              <div className="articleDescription">
+                                <p>{reactParser(item.description)}</p>
+                              </div>
+                            </a>
+                            <div className="buttons">
+                              {decodedToken !== undefined &&
+                              decodedToken.id === item.authorid ? (
+                                <div>
+                                  <button
+                                    type="submit"
+                                    className="redButton"
+                                    onClick={() => this.handleDelete(item.slug)}
+                                    id="submit-data"
+                                    data-test="submit-data"
+                                  >
+                                    Delete
+                                  </button>
+
+                                  <button
+                                    type="submit"
+                                    className="lightBlueButton"
+                                  >
+                                    <a href={`/articlesedit/${item.slug}/edit`}>
+                                      Edit
+                                    </a>
+                                  </button>
+                                </div>
+                              ) : (
+                                ''
+                              )}
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </Fragment>
-                  )))
+                      </Fragment>
+                    ) : (
+                      ''
+                    ),
+                  ))
                 }
               </div>
             </div>
diff --git a/src/components/article/ArticleForm.jsx b/src/components/article/ArticleForm.jsx
index 5a632bf..3c80bb9 100644
--- a/src/components/article/ArticleForm.jsx
+++ b/src/components/article/ArticleForm.jsx
@@ -9,6 +9,7 @@
 /* eslint-disable dot-notation */
 /* eslint-disable no-return-assign */
 import React from 'react';
+// import decodeToken from 'jwt-decode';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { connect } from 'react-redux';
@@ -197,6 +198,9 @@ export class Editor extends React.Component {
    * @returns {*} editor
    */
   render() {
+    // const token = localStorage.getItem('token');
+    // const decode = decodeToken(token);
+    // console.log(decode);
     const { tagInputs } = this.state;
     let id = 1;
     const { articleCategory } = this.props.articleCategories;
diff --git a/src/components/comment/commentForm.jsx b/src/components/comment/commentForm.jsx
index 58abc3c..fe73049 100644
--- a/src/components/comment/commentForm.jsx
+++ b/src/components/comment/commentForm.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable require-jsdoc */
 import React, { Component } from 'react';
+import decodeToken from 'jwt-decode';
 import TextArea from '../common/textArea';
 import SubmitButton from '../common/SubmitButton';
 
@@ -16,7 +17,12 @@ class CommentForm extends Component {
   }
 
   handleChange = e => {
+    // const desabledTextarea = document.getElementById('disabledTexarea');
+    // if (desabledTextarea) {
+    //   desabledTextarea.desabled = true;
+    // } else {
     this.setState({ [e.target.name]: e.target.value });
+    // }
   };
 
   handleSubmit = e => {
@@ -31,20 +37,34 @@ class CommentForm extends Component {
   };
 
   render() {
+    const decodedToken = decodeToken(localStorage.getItem('token'));
     const { comment } = this.state;
     const { buttonLabel } = this.props;
 
     return (
       <div className="comment-form">
-        <form onSubmit={this.handleSubmit}>
-          <TextArea
-            handleChange={this.handleChange}
-            placeholder="Add your comment"
-            name="comment"
-            value={comment}
-          />
-          <SubmitButton type="submit" name="comment" value={buttonLabel} />
-        </form>
+        {decodedToken.verified !== true ? (
+          <form onSubmit={this.handleSubmit}>
+            <TextArea
+              id="disabledTexarea"
+              handleChange={this.handleChange}
+              placeholder="Add your comment"
+              name="comment"
+              value={comment}
+            />
+            <SubmitButton type="submit" name="comment" value={buttonLabel} />
+          </form>
+        ) : (
+          <form onSubmit={this.handleSubmit}>
+            <TextArea
+              handleChange={this.handleChange}
+              placeholder="Add your comment"
+              name="comment"
+              value={comment}
+            />
+            <SubmitButton type="submit" name="comment" value={buttonLabel} />
+          </form>
+        )}
       </div>
     );
   }
diff --git a/src/components/homeNavBar.jsx b/src/components/homeNavBar.jsx
index e095ac4..aa901c0 100644
--- a/src/components/homeNavBar.jsx
+++ b/src/components/homeNavBar.jsx
@@ -6,6 +6,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import React, { Component } from 'react';
+import decodeToken from 'jwt-decode';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -140,6 +141,7 @@ export class HomeNavBar extends Component {
    * @returns {*} NavBar component
    */
   render() {
+    const decodedToken = decodeToken(localStorage.getItem('token'));
     const {
       categories,
       popup,
@@ -245,18 +247,54 @@ export class HomeNavBar extends Component {
                       <React.Fragment>
                         <div className="arrow-up-profile-back" />
                         <div className="arrow-up-profile" />
-                        <Link
-                          className="profile-style user-menu"
-                          to={`/${username}`}
-                        >
-                          Profile
-                        </Link>
-                        <Link
-                          className="profile-style user-menu"
-                          to="/article/create"
-                        >
-                          Create Article
-                        </Link>
+                        {decodedToken.verified !== true ? (
+                          <Link
+                            className="disabled profile-style user-menu"
+                            to={`/${username}`}
+                          >
+                            Profile
+                          </Link>
+                        ) : (
+                          <Link
+                            className="profile-style user-menu"
+                            to={`/${username}`}
+                          >
+                            Profile
+                          </Link>
+                        )}
+
+                        {decodedToken.verified !== true ? (
+                          <Link
+                            className="disabled profile-style user-menu"
+                            to="/article/create"
+                          >
+                            Create Article
+                          </Link>
+                        ) : (
+                          <Link
+                            className="profile-style user-menu"
+                            to="/article/create"
+                          >
+                            Create Article
+                          </Link>
+                        )}
+
+                        {decodedToken.verified !== true ? (
+                          <Link
+                            className="disabled profile-style user-menu"
+                            to="/articles"
+                          >
+                            Manage articles
+                          </Link>
+                        ) : (
+                          <Link
+                            className="profile-style user-menu"
+                            to="/articles"
+                          >
+                            Manage articles
+                          </Link>
+                        )}
+
                         {role === 'Admin' && (
                           <Link
                             className="profile-style user-menu"
diff --git a/src/css/Home-styles/home-style.css b/src/css/Home-styles/home-style.css
index 075e441..8b0628d 100644
--- a/src/css/Home-styles/home-style.css
+++ b/src/css/Home-styles/home-style.css
@@ -88,7 +88,7 @@ body {
   border-radius: 4px;
   background-color: white;
   -webkit-box-shadow: 1px 1px 5px 1px #888888;
-          box-shadow: 1px 1px 5px 1px #888888;
+  box-shadow: 1px 1px 5px 1px #888888;
 }
 
 .home-navigation .popup-style .notification-style {
@@ -247,4 +247,9 @@ body {
   color: #8a8585;
   cursor: pointer;
 }
-/*# sourceMappingURL=home-style.css.map */
\ No newline at end of file
+
+.disabled {
+  pointer-events: none;
+}
+
+/*# sourceMappingURL=home-style.css.map */
diff --git a/src/css/Home-styles/home-style.scss b/src/css/Home-styles/home-style.scss
index ec871f8..4638bdf 100644
--- a/src/css/Home-styles/home-style.scss
+++ b/src/css/Home-styles/home-style.scss
@@ -14,6 +14,7 @@ $color: (
 body {
   background-color: #fff !important;
 }
+
 .home-navigation {
   width: 100%;
   background-color: colors(form);
@@ -99,6 +100,7 @@ body {
     border-radius: 4px;
     background-color: white;
     box-shadow: 1px 1px 5px 1px #888888;
+
     .notification-style {
       position: relative;
       width: 300px;
@@ -152,6 +154,7 @@ body {
       text-align: center;
       width: 100%;
     }
+
     .user-menu:hover {
       color: #147aee;
       background: rgba(123, 179, 253, 0.02);
@@ -168,6 +171,7 @@ body {
         text-decoration: none;
         color: black;
       }
+
       .notification-time {
         font-size: 11px;
         color: #0000008c;
@@ -176,6 +180,7 @@ body {
         font-family: sans-serif;
       }
     }
+
     .notifications {
       padding: 30px;
 
@@ -183,6 +188,7 @@ body {
         text-decoration: none;
         color: black;
       }
+
       .notification-time {
         font-size: 11px;
         color: #ccc;
@@ -267,3 +273,7 @@ body {
     }
   }
 }
+
+.disabled .profile-style .user-menu {
+  pointer-events: none;
+}
diff --git a/src/styles/css/article.css b/src/styles/css/article.css
index 7632d19..84545b1 100644
--- a/src/styles/css/article.css
+++ b/src/styles/css/article.css
@@ -1,88 +1,109 @@
-@import url("https://fonts.googleapis.com/css?family=Merriweather|Raleway&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Merriweather|Raleway&display=swap');
 .spiner {
   position: fixed;
   z-index: 1031;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #43c0f1; }
+  color: #43c0f1;
+}
 
 .comments-container {
   padding: 1%;
   margin-top: 1%;
-  border-radius: 1%; }
-  .comments-container .comment-count {
-    font-weight: bold;
-    margin-left: 4%; }
+  border-radius: 1%;
+}
+.comments-container .comment-count {
+  font-weight: bold;
+  margin-left: 4%;
+}
 
 html {
   height: 100%;
-  margin: 0; }
+  margin: 0;
+}
 
 body {
-  font-family: "Arial", "Helvetica", "sans-serif";
+  font-family: 'Arial', 'Helvetica', 'sans-serif';
   font-size: 15px;
   margin: 0;
   padding: 0;
   /* background-color: darkgray; */
-  min-height: 100%; }
+  min-height: 100%;
+}
 
 .container {
   width: 80%;
   margin: auto;
-  overflow: hidden; }
-  @media (max-width: 768px) {
-    .container {
-      width: 100%; } }
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .container {
+    width: 100%;
+  }
+}
 
 header {
   background-color: #ffffff;
   padding-top: 10px;
   min-height: 70px;
-  border-bottom: #e5e5e5 3px solid; }
+  border-bottom: #e5e5e5 3px solid;
+}
 
 .brand {
   margin-top: 10px;
-  float: left; }
+  float: left;
+}
 
 header .icons ul {
   list-style-type: none;
   margin: 0;
-  padding: 0; }
+  padding: 0;
+}
 
 header .icons ul li i {
-  color: grey; }
+  color: grey;
+}
 
 header .icons {
   margin-top: 10px;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end; }
-  @media (max-width: 768px) {
-    header .icons {
-      display: none; } }
+  justify-content: flex-end;
+}
+@media (max-width: 768px) {
+  header .icons {
+    display: none;
+  }
+}
 
 .brand .brandName {
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .brand .brandName {
   font-size: 25px;
   font-family: Georgia, 'Times New Roman', Times, serif;
-  color: #00aef9; }
+  color: #00aef9;
+}
 
 .content {
   background-color: #e5e5e5;
   align-content: center;
   margin-right: 100px;
-  margin-left: 100px; }
-  @media (max-width: 768px) {
-    .content {
-      margin: auto;
-      margin-right: 5%;
-      margin-left: 5%; } }
+  margin-left: 100px;
+}
+@media (max-width: 768px) {
+  .content {
+    margin: auto;
+    margin-right: 5%;
+    margin-left: 5%;
+  }
+}
 
 .content .editor-tools .container .bar-tool #align-bartool {
-  text-align: center; }
+  text-align: center;
+}
 
 .content .editor-tools .container .bar-tool {
   margin-top: 10px;
@@ -92,47 +113,59 @@ header .icons {
   box-shadow: 0px 4px 4px #c4c4c4;
   padding: 10px;
   display: inline-block;
-  /* position: absolute; */ }
-  @media (max-width: 768px) {
-    .content .editor-tools .container .bar-tool {
-      margin: auto;
-      padding: 5px; } }
+  /* position: absolute; */
+}
+@media (max-width: 768px) {
+  .content .editor-tools .container .bar-tool {
+    margin: auto;
+    padding: 5px;
+  }
+}
 
 .content .editor-tools .container .bar-tool {
   margin-bottom: 100px;
   margin-left: 10%;
-  margin-right: 10%; }
+  margin-right: 10%;
+}
 
 input[type='color'] {
-  border: none; }
+  border: none;
+}
 
 .content .editor-tools .container .bar-tool #border {
   border: 1px solid #c4c4c4;
-  transform: rotate(90deg); }
+  transform: rotate(90deg);
+}
 
 .content .editor-tools .container .bar-tool > button {
   margin-right: 5px;
   margin-left: 5px;
-  border: no; }
+  border: no;
+}
 
 .content .editor-tools .container .bar-tool > button:hover {
   background-color: #dfe6e9;
   transition: all 0.3s linear 0s;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 .content .editor-tools .container .bar-tool #highlight {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 .content .editor-tools .container .bar-tool #highlight {
   margin-right: 5px;
-  margin-left: 5px; }
+  margin-left: 5px;
+}
 
 .content .text-area {
-  width: 100%; }
+  width: 100%;
+}
 
 [contentEditable='true']:empty:not(:focus):before {
   content: attr(data-text);
-  color: gray; }
+  color: gray;
+}
 
 .content .text-area .form #title {
   background-color: #ffffff;
@@ -146,11 +179,12 @@ input[type='color'] {
   padding: 30px;
   font-size: 30px;
   font-weight: 400px;
-  font-family: "Arial", "Helvetica", "sans-serif";
+  font-family: 'Arial', 'Helvetica', 'sans-serif';
   border-radius: 3px;
   line-height: 1.5em;
   color: #1e272e;
-  margin-right: 10%; }
+  margin-right: 10%;
+}
 
 .content .text-area .form #body {
   margin-bottom: 10px;
@@ -164,11 +198,12 @@ input[type='color'] {
   padding: 30px;
   font-size: 30px;
   font-weight: 400px;
-  font-family: "Arial", "Helvetica", "sans-serif";
+  font-family: 'Arial', 'Helvetica', 'sans-serif';
   border-radius: 3px;
   line-height: 1.5em;
   color: #1e272e;
-  margin-right: 10%; }
+  margin-right: 10%;
+}
 
 .content .text-area .form #publish {
   cursor: pointer;
@@ -181,23 +216,28 @@ input[type='color'] {
   color: #ffffff;
   border-radius: 5px;
   float: right;
-  margin-bottom: 20px; }
+  margin-bottom: 20px;
+}
 
 nav.icons div {
-  margin-right: 15px; }
+  margin-right: 15px;
+}
 
 nav.icons i {
-  margin-top: 5px; }
+  margin-top: 5px;
+}
 
 nav.icons div.search input[type='text'] {
   margin-right: 10px;
   border-radius: 6px;
   padding: 4px 12px;
   border-color: #eee;
-  border-width: 1px; }
+  border-width: 1px;
+}
 
 nav.icons div.search #search-button {
-  margin-right: 10px; }
+  margin-right: 10px;
+}
 
 .card {
   float: left;
@@ -209,30 +249,36 @@ nav.icons div.search #search-button {
   border-color: #00aef9;
   border-width: 1px;
   box-shadow: #808e9b;
-  margin-right: 10px; }
+  margin-right: 10px;
+}
 
 .card:hover {
   cursor: pointer;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .card > img {
   width: 100%;
-  height: 50%; }
+  height: 50%;
+}
 
 .card .contentDescription {
   width: 100%;
   margin-top: 10px;
-  word-wrap: break-word; }
+  word-wrap: break-word;
+}
 
 .card .contentDescription .articleCardHeader {
   width: 100%;
   text-align: center;
-  word-wrap: break-word; }
+  word-wrap: break-word;
+}
 
 .card .contentDescription .articleCardHeader p {
   font-weight: bold;
   font-size: 20px;
-  text-transform: capitalize; }
+  text-transform: capitalize;
+}
 
 div.alert {
   width: 30%;
@@ -245,53 +291,64 @@ div.alert {
   border-radius: 5px;
   margin-top: 10px;
   padding: 30px;
-  font-size: 20px; }
+  font-size: 20px;
+}
 
 .contents {
   background-color: #ffffff;
   margin-top: 0;
-  min-height: 800px; }
+  min-height: 800px;
+}
 
 .contents .contentTitle {
   width: 100%;
   text-align: center;
-  padding: 10px; }
+  padding: 10px;
+}
 
 .contents .contentBody #articleBody {
   clear: both;
   float: left;
   margin-top: 15px;
   padding-left: 19%;
-  padding-right: 18%; }
+  padding-right: 18%;
+}
 
 .contents .contentBody p {
   font-size: 20px;
   word-wrap: break-word;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+}
 
 .contents .contentBody p img {
   width: 63%;
   margin-left: auto;
   margin-right: auto;
-  display: block; }
+  display: block;
+}
 
 .article-icons .icon {
   margin-right: 10px;
-  display: inline-block; }
+  display: inline-block;
+}
 
 .contentDescription a {
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 .contentDescription a:link {
-  color: #2f3640; }
+  color: #2f3640;
+}
 
 .contentDescription a:visited {
-  color: #2f3640; }
+  color: #2f3640;
+}
 
 .card .contentDescription .buttons {
   margin-bottom: 5px;
   position: absolute;
-  margin-top: 10px; }
+  margin-top: 10px;
+}
 
 .card .contentDescription .buttons .redButton {
   background: #bb321f;
@@ -301,7 +358,8 @@ div.alert {
   display: inline-block;
   font-size: 10px;
   margin: 5px;
-  padding: 3px 12px; }
+  padding: 3px 12px;
+}
 
 .card .contentDescription .buttons .lightBlueButton {
   background: #74b9ff;
@@ -311,129 +369,160 @@ div.alert {
   display: inline-block;
   font-size: 10px;
   margin: 5px;
-  padding: 3px 12px; }
+  padding: 3px 12px;
+}
 
 .card .articleDescription {
   height: 65px;
-  margin-top: 5px; }
+  margin-top: 5px;
+}
 
 .container .allArticlecontents {
   background-color: #ffffff;
   margin-top: 0;
-  height: 100%; }
+  height: 100%;
+}
 
 .socialMedia {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer; }
-  .socialMedia .facebookButton {
-    padding: 2px;
-    margin: 0.5rem 0.25rem;
-    border-radius: 2px; }
-    .socialMedia .facebookButton.facebook {
-      color: #3b5998;
-      border-color: #3b5998; }
-      .socialMedia .facebookButton.facebook:hover {
-        background-color: #3b5998;
-        border-color: #3b5998;
-        color: #fff; }
-    .socialMedia .facebookButton.twitter {
-      color: #1da1f2;
-      border-color: #1da1f2; }
-      .socialMedia .facebookButton.twitter:hover {
-        background-color: #1da1f2;
-        border-color: #1da1f2;
-        color: #fff; }
-    .socialMedia .facebookButton.googleplus {
-      color: #dd4b39;
-      border-color: #dd4b39; }
-      .socialMedia .facebookButton.googleplus:hover {
-        background-color: #dd4b39;
-        border-color: #dd4b39;
-        color: #fff; }
-    .socialMedia .facebookButton.linkedin {
-      color: #0077b5;
-      border-color: #0077b5; }
-      .socialMedia .facebookButton.linkedin:hover {
-        background-color: #0077b5;
-        border-color: #0077b5;
-        color: #fff; }
-    .socialMedia .facebookButton.whatsapp {
-      color: #128c7e;
-      border-color: #128c7e; }
-      .socialMedia .facebookButton.whatsapp:hover {
-        background-color: #128c7e;
-        border-color: #128c7e;
-        color: #fff; }
-  .socialMedia .twitterButton {
-    color: #1da1f2;
-    padding: 2px;
-    margin: 0.5rem 0.25rem;
-    border-radius: 2px; }
-  .socialMedia .twitterButton:hover {
-    background-color: #1da1f2;
-    color: #fff; }
-  .socialMedia .linkedinButton {
-    color: #0077b5;
-    padding: 2px;
-    margin: 0.5rem 0.25rem;
-    border-radius: 2px; }
-  .socialMedia .linkedinButton:hover {
-    background-color: #0077b5;
-    color: #fff; }
-  .socialMedia .whatsappButton {
-    color: #128c7e;
-    padding: 2px;
-    margin: 0.5rem 0.25rem;
-    border-radius: 2px; }
-  .socialMedia .whatsappButton:hover {
-    color: #fff;
-    background-color: #128c7e; }
-  .socialMedia .emailButton {
-    color: #dd4b39;
-    padding: 2px;
-    margin: 0.5rem 0.25rem;
-    border-radius: 2px; }
-  .socialMedia .emailButton:hover {
-    color: #fff;
-    background-color: #dd4b39; }
+  cursor: pointer;
+}
+.socialMedia .facebookButton {
+  padding: 2px;
+  margin: 0.5rem 0.25rem;
+  border-radius: 2px;
+}
+.socialMedia .facebookButton.facebook {
+  color: #3b5998;
+  border-color: #3b5998;
+}
+.socialMedia .facebookButton.facebook:hover {
+  background-color: #3b5998;
+  border-color: #3b5998;
+  color: #fff;
+}
+.socialMedia .facebookButton.twitter {
+  color: #1da1f2;
+  border-color: #1da1f2;
+}
+.socialMedia .facebookButton.twitter:hover {
+  background-color: #1da1f2;
+  border-color: #1da1f2;
+  color: #fff;
+}
+.socialMedia .facebookButton.googleplus {
+  color: #dd4b39;
+  border-color: #dd4b39;
+}
+.socialMedia .facebookButton.googleplus:hover {
+  background-color: #dd4b39;
+  border-color: #dd4b39;
+  color: #fff;
+}
+.socialMedia .facebookButton.linkedin {
+  color: #0077b5;
+  border-color: #0077b5;
+}
+.socialMedia .facebookButton.linkedin:hover {
+  background-color: #0077b5;
+  border-color: #0077b5;
+  color: #fff;
+}
+.socialMedia .facebookButton.whatsapp {
+  color: #128c7e;
+  border-color: #128c7e;
+}
+.socialMedia .facebookButton.whatsapp:hover {
+  background-color: #128c7e;
+  border-color: #128c7e;
+  color: #fff;
+}
+.socialMedia .twitterButton {
+  color: #1da1f2;
+  padding: 2px;
+  margin: 0.5rem 0.25rem;
+  border-radius: 2px;
+}
+.socialMedia .twitterButton:hover {
+  background-color: #1da1f2;
+  color: #fff;
+}
+.socialMedia .linkedinButton {
+  color: #0077b5;
+  padding: 2px;
+  margin: 0.5rem 0.25rem;
+  border-radius: 2px;
+}
+.socialMedia .linkedinButton:hover {
+  background-color: #0077b5;
+  color: #fff;
+}
+.socialMedia .whatsappButton {
+  color: #128c7e;
+  padding: 2px;
+  margin: 0.5rem 0.25rem;
+  border-radius: 2px;
+}
+.socialMedia .whatsappButton:hover {
+  color: #fff;
+  background-color: #128c7e;
+}
+.socialMedia .emailButton {
+  color: #dd4b39;
+  padding: 2px;
+  margin: 0.5rem 0.25rem;
+  border-radius: 2px;
+}
+.socialMedia .emailButton:hover {
+  color: #fff;
+  background-color: #dd4b39;
+}
 
 .edit-history-section {
-  margin-top: 10px; }
-  .edit-history-section .hideButton {
-    background: #fff;
-    padding: 3px;
-    color: #000;
-    border-radius: 3px;
-    cursor: pointer;
-    margin-bottom: 3px;
-    font-size: 20px; }
+  margin-top: 10px;
+}
+.edit-history-section .hideButton {
+  background: #fff;
+  padding: 3px;
+  color: #000;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-bottom: 3px;
+  font-size: 20px;
+}
 
 .history-section {
   padding: 3px 15px 5px 0px;
-  border-bottom: 1px solid #c5c5c5; }
-  .history-section time {
-    color: #9c9c9c;
-    font-size: 12px;
-    font-weight: bold; }
+  border-bottom: 1px solid #c5c5c5;
+}
+.history-section time {
+  color: #9c9c9c;
+  font-size: 12px;
+  font-weight: bold;
+}
 
 .emailButton:hover {
   color: #fff;
-  background-color: #dd4b39; }
+  background-color: #dd4b39;
+}
 
 .likeButton {
   border: none;
   color: #9c9c9c;
   cursor: pointer;
   width: 15px;
-  height: 15px; }
+  height: 15px;
+}
 
 .likeButton:hover {
-  color: #43c0f1; }
+  color: #43c0f1;
+}
 
 .buttonSpan {
-  margin-right: 5px; }
+  margin-right: 5px;
+}
 
 .topImage input[type='file'] {
   cursor: inherit;
@@ -445,19 +534,22 @@ div.alert {
   right: 0;
   text-align: right;
   top: 0;
-  float: right; }
+  float: right;
+}
 
 .topImage .file-upload {
   overflow: hidden;
   position: absolute;
   width: 100px;
-  height: 100px; }
+  height: 100px;
+}
 
 .topImage .file-upload .imageIcone {
   min-height: 100%;
   min-width: 100%;
   margin-left: 20%;
-  color: #3b5998; }
+  color: #3b5998;
+}
 
 .tags {
   padding: 10px;
@@ -466,7 +558,8 @@ div.alert {
   color: #fff;
   border-radius: 5px;
   display: inline-block;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 #tags > input {
   border-radius: 5px;
@@ -476,15 +569,18 @@ div.alert {
   margin-bottom: 5px;
   padding: 10px;
   font-size: 15px;
-  margin-right: 5px; }
+  margin-right: 5px;
+}
 
 #tags {
   width: 75%;
-  float: left; }
+  float: left;
+}
 
 #addTag {
   width: 10%;
-  float: left; }
+  float: left;
+}
 
 .tagList {
   display: inline-block;
@@ -494,21 +590,26 @@ div.alert {
   color: #333;
   font-size: 14px;
   padding: 0px 5px;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 button.bookmarkIcon {
   border: none;
   cursor: pointer;
-  font-size: 20px; }
+  font-size: 20px;
+}
 
 button.bookmarkIcon .active path {
-  fill: #00aef9; }
+  fill: #00aef9;
+}
 
 .bookmarkIcon:hover path {
-  fill: #00aef9; }
+  fill: #00aef9;
+}
 
 .center {
-  text-align: center; }
+  text-align: center;
+}
 
 .dots,
 .dots:before,
@@ -516,7 +617,8 @@ button.bookmarkIcon .active path {
   width: 6px;
   height: 6px;
   background: #808e9b;
-  border-radius: 50%; }
+  border-radius: 50%;
+}
 
 .dots {
   margin: 0px auto;
@@ -524,25 +626,72 @@ button.bookmarkIcon .active path {
   display: inline-block;
   margin-top: 10%;
   margin-bottom: 10%;
-  z-index: -1; }
+  z-index: -1;
+}
 
 .dots:before {
   content: '';
   position: absolute;
-  left: -10px; }
+  left: -10px;
+}
 
 .dots:after {
   content: '';
   position: absolute;
-  right: -10px; }
+  right: -10px;
+}
 
 .horizontalRule,
 .rating {
   width: 63%;
-  margin: auto; }
+  margin: auto;
+}
 
-.articleCategory {
+.sarticleCategory {
   margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 16px;
   display: block;
   font-size: 16px;
-  margin-bottom: 10px; }
+  font-family: sans-serif;
+  font-weight: 700;
+  color: #444;
+  line-height: 1.3;
+  padding: 0.6em 1.4em 0.5em 0.8em;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid #aaa;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  border-radius: 0.5em;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+}
+
+.articleCategory::-ms-expand {
+  display: none;
+}
+
+.articleCategory:hover {
+  border-color: #888;
+}
+
+.articleCategory:focus {
+  border-color: #aaa;
+  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
+  box-shadow: 0 0 0 3px -moz-mac-focusring;
+  color: #222;
+  outline: none;
+}
+
+.articleCategory option {
+  font-weight: normal;
+}
diff --git a/src/styles/scss/article.scss b/src/styles/scss/article.scss
index 720536a..36f8390 100644
--- a/src/styles/scss/article.scss
+++ b/src/styles/scss/article.scss
@@ -1,657 +1,704 @@
 @import url('https://fonts.googleapis.com/css?family=Merriweather|Raleway&display=swap');
 @import './spinner.scss';
 
-$fonts: 'Arial',
-'Helvetica',
-'sans-serif';
-
-$colors: (headerColor: #ffffff,
-brandNameColor: #00aef9,
-contentBackGround: #e5e5e5,
-buttonColor: #808e9b,
+$fonts: 'Arial', 'Helvetica', 'sans-serif';
+
+$colors: (
+  headerColor: #ffffff,
+  brandNameColor: #00aef9,
+  contentBackGround: #e5e5e5,
+  buttonColor: #808e9b,
 );
 
-$colors: (headerColor: #ffffff,
-brandNameColor: #00aef9,
-contentBackGround: #e5e5e5,
-buttonColor: #808e9b,
+$colors: (
+  headerColor: #ffffff,
+  brandNameColor: #00aef9,
+  contentBackGround: #e5e5e5,
+  buttonColor: #808e9b,
 );
 
 .comments-container {
-    // background: rgba(225, 229, 230, 0.3);
-    padding: 1%;
-    margin-top: 1%;
-    border-radius: 1%;
-
-    .comment-count {
-        font-weight: bold;
-        margin-left: 4%;
-    }
+  // background: rgba(225, 229, 230, 0.3);
+  padding: 1%;
+  margin-top: 1%;
+  border-radius: 1%;
+
+  .comment-count {
+    font-weight: bold;
+    margin-left: 4%;
+  }
 }
 
 @mixin textArea {
-    align-content: center;
-    margin-top: 0%;
-    width: 100%;
-    height: auto;
-    border: none;
-    outline: none;
-    padding: 30px;
-    font-size: 30px;
-    font-weight: 400px;
-    font-family: $fonts;
-    border-radius: 3px;
-    line-height: 1.5em;
-    color: #1e272e;
-    margin-right: 10%;
+  align-content: center;
+  margin-top: 0%;
+  width: 100%;
+  height: auto;
+  border: none;
+  outline: none;
+  padding: 30px;
+  font-size: 30px;
+  font-weight: 400px;
+  font-family: $fonts;
+  border-radius: 3px;
+  line-height: 1.5em;
+  color: #1e272e;
+  margin-right: 10%;
 }
 
 $mobileView: 768px;
 
 @mixin mobile {
-    @media (max-width: #{$mobileView}) {
-        @content;
-    }
+  @media (max-width: #{$mobileView}) {
+    @content;
+  }
 }
 
 html {
-    height: 100%;
-    margin: 0;
+  height: 100%;
+  margin: 0;
 }
 
 body {
-    font-family: $fonts;
-    font-size: 15px;
-    margin: 0;
-    padding: 0;
-    /* background-color: darkgray; */
-    min-height: 100%;
+  font-family: $fonts;
+  font-size: 15px;
+  margin: 0;
+  padding: 0;
+  /* background-color: darkgray; */
+  min-height: 100%;
 }
 
 .container {
-    width: 80%;
-    margin: auto;
-    overflow: hidden;
+  width: 80%;
+  margin: auto;
+  overflow: hidden;
 
-    @include mobile {
-        width: 100%;
-    }
+  @include mobile {
+    width: 100%;
+  }
 }
 
 header {
-    background-color: map-get($map: $colors, $key: headerColor);
-    padding-top: 10px;
-    min-height: 70px;
-    border-bottom: #e5e5e5 3px solid;
+  background-color: map-get($map: $colors, $key: headerColor);
+  padding-top: 10px;
+  min-height: 70px;
+  border-bottom: #e5e5e5 3px solid;
 }
 
 .brand {
-    margin-top: 10px;
-    float: left;
+  margin-top: 10px;
+  float: left;
 }
 
 header .icons ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 
 header .icons ul li i {
-    color: grey;
+  color: grey;
 }
 
 header .icons {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 
-    @include mobile {
-        display: none;
-    }
+  @include mobile {
+    display: none;
+  }
 }
 
 .brand .brandName {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .brand .brandName {
-    font-size: 25px;
-    font-family: Georgia, 'Times New Roman', Times, serif;
-    color: #00aef9;
+  font-size: 25px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  color: #00aef9;
 }
 
 .content {
-    background-color: map-get($map: $colors, $key: contentBackGround);
-    align-content: center;
-    margin-right: 100px;
-    margin-left: 100px;
-
-    @include mobile {
-        margin: auto;
-        margin-right: 5%;
-        margin-left: 5%;
-    }
+  background-color: map-get($map: $colors, $key: contentBackGround);
+  align-content: center;
+  margin-right: 100px;
+  margin-left: 100px;
+
+  @include mobile {
+    margin: auto;
+    margin-right: 5%;
+    margin-left: 5%;
+  }
 }
 
 .content .editor-tools .container .bar-tool #align-bartool {
-    text-align: center;
+  text-align: center;
 }
 
 .content .editor-tools .container .bar-tool {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    background-color: map-get($map: $colors, $key: headerColor);
-    border-radius: 8px;
-    box-shadow: 0px 4px 4px #c4c4c4;
-    padding: 10px;
-    display: inline-block;
-
-    /* position: absolute; */
-    @include mobile {
-        margin: auto;
-        padding: 5px;
-    }
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: map-get($map: $colors, $key: headerColor);
+  border-radius: 8px;
+  box-shadow: 0px 4px 4px #c4c4c4;
+  padding: 10px;
+  display: inline-block;
+
+  /* position: absolute; */
+  @include mobile {
+    margin: auto;
+    padding: 5px;
+  }
 }
 
 .content .editor-tools .container .bar-tool {
-    margin-bottom: 100px;
-    margin-left: 10%;
-    margin-right: 10%;
+  margin-bottom: 100px;
+  margin-left: 10%;
+  margin-right: 10%;
 }
 
 input[type='color'] {
-    border: none;
+  border: none;
 }
 
 .content .editor-tools .container .bar-tool #border {
-    border: 1px solid #c4c4c4;
-    transform: rotate(90deg);
+  border: 1px solid #c4c4c4;
+  transform: rotate(90deg);
 }
 
-.content .editor-tools .container .bar-tool>button {
-    margin-right: 5px;
-    margin-left: 5px;
-    border: no;
+.content .editor-tools .container .bar-tool > button {
+  margin-right: 5px;
+  margin-left: 5px;
+  border: no;
 }
 
-.content .editor-tools .container .bar-tool>button:hover {
-    background-color: #dfe6e9;
-    transition: all 0.3s linear 0s;
-    cursor: pointer;
+.content .editor-tools .container .bar-tool > button:hover {
+  background-color: #dfe6e9;
+  transition: all 0.3s linear 0s;
+  cursor: pointer;
 }
 
 .content .editor-tools .container .bar-tool #highlight {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .content .editor-tools .container .bar-tool #highlight {
-    margin-right: 5px;
-    margin-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
 }
 
 .content .text-area {
-    width: 100%;
+  width: 100%;
 }
 
 [contentEditable='true']:empty:not(:focus):before {
-    content: attr(data-text);
-    color: gray;
+  content: attr(data-text);
+  color: gray;
 }
 
 .content .text-area .form #title {
-    background-color: #ffffff;
-    margin-bottom: 5px;
-    @include textArea;
+  background-color: #ffffff;
+  margin-bottom: 5px;
+  @include textArea;
 }
 
 .content .text-area .form #body {
-    margin-bottom: 10px;
-    background-color: #ffffff;
-    @include textArea;
+  margin-bottom: 10px;
+  background-color: #ffffff;
+  @include textArea;
 }
 
 .content .text-area .form #publish {
-    cursor: pointer;
-    border: none;
-    background: map-get($map: $colors, $key: buttonColor);
-    font-size: 16px;
-    padding: 15px 32px;
-    display: inline-block;
-    text-align: center;
-    color: #ffffff;
-    border-radius: 5px;
-    float: right;
-    margin-bottom: 20px;
+  cursor: pointer;
+  border: none;
+  background: map-get($map: $colors, $key: buttonColor);
+  font-size: 16px;
+  padding: 15px 32px;
+  display: inline-block;
+  text-align: center;
+  color: #ffffff;
+  border-radius: 5px;
+  float: right;
+  margin-bottom: 20px;
 }
 
 nav.icons div {
-    margin-right: 15px;
+  margin-right: 15px;
 }
 
 nav.icons i {
-    margin-top: 5px;
+  margin-top: 5px;
 }
 
 nav.icons div.search input[type='text'] {
-    margin-right: 10px;
-    border-radius: 6px;
-    padding: 4px 12px;
-    border-color: #eee;
-    border-width: 1px;
+  margin-right: 10px;
+  border-radius: 6px;
+  padding: 4px 12px;
+  border-color: #eee;
+  border-width: 1px;
 }
 
 nav.icons div.search #search-button {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 // css to style the get article
 
 .card {
-    float: left;
-    margin-top: 10px;
-    padding: 10px;
-    width: 25%;
-    height: 400px;
-    background-color: #ffffff;
-    border-color: #00aef9;
-    border-width: 1px;
-    box-shadow: #808e9b;
-    margin-right: 10px;
+  float: left;
+  margin-top: 10px;
+  padding: 10px;
+  width: 25%;
+  height: 400px;
+  background-color: #ffffff;
+  border-color: #00aef9;
+  border-width: 1px;
+  box-shadow: #808e9b;
+  margin-right: 10px;
 }
 
 .card:hover {
-    cursor: pointer;
-    text-decoration: none;
+  cursor: pointer;
+  text-decoration: none;
 }
 
-.card>img {
-    width: 100%;
-    height: 50%;
+.card > img {
+  width: 100%;
+  height: 50%;
 }
 
 .card .contentDescription {
-    width: 100%;
-    margin-top: 10px;
-    word-wrap: break-word;
+  width: 100%;
+  margin-top: 10px;
+  word-wrap: break-word;
 }
 
 .card .contentDescription .articleCardHeader {
-    width: 100%;
-    text-align: center;
-    word-wrap: break-word;
+  width: 100%;
+  text-align: center;
+  word-wrap: break-word;
 }
 
 .card .contentDescription .articleCardHeader p {
-    font-weight: bold;
-    font-size: 20px;
-    text-transform: capitalize;
+  font-weight: bold;
+  font-size: 20px;
+  text-transform: capitalize;
 }
 
 // styling the alert
 div.alert {
-    width: 30%;
-    height: 30px;
-    display: inline-block;
-    background-color: #bb321f;
-    color: #ffffff;
-    margin-left: 30%;
-    margin-right: 30%;
-    border-radius: 5px;
-    margin-top: 10px;
-    padding: 30px;
-    font-size: 20px;
+  width: 30%;
+  height: 30px;
+  display: inline-block;
+  background-color: #bb321f;
+  color: #ffffff;
+  margin-left: 30%;
+  margin-right: 30%;
+  border-radius: 5px;
+  margin-top: 10px;
+  padding: 30px;
+  font-size: 20px;
 }
 
 // styling the read article
 .contents {
-    background-color: #ffffff;
-    margin-top: 0;
-    min-height: 800px;
+  background-color: #ffffff;
+  margin-top: 0;
+  min-height: 800px;
 }
 
 .contents .contentTitle {
-    width: 100%;
-    text-align: center;
-    padding: 10px;
+  width: 100%;
+  text-align: center;
+  padding: 10px;
 }
 
 .contents .contentBody #articleBody {
-    clear: both;
-    float: left;
-    margin-top: 15px;
-    padding-left: 19%;
-    padding-right: 18%;
+  clear: both;
+  float: left;
+  margin-top: 15px;
+  padding-left: 19%;
+  padding-right: 18%;
 }
 
 .contents .contentBody p {
-    font-size: 20px;
-    word-wrap: break-word;
-    line-height: 1.5em;
+  font-size: 20px;
+  word-wrap: break-word;
+  line-height: 1.5em;
 }
 
 .contents .contentBody p img {
-    width: 63%;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
+  width: 63%;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
 }
 
 .article-icons .icon {
-    margin-right: 10px;
-    display: inline-block;
+  margin-right: 10px;
+  display: inline-block;
 }
 
 .contentDescription a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .contentDescription a:link {
-    color: #2f3640;
+  color: #2f3640;
 }
 
 .contentDescription a:visited {
-    color: #2f3640;
+  color: #2f3640;
 }
 
 .card .contentDescription .buttons {
-    margin-bottom: 5px;
-    position: absolute;
-    margin-top: 10px;
+  margin-bottom: 5px;
+  position: absolute;
+  margin-top: 10px;
 }
 
 .card .contentDescription .buttons .redButton {
-    background: #bb321f;
-    border: 0;
-    color: #ffff;
-    text-align: center;
-    display: inline-block;
-    font-size: 10px;
-    margin: 5px;
-    padding: 3px 12px;
+  background: #bb321f;
+  border: 0;
+  color: #ffff;
+  text-align: center;
+  display: inline-block;
+  font-size: 10px;
+  margin: 5px;
+  padding: 3px 12px;
 }
 
 .card .contentDescription .buttons .lightBlueButton {
-    background: #74b9ff;
-    border: 0;
-    color: #ffff;
-    text-align: center;
-    display: inline-block;
-    font-size: 10px;
-    margin: 5px;
-    padding: 3px 12px;
+  background: #74b9ff;
+  border: 0;
+  color: #ffff;
+  text-align: center;
+  display: inline-block;
+  font-size: 10px;
+  margin: 5px;
+  padding: 3px 12px;
 }
 
 .card .articleDescription {
-    height: 65px;
-    margin-top: 5px;
+  height: 65px;
+  margin-top: 5px;
 }
 
 .container .allArticlecontents {
-    background-color: #ffffff;
-    margin-top: 0;
-    height: 100%;
+  background-color: #ffffff;
+  margin-top: 0;
+  height: 100%;
+  margin-left: 11%;
 }
 
 // sharing on social media styling
-$brand-colors: (facebook: #3b5998,
-twitter: #1da1f2,
-googleplus: #dd4b39,
-linkedin: #0077b5,
-whatsapp: #128c7e,
+$brand-colors: (
+  facebook: #3b5998,
+  twitter: #1da1f2,
+  googleplus: #dd4b39,
+  linkedin: #0077b5,
+  whatsapp: #128c7e,
 );
 
 @mixin buttonCommonStyles {
-    padding: 2px;
-    margin: 0.5rem 0.25rem;
-    border-radius: 2px;
+  padding: 2px;
+  margin: 0.5rem 0.25rem;
+  border-radius: 2px;
 }
 
 .socialMedia {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    .facebookButton {
-        @include buttonCommonStyles; // transition: all 300ms ease-out;
-
-        @each $class,
-        $color in $brand-colors {
-            &.#{$class} {
-                color: $color;
-                border-color: $color;
-
-                &:hover {
-                    background-color: $color;
-                    border-color: $color;
-                    color: #fff;
-                }
-            }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .facebookButton {
+    @include buttonCommonStyles; // transition: all 300ms ease-out;
+
+    @each $class, $color in $brand-colors {
+      &.#{$class} {
+        color: $color;
+        border-color: $color;
+
+        &:hover {
+          background-color: $color;
+          border-color: $color;
+          color: #fff;
         }
+      }
     }
+  }
 
-    .twitterButton {
-        color: map-get($map: $brand-colors, $key: twitter);
-        @include buttonCommonStyles;
-    }
+  .twitterButton {
+    color: map-get($map: $brand-colors, $key: twitter);
+    @include buttonCommonStyles;
+  }
 
-    .twitterButton:hover {
-        background-color: map-get($map: $brand-colors, $key: twitter);
-        color: #fff;
-    }
+  .twitterButton:hover {
+    background-color: map-get($map: $brand-colors, $key: twitter);
+    color: #fff;
+  }
 
-    .linkedinButton {
-        color: map-get($map: $brand-colors, $key: linkedin);
-        @include buttonCommonStyles;
-    }
+  .linkedinButton {
+    color: map-get($map: $brand-colors, $key: linkedin);
+    @include buttonCommonStyles;
+  }
 
-    .linkedinButton:hover {
-        background-color: map-get($map: $brand-colors, $key: linkedin);
-        color: #fff;
-    }
+  .linkedinButton:hover {
+    background-color: map-get($map: $brand-colors, $key: linkedin);
+    color: #fff;
+  }
 
-    .whatsappButton {
-        color: map-get($map: $brand-colors, $key: whatsapp);
-        @include buttonCommonStyles;
-    }
+  .whatsappButton {
+    color: map-get($map: $brand-colors, $key: whatsapp);
+    @include buttonCommonStyles;
+  }
 
-    .whatsappButton:hover {
-        color: #fff;
-        background-color: map-get($map: $brand-colors, $key: whatsapp);
-    }
+  .whatsappButton:hover {
+    color: #fff;
+    background-color: map-get($map: $brand-colors, $key: whatsapp);
+  }
 
-    .emailButton {
-        color: map-get($map: $brand-colors, $key: googleplus);
-        @include buttonCommonStyles;
-    }
+  .emailButton {
+    color: map-get($map: $brand-colors, $key: googleplus);
+    @include buttonCommonStyles;
+  }
 
-    .emailButton:hover {
-        color: #fff;
-        background-color: map-get($map: $brand-colors, $key: googleplus);
-    }
+  .emailButton:hover {
+    color: #fff;
+    background-color: map-get($map: $brand-colors, $key: googleplus);
+  }
 }
 
 .edit-history-section {
-    margin-top: 10px;
-
-    .hideButton {
-        background: #fff;
-        padding: 3px;
-        color: #000;
-        border-radius: 3px;
-        cursor: pointer;
-        margin-bottom: 3px;
-        font-size: 20px;
-    }
+  margin-top: 10px;
+
+  .hideButton {
+    background: #fff;
+    padding: 3px;
+    color: #000;
+    border-radius: 3px;
+    cursor: pointer;
+    margin-bottom: 3px;
+    font-size: 20px;
+  }
 }
 
 .history-section {
-    padding: 3px 15px 5px 0px;
-    border-bottom: 1px solid #c5c5c5;
+  padding: 3px 15px 5px 0px;
+  border-bottom: 1px solid #c5c5c5;
 
-    time {
-        color: #9c9c9c;
-        font-size: 12px;
-        font-weight: bold;
-    }
+  time {
+    color: #9c9c9c;
+    font-size: 12px;
+    font-weight: bold;
+  }
 }
 
 .emailButton:hover {
-    color: #fff;
-    background-color: map-get($map: $brand-colors, $key: googleplus);
+  color: #fff;
+  background-color: map-get($map: $brand-colors, $key: googleplus);
 }
 
 .likeButton {
-    border: none;
-    color: #9c9c9c;
-    cursor: pointer;
-    width: 15px;
-    height: 15px;
+  border: none;
+  color: #9c9c9c;
+  cursor: pointer;
+  width: 15px;
+  height: 15px;
 }
 
 .likeButton:hover {
-    color: #43c0f1;
+  color: #43c0f1;
 }
 
 .buttonSpan {
-    margin-right: 5px;
+  margin-right: 5px;
 }
 
 // style the upload image
 .topImage input[type='file'] {
-    cursor: inherit;
-    display: block;
-    min-height: 100%;
-    min-width: 100%;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    text-align: right;
-    top: 0;
-    float: right;
+  cursor: inherit;
+  display: block;
+  min-height: 100%;
+  min-width: 100%;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+  float: right;
 }
 
 .topImage .file-upload {
-    overflow: hidden;
-    position: absolute;
-    width: 100px;
-    height: 100px;
+  overflow: hidden;
+  position: absolute;
+  width: 100px;
+  height: 100px;
 }
 
 .topImage .file-upload .imageIcone {
-    min-height: 100%;
-    min-width: 100%;
-    margin-left: 20%;
-    color: #3b5998;
+  min-height: 100%;
+  min-width: 100%;
+  margin-left: 20%;
+  color: #3b5998;
 }
 
 // styling the tags
 .tags {
-    padding: 10px;
-    margin-left: 20px;
-    background-color: #3b5998;
-    color: #fff;
-    border-radius: 5px;
-    display: inline-block;
-    cursor: pointer;
-}
-
-#tags>input {
-    border-radius: 5px;
-    border: none;
-    width: 178px;
-    height: 36px;
-    margin-bottom: 5px;
-    padding: 10px;
-    font-size: 15px;
-    margin-right: 5px;
+  padding: 10px;
+  margin-left: 20px;
+  background-color: #3b5998;
+  color: #fff;
+  border-radius: 5px;
+  display: inline-block;
+  cursor: pointer;
+}
+
+#tags > input {
+  border-radius: 5px;
+  border: none;
+  width: 178px;
+  height: 36px;
+  margin-bottom: 5px;
+  padding: 10px;
+  font-size: 15px;
+  margin-right: 5px;
 }
 
 #tags {
-    width: 75%;
-    float: left;
+  width: 75%;
+  float: left;
 }
 
 #addTag {
-    width: 10%;
-    float: left;
+  width: 10%;
+  float: left;
 }
 
 .tagList {
-    display: inline-block;
-    margin: 20px 10px 20px 0;
-    border-radius: 4px;
-    background-color: #ccc;
-    color: #333;
-    font-size: 14px;
-    padding: 0px 5px;
-    cursor: pointer;
+  display: inline-block;
+  margin: 20px 10px 20px 0;
+  border-radius: 4px;
+  background-color: #ccc;
+  color: #333;
+  font-size: 14px;
+  padding: 0px 5px;
+  cursor: pointer;
 }
 
 button.bookmarkIcon {
-    border: none;
-    cursor: pointer;
-    font-size: 20px;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
 }
 
 button.bookmarkIcon .active {
-    path {
-        fill: #00aef9;
-    }
+  path {
+    fill: #00aef9;
+  }
 }
 
 .bookmarkIcon:hover {
-    path {
-        fill: #00aef9;
-    }
+  path {
+    fill: #00aef9;
+  }
 }
 
 .center {
-    text-align: center;
+  text-align: center;
 }
 
 .dots,
 .dots:before,
 .dots:after {
-    width: 6px;
-    height: 6px;
-    background: #808e9b;
-    border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  background: #808e9b;
+  border-radius: 50%;
 }
 
 .dots {
-    margin: 0px auto;
-    position: relative;
-    display: inline-block;
-    margin-top: 10%;
-    margin-bottom: 10%;
-    z-index: -1;
+  margin: 0px auto;
+  position: relative;
+  display: inline-block;
+  margin-top: 10%;
+  margin-bottom: 10%;
+  z-index: -1;
 }
 
 .dots:before {
-    content: '';
-    position: absolute;
-    left: -10px;
+  content: '';
+  position: absolute;
+  left: -10px;
 }
 
 .dots:after {
-    content: '';
-    position: absolute;
-    right: -10px;
+  content: '';
+  position: absolute;
+  right: -10px;
 }
 
 .horizontalRule,
 .rating {
-    width: 63%;
-    margin: auto;
-}
-
-.articleCategory {
-    margin-left: 20px;
-    display: block;
-    font-size: 16px;
-    margin-bottom: 10px;
+  width: 63%;
+  margin: auto;
+}
+
+//
+// display: block;
+// font-size: 16px;
+// margin-bottom: 10px;
+.sarticleCategory {
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  display: block;
+  font-size: 16px;
+  font-family: sans-serif;
+  font-weight: 700;
+  color: #444;
+  line-height: 1.3;
+  padding: 0.6em 1.4em 0.5em 0.8em;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid #aaa;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  border-radius: 0.5em;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.65em auto, 100%;
+}
+
+.articleCategory::-ms-expand {
+  display: none;
+}
+
+.articleCategory:hover {
+  border-color: #888;
+}
+
+.articleCategory:focus {
+  border-color: #aaa;
+  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
+  box-shadow: 0 0 0 3px -moz-mac-focusring;
+  color: #222;
+  outline: none;
+}
+
+.articleCategory option {
+  font-weight: normal;
 }
 
 // #tagInputchange {
@@ -659,4 +706,4 @@ button.bookmarkIcon .active {
 //     height: 36px;
 //     margin-bottom: 5px;
 //     margin-right: 5px;
-// }
\ No newline at end of file
+// }
diff --git a/src/tests/__snapshots__/commentForm.test.js.snap b/src/tests/__snapshots__/commentForm.test.js.snap
index f4237f9..9869005 100644
--- a/src/tests/__snapshots__/commentForm.test.js.snap
+++ b/src/tests/__snapshots__/commentForm.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TEST COMMENT FORM should render a comment form 1`] = `ShallowWrapper {}`;
+exports[`TEST COMMENT FORM should render a comment form 1`] = `undefined`;
diff --git a/src/tests/__snapshots__/homeNavBar.test.js.snap b/src/tests/__snapshots__/homeNavBar.test.js.snap
index 43918c5..ab9b844 100644
--- a/src/tests/__snapshots__/homeNavBar.test.js.snap
+++ b/src/tests/__snapshots__/homeNavBar.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<HomeNavBar/> Should render navbar with user logged in 1`] = `ShallowWrapper {}`;
+exports[`<HomeNavBar/> Should render navbar with user logged in 1`] = `undefined`;
diff --git a/src/tests/commentForm.test.js b/src/tests/commentForm.test.js
index fad1da5..4b98efa 100644
--- a/src/tests/commentForm.test.js
+++ b/src/tests/commentForm.test.js
@@ -13,6 +13,10 @@ describe('TEST COMMENT FORM', () => {
   };
   beforeEach(() => {
     props = {
+      decodeToken: jest.fn(),
+      decodedToken: {
+        verified: true,
+      },
       currentValue: 'this value',
       buttonLabel: 'Comment',
       saveComment: jest.fn(),
@@ -50,6 +54,10 @@ describe('TEST COMMENT FORM', () => {
         preventDefault: jest.fn(),
       };
       props = {
+        decodeToken: jest.fn(),
+        decodedToken: {
+          verified: true,
+        },
         buttonLabel: 'Comment',
         saveComment: jest.fn(),
       };