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

added proper dark mode

This commit is contained in:
Joonas 2023-01-15 14:41:50 +02:00
parent 9523df92ad
commit f700034a59
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Overlay.jsx
View File

@ -2,7 +2,7 @@ import Header from "./Header";
export default function Overlay({ children }) {
return (
<div className={`max-w-5xl mx-auto p-8`}>
<div className={`text-ctp-text container mx-auto p-4`}>
<Header/>
{children}
</div>

2
app/root.jsx
View File

@ -26,7 +26,7 @@ export default function App() {
<Meta />
<Links />
</head>
<body className="dark:ctp-mocha">
<body className="dark:ctp-mocha dark:bg-ctp-base">
<Outlet />
<ScrollRestoration />
<Scripts />

2
app/routes/index.jsx
View File

@ -85,7 +85,7 @@ export default function Index() {
<p>{errors ? errors.image : ''}</p>
</label>
<br />
<button className=" bg-ctp-surface1 shadow shadow-ctp-overlay0 hover hover:bg-ctp-surface2 py-2 px-4 hover:underline rounded-full" type="submit">Create!</button>
<button className=" bg-ctp-surface1 text-ctp-flamingo shadow shadow-ctp-overlay0 hover hover:bg-ctp-surface2 py-2 px-4 hover:underline rounded-full" type="submit">Create!</button>
</Form>
</div>
{data.length > 0 ?

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

@ -105,19 +105,19 @@ export default function Thread() {
return (
<Overlay>
<div className="flex flex-col p-12 bg-ctp-crust border outline rounded shadow-ctp-green shadow-lg">
<div id="OP" className="bg-ctp-base rounded p-4">
<div className="flex flex-col">
<div id="OP" className="bg-ctp-crust flex flex-col shadow-lg border-4 rounded p-4">
<span><strong>{data.title}</strong> Post id: <strong>{data.id}</strong> Created at: <strong>{new Date(data.createdAt).toLocaleString()}</strong> Reply count: <strong>{data.posts.length}</strong></span>
<br />
<div className="flex flex-col">
<img className="w-60 max-h-96" src={`/uploads/${data.imageName}`} alt="post image" />
<Link className=" text-xs text-ctp-surface0" to={`/uploads/${data.imageName}`} target="_blank" referrerPolicy="no-referrer">Click to show full image</Link>
</div>
<p>{data.post}</p>
<p className="">{data.post}</p>
</div>
<ul className="flex flex-col m-8 ">
<ul className="m-8 ">
{data.posts.map(post =>
<li id={`${post.id}`} className="rounded shadow p-4 m-4 odd:bg-ctp-mantle even:bg-ctp-base" key={post.id}>
<li id={`${post.id}`} className="rounded w-fit shadow p-4 m-4 odd:bg-ctp-mantle border even:bg-ctp-crust" key={post.id}>
<div className="flex flex-wrap">
<span>Reply id: <strong>{post.id}</strong> Replied at: <strong>{new Date(post.createdAt).toLocaleString()} </strong></span>
<Link className="mx-2 text-ctp-rosewater hover:text-ctp-maroon hover:underline" onClick={(event) => {
@ -152,9 +152,9 @@ export default function Thread() {
)}
</ul>
</div>
<Form id="bottom" className="outline bg-ctp-crust p-4 space-y-2 shadow-ctp-flamingo shadow-lg m-16 rounded flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
<Form id="bottom" className="space-y-2 flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
<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> : ''}
{replying ? <p className="text-center font-semibold text-ctp-black" >Replying to reply id: {replying} <button className="text-ctp-sky hover:text-ctp-teal hover:underline" onClick={() => setReplying('')}>Reset</button></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>