Refactor of PostSegment, Buttons made into separate comps, Changed color variation of site, Added Reporticon without logic for logged in users

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

@@ -0,0 +1,22 @@
+import { JSXElement } from "solid-js";
+
+import { EngagementIcon } from "../../Util/Icons";
+import { Post } from "../../Util/api";
+
+export default function EngagementButton({ post }: { post: Post }): JSXElement {
+  return (
+    <>
+      <div class="flex p-1">
+        <button
+          class="btn btn-xs hover:border-primary"
+          aria-label="Show sign of engagement"
+        >
+          <EngagementIcon />
+        </button>
+        <span class="text-1xl countdown text-center pt-1.5">
+          <p style={{ "--value": 46 }}>{post.votes}</p>
+        </span>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,22 @@
+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"
+          aria-label="Show sign of engagement"
+        >
+          <ReplyIcon />
+        </button>
+        <span class="text-1xl countdown text-center pt-1.5">
+          <p style={{ "--value": 11 }}>{post.comments}</p>
+        </span>
+      </div>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,24 @@
+import { useNavigate } from "@solidjs/router";
+import { JSXElement } from "solid-js";
+
+
+
+import { Arrow } from "../../Util/Icons";
+import { Post } from "../../Util/api";
+
+
+export default function ToPostButton({ post }: { post: Post }): JSXElement {
+      const nav = useNavigate();
+
+  return (
+    <div class="p-1">
+      <button
+        onClick={(): void => nav("/post/" + post.id)}
+        class="btn btn-xs"
+        aria-label="View post"
+      >
+        <Arrow />
+      </button>
+    </div>
+  );
+}

client-solid/src/Components/PostSegment.tsx

@@ -1,8 +1,10 @@
-import { useNavigate } from "@solidjs/router";
 import { JSXElement, Show } from "solid-js";
 
-import { Arrow, EngagementIcon } from "../Util/Icons";
 import { Post } from "../Util/api";
+import EngagementButton from "./Buttons/Engegament";
+import ReplyButton from "./Buttons/Replies";
+import ReportButton from "./Buttons/Report";
+import ToPostButton from "./Buttons/ToPost";
 
 /**
  * PostSegment is used to display posts in both the main feed and the post view
@@ -12,39 +14,26 @@ import { Post } from "../Util/api";
  * @returns {JSXElement} A JSXElement of a post
  */
 export function PostSegment({ post }: { post: Post }): JSXElement {
-  const nav = useNavigate();
-
   const dateOfCreation = new Date(post.createdAt).toDateString();
   const isEdited = !(post.createdAt == post.updatedAt);
 
   return (
     <div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
       <div class="card-body md:mx-6">
+        <div class="flex flex-row justify-between">
         <h3>{dateOfCreation}</h3>
+        <ReportButton />
+        </div>
         <Show when={isEdited}>
           <p>This post has been edited</p>
         </Show>
         <p class="break-words text-base-content md:pt-2">{post.content}</p>
         <div class="card-actions justify-between">
-          <div class="flex w-24 space-x-3 space-y-1.5">
-          <button
-            // onClick={(engagement)}
-            class="btn btn-xs hover:border-primary"
-            aria-label="Show sign of engagement"
-            >
-            <EngagementIcon />
-          </button>
-            <span class="countdown text-1xl">
-              <span style={{ "--value": 46 }}>{post.votes}</span>
-            </span>
-            </div>
-          <button
-            onClick={(): void => nav("/post/" + post.id)}
-            class="btn btn-xs"
-            aria-label="View post"
-          >
-            <Arrow />
-          </button>
+          <div class="flex">
+            <EngagementButton post={post} />
+            <ReplyButton post={post} />
+          </div>
+          <ToPostButton post={post} />
         </div>
       </div>
     </div>