qwertyasdfgh
/
imageboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change header font color and thread reply submit styling improve

This commit is contained in:
Joonas 2023-01-14 01:51:52 +02:00
parent 05d63d67e9
commit 9d4abbeeb5
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Header.jsx
View File

@ -7,7 +7,7 @@ export default function Header() {
</div>
<div className="">
<h1 className="text-4xl font-bold text-ctp-flamingo">Lauta</h1>
<h1 className="text-4xl font-bold text-ctp-lavender">Lauta</h1>
</div>
<nav className="flex-1 flex justify-end">
<Link className="text-ctp-blue hover:underline hover:text-ctp-teal" to={'/'}>threads</Link>

16
app/routes/threads/$threadId.jsx
View File

@ -1,6 +1,7 @@
import { redirect, unstable_createFileUploadHandler, unstable_parseMultipartFormData, json } from "@remix-run/node";
import { useLocation } from "@remix-run/react";
import { useLoaderData, Form, useActionData, Link } from "@remix-run/react";
import { useState } from "react";
import { useEffect, useState } from "react";
import Overlay from "~/components/Overlay";
import prisma from "~/utils/db.server";
@ -25,7 +26,7 @@ export async function action({ request, params }) {
multiPartformdata = await unstable_parseMultipartFormData(request, fileUploadHandler);
multiPartformdata.get("image") !== null ? imageName = multiPartformdata.get("image").name : imageName = null;
} catch (err) {
errors.image = "Image size too big or something elase happened";
errors.image = "Image size too big";
}
if (typeof post !== "string" || post.length > 50 || post.length < 3) {
@ -99,13 +100,14 @@ export default function Thread() {
</ul>
</div>
<Form id="bottom" className=" bg-ctp-crust p-4 space-y-2 shadow-ctp-flamingo shadow-lg outline m-16 rounded flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
<label htmlFor="text-input">
{replying ? <p>Replying to reply id: {replying}</p> : ''}
Post: <input required minLength={3} name="post" type="text" />
<label className="flex flex-col m-2 space-y-2" htmlFor="text-input">
{replying ? <p className="text-center font-semibold text-ctp-black" >Replying to reply id: {replying}</p> : ''}
<span className="font-semibold text-center text-ctp-subtext0" >Post</span> <textarea className=" bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" required minLength={3} name="post" type="text" />
{actionData ? <p>{actionData.post}</p> : ''}
</label>
<label htmlFor="image-upload">
Image: <input accept="image/*" type="file" name="image" id="image-upload" />
<label className="flex flex-col m-2" htmlFor="image-upload"><span className="font-semibold text-center text-ctp-subtext0">Image</span>
<input className="block w-full px-3 py-1.5 text-base font-semibold text-ctp-text bg-ctp-surface0 bg-clip-padding rounded transition ease-in-out m-0" accept="image/*" type="file" id="image-upload" name="image" />
<p>{actionData?.image}</p>
</label>
<input className="hidden" type="number" name="replying" value={replying} />
<button className="bg-white px-4 py-2 shadow rounded-full" type="submit">Submit</button>