Removal of replies, Styling and interface update of comments and commentsection

client-solid/src/Components/Buttons/Replies.tsx

@@ -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>
-    </>
-  );
-}

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="flex-col">
-        <div class="chat-bubble">Replies to parent comment if any</div>
+        <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>
     </>
   );
 }

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">
+      <ul class="menu menu-horizontal space-y-0 space-x-2 rounded-box md:space-x-5 md:space-y-0">
-        <MenuItem href="/">
-          <Home />
-        </MenuItem>
         <MenuItem href="/new">
-          {/*Filter component for popular */}
           <Plus />
         </MenuItem>
       </ul>

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>