Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style adjustments, moving to darker theme

Browse source
This commit is contained in:
Hollgy 2024-03-08 14:52:20 +01:00
parent 79208cb9c2
commit 45c3b87243
4 changed files with 90 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client-solid/src/Components/Comment.tsx
View file

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

17
client-solid/src/Components/Posts.tsx
View file

@ -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"