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

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

@@ -0,0 +1,17 @@
+import { JSXElement } from "solid-js";
+
+import { CommentsIcon } from "../../Util/Icons";
+import { Post } from "../../Util/api";
+
+export default function CommentsBUtton({ post }: { post: Post }): JSXElement {
+  return (
+    <>
+      <div class="flex p-1">
+          <CommentsIcon />
+        <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/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/Buttons/Reply.tsx

@@ -0,0 +1,20 @@
+import { JSXElement, Show, useContext } from "solid-js";
+
+import { LoginContext } from "../../Context/GlobalState";
+import { ReplyIcon, ReportIcon } from "../../Util/Icons";
+
+export default function ReplyButton(): JSXElement {
+  const login_ctx = useContext(LoginContext)!;
+  return (
+    <Show when={login_ctx.loggedIn()}>
+      <div class="flex p-1">
+        <button
+          class="rounded-base btn btn-xs hover:border-primary"
+          aria-label="Report post or comment"
+        >
+          <ReplyIcon />
+        </button>
+      </div>
+    </Show>
+  );
+}

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

client-solid/src/Components/LoginButton.tsx

@@ -35,7 +35,7 @@ export function LoginButton(): JSXElement {
       {showLogoutModal() && (
         <div
           role="alert"
-          class="absolute top-10 z-10 flex rounded-md bg-base-200 border-2 border-warning"
+          class="absolute top-10 z-10 flex rounded-md bg-base-200 border-2 border-info"
         >
           <div class="relative p-5">
             <p>Do you wish to logout?</p>

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>

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>

client-solid/src/Containers/Navbar.tsx

@@ -9,7 +9,7 @@ export function Navbar(): JSXElement {
   return (
     <div class="max-w navbar max-w-3xl rounded-box text-neutral-content md:my-4">
       <div class="flex-1">
-        <A href={"/"} class="btn btn-ghost text-xl normal-case">
+        <A href={"/"} class="btn btn-ghost text-sm normal-case sm:text-xl">
           <Flake />
           <h1>FrostByte</h1>
         </A>

client-solid/src/Util/Icons.tsx

@@ -172,7 +172,7 @@ export function CheckMark(): JSXElement {
   );
 }
 
-export function ReplyIcon(): JSXElement {
+export function CommentsIcon(): JSXElement {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -252,3 +252,21 @@ export function RemovePostIcon(): JSXElement {
     </svg>
   );
 }
+export function ReplyIcon(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width={1.5}
+      stroke="currentColor"
+      class="h-6 w-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
+      />
+    </svg>
+  );
+}