style adjustments, moving to darker theme

client-solid/src/Components/Comment.tsx

@@ -1,5 +1,8 @@
-import { JSXElement, } from "solid-js";
-import { PublicComment }  from "../Util/api";
+import { JSXElement } from "solid-js";
+
+import { ReplyIcon } from "../Util/Icons";
+import { EngagementIcon } from "../Util/Icons";
+import { PublicComment } from "../Util/api";
 
 /**
  * Comment is a component that displays a single comment.
@@ -9,11 +12,21 @@ import { PublicComment }  from "../Util/api";
  */
 export function Comment({ comment }: { comment: PublicComment }): JSXElement {
   return (
-    <div class="flex flex-col space-y-2">
-      <div class="flex flex-row space-x-2">
-        <div class="text-xs text-gray-500">{comment.created_at}</div>
+    <div class="flex min-w-full flex-col rounded-lg border-b-secondary border-b-2 bg-base-300 px-5 py-3 text-base-content transition-all hover:bg-base-300 ">
+      <div class="flex flex-row">
+        <div class="pb-2 text-xs text-gray-500">{comment.created_at}</div>
       </div>
       <div class="text-sm">{comment.content}</div>
+
+      <div class="flex justify-between py-5 align-baseline">
+        <div class="btn self-start">
+          {/* Placeholder icon, tbd */}
+          <EngagementIcon />
+        </div>
+        <div class="btn self-end">
+          <ReplyIcon />
+        </div>
+      </div>
     </div>
   );
 }

client-solid/src/Components/Posts.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "@solidjs/router";
 import { For, JSXElement, Show, createSignal } from "solid-js";
 
-import { Arrow, loadSpinner } from "../Util/Icons";
+import { Arrow, EngagementIcon, loadSpinner } from "../Util/Icons";
 import { Post, getPosts } from "../Util/api";
 
 export function Posts(): JSXElement {
@@ -26,10 +26,19 @@ export function Posts(): JSXElement {
 export function PostSegment(props: { post: Post }): JSXElement {
   const nav = useNavigate();
   return (
-    <div class="card compact w-full flex-grow border-b-2 border-b-base-300 bg-base-200 text-base-content transition-all hover:bg-base-300">
+    <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">
-        <p class="break-words text-base-content md:px-6 md:pt-2">{props.post?.content}</p>
-        <div class="card-actions justify-end">
+        <p class="break-words text-base-content md:px-6 md:pt-2">
+          {props.post?.content}
+        </p>
+        <div class="card-actions justify-between">
+          <button
+            // onClick={(engagement)}
+            class="btn btn-xs hover:border-x-primary"
+            aria-label="View post"
+          >
+            <EngagementIcon />
+          </button>
           <button
             onClick={(): void => nav("/post/" + props.post?.id)}
             class="btn btn-xs"

client-solid/src/Util/Icons.tsx

@@ -155,19 +155,63 @@ export function ThumbDown(): JSXElement {
 
 export function CheckMark(): 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"
+    <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-linecape="round" 
-      stroke-linejoin="round" 
-      d="m4.5 12.75 6 6 9-13.5" 
+      <path
+        stroke-linecape="round"
+        stroke-linejoin="round"
+        d="m4.5 12.75 6 6 9-13.5"
       />
     </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="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"
+      />
+    </svg>
+  );
+}
+
+// Placeholder icon for engagement, TBD
+export function EngagementIcon(): 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="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"
+      />
+    </svg>
+  );
+}

client-solid/tailwind.config.js

@@ -5,11 +5,11 @@ export default {
     themes: [
       {
         mytheme: {
-          primary: "#64279e",
-          secondary: "#9454af",
+          primary: "#286ca8",
+          secondary: "#528cbf",
           accent: "#6ff7c5",
           neutral: "#1f2329",
-          "base-100": "#2a3a47",
+          "base-100": "#12212e",
           info: "#8b9be5",
           success: "#79e2b4",
           warning: "#efb261",