💄 Update input and focus styles (#1012)

apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Alert, AlertDescription, AlertTitle } from "@rallly/ui/alert";
+import { Input } from "@rallly/ui/input";
 import { Label } from "@rallly/ui/label";
 import { InfoIcon, LogOutIcon, UserXIcon } from "lucide-react";
 import Head from "next/head";
@@ -13,7 +14,6 @@ import {
   SettingsContent,
   SettingsSection,
 } from "@/components/settings/settings";
-import { TextInput } from "@/components/text-input";
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
 
@@ -35,7 +35,7 @@ export const ProfilePage = () => {
             <Label className="mb-2.5">
               <Trans i18nKey="userId" defaults="User ID" />
             </Label>
-            <TextInput
+            <Input
               className="w-full"
               value={user.id.substring(0, 10)}
               readOnly

apps/web/src/app/[locale]/(auth)/login/login-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { Alert, AlertDescription, AlertTitle } from "@rallly/ui/alert";
 import { Button } from "@rallly/ui/button";
+import { Input } from "@rallly/ui/input";
 import { useQuery } from "@tanstack/react-query";
 import { AlertTriangleIcon, UserIcon } from "lucide-react";
 import Image from "next/image";
@@ -14,7 +15,6 @@ import { useTranslation } from "react-i18next";
 import { trpc } from "@/app/providers";
 import { VerifyCode, verifyCode } from "@/components/auth/auth-forms";
 import { Spinner } from "@/components/spinner";
-import { TextInput } from "@/components/text-input";
 import { isSelfHosted } from "@/utils/constants";
 import { validEmail } from "@/utils/form-validation";
 
@@ -175,12 +175,12 @@ export function LoginForm() {
         <label htmlFor="email" className="mb-1 text-gray-500">
           {t("email")}
         </label>
-        <TextInput
+        <Input
           className="w-full"
           id="email"
-          proportions="lg"
+          size="lg"
-          autoFocus={true}
           error={!!formState.errors.email}
+          autoFocus={true}
           disabled={formState.isSubmitting}
           placeholder={t("emailPlaceholder")}
           {...register("email", { validate: validEmail })}

apps/web/src/app/[locale]/(auth)/register/register-page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "@rallly/ui/button";
+import { Input } from "@rallly/ui/input";
 import { useParams, useSearchParams } from "next/navigation";
 import { signIn } from "next-auth/react";
 import { useTranslation } from "next-i18next";
@@ -8,7 +9,6 @@ import React from "react";
 import { useForm } from "react-hook-form";
 
 import { VerifyCode } from "@/components/auth/auth-forms";
-import { TextInput } from "@/components/text-input";
 import { useDayjs } from "@/utils/dayjs";
 import { requiredString, validEmail } from "@/utils/form-validation";
 import { trpc } from "@/utils/trpc/client";
@@ -111,10 +111,10 @@ export const RegisterForm = () => {
         <label htmlFor="name" className="mb-1 text-gray-500">
           {t("name")}
         </label>
-        <TextInput
+        <Input
           id="name"
           className="w-full"
-          proportions="lg"
+          size="lg"
           autoFocus={true}
           error={!!formState.errors.name}
           disabled={formState.isSubmitting}
@@ -131,10 +131,10 @@ export const RegisterForm = () => {
         <label htmlFor="email" className="mb-1 text-gray-500">
           {t("email")}
         </label>
-        <TextInput
+        <Input
           className="w-full"
           id="email"
-          proportions="lg"
+          size="lg"
           error={!!formState.errors.email}
           disabled={formState.isSubmitting}
           placeholder={t("emailPlaceholder")}

apps/web/src/components/auth/auth-forms.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { Button } from "@rallly/ui/button";
+import { Input } from "@rallly/ui/input";
 import { Trans, useTranslation } from "next-i18next";
 import React from "react";
 import { useForm } from "react-hook-form";
 
 import { requiredString } from "../../utils/form-validation";
-import { TextInput } from "../text-input";
 
 export const verifyCode = async (options: { email: string; token: string }) => {
   const url = `${
@@ -71,10 +71,9 @@ export const VerifyCode: React.FunctionComponent<{
               }}
             />
           </p>
-          <TextInput
+          <Input
             autoFocus={true}
-            proportions="lg"
+            size="lg"
-            error={!!formState.errors.code}
             className="w-full"
             placeholder={t("verificationCodePlaceholder")}
             {...register("code", {

apps/web/src/components/new-participant-modal.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { VoteType } from "@rallly/database";
 import { Button } from "@rallly/ui/button";
+import { Input } from "@rallly/ui/input";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import { useForm } from "react-hook-form";
@@ -11,7 +12,6 @@ import { usePoll } from "@/contexts/poll";
 
 import { useAddParticipantMutation } from "./poll/mutations";
 import VoteIcon from "./poll/vote-icon";
-import { TextInput } from "./text-input";
 
 const requiredEmailSchema = z.object({
   requireEmail: z.literal(true),
@@ -117,7 +117,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
         <label htmlFor="name" className="mb-1 text-gray-500">
           {t("name")}
         </label>
-        <TextInput
+        <Input
           className="w-full"
           data-1p-ignore="true"
           error={!!formState.errors.name}
@@ -136,7 +136,7 @@ export const NewParticipantForm = (props: NewParticipantModalProps) => {
           {t("email")}
           {!isEmailRequired ? ` (${t("optional")})` : null}
         </label>
-        <TextInput
+        <Input
           className="w-full"
           error={!!formState.errors.email}
           disabled={formState.isSubmitting}

apps/web/src/components/settings/profile-settings.tsx

@@ -5,10 +5,10 @@ import {
   FormItem,
   FormLabel,
 } from "@rallly/ui/form";
+import { Input } from "@rallly/ui/input";
 import { useForm } from "react-hook-form";
 
 import { LegacyButton } from "@/components/button";
-import { TextInput } from "@/components/text-input";
 import { Trans } from "@/components/trans";
 import { UserAvatar } from "@/components/user";
 import { useUser } from "@/components/user-provider";
@@ -52,7 +52,7 @@ export const ProfileSettings = () => {
                     <Trans i18nKey="name" />
                   </FormLabel>
                   <FormControl>
-                    <TextInput id="name" {...field} />
+                    <Input id="name" {...field} />
                   </FormControl>
                 </FormItem>
               )}
@@ -66,7 +66,7 @@ export const ProfileSettings = () => {
                     <Trans i18nKey="email" />
                   </FormLabel>
                   <FormControl>
-                    <TextInput {...field} disabled={true} />
+                    <Input {...field} disabled={true} />
                   </FormControl>
                 </FormItem>
               )}

apps/web/src/components/text-input.tsx

@@ -1,36 +0,0 @@
-import clsx from "clsx";
-import * as React from "react";
-
-export interface TextInputProps
-  extends React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  error?: boolean;
-  proportions?: "lg" | "md";
-}
-
-export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
-  function TextInput(
-    { className, error, proportions: size = "md", ...forwardProps },
-    ref,
-  ) {
-    return (
-      <input
-        ref={ref}
-        type="text"
-        className={clsx(
-          "appearance-none rounded border text-sm text-gray-800 placeholder:text-gray-500",
-          className,
-          {
-            "px-2.5 py-2": size === "md",
-            "px-3 py-2 text-xl": size === "lg",
-            "input-error": error,
-            "bg-gray-50 text-gray-500": forwardProps.disabled,
-          },
-        )}
-        {...forwardProps}
-      />
-    );
-  },
-);

apps/web/src/style.css

@@ -28,7 +28,12 @@
   input,
   select,
   textarea {
-    @apply rounded outline-none focus:ring-gray-300 focus-visible:ring-1;
+    @apply rounded outline-none;
+  }
+
+  input,
+  textarea {
+    @apply focus:border-primary-400 hover:border-gray-300;
   }
 
   #floating-ui-root {
@@ -45,6 +50,8 @@
   }
   .input {
     @apply appearance-none border px-2 text-gray-800 placeholder:text-gray-500;
+    @apply focus-visible:ring-offset-input-background focus-visible:ring-1 focus-visible:ring-offset-1;
+    @apply focus-visible:border-primary-400  focus-visible:ring-primary-100;
   }
   input.input {
     @apply h-9;

packages/ui/src/button.tsx

@@ -7,7 +7,10 @@ import * as React from "react";
 import { cn } from "@rallly/ui";
 
 const buttonVariants = cva(
-  "inline-flex border font-medium disabled:text-muted-foreground focus:ring-1 focus:ring-gray-300 disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
+  cn(
+    "inline-flex border font-medium disabled:text-muted-foreground disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
+    "focus-visible:ring-offset-input-background focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-indigo-100",
+  ),
   {
     variants: {
       variant: {

packages/ui/src/dialog.tsx

@@ -52,7 +52,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "animate-in sm:zoom-in-90 data-[state=open]:fade-in shadow-huge fixed z-50 grid w-full gap-4 overflow-hidden bg-white p-5 sm:rounded-md",
+        "animate-in data-[state=open]:fade-in shadow-huge fixed z-50 mx-4 grid translate-y-4 gap-4 overflow-hidden rounded-md bg-white p-5",
         {
           "sm:max-w-sm": size === "sm",
           "sm:max-w-md": size === "md",
@@ -80,10 +80,7 @@ const DialogHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
+  <div className={cn("flex flex-col", className)} {...props} />
-    className={cn("flex flex-col text-center sm:text-left", className)}
-    {...props}
-  />
 );
 DialogHeader.displayName = "DialogHeader";
 

packages/ui/src/input.tsx

@@ -1,16 +1,45 @@
 import * as React from "react";
 
 import { cn } from "@rallly/ui";
+import { cva } from "class-variance-authority";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> & {
+  size?: "sm" | "md" | "lg";
+  error?: boolean;
+};
+
+const inputVariants = cva(
+  cn(
+    "border-input placeholder:text-muted-foreground flex h-9 w-full rounded border bg-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
+  ),
+  {
+    variants: {
+      size: {
+        sm: "h-6 text-sm px-1",
+        md: "h-9 text-base px-2",
+        lg: "h-12 text-lg px-3",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, size, type, error, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "border-input ring-offset-input-background placeholder:text-muted-foreground focus-visible:ring-ring focus-visible:border-ring flex h-9 w-full rounded border bg-transparent px-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:ring-offset-input-background focus-visible:ring-1 focus-visible:ring-offset-1",
+          inputVariants({ size }),
+          error
+            ? "focus-visible:border-rose-400  focus-visible:ring-rose-100"
+            : "focus-visible:border-primary-400  focus-visible:ring-primary-100",
           className,
         )}
         ref={ref}

packages/ui/src/textarea.tsx

@@ -9,7 +9,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "border-input ring-offset-input-background placeholder:text-muted-foreground focus-visible:ring-ring focus-visible:border-ring flex min-h-[80px] w-full rounded border bg-transparent px-3 py-2 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground flex min-h-[80px] w-full rounded border bg-transparent px-3 py-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:ring-offset-input-background focus-visible:ring-1 focus-visible:ring-offset-1",
+          "focus-visible:border-primary-400  focus-visible:ring-primary-100",
           className,
         )}
         ref={ref}