From 84defa703e70466220bda1376a4bc7de5fee8528 Mon Sep 17 00:00:00 2001
From: Hollgy <karlgustav.ek@hotmail.com>
Date: Fri, 22 Mar 2024 13:30:32 +0100
Subject: [PATCH] Removal of replies, Styling and interface update of comments
 and commentsection

---
 .../src/Components/Buttons/Replies.tsx        | 22 -------------------
 client-solid/src/Components/Comment.tsx       | 13 +++++++----
 client-solid/src/Components/Menu.tsx          |  6 +----
 client-solid/src/Components/PostSegment.tsx   |  4 ++--
 4 files changed, 12 insertions(+), 33 deletions(-)
 delete mode 100644 client-solid/src/Components/Buttons/Replies.tsx

diff --git a/client-solid/src/Components/Buttons/Replies.tsx b/client-solid/src/Components/Buttons/Replies.tsx
deleted file mode 100644
index fe702e8..0000000
--- a/client-solid/src/Components/Buttons/Replies.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { JSXElement } from "solid-js";
-
-import { ReplyIcon } from "../../Util/Icons";
-import { Post } from "../../Util/api";
-
-export default function ReplyButton({ post }: { post: Post }): JSXElement {
-  return (
-    <>
-      <div class="flex p-1">
-        <button
-          class="btn btn-xs hover:border-primary rounded-base"
-          aria-label="Show sign of engagement"
-        >
-          <ReplyIcon />
-        </button>
-        <span class="text-1xl countdown text-center pt-1.5 px-1.5">
-          <p style={{ "--value": 11 }}>{post.comments}</p>
-        </span>
-      </div>
-    </>
-  );
-}
diff --git a/client-solid/src/Components/Comment.tsx b/client-solid/src/Components/Comment.tsx
index bdc61c4..d986055 100644
--- a/client-solid/src/Components/Comment.tsx
+++ b/client-solid/src/Components/Comment.tsx
@@ -1,6 +1,7 @@
 import { JSXElement } from "solid-js";
 
 import { PublicComment } from "../Util/api";
+import ReplyButton from "./Buttons/Reply";
 
 interface CommentProps {
   comment: PublicComment;
@@ -15,14 +16,18 @@ interface CommentProps {
 export function Comment({ comment }: CommentProps): JSXElement {
   return (
     <>
-      <div class="chat chat-start">
+      <div class="chat chat-start py-5">
         <time class="text-xs opacity-50">{comment.created_at}</time>
       </div>
-      <div class="chat-bubble">{comment.content}</div>
+      <div class="chat-">{comment.content}</div>
+        <div class="divider"></div>
       <div class="chat chat-end">
-        <time class="text-xs opacity-50">Reply created_at</time>
-        <div class="chat-bubble">Replies to parent comment if any</div>
+        <div class="flex-col">
+        <time class="text-xs opacity-50 time-end">Reply created_at</time>
+        <div class="chat-end">Replies to parent comment if any</div>
+        </div>
       </div>
+        <div class="divider divider-end"><ReplyButton/></div>
     </>
   );
 }
diff --git a/client-solid/src/Components/Menu.tsx b/client-solid/src/Components/Menu.tsx
index 36e4b67..841de3e 100644
--- a/client-solid/src/Components/Menu.tsx
+++ b/client-solid/src/Components/Menu.tsx
@@ -23,12 +23,8 @@ export function Menu(): JSXElement {
   const login_ctx = useContext(LoginContext)!;
   return (
     <Show when={login_ctx.loggedIn()}>
-      <ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
-        <MenuItem href="/">
-          <Home />
-        </MenuItem>
+      <ul class="menu menu-horizontal space-y-0 space-x-2 rounded-box md:space-x-5 md:space-y-0">
         <MenuItem href="/new">
-          {/*Filter component for popular */}
           <Plus />
         </MenuItem>
       </ul>
diff --git a/client-solid/src/Components/PostSegment.tsx b/client-solid/src/Components/PostSegment.tsx
index 94ae824..9aea9e4 100644
--- a/client-solid/src/Components/PostSegment.tsx
+++ b/client-solid/src/Components/PostSegment.tsx
@@ -2,7 +2,7 @@ import { JSXElement, Show } from "solid-js";
 
 import { Post } from "../Util/api";
 import EngagementButton from "./Buttons/Engegament";
-import ReplyButton from "./Buttons/Replies";
+import CommentsBUtton from "./Buttons/CommentsButton";
 import ReportButton from "./Buttons/Report";
 import ToPostButton from "./Buttons/ToPost";
 import RemovePostButton from "./Buttons/RemovePostButton";
@@ -42,7 +42,7 @@ export function PostSegment({ post }: { post: Post }): JSXElement {
         <div class="card-actions justify-between">
           <div class="flex">
             <EngagementButton post={post} />
-            <ReplyButton post={post} />
+            <CommentsBUtton post={post} />
           </div>
           <ToPostButton post={post} />
         </div>