fixed comment style

src/Components/Comments/SingleComment/CollapsedComment.js

@@ -7,17 +7,15 @@ const CollapsedComment = props => {
         <img className="px-2" alt="profile" src="anon.jpeg" height={16} />
         <a href="#user">username</a>
         <small className="px-3">One day ago</small>
-        <span
-          className="a"
+        <a
+          href="#toggle"
           style={{
             fontVariant: 'small-caps',
-            color: 'blue',
-            cursor: 'pointer',
           }}
           onClick={() => props.toggleCollapse(props.id)}
         >
           expand
-        </span>
+        </a>
       </div>
     </li>
   )

src/Components/Comments/SingleComment/ExpandedComment.js

@@ -8,38 +8,40 @@ const ExpandedComment = props => {
       onMouseEnter={() => props.showCollapseLink(props.id, true)}
       onMouseLeave={() => props.showCollapseLink(props.id, false)}
     >
-      <div className="media bg bg-dark">
+      <div id="media-image" className="media bg bg-dark">
         <img alt="profile" src="anon.jpeg" height={64} />
 
-        <div className="media-body ml-3 my-auto">
-          <a className="" href="#user">
-            username
-          </a>
-        </div>
-        <div className="white">
-          <small>{props.createdAt}</small>
-          {props.replies.length > 0 ? (
-            <span
-              className="a ml-3"
-              style={{
-                fontVariant: 'small-caps',
-                color: 'blue',
-                cursor: 'pointer',
-                display: props.displayCollapse || 'none',
-              }}
-              onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
-            >
-              {props.collapsed ? 'expand' : 'collapse'}
-            </span>
-          ) : (
-            ''
-          )}
-          <a className="float-right ml-2" href="#replies">
-            reply
-          </a>
+        <div id="media-body" className="media-body ml-3 my-auto">
+          <a href="#user">username</a>
+          <div className="text-white-50">
+            <small>{props.createdAt}</small>
+            {props.replies.length > 0 ? (
+              <a
+                href="#toggle"
+                className="ml-3"
+                style={{
+                  fontVariant: 'small-caps',
+                  display: props.displayCollapse || 'none',
+                }}
+                onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
+              >
+                {props.collapsed ? 'expand' : 'collapse'}
+              </a>
+            ) : (
+              ''
+            )}
+          </div>
         </div>
       </div>
       <div className="">{props.text}</div>
+
+      {props.collapsed ? (
+        <div />
+      ) : (
+        <a className="" href="#replies">
+          reply
+        </a>
+      )}
     </li>
   )
 }