This commit is contained in:
zmeyer44 2023-10-24 13:37:15 -04:00
parent 8c893fd9f1
commit 560f74134d
5 changed files with 27 additions and 22 deletions

View File

@ -189,7 +189,8 @@ export default function CreateCalendarEventModal() {
hideIcon={true} hideIcon={true}
/> />
<TimePicker <TimePicker
className="max-w-fit pl-0 pr-1" className="shrink-0"
inputClassName="max-w-fit pl-0 pr-1"
value={startTime} value={startTime}
onChange={(newTime) => onChange={(newTime) =>
setStartDate( setStartDate(
@ -228,7 +229,8 @@ export default function CreateCalendarEventModal() {
hideIcon={true} hideIcon={true}
/> />
<TimePicker <TimePicker
className="max-w-fit pl-0 pr-1" // className="shrink-0"
inputClassName="max-w-fit pl-0 pr-1"
value={endTime} value={endTime}
onChange={(newTime) => onChange={(newTime) =>
setEndDate( setEndDate(

View File

@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input <CommandPrimitive.Input
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", "flex h-10 w-full rounded-md bg-transparent py-3 text-[16px] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
className, className,
)} )}
{...props} {...props}

View File

@ -1,6 +1,6 @@
import * as React from "react" import * as React from "react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
export interface InputProps export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {} extends React.InputHTMLAttributes<HTMLInputElement> {}
@ -11,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input <input
type={type} type={type}
className={cn( className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-[16px] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
className className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
} },
) );
Input.displayName = "Input" Input.displayName = "Input";
export { Input } export { Input };

View File

@ -1,6 +1,6 @@
import * as React from "react" import * as React from "react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
export interface TextareaProps export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return ( return (
<textarea <textarea
className={cn( className={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-[16px] shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
className className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
} },
) );
Textarea.displayName = "Textarea" Textarea.displayName = "Textarea";
export { Textarea } export { Textarea };

View File

@ -78,12 +78,14 @@ type TimePickerProps = {
hideIcon?: boolean; hideIcon?: boolean;
displayFormat?: string; displayFormat?: string;
className?: string; className?: string;
inputClassName?: string;
}; };
export function TimePicker({ export function TimePicker({
value, value,
onChange, onChange,
hideIcon = false, hideIcon = false,
className, className,
inputClassName,
}: TimePickerProps) { }: TimePickerProps) {
return ( return (
<Popover> <Popover>
@ -93,6 +95,7 @@ export function TimePicker({
className={cn( className={cn(
"justify-start p-0 text-left font-normal", "justify-start p-0 text-left font-normal",
!value && "text-muted-foreground", !value && "text-muted-foreground",
className,
)} )}
> >
{!hideIcon && <CalendarIcon className="mr-2 h-4 w-4" />} {!hideIcon && <CalendarIcon className="mr-2 h-4 w-4" />}
@ -106,7 +109,7 @@ export function TimePicker({
}} }}
className={cn( className={cn(
"border-0 shadow-none outline-none ring-0 focus-visible:ring-0", "border-0 shadow-none outline-none ring-0 focus-visible:ring-0",
className, inputClassName,
)} )}
/> />
</Button> </Button>