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">
+          <div class="flex">
-          <button
+            <EngagementButton post={post} />
-            // onClick={(engagement)}
+            <ReplyButton post={post} />
-            class="btn btn-xs hover:border-primary"
+          </div>
-            aria-label="Show sign of engagement"
+          <ToPostButton post={post} />
-            >
-            <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>
       </div>
     </div>

client-solid/src/Util/Icons.tsx

@@ -215,3 +215,22 @@ export function EngagementIcon(): JSXElement {
     </svg>
   );
 }
+
+export function ReportIcon(): 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="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5"
+      />
+    </svg>
+  );
+}

client-solid/tailwind.config.js

@@ -8,8 +8,8 @@ export default {
           primary: "#286ca8",
           secondary: "#528cbf",
           accent: "#6ff7c5",
-          neutral: "#1f2329",
+          neutral: "#0369A1", // Main color of replies
-          "base-100": "#12212e",
+          "base-100": "#082f49", // Main Color for most components, used in wide variety
           info: "#8b9be5",
           success: "#79e2b4",
           warning: "#efb261",