3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-12 23:51:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update input and focus styles (#1012)

Browse source
This commit is contained in:
Luke Vella 2024-02-01 12:44:30 +07:00 • committed by GitHub
parent 8b0f039840
commit 729e97cc53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 69 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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

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

@ -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 })}

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

@ -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")}

7
apps/web/src/components/auth/auth-forms.tsx
View file

@ -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", {

6
apps/web/src/components/new-participant-modal.tsx
View file

@ -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}

6
apps/web/src/components/settings/profile-settings.tsx
View file

@ -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>
)}

36
apps/web/src/components/text-input.tsx
View file

@ -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}
/>
);
},
);

9
apps/web/src/style.css
View file

@ -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;

5
packages/ui/src/button.tsx
View file

@ -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: {

7
packages/ui/src/dialog.tsx
View file

@ -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";

35
packages/ui/src/input.tsx
View file

@ -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}

4
packages/ui/src/textarea.tsx
View file

@ -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}