mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-09 22:21:49 +02:00
💄 Update input and focus styles (#1012)
This commit is contained in:
parent
8b0f039840
commit
729e97cc53
12 changed files with 69 additions and 68 deletions
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
autoFocus={true}
|
||||
size="lg"
|
||||
error={!!formState.errors.email}
|
||||
autoFocus={true}
|
||||
disabled={formState.isSubmitting}
|
||||
placeholder={t("emailPlaceholder")}
|
||||
{...register("email", { validate: validEmail })}
|
||||
|
|
|
@ -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")}
|
||||
|
|
|
@ -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"
|
||||
error={!!formState.errors.code}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
placeholder={t("verificationCodePlaceholder")}
|
||||
{...register("code", {
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
|
@ -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;
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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
|
||||
className={cn("flex flex-col text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
<div className={cn("flex flex-col", className)} {...props} />
|
||||
);
|
||||
DialogHeader.displayName = "DialogHeader";
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue