qwertyasdfgh
/
twitter-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the selected theme the default value

This commit is contained in:
Joonas 2023-11-14 22:28:47 +02:00
parent ddd9c74988
commit ec5509edc2
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Card.tsx
View File

@ -9,7 +9,7 @@ export function Card({
}) { }) {
return ( return (
<div <div
className={`flex z-10 flex-col bg-ctp-mantle/25 gap-5 p-8 border w-full rounded-md ${className}`} className={`flex z-10 flex-col bg-ctp-mantle/50 gap-5 p-8 border w-full rounded-md ${className}`}
> >
{children} {children}
</div> </div>

2
app/root.tsx
View File

@ -33,7 +33,7 @@ export interface RootLoaderTypes {
name: string; name: string;
pfp: string; pfp: string;
toast: string; toast: string;
theme: "latte" | "macchiato" | "mocha" | "frappe" | undefined; theme: "latte" | "macchiato" | "mocha" | "frappe" | "none";
} }
export async function loader({ request }: LoaderFunctionArgs) { export async function loader({ request }: LoaderFunctionArgs) {

16
app/routes/settings.tsx
View File

@ -8,12 +8,18 @@ import {
redirect, redirect,
unstable_parseMultipartFormData, unstable_parseMultipartFormData,
} from "@remix-run/node"; } from "@remix-run/node";
import { Form, Link, useActionData } from "@remix-run/react"; import {
Form,
Link,
useActionData,
useRouteLoaderData,
} from "@remix-run/react";
import { Button } from "~/components/Button"; import { Button } from "~/components/Button";
import { Card } from "~/components/Card"; import { Card } from "~/components/Card";
import { FormInput, FormLabel } from "~/components/Form"; import { FormInput, FormLabel } from "~/components/Form";
import { Title, Text } from "~/components/Typography"; import { Title, Text } from "~/components/Typography";
import { editUser } from "~/models/user.server"; import { editUser } from "~/models/user.server";
import type { RootLoaderTypes } from "~/root";
import { theme } from "~/utils/cookie.server"; import { theme } from "~/utils/cookie.server";
import { profilePictureUploadHandler } from "~/utils/file.server"; import { profilePictureUploadHandler } from "~/utils/file.server";
import { commitSession, getSession } from "~/utils/session.server"; import { commitSession, getSession } from "~/utils/session.server";
@ -109,6 +115,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
export default function Settings() { export default function Settings() {
const data = useActionData<ActionFunction>(); const data = useActionData<ActionFunction>();
const rootData = useRouteLoaderData<RootLoaderTypes>("root");
return ( return (
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
@ -251,7 +258,12 @@ export default function Settings() {
name="theme" name="theme"
> >
{themes.map((theme) => ( {themes.map((theme) => (
<option key={theme} className="capitalize" value={theme}> <option
key={theme}
selected={rootData.theme === theme}
className="capitalize"
value={theme}
>
{theme} {theme}
</option> </option>
))} ))}