From 88d2fc4bd273de6835ce6731c4e8903c20a6ba8d Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 7 Jul 2022 12:02:53 +0200
Subject: [PATCH] Some basic styling for the sign in box

---
 apps/comments-ui/src/components/Comment.js        |  2 +-
 apps/comments-ui/src/components/More.js           |  2 +-
 apps/comments-ui/src/components/NotSignedInBox.js |  6 +++---
 apps/comments-ui/src/components/Reply.js          | 12 +++++++-----
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 01cc2868c3..41ebf84981 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -34,7 +34,7 @@ const Comment = (props) => {
         );
     } else {
         return (
-            <div className={`flex flex-col ${!hasReplies ? 'mb-14' : ''}`}>
+            <div className={`flex flex-col ${!hasReplies && 'mb-14'} last:mb-6`}>
                 <div>
                     <div className="flex mb-4 space-x-4 justify-start items-center">
                         <Avatar comment={comment} />
diff --git a/apps/comments-ui/src/components/More.js b/apps/comments-ui/src/components/More.js
index 973970bd92..058e32440d 100644
--- a/apps/comments-ui/src/components/More.js
+++ b/apps/comments-ui/src/components/More.js
@@ -1,7 +1,7 @@
-import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
 import React, {useContext, useState} from 'react';
 import CommentContextMenu from './modals/CommentContextMenu';
 import AppContext from '../AppContext';
+import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
 
 const More = (props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
diff --git a/apps/comments-ui/src/components/NotSignedInBox.js b/apps/comments-ui/src/components/NotSignedInBox.js
index c13c5022f7..933da37bfe 100644
--- a/apps/comments-ui/src/components/NotSignedInBox.js
+++ b/apps/comments-ui/src/components/NotSignedInBox.js
@@ -1,8 +1,8 @@
 function NotSignedInBox() {
     return (
-        <section>
-            <h1>You are not signed in</h1>
-            <p>Log in to place a comment.</p>
+        <section className="text-center mb-1 bg-neutral-50 rounded-lg pt-12 pb-10 px-8">
+            <h1 className="text-center text-3xl font-sans font-bold mb-6 tracking-tight">Want to join the discussion?</h1>
+            <a className="bg-black text-white font-sans py-3 px-4 mb-6 rounded inline-block" href="#/portal">Sign in to comment</a>
         </section>
     );
 }
diff --git a/apps/comments-ui/src/components/Reply.js b/apps/comments-ui/src/components/Reply.js
index 56baa45a67..3f11dcf497 100644
--- a/apps/comments-ui/src/components/Reply.js
+++ b/apps/comments-ui/src/components/Reply.js
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useContext} from 'react';
+import AppContext from '../AppContext';
 import {ReactComponent as ReplyIcon} from '../images/icons/reply.svg';
 
 function Reply(props) {
-    return (
-        <button className="flex font-sans items-center dark:text-white" onClick={props.toggleReply}>
+    const {member} = useContext(AppContext);
+
+    return member ?
+        (<button className="flex font-sans items-center dark:text-white" onClick={props.toggleReply}>
             <ReplyIcon className={`mr-[6px] stroke-dark dark:stroke-white ${props.isReplying ? 'fill-black dark:fill-white' : ''}`} />Reply
-        </button>
-    );
+        </button>) : null;
 }
 
 export default Reply;