field setup issues

manawiki · Jan 2, 2024 · 161a9b9 · 161a9b9
1 parent d4c05f9
commit 161a9b9
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 25 deletions.
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -14,7 +14,7 @@ let styles = {
       "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
 
       // Sizing
-      "px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6",
+      "px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] tablet:px-[calc(theme(spacing.3)-1px)] tablet:py-[calc(theme(spacing[1.5])-1px)] tablet:text-tablet/6",
 
       // Focus
       "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
@@ -23,7 +23,7 @@ let styles = {
       "data-[disabled]:opacity-50",
 
       // Icon
-      "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
+      "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:tablet:my-1 [&>[data-slot=icon]]:tablet:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
    ],
    solid: [
       // Optical border, implemented as the button background to avoid corner artifacts

diff --git a/app/components/Fieldset.tsx b/app/components/Fieldset.tsx
@@ -36,7 +36,7 @@ export function Legend({ ...props }: HeadlessLegendProps) {
          data-slot="legend"
          className={clsx(
             props.className,
-            "font-semibold data-[disabled]:opacity-50",
+            "text-base/6 font-semibold data-[disabled]:opacity-50 tablet:text-tablet/6",
          )}
       />
    );
@@ -82,7 +82,7 @@ export function Label({
          data-slot="label"
          className={clsx(
             className,
-            "text-sm !font-semibold select-none data-[disabled]:opacity-50",
+            "select-none text-sm data-[disabled]:opacity-50 tablet:text-tablet/6",
          )}
       />
    );
@@ -99,7 +99,7 @@ export function Description({
          data-slot="description"
          className={clsx(
             className,
-            "text-zinc-500 data-[disabled]:opacity-50 dark:text-zinc-400",
+            "text-sm text-zinc-500 data-[disabled]:opacity-50 tablet:text-tablet/6 dark:text-zinc-400",
          )}
       />
    );
@@ -116,7 +116,7 @@ export function ErrorMessage({
          data-slot="error"
          className={clsx(
             className,
-            "text-red-600 text-sm data-[disabled]:opacity-50 dark:text-red-500",
+            "text-sm text-red-600 data-[disabled]:opacity-50 tablet:text-tablet/6 dark:text-red-500",
          )}
       />
    );

diff --git a/app/components/Input.tsx b/app/components/Input.tsx
@@ -37,7 +37,7 @@ export function Input({
             "dark:before:hidden",
 
             // Focus ring
-            "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500",
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent tablet:after:focus-within:ring-2 tablet:after:focus-within:ring-blue-500",
 
             // Disabled state
             "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none",
@@ -66,10 +66,10 @@ export function Input({
                   ],
 
                // Basic layout
-               "relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
+               "relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] tablet:px-[calc(theme(spacing[3])-1px)] tablet:py-[calc(theme(spacing[1.5])-1px)]",
 
                // Typography
-               "text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white",
+               "text-base/6 text-zinc-950 placeholder:text-zinc-500 tablet:text-tablet/6 dark:text-white",
 
                // Border
                "border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",

diff --git a/app/components/Switch.tsx b/app/components/Switch.tsx
@@ -38,7 +38,7 @@ export function SwitchField({ className, ...props }: HeadlessFieldProps) {
             className,
 
             // Base layout
-            "grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
+            "grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 tablet:grid-cols-[1fr_auto]",
 
             // Control layout
             "[&>[data-slot=control]]:col-start-2 [&>[data-slot=control]]:self-center",
@@ -166,7 +166,7 @@ export function Switch({
             className,
 
             // Base styles
-            "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
+            "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] tablet:h-5 tablet:w-8",
 
             // Transitions
             "transition duration-0 ease-in-out data-[changing]:duration-200",
@@ -200,7 +200,7 @@ export function Switch({
             aria-hidden="true"
             className={clsx(
                // Basic layout
-               "pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5",
+               "pointer-events-none relative inline-block size-[1.125rem] rounded-full tablet:size-3.5",
 
                // Transition
                "translate-x-0 transition duration-200 ease-in-out",
@@ -213,7 +213,7 @@ export function Switch({
 
                // Checked
                "group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring]",
-               "group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3",
+               "group-data-[checked]:translate-x-4 tablet:group-data-[checked]:translate-x-3",
 
                // Disabled
                "group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5",

diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
@@ -0,0 +1,57 @@
+import {
+   Textarea as HeadlessTextarea,
+   type TextareaProps as HeadlessTextareaProps,
+} from "@headlessui/react";
+import { clsx } from "clsx";
+
+export function Textarea({ className, ...props }: HeadlessTextareaProps) {
+   return (
+      <span
+         data-slot="control"
+         className={clsx([
+            className,
+
+            // Basic layout
+            "relative block w-full",
+
+            // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+            "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
+
+            // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+            "dark:before:hidden",
+
+            // Focus ring
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent tablet:after:focus-within:ring-2 tablet:after:focus-within:ring-blue-500",
+
+            // Disabled state
+            "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none",
+         ])}
+      >
+         <HeadlessTextarea
+            className={clsx([
+               // Basic layout
+               "relative block h-full w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] tablet:px-[calc(theme(spacing.3)-1px)] tablet:py-[calc(theme(spacing[1.5])-1px)]",
+
+               // Typography
+               "placeholder:text-zinc-500 tablet:text-tablet/6 dark:text-white",
+
+               // Border
+               "border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",
+
+               // Background color
+               "bg-transparent dark:bg-white/5",
+
+               // Hide default focus styles
+               "focus:outline-none",
+
+               // Invalid state
+               "data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600",
+
+               // Disabled state
+               "disabled:border-zinc-950/20 disabled:dark:border-white/15 disabled:dark:bg-white/[2.5%] dark:data-[hover]:disabled:border-white/15",
+            ])}
+            {...props}
+         />
+      </span>
+   );
+}
diff --git a/app/routes/_auth+/join.tsx b/app/routes/_auth+/join.tsx
@@ -145,7 +145,7 @@ export default function Signup() {
                   value="join"
                   type="submit"
                   color="dark/white"
-                  className="w-full h-11 mb-6"
+                  className="w-full h-10 mb-6"
                   disabled={disabled}
                >
                   {adding ? <DotLoader /> : t("register.action")}

diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
@@ -203,12 +203,12 @@ export default function Login() {
                      value="login"
                      type="submit"
                      color="dark/white"
-                     className="w-full h-11"
+                     className="w-full h-10"
                      disabled={disabled}
                   >
                      {adding ? <DotLoader /> : t("login.action")}
                   </Button>
-                  <div className="pt-1 flex items-center justify-center">
+                  <div className="flex items-center justify-center">
                      <div className="text-center text-sm">
                         {t("login.dontHaveAccount")}
                         <Link

diff --git a/app/routes/_site+/settings/_settings.tsx b/app/routes/_site+/settings/_settings.tsx
@@ -1,9 +1,16 @@
 import { json } from "@remix-run/node";
-import type { MetaFunction, LoaderFunctionArgs } from "@remix-run/node";
+import type {
+   MetaFunction,
+   LoaderFunctionArgs,
+   SerializeFrom,
+} from "@remix-run/node";
+import { useRouteLoaderData } from "@remix-run/react";
 
 import { Description, Field, Label } from "~/components/Fieldset";
 import { Input } from "~/components/Input";
 import { Switch, SwitchField } from "~/components/Switch";
+import { Textarea } from "~/components/Textarea";
+import type { loader as siteLoaderType } from "~/routes/_site+/_layout";
 
 import { getSiteSlug } from "../_utils/getSiteSlug.server";
 
@@ -16,23 +23,39 @@ export async function loader({
 }
 
 export default function Settings() {
+   const { site } = useRouteLoaderData("routes/_site+/_layout") as {
+      site: SerializeFrom<typeof siteLoaderType>["site"];
+   };
+
    return (
       <main className="mx-auto max-w-[728px] pb-3 max-tablet:px-3 laptop:w-[728px] pt-20 laptop:pt-6">
          <h1 className="font-header text-xl font-bold border-b border-color pb-3 mb-3">
             Settings
          </h1>
          <div className="space-y-3">
-            <Field>
-               <Label>Domain Name</Label>
-               <Input type="text" />
-            </Field>
-            <SwitchField>
-               <Label>Allow embedding</Label>
+            <SwitchField className="border-b border-color pb-4">
+               <Label>Enable Ads</Label>
                <Description>
-                  Allow others to embed your event details on their own site.
+                  Earn revenue by displaying ads on your site.
                </Description>
-               <Switch name="allow_embedding" defaultChecked />
+               <Switch name="enable_ads" defaultChecked />
             </SwitchField>
+            <Field>
+               <Label>Site Name</Label>
+               <Input defaultValue={site.name} name="name" type="text" />
+            </Field>
+            <Field>
+               <Label>Description</Label>
+               <Textarea defaultValue={site.about ?? ""} name="about" />
+            </Field>
+            <Field>
+               <Label>Domain Name</Label>
+               <Input
+                  defaultValue={site.domain ?? ""}
+                  name="domain_name"
+                  type="text"
+               />
+            </Field>
          </div>
       </main>
    );