From 72a996a230cc6cc3c603b4b53b3c0d232f51fb64 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 3 May 2022 16:36:18 -0400
Subject: [PATCH] Clarify rendering logic

---
 web/components/feed/feed-items.tsx | 55 ++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index d334d06b..3627a6b4 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -313,25 +313,44 @@ export function CommentInput(props: {
               </div>
             )}
           </div>
-          <button
-            className={'btn btn-outline btn-sm text-transform: mt-1 capitalize'}
-            onClick={() => {
-              if (answerOutcome === undefined) {
-                submitComment(id)
-              } else if (!focused) {
-                setFocused(true)
-              } else {
-                submitComment(id)
-                setFocused(false)
+          {!user && (
+            <button
+              className={
+                'btn btn-outline btn-sm text-transform: mt-1 capitalize'
               }
-            }}
-          >
-            {user
-              ? !focused && answerOutcome !== undefined
-                ? 'Add Comment'
-                : 'Comment'
-              : 'Sign in to comment'}
-          </button>
+              onClick={() => submitComment(id)}
+            >
+              Sign in to Comment
+            </button>
+          )}
+          {user && answerOutcome === undefined && (
+            <button
+              className={
+                'btn btn-outline btn-sm text-transform: mt-1 capitalize'
+              }
+              onClick={() => submitComment(id)}
+            >
+              Comment
+            </button>
+          )}
+          {user && answerOutcome !== undefined && (
+            <button
+              className={
+                focused
+                  ? 'btn btn-outline btn-sm text-transform: mt-1 capitalize'
+                  : 'btn btn-ghost btn-sm text-transform: mt-1 capitalize'
+              }
+              onClick={() => {
+                if (!focused) setFocused(true)
+                else {
+                  submitComment(id)
+                  setFocused(false)
+                }
+              }}
+            >
+              {!focused ? 'Add Comment' : 'Comment'}
+            </button>
+          )}
         </div>
       </Row>
     </>