Readd explicit labels

Author: Rikthepixel

src/components/controls/Input.tsx

@@ -4,8 +4,6 @@ import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-import Label, { style as labelStyle } from "./Label";
-
 export const style = cva("w-full rounded-full py-2 px-3 border-2", {
   variants: {
     color: {
@@ -18,94 +16,29 @@ export const style = cva("w-full rounded-full py-2 px-3 border-2", {
   }
 });
 
-const borderStyle = cva("absolute inset-0 border-2 top-[-9px] rounded-[inherit] pl-[var(--label-inset)] pointer-events-none", {
-  variants: {
-    color: {
-      primary: "border-primary",
-      secondary: "border-secondary"
-    },
-  }
-});
-
-export type BaseProps = {
-  inputClassName?: string;
-  labelClassName?: string;
-  fieldsetClassName?: string;
-  labelInset?: string;
-  label?: ReactNode;
-};
-
 export type TagProps = Omit<InputHTMLAttributes<HTMLInputElement>, "color">;
 export type VariantProps = GetVariantProps<typeof style>;
-export type InputProps = BaseProps & TagProps & RequiredKeys<VariantProps, "color">;
+export type InputProps = TagProps & RequiredKeys<VariantProps, "color">;
 
 const Input = forwardRef((
   {
     className,
-    inputClassName,
-    labelClassName,
-    fieldsetClassName,
-    labelInset = "1.5rem",
-    label,
     color,
-    id,
     ...props
   }: InputProps,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
 
-  const fallbackId = useId();
-
-  const computedClassName = useMemo(
-    () => twMerge("relative rounded-full", className),
-    [className]
-  );
-
-  const computedInputClassName = useMemo(
-    () => twMerge(
-      style({ color }),
-      "rounded-[inherit]",
-      label ? "border-transparent" : "",
-      inputClassName
-    ),
-    [inputClassName, color, label]
-  );
-
-  const computedLabelClassName = useMemo(
-    () => twMerge("absolute left-[var(--label-inset)] top-0 translate-x-[2px] -translate-y-1/2 px-1", labelClassName),
-    [labelClassName]
-  );
-
-  const computedFieldsetClassName = useMemo(
-    () => twMerge(borderStyle({ color }), fieldsetClassName),
-    [color, fieldsetClassName]
-  );
-
-  const computedLegendClassName = useMemo(
-    () => twMerge(labelStyle(), "px-1 opacity-0"),
-    [computedLabelClassName]
-  );
-
-  const insetProps = useMemo<Record<string, string>>(
-    () => ({ "--label-inset": labelInset }),
-    [labelInset]
-  );
+  const computedClassName = useMemo(() => {
+    return twMerge(style({ color }), className);
+  }, [className, color]);
 
   return (
-    <div className={computedClassName}>
-      {label && <Label className={computedLabelClassName} htmlFor={id ?? fallbackId} style={insetProps}>
-        {label}
-      </Label>}
-      {label && <fieldset aria-hidden className={computedFieldsetClassName} style={insetProps}>
-        <legend className={computedLegendClassName}>{label}</legend>
-      </fieldset>}
-      <input
-        ref={ref}
-        className={computedInputClassName}
-        id={id ?? fallbackId}
-        {...props}
-      />
-    </div>
+    <input
+      ref={ref}
+      className={computedClassName}
+      {...props}
+    />
   );
 });
 

src/components/controls/Label.tsx

@@ -1,22 +1,37 @@
-import { cva } from "class-variance-authority";
+import { RequiredKeys } from "@/types/utility";
+import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
 import React, { DetailedHTMLProps, ForwardedRef, LabelHTMLAttributes, forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 
-export interface LabelProps extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
-  htmlFor: string;
-}
 
-export const style = cva("text-sm font-bold block");
 
-const Label = forwardRef(({ className, ...props }: LabelProps, ref: ForwardedRef<HTMLLabelElement>) => {
+export const style = cva("text-sm font-bold block text-start", {
+  variants: {
+    inset: {
+      true: "ml-4",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    inset: true
+  }
+});
+
+export type VariantProps = GetVariantProps<typeof style>;
+export type TagProps = RequiredKeys<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor">;
+
+export type LabelProps = VariantProps & TagProps;
+
+const Label = forwardRef(({ className, inset, ...props }: LabelProps, ref: ForwardedRef<HTMLLabelElement>) => {
 
   const computedClassName = useMemo(
-    () => twMerge(style(), className),
-    [className]
+    () => twMerge(style({ inset }), className),
+    [className, inset]
   );
 
   return (
     <label
+      ref={ref}
       className={computedClassName}
       {...props}
     />

src/components/controls/TextArea.tsx

@@ -5,7 +5,7 @@ import { RequiredKeys } from "@/types/utility";
 
 import { style as inputStyle, VariantProps as InputVariantProps } from "./Input";
 
-export const style: typeof inputStyle = (props) => twMerge(inputStyle(props), "rounded-lg");
+export const style: typeof inputStyle = (props) => twMerge(inputStyle(props), "rounded-2xl");
 
 export type TagProps = DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
 export type VariantProps = InputVariantProps;

src/components/pages/contribute/FeedbackSection.tsx

@@ -65,7 +65,7 @@ const FeedbackSection = () => {
         oneTime
       >
         <div className="w-full">
-          <Label htmlFor="message-input" className="text-start text-secondary">
+          <Label htmlFor="message-input" className="text-start text-primary">
             Your Message:
           </Label>
           <TextArea

src/components/pages/front/SignupSection.tsx

@@ -15,6 +15,7 @@ import Heading from "@/components/layout/Heading";
 import { backend } from "@/utils/wretch";
 import useFormMutation from "@/hooks/useMutation";
 import { sendSubscribeEvent } from "@/api/analytics";
+import Label from "@/components/controls/Label";
 
 const signupSchema = z.object({
   email: z.string().email().min(5, "Your email must at least contain 5 characters")
@@ -77,15 +78,14 @@ const SignupSection = () => {
         oneTime
       >
         <div className="w-full">
+          <Label htmlFor="signup-email-input" className="text-primary ml-7">
+            Email:
+          </Label>
           <Input
             id="signup-email-input"
             color="primary"
-            className="w-full text-lg md:text-xl"
-            inputClassName="p-4"
+            className="w-full text-lg md:text-xl p-4"
             placeholder="your@email.com"
-            label="Email:"
-            labelInset="2rem"
-            labelClassName="text-primary"
             {...register("email")}
           />
           <Error className="w-full px-2 text-start" state={formState} name="email" />

src/pages/mail/unsubscribe.tsx

@@ -17,6 +17,7 @@ import Input from "@/components/controls/Input";
 import Form from "@/components/controls/Form";
 import Heading from "@/components/layout/Heading";
 import Button from "@/components/controls/Button";
+import Label from "@/components/controls/Label";
 
 
 const unsubscribeSchema = z.object({
@@ -36,8 +37,8 @@ const UnsubscribePage: Page = ({ pathname }) => {
     backend.url("/email/unsubscribe")
       .post({ email })
       .json((res: BackendResponse) => {
-        if (res.success) sendUnsubscribeEvent()
-        setResponse(res)
+        if (res.success) sendUnsubscribeEvent();
+        setResponse(res);
       });
   });
 
@@ -61,14 +62,17 @@ const UnsubscribePage: Page = ({ pathname }) => {
           <p className="max-w-md">
             Once you unsubscribe you won't receive any more emails from us and your email will be immediately deleted from our records.
           </p>
-          <Input
-            id="email-input"
-            color="secondary"
-            placeholder="your@email.com"
-            label="Email:"
-            labelClassName="text-secondary"
-            {...register("email")}
-          />
+          <div>
+            <Label htmlFor="email-input" className="text-secondary">
+              Email:
+            </Label>
+            <Input
+              id="email-input"
+              color="secondary"
+              placeholder="your@email.com"
+              {...register("email")}
+            />
+          </div>
           <Button type="submit" color="secondary">
             {!loading
               ? "Unsubscribe"