asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(admin-ui): Lint all UI files (#3459)

Browse Source
This commit is contained in:
Kasper Fabricius Kristensen
2023-03-13 14:02:20 +01:00
committed by GitHub
parent 55febef7f1
commit ad7d7fcd51
432 changed files with 1593 additions and 1767 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/admin-ui/ui/src/components/atoms/avatar/index.tsx
+3 -3
View File
@@ -34,18 +34,18 @@ const Avatar: React.FC<AvatarProps> = ({
return (
<RadixAvatar.Root
className={clsx(
"w-full h-full items-center justify-center overflow-hidden select-none rounded-circle",
"rounded-circle h-full w-full select-none items-center justify-center overflow-hidden",
color
)}
>
<RadixAvatar.Image
src={user?.img}
alt={username}
className="object-cover w-full h-full rounded-circle"
className="rounded-circle h-full w-full object-cover"
/>
<RadixAvatar.Fallback
className={clsx(
"w-full h-full flex items-center justify-center bg-inherit text-grey-0 rounded-circle",
"text-grey-0 rounded-circle flex h-full w-full items-center justify-center bg-inherit",
font
)}
>
packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
+1 -2
View File
@@ -1,5 +1,4 @@
import clsx from "clsx"
import React from "react"
import { useNavigate } from "react-router-dom"
import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
@@ -18,7 +17,7 @@ const BackButton = ({ path, label = "Go back", className }: Props) => {
}}
className={clsx("px-small py-xsmall", className)}
>
<div className="flex items-center gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold">
<div className="gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold flex items-center">
<ArrowLeftIcon size={20} />
<span className="ml-1">{label}</span>
</div>
packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx
+2 -2
View File
@@ -12,13 +12,13 @@ const Checkbox = React.forwardRef(
useImperativeHandle(ref, () => checkboxRef.current)
return (
<label
className={clsx("flex items-center cursor-pointer", className)}
className={clsx("flex cursor-pointer items-center", className)}
htmlFor={id}
>
<input
type="checkbox"
ref={checkboxRef}
className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
className="form-checkbox rounded-base text-violet-60 mr-small border-grey-30 h-[20px] w-[20px] focus:ring-0"
value={value}
id={id}
{...rest}
packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const CustomHeader = ({
const year = date.getFullYear()
return (
<div className="flex w-full gap-4 items-center">
<div className="flex w-full items-center gap-4">
<div className="flex flex-1 items-center justify-end gap-3">
<NativeSelect
defaultValue={monthName}
packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx
+7 -7
View File
@@ -50,13 +50,13 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
<PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
<PopoverPrimitive.Trigger asChild>
<button
className={clsx("w-full rounded-rounded border ", {
className={clsx("rounded-rounded w-full border ", {
"shadow-input border-violet-60": isOpen,
"border-grey-20": !isOpen,
})}
>
<InputContainer className="border-0 shadown-none focus-within:shadow-none">
<div className="w-full flex text-grey-50 pr-0.5 justify-between">
<InputContainer className="shadown-none border-0 focus-within:shadow-none">
<div className="text-grey-50 flex w-full justify-between pr-0.5">
<InputHeader
{...{
label,
@@ -76,15 +76,15 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
<PopoverPrimitive.Content
side="top"
sideOffset={8}
className="rounded-rounded px-8 border border-grey-20 bg-grey-0 w-full shadow-dropdown"
className="rounded-rounded border-grey-20 bg-grey-0 shadow-dropdown w-full border px-8"
>
<CalendarComponent date={tempDate} onChange={setTempDate} />
<div className="flex w-full mb-8 mt-5">
<div className="mb-8 mt-5 flex w-full">
<Button
variant="ghost"
size="medium"
onClick={() => setIsOpen(false)}
className="mr-2 w-1/3 flex justify-center border border-grey-20"
className="border-grey-20 mr-2 flex w-1/3 justify-center border"
>
Cancel
</Button>
@@ -92,7 +92,7 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
size="medium"
variant="primary"
onClick={() => submitDate()}
className="w-2/3 flex justify-center"
className="flex w-2/3 justify-center"
>{`Set ${label}`}</Button>
</div>
</PopoverPrimitive.Content>
packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx
+6 -6
View File
@@ -49,13 +49,13 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
<PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
<PopoverPrimitive.Trigger asChild>
<button
className={clsx("w-full rounded-rounded border ", {
className={clsx("rounded-rounded w-full border ", {
"shadow-input border-violet-60": isOpen,
"border-grey-20": !isOpen,
})}
>
<InputContainer className="border-0 shadown-none focus-within:shadow-none">
<div className="w-full flex text-grey-50 pr-0.5 justify-between">
<InputContainer className="shadown-none border-0 focus-within:shadow-none">
<div className="text-grey-50 flex w-full justify-between pr-0.5">
<InputHeader
{...{
label,
@@ -66,7 +66,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
/>
<ArrowDownIcon size={16} />
</div>
<div className="w-full items-center flex text-left text-grey-40">
<div className="text-grey-40 flex w-full items-center text-left">
<ClockIcon size={16} />
<span className="mx-1">UTC</span>
<span className="text-grey-90">
@@ -79,7 +79,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
<PopoverPrimitive.Content
side="top"
sideOffset={8}
className="rounded-rounded scrollbar-hide border px-6 pt-6 pb-4 border-grey-20 bg-grey-0 w-full flex shadow-dropdown"
className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown flex w-full border px-6 pt-6 pb-4"
>
<NumberScroller
numbers={hourNumbers}
@@ -92,7 +92,7 @@ const TimePicker: React.FC<DateTimePickerProps> = ({
selected={selectedMinute}
onSelect={(n) => setSelectedMinute(n)}
/>
<div className="absolute bottom-4 left-0 right-0 bg-gradient-to-b from-transparent to-grey-0 h-xlarge z-10" />
<div className="to-grey-0 h-xlarge absolute bottom-4 left-0 right-0 z-10 bg-gradient-to-b from-transparent" />
</PopoverPrimitive.Content>
</PopoverPrimitive.Root>
</div>
packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ const Fade: React.FC<FadeProps> = ({
return (
<div
className={clsx("transition-all duration-100 z-50", classes, classname)}
className={clsx("z-50 transition-all duration-100", classes, classname)}
>
{show ? children : null}
</div>
packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = ({
onDrop={handleFileDrop}
onDragOver={(e) => e.preventDefault()}
className={clsx(
"flex flex-col select-none inter-base-regular text-grey-50 cursor-pointer items-center justify-center w-full h-full rounded-rounded border-2 border-dashed border-grey-20 transition-colors hover:border-violet-60 hover:text-grey-40",
"inter-base-regular text-grey-50 rounded-rounded border-grey-20 hover:border-violet-60 hover:text-grey-40 flex h-full w-full cursor-pointer select-none flex-col items-center justify-center border-2 border-dashed transition-colors",
className
)}
>
packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx
+1 -2
View File
@@ -1,5 +1,4 @@
import clsx from "clsx"
import React from "react"
import TaxesIcon from "../../fundamentals/icons/taxes-icon"
import Tooltip from "../tooltip"
@@ -10,7 +9,7 @@ type Props = {
const IncludesTaxTooltip = ({ includesTax }: Props) => {
return (
<Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
<div className="w-large h-large rounded-rounded border border-grey-20 flex items-center justify-center">
<div className="w-large h-large rounded-rounded border-grey-20 flex items-center justify-center border">
<TaxesIcon
size={16}
className={clsx({
packages/admin-ui/ui/src/components/atoms/input-error/index.tsx
+3 -4
View File
@@ -1,6 +1,5 @@
import { ErrorMessage } from "@hookform/error-message"
import clsx from "clsx"
import React from "react"
import { MultipleFieldErrors } from "react-hook-form"
import Tooltip from "../tooltip"
@@ -22,7 +21,7 @@ const InputError = ({ errors, name, className }: InputErrorProps) => {
render={({ message, messages }) => {
return (
<div
className={clsx("text-rose-50 inter-small-regular mt-2", className)}
className={clsx("inter-small-regular mt-2 text-rose-50", className)}
>
{messages ? (
<MultipleMessages messages={messages} />
@@ -43,12 +42,12 @@ const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
const remainderErrors = errors.slice(1)
return (
<div className="flex items-center gap-x-1 cursor-default">
<div className="flex cursor-default items-center gap-x-1">
<p>{displayedError}</p>
{remainderErrors?.length > 0 && (
<Tooltip
content={
<div className="text-rose-50 inter-small-regular">
<div className="inter-small-regular text-rose-50">
{remainderErrors.map((e, i) => {
return (
<p key={i}>
packages/admin-ui/ui/src/components/atoms/notification/index.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const Notification: React.FC<NotificationProps> = ({
return (
<ToasterContainer visible={toast.visible} className="w-[380px]">
<div>{getIcon(type)}</div>
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-white">
<div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col text-white">
<span className="inter-small-semibold">{title}</span>
<span className="inter-small-regular text-grey-20">{message}</span>
</div>
packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx
+4 -4
View File
@@ -18,7 +18,7 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
<div
{...props}
className={clsx(
"flex flex-col time-list h-[305px] overflow-y-auto",
"time-list flex h-[305px] flex-col overflow-y-auto",
className
)}
>
@@ -27,14 +27,14 @@ const NumberScroller: React.FC<NumberScrollerProps> = ({
<div
key={i}
className={clsx(
"w-[40px] h-[40px] last:mb-4 rounded inter-base-regular hover:bg-grey-20",
"inter-base-regular hover:bg-grey-20 h-[40px] w-[40px] rounded last:mb-4",
{
"bg-violet-60 hover:bg-violet-50 text-grey-0 inter-base-semibold":
"bg-violet-60 text-grey-0 inter-base-semibold hover:bg-violet-50":
n === selected,
}
)}
>
<button onClick={() => onSelect(n)} className="w-full h-full py-2">
<button onClick={() => onSelect(n)} className="h-full w-full py-2">
{n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
</button>
</div>
packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx
+2 -4
View File
@@ -1,5 +1,3 @@
import React from "react"
type OSShortcutProps = {
winModifiers: string | string[]
macModifiers: string | string[]
@@ -38,8 +36,8 @@ const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
}
return (
<div className="flex items-center text-grey-40">
<p className="m-0 inter-base-semibold">
<div className="text-grey-40 flex items-center">
<p className="inter-base-semibold m-0">
<span className="inter-base-semibold">{modifiers} </span>
{input}
</p>
packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const ErrorState: React.FC<SavingStateProps> = ({
<div>
<XCircleIcon size={20} className="text-rose-40" />
</div>
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
<div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
<span className="inter-small-semibold">{title}</span>
<span className="inter-small-regular text-grey-50">{message}</span>
</div>
packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx
+5 -5
View File
@@ -54,21 +54,21 @@ const SaveNotification: React.FC<SaveNotificationProps> = ({
}
return (
<ToasterContainer visible={toast.visible} className="p-0 pl-base w-[448px]">
<ToasterContainer visible={toast.visible} className="pl-base w-[448px] p-0">
<div className="py-base">{getIcon(icon)}</div>
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow py-base">
<div className="ml-small mr-base gap-y-2xsmall py-base flex flex-grow flex-col">
<span className="inter-small-semibold">{title}</span>
<span className="inter-small-regular text-grey-50">{message}</span>
</div>
<div className="flex flex-col inter-small-semibold border-l border-grey-20 h-full">
<div className="inter-small-semibold border-grey-20 flex h-full flex-col border-l">
<button
onClick={handleSave}
className="inter-small-semibold flex items-center justify-center h-1/2 border-b border-grey-20 px-base text-violet-60"
className="inter-small-semibold border-grey-20 px-base text-violet-60 flex h-1/2 items-center justify-center border-b"
>
Publish
</button>
<button
className="inter-small-semibold flex items-center justify-center h-1/2 px-base"
className="inter-small-semibold px-base flex h-1/2 items-center justify-center"
onClick={onDismiss}
>
Discard
packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const SavingState: React.FC<SavingStateProps> = ({
<div>
<Spinner variant="secondary" size="large" />
</div>
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
<div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
<span className="inter-small-semibold">{title}</span>
<span className="inter-small-regular text-grey-50">{message}</span>
</div>
packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const SuccessState: React.FC<SavingStateProps> = ({
<div>
<CheckCircleIcon size={20} className="text-emerald-40" />
</div>
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
<div className="ml-small mr-base gap-y-2xsmall flex flex-grow flex-col">
<span className="inter-small-semibold">{title}</span>
<span className="inter-small-regular text-grey-50">{message}</span>
</div>
packages/admin-ui/ui/src/components/atoms/spinner.tsx
+2 -2
View File
@@ -19,10 +19,10 @@ const Spinner: React.FC<SpinnerProps> = ({
{ "h-[16px] w-[16px]": size === "small" }
)}
>
<div className="flex items-center justify-center relative w-full h-full">
<div className="relative flex h-full w-full items-center justify-center">
<div
className={clsx(
"animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
"animate-ring rounded-circle h-4/5 w-4/5 border-2 border-transparent",
{ "border-t-grey-0": variant === "primary" },
{ "border-t-violet-60": variant === "secondary" }
)}
packages/admin-ui/ui/src/components/atoms/switch/index.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import * as RadixSwitch from "@radix-ui/react-switch"
import clsx from "clsx"
import React from "react"
/**
* A controlled switch component atom.
@@ -11,12 +10,12 @@ function Switch(props: RadixSwitch.SwitchProps) {
{...props}
disabled={props.disabled}
className={clsx(
"w-8 h-[18px] rounded-full transition-bg bg-gray-300 radix-state-checked:bg-violet-60"
"transition-bg radix-state-checked:bg-violet-60 h-[18px] w-8 rounded-full bg-gray-300"
)}
>
<RadixSwitch.Thumb
className={clsx(
"w-2 h-2 bg-white rounded-full block transition-transform translate-x-[5px] radix-state-checked:translate-x-[19px]"
"radix-state-checked:translate-x-[19px] block h-2 w-2 translate-x-[5px] rounded-full bg-white transition-transform"
)}
/>
</RadixSwitch.Root>
packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
+5 -5
View File
@@ -11,17 +11,17 @@ export const Thumbnail = ({ src, className, size = "small" }: Props) => {
return (
<div
className={clsx(
"bg-grey-5 flex items-center justify-center overflow-hidden rounded-rounded",
"bg-grey-5 rounded-rounded flex items-center justify-center overflow-hidden",
{
"w-[30px] h-10": size === "small",
"w-9 h-12": size === "medium",
"w-[170px] h-[226px]": size === "large",
"h-10 w-[30px]": size === "small",
"h-12 w-9": size === "medium",
"h-[226px] w-[170px]": size === "large",
},
className
)}
>
{src ? (
<img src={src} className="object-cover object-center flex-1" />
<img src={src} className="flex-1 object-cover object-center" />
) : (
<ImagePlaceholderIcon />
)}
packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const ToasterContainer: React.FC<ToasterContainerProps> = ({
return (
<div
className={clsx(
"flex items-start bg-grey-90 p-base border rounded-rounded shadow-toaster mb-xsmall last:mb-0",
"bg-grey-90 p-base rounded-rounded shadow-toaster mb-xsmall flex items-start border last:mb-0",
{
"animate-enter": visible,
},
packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx
+2 -2
View File
@@ -41,8 +41,8 @@ const Tooltip = ({
align="center"
className={clsx(
"inter-small-semibold text-grey-50",
"bg-grey-0 py-2 px-3 shadow-dropdown rounded-rounded",
"border border-solid border-grey-20",
"bg-grey-0 shadow-dropdown rounded-rounded py-2 px-3",
"border-grey-20 border border-solid",
"max-w-[220px]",
className
)}
packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx
+5 -5
View File
@@ -60,10 +60,10 @@ const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
return (
<button
className={clsx(
"transition-all rounded-lg border flex items-center justify-center",
"flex items-center justify-center rounded-lg border transition-all",
{
"bg-rose-50 border-rose-50 px-3 py-1.5": armed,
"bg-transparent border-gray-20 p-1.5": !armed,
"border-rose-50 bg-rose-50 px-3 py-1.5": armed,
"border-gray-20 bg-transparent p-1.5": !armed,
},
{
"!bg-grey-40 !border-grey-40 !p-1.5": deleting,
@@ -75,14 +75,14 @@ const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
ref={innerRef}
>
<div
className={clsx("text-rose-50 inter-small-semibold", {
className={clsx("inter-small-semibold text-rose-50", {
hidden: armed || deleting,
})}
>
{children || <TrashIcon className="text-grey-50" size={20} />}
</div>
<span
className={clsx("text-white inter-small-semibold", {
className={clsx("inter-small-semibold text-white", {
hidden: !armed || deleting,
})}
>
packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const IconBadge: React.FC<IconBadgeProps> = ({
<Badge
variant={variant ?? "default"}
className={clsx(
"flex items-center justify-center aspect-square w-[40px] h-[40px] border-2 border-white outline outline-1 outline-grey-20",
"outline-grey-20 flex aspect-square h-[40px] w-[40px] items-center justify-center border-2 border-white outline outline-1",
className
)}
{...rest}
packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { FC } from "react"
import { FC } from "react"
import IconProps from "./types/icon-type"
const DownloadIcon: FC<IconProps> = (props) => {
packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { FC } from "react"
import { FC } from "react"
import IconProps from "./types/icon-type"
const FileIcon: FC<IconProps> = (props) => {
packages/admin-ui/ui/src/components/fundamentals/icons/sad-face-icon/index.tsx
-1
View File
@@ -44,7 +44,6 @@ const SadFaceIcon: React.FC<IconProps> = ({
strokeLinejoin="round"
/>
</svg>
)
}
packages/admin-ui/ui/src/components/fundamentals/icons/sided-mouth-face/index.tsx
-1
View File
@@ -43,7 +43,6 @@ const SidedMouthFaceIcon: React.FC<IconProps> = ({
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
packages/admin-ui/ui/src/components/fundamentals/image-placeholder.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import ImagePlaceholderIcon from "./icons/image-placeholder-icon"
const ImagePlaceholder = () => {
return (
<div className="flex items-center justify-center w-full h-full rounded-soft bg-grey-5">
<div className="rounded-soft bg-grey-5 flex h-full w-full items-center justify-center">
<ImagePlaceholderIcon size={12} />
</div>
)
packages/admin-ui/ui/src/components/fundamentals/input-container.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const InputContainer: React.FC<InputContainerProps> = ({
}
}}
className={clsx([
`bg-grey-5 inter-base-regular w-full p-3 flex h-18 flex-col cursor-text border border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-rounded`,
`bg-grey-5 inter-base-regular h-18 border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-rounded flex w-full cursor-text flex-col border p-3`,
className,
])}
>
packages/admin-ui/ui/src/components/fundamentals/input-header.tsx
+2 -2
View File
@@ -20,14 +20,14 @@ const InputHeader: React.FC<InputHeaderProps> = ({
return (
<div
className={clsx(
"w-full flex inter-small-semibold text-grey-50 items-center",
"inter-small-semibold text-grey-50 flex w-full items-center",
className
)}
>
<label>{label}</label>
{required && <div className="text-rose-50 "> *</div>}
{tooltip || tooltipContent ? (
<div className="flex ml-1.5">
<div className="ml-1.5 flex">
{tooltip || <IconTooltip content={tooltipContent} />}
</div>
) : null}
packages/admin-ui/ui/src/components/molecules/actionables.tsx
+5 -5
View File
@@ -32,7 +32,7 @@ const Actionables: React.FC<ActionablesProps> = ({
<Button
variant="ghost"
size="small"
className="w-xlarge h-xlarge focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none"
className="w-xlarge h-xlarge focus-visible:shadow-input focus-visible:border-violet-60 focus:shadow-none focus-visible:outline-none"
>
<MoreHorizontalIcon size={20} />
</Button>
@@ -43,7 +43,7 @@ const Actionables: React.FC<ActionablesProps> = ({
<DropdownMenu.Content
sideOffset={5}
className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall min-w-[200px] z-30"
className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
>
{actions.map((action, i) => {
return (
@@ -52,9 +52,9 @@ const Actionables: React.FC<ActionablesProps> = ({
<Button
variant="ghost"
size="small"
className={clsx("w-full justify-start flex", {
className={clsx("flex w-full justify-start", {
"text-rose-50": action?.variant === "danger",
"opacity-50 select-none pointer-events-none":
"pointer-events-none select-none opacity-50":
action?.disabled,
})}
onClick={action?.onClick}
@@ -97,7 +97,7 @@ const Actionables: React.FC<ActionablesProps> = ({
onClick={action.onClick}
>
{action.icon ? (
<div className="flex items-center gap-x-2xsmall">
<div className="gap-x-2xsmall flex items-center">
{action.icon}
{action.label}
</div>
packages/admin-ui/ui/src/components/molecules/activity-card/index.tsx
+22 -42
View File
@@ -1,4 +1,4 @@
import React, { MutableRefObject, ReactNode } from "react"
import React, { ReactNode } from "react"
import StatusIndicator from "../../fundamentals/status-indicator"
import Tooltip from "../../atoms/tooltip"
import clsx from "clsx"
@@ -16,18 +16,12 @@ export type ActivityCardProps = {
export const ActivityCard: React.FC<ActivityCardProps> = (
props: ActivityCardProps
) => {
const {
key,
title,
icon,
relativeTimeElapsed,
shouldShowStatus,
children
} = props
const { key, title, icon, relativeTimeElapsed, shouldShowStatus, children } =
props
const date = !!props.date && new Date(props.date).toLocaleDateString(
"en-us",
{
const date =
!!props.date &&
new Date(props.date).toLocaleDateString("en-us", {
hour12: true,
day: "2-digit",
month: "short",
@@ -40,47 +34,33 @@ export const ActivityCard: React.FC<ActivityCardProps> = (
const getTimeElement = () => {
return (
<div className="flex cursor-default">
{
!!relativeTimeElapsed && (
<span >{relativeTimeElapsed}</span>
)
}
{
shouldShowStatus &&
<StatusIndicator variant={"primary"} className="ml-2"/>
}
{!!relativeTimeElapsed && <span>{relativeTimeElapsed}</span>}
{shouldShowStatus && (
<StatusIndicator variant={"primary"} className="ml-2" />
)}
</div>
)
}
return (
<div key={key} className="mx-8 border-b last:border-b-0 border-grey-20">
<div className="flex hover:bg-grey-5 -mx-8 px-8 py-6">
<div className="relative w-full h-full">
<div className="flex justify-between inter-small-semibold text-grey-90">
<div key={key} className="border-grey-20 mx-8 border-b last:border-b-0">
<div className="hover:bg-grey-5 -mx-8 flex px-8 py-6">
<div className="relative h-full w-full">
<div className="inter-small-semibold text-grey-90 flex justify-between">
<div className="flex">
{
!!icon && icon
}
{!!icon && icon}
<span>{title}</span>
</div>
{
((!!relativeTimeElapsed || shouldShowStatus)) && (
formattedDate ? (
<Tooltip content={formattedDate}>
{getTimeElement()}
</Tooltip>
) : (
getTimeElement()
)
)
}
{(!!relativeTimeElapsed || shouldShowStatus) &&
(formattedDate ? (
<Tooltip content={formattedDate}>{getTimeElement()}</Tooltip>
) : (
getTimeElement()
))}
</div>
<div className={clsx(!!icon && "pl-8")}>
{children}
</div>
<div className={clsx(!!icon && "pl-8")}>{children}</div>
</div>
</div>
</div>
packages/admin-ui/ui/src/components/molecules/amount-input/amount-and-currency-input.tsx
+5 -5
View File
@@ -87,10 +87,10 @@ const AmountAndCurrencyInput = ({
}
return (
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
{label && <InputHeader label={label} className="mb-xsmall" />}
<div className="focus-within:shadow-focus-border rounded-rounded">
<div className="relative bg-grey-5 rounded-rounded h-10 shadow-border focus-within:shadow-cta transition-colors">
<div className="bg-grey-5 rounded-rounded shadow-border focus-within:shadow-cta relative h-10 transition-colors">
<NextSelect
customStyles={{
control:
@@ -107,7 +107,7 @@ const AmountAndCurrencyInput = ({
value={value.currency}
onChange={onCurrencyChange}
/>
<div className="absolute left-[92px] inset-y-0 right-0 flex items-center pl-xsmall pr-base inter-base-regular h-10">
<div className="pl-xsmall pr-base inter-base-regular absolute inset-y-0 left-[92px] right-0 flex h-10 items-center">
<AmountField
ref={inputRef}
step={step}
@@ -118,9 +118,9 @@ const AmountAndCurrencyInput = ({
allowNegativeValue={false}
placeholder="-"
decimalScale={decimal_digits}
className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
/>
<div className="flex items-center min-w-[16px] ml-2xsmall">
<div className="ml-2xsmall flex min-w-[16px] items-center">
<p className="text-grey-40 w-full text-right">{symbol_native}</p>
</div>
</div>
packages/admin-ui/ui/src/components/molecules/amount-input/amount-input.tsx
+7 -8
View File
@@ -1,5 +1,5 @@
import clsx from "clsx"
import React, { useEffect, useState } from "react"
import { useEffect, useState } from "react"
import AmountField from "react-currency-input-field"
import { currencies } from "../../../utils/currencies"
import InputError from "../../atoms/input-error"
@@ -22,9 +22,8 @@ const AmountInput = ({
value,
onChange,
}: Props) => {
const { symbol_native, decimal_digits } = currencies[
currencyCode.toUpperCase()
]
const { symbol_native, decimal_digits } =
currencies[currencyCode.toUpperCase()]
const getFormattedValue = (value: number) => {
return `${value / 10 ** decimal_digits}`
@@ -57,7 +56,7 @@ const AmountInput = ({
{label && <InputHeader label={label} className="mb-xsmall" />}
<div
className={clsx(
"w-full flex items-center bg-grey-5 border border-gray-20 px-base py-xsmall rounded-rounded h-10 focus-within:shadow-input focus-within:border-violet-60 inter-base-regular",
"bg-grey-5 border-gray-20 px-base py-xsmall rounded-rounded focus-within:shadow-input focus-within:border-violet-60 inter-base-regular flex h-10 w-full items-center border",
{
"border-rose-50": errors && name && errors[name],
}
@@ -67,7 +66,7 @@ const AmountInput = ({
<p>{currencyCode.toUpperCase()}</p>
</div>
<div className="flex items-center gap-2xsmall w-full">
<div className="gap-2xsmall flex w-full items-center">
<AmountField
step={step}
value={formattedValue}
@@ -77,9 +76,9 @@ const AmountInput = ({
allowNegativeValue={false}
placeholder="-"
decimalScale={decimal_digits}
className="bg-transparent outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40 text-right"
className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-transparent text-right font-normal outline-none outline-0"
/>
<div className="flex items-center min-w-[16px] ml-2xsmall">
<div className="ml-2xsmall flex min-w-[16px] items-center">
<p className="text-grey-40 w-full text-right">{symbol_native}</p>
</div>
</div>
packages/admin-ui/ui/src/components/molecules/availability-duration/index.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ const AvailabilityDuration: React.FC<AvailabilityDurationProps> = ({
return (
<div>
<div className="grid grid-cols-3 grid-rows-2 gap-x-xsmall gap-y-base mt-xlarge">
<div className="gap-x-xsmall gap-y-base mt-xlarge grid grid-cols-3 grid-rows-2">
<InputField
label="Years"
type="number"
packages/admin-ui/ui/src/components/molecules/banner-card/index.tsx
+5 -5
View File
@@ -19,14 +19,14 @@ const BannerCard: React.FC<BannerCardProps> & {
Footer: React.FC
} = ({ title, thumbnail, actions, children }) => {
return (
<div className="rounded-rounded border bg-grey-0 border-grey-20 w-full p-base medium:p-xlarge">
<div className="flex gap-large items-start">
<div className="rounded-rounded bg-grey-0 border-grey-20 p-base medium:p-xlarge w-full border">
<div className="gap-large flex items-start">
{thumbnail && (
<div className="min-w-[72px] min-h-[72px] w-[72px] h-[72px] rounded-base overflow-hidden">
<div className="rounded-base h-[72px] min-h-[72px] w-[72px] min-w-[72px] overflow-hidden">
<img
src={thumbnail}
alt="Thumbnail"
className="w-full h-full object-cover"
className="h-full w-full object-cover"
/>
</div>
)}
@@ -48,7 +48,7 @@ const Description: React.FC<BannerCardDescriptionProps> = ({
}) => {
return (
<div>
<p className="inter-small-regular text-grey-50 max-w-[460px] line-clamp-2">
<p className="inter-small-regular text-grey-50 line-clamp-2 max-w-[460px]">
{children}
</p>
{cta && (
packages/admin-ui/ui/src/components/molecules/batch-job-file-card/index.tsx
+7 -11
View File
@@ -1,4 +1,4 @@
import React, { ReactNode } from "react"
import { ReactNode } from "react"
type Props = {
fileName: string
@@ -8,31 +8,27 @@ type Props = {
}
const BatchJobFileCard = ({ fileName, fileSize, icon, onClick }: Props) => {
const preparedOnClick = (onClick ?? (() => void 0))
const preparedOnClick = onClick ?? (() => void 0)
return (
<div
className="flex items-center w-full cursor-pointer mt-4"
className="mt-4 flex w-full cursor-pointer items-center"
onClick={preparedOnClick}
>
<div
className="flex items-center justify-center p-2.5 border border-grey-20 rounded-lg"
className="border-grey-20 flex items-center justify-center rounded-lg border p-2.5"
title={fileName}
>
{!!icon && icon}
</div>
<div className="text-left relative w-full pl-4">
<div
className="overflow-hidden truncate inter-small-regular max-w-[80%]"
>
<div className="relative w-full pl-4 text-left">
<div className="inter-small-regular max-w-[80%] overflow-hidden truncate">
{fileName}
</div>
{!!fileSize && (
<div className="text-grey-40 inter-small-regular">
{fileSize}
</div>
<div className="text-grey-40 inter-small-regular">{fileSize}</div>
)}
</div>
</div>
packages/admin-ui/ui/src/components/molecules/breadcrumb/index.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
return (
<div
className={clsx(
"w-full flex items-center inter-small-semibold text-grey-50 mb-4",
"inter-small-semibold text-grey-50 mb-4 flex w-full items-center",
className
)}
{...props}
packages/admin-ui/ui/src/components/molecules/collapsible-tree/index.tsx
+13 -14
View File
@@ -22,9 +22,8 @@ type TCollapsibleTreeContext = {
toggle: () => void
}
const CollapsibleTreeContext = React.createContext<TCollapsibleTreeContext | null>(
null
)
const CollapsibleTreeContext =
React.createContext<TCollapsibleTreeContext | null>(null)
export const CollapsibleTree: CollapsibleTreeType = ({ children }) => {
const [open, setOpen] = React.useState(false)
@@ -66,7 +65,7 @@ const CollapsibleTreeContent: React.FC<CollapsibleTreeContentProps> = ({
return (
<div
className={clsx(
"pl-5 mt-xsmall",
"mt-xsmall pl-5",
{
hidden: !open,
"animate-fade-in-top": open,
@@ -100,15 +99,15 @@ const CollapsibleTreeParent: React.FC<CollapsibleTreeParentProps> = ({
<Container className={className}>
<div className="flex items-center justify-between">
<div className="gap-x-small flex items-center">{children}</div>
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
{actions && (
<Actionables customTrigger={Trigger()} actions={actions} />
)}
<div className="h-5 w-px rounded-circle bg-grey-20" />
<div className="rounded-circle bg-grey-20 h-5 w-px" />
<Button
variant="ghost"
size="small"
className="p-[6px] text-grey-50"
className="text-grey-50 p-[6px]"
onClick={toggle}
>
{open ? <MinusIcon size={20} /> : <PlusIcon size={20} />}
@@ -137,16 +136,16 @@ const CollapsibleTreeLeaf: React.FC<CollapsibleTreeLeafProps> = ({
return (
<div
className={clsx(
"col-tree flex items-center relative pb-xsmall last:pb-0",
"col-tree pb-xsmall relative flex items-center last:pb-0",
className
)}
>
<div className="absolute top-0 left-0 bottom-0">
<div className="border-l border-dashed border-grey-20 h-1/2 w-px" />
<div className="h-1/2 border-l border-dashed border-grey-20 w-px bottom-half-dash" />
<div className="border-grey-20 h-1/2 w-px border-l border-dashed" />
<div className="border-grey-20 bottom-half-dash h-1/2 w-px border-l border-dashed" />
</div>
<div className="w-[13px] h-px border-t border-grey-20 border-dashed mr-xsmall" />
<Container className="w-full flex items-center justify-between inter-small-regular">
<div className="border-grey-20 mr-xsmall h-px w-[13px] border-t border-dashed" />
<Container className="inter-small-regular flex w-full items-center justify-between">
{children}
{actions && (
<Actionables
@@ -169,7 +168,7 @@ const Container: React.FC<{ className?: string }> = ({
return (
<div
className={clsx(
"rounded-rounded border border-grey-20 py-2xsmall px-small",
"rounded-rounded border-grey-20 py-2xsmall px-small border",
className
)}
>
@@ -180,7 +179,7 @@ const Container: React.FC<{ className?: string }> = ({
const Trigger = () => {
return (
<Button variant="ghost" size="small" className="p-[6px] text-grey-50">
<Button variant="ghost" size="small" className="text-grey-50 p-[6px]">
<MoreHorizontalIcon size={20} />
</Button>
)
packages/admin-ui/ui/src/components/molecules/customer-avatar-item/index.tsx
+3 -3
View File
@@ -22,11 +22,11 @@ const CustomerAvatarItem: React.FC<CustomerAvatarItemProps> = ({
: "-"
return (
<div className="flex items-center py-1.5 w-full">
<div className="w-[24px] h-[24px]">
<div className="flex w-full items-center py-1.5">
<div className="h-[24px] w-[24px]">
<Avatar user={customer} color={color} />
</div>
<span className="pl-2.5 w-40 truncate">{identifier}</span>
<span className="w-40 truncate pl-2.5">{identifier}</span>
</div>
)
}
packages/admin-ui/ui/src/components/molecules/emoji-picker/index.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
variant="ghost"
size="small"
type="button"
className="focus:border-none focus:shadow-none text-grey-40 hover:text-violet-60 p-0 h-5 w-5"
className="text-grey-40 hover:text-violet-60 h-5 w-5 p-0 focus:border-none focus:shadow-none"
>
<HappyIcon size={20} />
</Button>
@@ -24,7 +24,7 @@ const EmojiPicker: React.FC<indexProps> = ({ onEmojiClick }) => {
<DropdownMenu.Content
sideOffset={5}
className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown overflow-hidden min-w-[200px] z-30"
className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown z-30 min-w-[200px] overflow-hidden border"
>
<Picker
onEmojiClick={(emojiData) => onEmojiClick(emojiData.emoji)}
packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx
+4 -4
View File
@@ -52,13 +52,13 @@ const FilterDropdownContainer = ({
<RadixPopover.Content
sideOffset={8}
style={heightStyle}
className="bg-grey-0 overflow-y-auto rounded-rounded shadow-dropdown max-w-[272px] py-4 z-40"
className="bg-grey-0 rounded-rounded shadow-dropdown z-40 max-w-[272px] overflow-y-auto py-4"
>
<div className="flex px-4 pb-4 border-b border-grey-20">
<div className="border-grey-20 flex border-b px-4 pb-4">
<Button
size="small"
tabIndex={-1}
className="mr-2 border border-grey-20"
className="border-grey-20 mr-2 border"
variant="ghost"
onClick={() => onClear()}
>
@@ -76,7 +76,7 @@ const FilterDropdownContainer = ({
</div>
{React.Children.map(children, (child) => {
return (
<div className="border-b border-grey-20 py-2 px-4 last:pb-0 last:border-0">
<div className="border-grey-20 border-b py-2 px-4 last:border-0 last:pb-0">
{child}
</div>
)
packages/admin-ui/ui/src/components/molecules/filter-dropdown/item.tsx
+21 -21
View File
@@ -96,7 +96,7 @@ const FilterDropdownItem = ({
>
<RadixCollapsible.Trigger
className={clsx(
"py-1.5 px-3 flex w-full items-center hover:bg-grey-5 rounded justify-between",
"hover:bg-grey-5 flex w-full items-center justify-between rounded py-1.5 px-3",
{
"inter-small-semibold": open,
"inter-small-regular": !open,
@@ -105,7 +105,7 @@ const FilterDropdownItem = ({
>
<div className="flex items-center">
<div
className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base ${
className={`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border ${
open && "bg-violet-60"
}`}
>
@@ -130,17 +130,17 @@ const FilterDropdownItem = ({
</RadixCollapsible.Trigger>
<RadixCollapsible.Content className="w-full">
{hasPrev && (
<div className="py-2 pl-6 flex">
<div className="flex py-2 pl-6">
<button
onClick={handlePrev}
className="font-semibold hover:text-violet-60 text-grey-90"
className="hover:text-violet-60 text-grey-90 font-semibold"
>
Back
</button>
</div>
)}
{isLoading ? (
<div className="py-1 flex justify-center items-center">
<div className="flex items-center justify-center py-1">
<Spinner size={"large"} variant={"secondary"} />
</div>
) : filterTitle === "Date" ? (
@@ -167,7 +167,7 @@ const FilterDropdownItem = ({
return (
<div
className={clsx(
"w-full flex hover:bg-grey-20 my-1 py-1.5 pl-6 items-center rounded",
"hover:bg-grey-20 my-1 flex w-full items-center rounded py-1.5 pl-6",
{
"inter-small-semibold": checked[value],
"inter-small-regular": !checked[value],
@@ -177,7 +177,7 @@ const FilterDropdownItem = ({
onClick={() => onCheck(value)}
>
<div
className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border mr-2 rounded-base ${
className={`text-grey-0 border-grey-30 rounded-base mr-2 flex h-5 w-5 justify-center border ${
checked[value] === true && "bg-violet-60"
}`}
>
@@ -201,10 +201,10 @@ const FilterDropdownItem = ({
})
)}
{hasMore && (
<div className="py-2 pl-6 flex">
<div className="flex py-2 pl-6">
<button
onClick={handleNext}
className="font-semibold hover:text-violet-60 text-grey-90"
className="hover:text-violet-60 text-grey-90 font-semibold"
>
Show more
</button>
@@ -417,7 +417,7 @@ const DateFilter = ({
case DateFilters.InTheLast:
case DateFilters.OlderThan:
return (
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
<InputField
className="pt-0 pb-1"
type="number"
@@ -429,7 +429,7 @@ const DateFilter = ({
/>
<RightPopover
trigger={
<div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
<div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
<label>{daysMonthsValue}</label>
<span className="text-grey-50">
<ArrowRightIcon size={16} />
@@ -449,10 +449,10 @@ const DateFilter = ({
case DateFilters.After:
case DateFilters.Before:
return (
<div className="flex flex-col w-full">
<div className="flex w-full flex-col">
<RightPopover
trigger={
<div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
<div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
<label>
{startDate ? moment(startDate).format("MM.DD.YYYY") : "-"}
</label>
@@ -477,7 +477,7 @@ const DateFilter = ({
<div className="pl-9">
<RightPopover
trigger={
<div className="flex w-full items-center justify-between bg-grey-5 border border-grey-20 rounded inter-small-semibold text-grey-90 px-3 py-1.5">
<div className="bg-grey-5 border-grey-20 inter-small-semibold text-grey-90 flex w-full items-center justify-between rounded border px-3 py-1.5">
<label>{currentFilter}</label>
<span className="text-grey-50">
<ArrowRightIcon size={16} />
@@ -506,7 +506,7 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
onClick(item)
}}
className={clsx(
"px-3 py-1.5 my-1 flex items-center rounded hover:bg-grey-5 cursor-pointer",
"hover:bg-grey-5 my-1 flex cursor-pointer items-center rounded px-3 py-1.5",
{
"inter-small-semibold": item === selectedItem,
"inter-small-regular": item !== selectedItem,
@@ -515,15 +515,15 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
>
<div
className={clsx(
"rounded-full flex items-center justify-center mr-2 w-4 h-4",
"mr-2 flex h-4 w-4 items-center justify-center rounded-full",
{
"border-2 border-violet-60": item === selectedItem,
"border border-grey-30 ": item !== selectedItem,
"border-violet-60 border-2": item === selectedItem,
"border-grey-30 border ": item !== selectedItem,
}
)}
>
{item === selectedItem && (
<div className="rounded-full w-2 h-2 bg-violet-60" />
<div className="bg-violet-60 h-2 w-2 rounded-full" />
)}
</div>
{item}
@@ -535,7 +535,7 @@ const PopoverOptions = ({ options, onClick, selectedItem }) => {
const RightPopover = ({ trigger, children }) => (
<RadixPopover.Root>
<RadixPopover.Trigger className="w-full my-1">
<RadixPopover.Trigger className="my-1 w-full">
{trigger}
</RadixPopover.Trigger>
<RadixPopover.Content
@@ -543,7 +543,7 @@ const RightPopover = ({ trigger, children }) => (
align="start"
alignOffset={-8}
sideOffset={20}
className="flex flex-col bg-grey-0 rounded-rounded shadow-dropdown p-2 top-2/4"
className="bg-grey-0 rounded-rounded shadow-dropdown top-2/4 flex flex-col p-2"
>
{children}
</RadixPopover.Content>
packages/admin-ui/ui/src/components/molecules/filter-dropdown/save-field.tsx
+2 -2
View File
@@ -25,13 +25,13 @@ const SaveFilterItem: React.FC<SaveFilterItemProps> = ({
return (
<div className="mt-2 flex w-full">
<InputField
className="pt-0 pb-1 max-w-[172px]"
className="max-w-[172px] pt-0 pb-1"
placeholder="Name your filter..."
onChange={(e) => setName(e.target.value)}
value={name}
/>
<Button
className="border ml-2 border-grey-20"
className="border-grey-20 ml-2 border"
variant="ghost"
size="small"
onClick={onSave}
packages/admin-ui/ui/src/components/molecules/filter-tab/index.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const FilterTab: React.FC<FilterTabProps> = ({
onKeyUp={handleKeyPress}
onClick={handleClick}
className={clsx(
"flex items-center bg-grey-5 border border-grey-20 inter-small-regular px-2 h-6 text-grey-50 rounded-rounded focus-visible:outline-none focus-visible:shadow-input focus-visible:border-violet-60 flex items-center space-x-1",
"bg-grey-5 border-grey-20 inter-small-regular text-grey-50 rounded-rounded focus-visible:shadow-input focus-visible:border-violet-60 flex flex h-6 items-center items-center space-x-1 border px-2 focus-visible:outline-none",
{
["bg-violet-5 border-violet-60 text-violet-60 "]: isActive,
}
packages/admin-ui/ui/src/components/molecules/form-error-toaster/index.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const FormErrorToaster: React.FC<FormErrorToasterProps> = ({
<div>
<XCircleIcon size={20} className="text-rose-40" />
</div>
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-grey-0">
<div className="ml-small mr-base gap-y-2xsmall text-grey-0 flex flex-grow flex-col">
<span className="inter-small-semibold">{title}</span>
<span className="inter-small-regular text-grey-20">{message}</span>
</div>
packages/admin-ui/ui/src/components/molecules/form-toaster/index.tsx
+10 -10
View File
@@ -39,7 +39,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
const content = useMemo(() => {
if (isLoading) {
return (
<div className="flex items-center p-base gap-x-base">
<div className="p-base gap-x-base flex items-center">
<span>
<Spinner />
</span>
@@ -49,7 +49,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
} else {
return (
<>
<div className="flex items-center p-base gap-x-base">
<div className="p-base gap-x-base flex items-center">
<span>{icon}</span>
<span className="inter-small-regular">{unsavedChangesMessage}</span>
</div>
@@ -67,7 +67,7 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
})}
{...toast?.ariaProps}
>
<div className="flex items-center rounded-rounded bg-grey-90 h-[72px] w-[344px] text-grey-0 justify-between">
<div className="rounded-rounded bg-grey-90 text-grey-0 flex h-[72px] w-[344px] items-center justify-between">
{content}
</div>
</div>
@@ -76,10 +76,10 @@ const FormToasterContainer: React.FC<FormToasterContainerProps> & {
const Actions: React.FC = ({ children }) => {
return (
<div className="border-l border-grey-70 h-full">
<div className="border-grey-70 h-full border-l">
{Children.map(children, (child) => {
return (
<div className="flex items-center justify-center border-b border-grey-70 last:border-none h-1/2 w-[72px]">
<div className="border-grey-70 flex h-1/2 w-[72px] items-center justify-center border-b last:border-none">
{child}
</div>
)
@@ -96,7 +96,7 @@ const DiscardButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
return (
<button
className={clsx(
"flex items-center justify-center text-white inter-small-semibold h-full w-full",
"inter-small-semibold flex h-full w-full items-center justify-center text-white",
className
)}
{...props}
@@ -114,7 +114,7 @@ const ActionButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({
return (
<button
className={clsx(
"flex items-center justify-center text-white inter-small-semibold h-full w-full",
"inter-small-semibold flex h-full w-full items-center justify-center text-white",
className
)}
{...props}
@@ -133,7 +133,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
<Dropdown.Root>
<Dropdown.Trigger
className={clsx(
"inter-small-semibold flex items-center justify-center h-full w-full",
"inter-small-semibold flex h-full w-full items-center justify-center",
className
)}
>
@@ -142,7 +142,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
</Dropdown.Trigger>
<Dropdown.Content
className="rounded-rounded flex bg-grey-90 text-white p-xsmall flex-col min-w-[208px]"
className="rounded-rounded bg-grey-90 p-xsmall flex min-w-[208px] flex-col text-white"
sideOffset={10}
>
{actions.map((action, i) => {
@@ -150,7 +150,7 @@ const MultiActionButton: React.FC<MultiActionButtonProps> = ({
<Dropdown.Item key={i}>
<button
onClick={action.onClick}
className="p-2xsmall hover:bg-grey-80 hover:outline-none inter-small-semibold rounded-base text-left flex items-center w-full"
className="p-2xsmall hover:bg-grey-80 inter-small-semibold rounded-base flex w-full items-center text-left hover:outline-none"
>
{action.icon && (
<span className="text-grey-0 mr-xsmall">
packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ const GeneratingInput = React.forwardRef(
ref={inputRef}
value={value}
onChange={handleChange}
className="bg-inherit outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40"
className="remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full bg-inherit font-normal outline-none outline-0"
placeholder={placeholder}
autoComplete="off"
name={name}
packages/admin-ui/ui/src/components/molecules/grid-input/index.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ type GridInputProps = React.InputHTMLAttributes<HTMLInputElement>
const GridInput: React.FC<GridInputProps> = ({ value, ...props }) => {
return (
<input
className="outline-none outline-0 leading-base bg-transparent py-4 px-2 w-full h-full border rounded-rounded border-transparent inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border focus-within:border-violet-60"
className="leading-base rounded-rounded inter-small-regular placeholder:text-grey-40 focus-within:shadow-input focus-within:border-violet-60 h-full w-full border border-transparent bg-transparent py-4 px-2 outline-none outline-0 focus-within:border"
value={value}
{...props}
/>
packages/admin-ui/ui/src/components/molecules/hot-key-action/index.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const HotKeyAction = ({ label, hotKey, icon, onAction }: HotKeyActionProps) => {
return (
<div className="flex items-center gap-2">
<span className="text-grey-0 inter-small-semibold">{label}</span>
<div className="inter-small-semibold text-grey-30 flex items-center justify-center w-[24px] h-[24px] rounded bg-grey-70">
<div className="inter-small-semibold text-grey-30 bg-grey-70 flex h-[24px] w-[24px] items-center justify-center rounded">
{icon}
</div>
</div>
packages/admin-ui/ui/src/components/molecules/icon-tooltip/index.tsx
+3 -3
View File
@@ -18,11 +18,11 @@ const IconTooltip: React.FC<IconTooltipProps> = ({
const icon = (type: IconTooltipProps["type"]) => {
switch (type) {
case "warning":
return <AlertIcon size={size} className="flex text-orange-40" />
return <AlertIcon size={size} className="text-orange-40 flex" />
case "error":
return <XCircleIcon size={size} className="flex text-rose-40" />
return <XCircleIcon size={size} className="text-rose-40 flex" />
default:
return <InfoIcon size={size} className="flex text-grey-40" />
return <InfoIcon size={size} className="text-grey-40 flex" />
}
}
packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ const IndeterminateCheckbox = React.forwardRef<
<div className="flex h-full items-center">
<div
onClick={handleClick}
className={`flex h-5 w-5 cursor-pointer justify-center rounded-base border border-grey-30 text-grey-0 ${
className={`rounded-base border-grey-30 text-grey-0 flex h-5 w-5 cursor-pointer justify-center border ${
rest.disabled
? checked
? "bg-gray-300"
packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx
+4 -4
View File
@@ -52,12 +52,12 @@ const SigninInput = React.forwardRef(
return (
<div
className={clsx(
"w-[320px] h-[48px] mb-xsmall last:mb-0 border rounded-rounded overflow-hidden",
"mb-xsmall rounded-rounded h-[48px] w-[320px] overflow-hidden border last:mb-0",
"bg-grey-5 inter-base-regular placeholder:text-grey-40",
"focus-within:shadow-input focus-within:border-violet-60",
"flex items-center",
{
"pointer-events-none focus-within:shadow-none focus-within:border-none text-grey-40":
"text-grey-40 pointer-events-none focus-within:border-none focus-within:shadow-none":
props.readOnly,
},
className
@@ -68,7 +68,7 @@ const SigninInput = React.forwardRef(
)}
<input
className={clsx(
"outline-none outline-0 remove-number-spinner leading-base bg-transparent w-full py-3 px-4",
"remove-number-spinner leading-base w-full bg-transparent py-3 px-4 outline-none outline-0",
{
"pl-xsmall": props.readOnly,
}
@@ -86,7 +86,7 @@ const SigninInput = React.forwardRef(
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="text-grey-40 px-4 focus:outline-none focus:text-violet-60"
className="text-grey-40 focus:text-violet-60 px-4 focus:outline-none"
>
{showPassword ? <EyeIcon /> : <EyeOffIcon />}
</button>
packages/admin-ui/ui/src/components/molecules/json-view/index.tsx
+4 -4
View File
@@ -29,8 +29,8 @@ const JSONView = ({ data }: JSONViewProps) => {
<div className="px-base py-xsmall rounded-rounded bg-grey-5 w-full">
<Collapsible.Root open={expanded} onOpenChange={setExpanded}>
<Collapsible.Trigger asChild>
<div className="flex items-center justify-between cursor-pointer">
<div className="flex items-center gap-x-xsmall inter-base-regular">
<div className="flex cursor-pointer items-center justify-between">
<div className="gap-x-xsmall inter-base-regular flex items-center">
<p className="inter-base-semibold">
{expanded ? "{" : length > 0 ? "{ ... }" : "{}"}
</p>
@@ -66,9 +66,9 @@ const JSONView = ({ data }: JSONViewProps) => {
shouldExpandNode={() => false}
/>
</div>
<div className="flex items-center justify-between w-full">
<div className="flex w-full items-center justify-between">
{expanded && <p className="inter-base-semibold">{`}`}</p>}
<div className="flex items-center gap-x-xsmall text-grey-50 inter-small-regular">
<div className="gap-x-xsmall text-grey-50 inter-small-regular flex items-center">
{isCopied && (
<span className="animate-fade-in-right">Copied!</span>
)}
packages/admin-ui/ui/src/components/molecules/modal/focus-modal.tsx
+6 -6
View File
@@ -26,7 +26,7 @@ type BasicFocusModalProps = {
const FocusModal: IFocusModal = ({ className, children }) => (
<div
className={clsx(
"absolute inset-0 bg-grey-0 z-50 flex flex-col items-center",
"bg-grey-0 absolute inset-0 z-50 flex flex-col items-center",
className
)}
>
@@ -37,7 +37,7 @@ const FocusModal: IFocusModal = ({ className, children }) => (
FocusModal.Header = ({ children, className }) => (
<div
className={clsx(
"w-full border-b py-4 border-b-grey-20 flex justify-center",
"border-b-grey-20 flex w-full justify-center border-b py-4",
className
)}
>
@@ -46,7 +46,7 @@ FocusModal.Header = ({ children, className }) => (
)
FocusModal.Main = ({ children, className }) => (
<div className={clsx("w-full px-8 overflow-y-auto h-full", className)}>
<div className={clsx("h-full w-full overflow-y-auto px-8", className)}>
{children}
</div>
)
@@ -79,12 +79,12 @@ const BasicFocusModalHeader: React.FC<BasicFocusModalProps> = ({
}) => {
return (
<FocusModal.Header>
<div className="medium:w-8/12 w-full px-8 flex justify-between">
<div className="medium:w-8/12 flex w-full justify-between px-8">
<Button
size="small"
variant="ghost"
onClick={handleClose}
className="border rounded-rounded w-8 h-8"
className="rounded-rounded h-8 w-8 border"
>
<CrossIcon size={20} />
</Button>
@@ -93,7 +93,7 @@ const BasicFocusModalHeader: React.FC<BasicFocusModalProps> = ({
onClick={handleClose}
size="small"
variant="ghost"
className="border rounded-rounded"
className="rounded-rounded border"
>
{cancelText || "Cancel"}
</Button>
packages/admin-ui/ui/src/components/molecules/modal/index.tsx
+3 -3
View File
@@ -43,7 +43,7 @@ type ModalType = React.FC<ModalProps> & {
const Overlay: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<Dialog.Overlay className="fixed top-0 bottom-0 left-0 right-0 z-50 grid overflow-y-auto bg-grey-90/40 place-items-center">
<Dialog.Overlay className="bg-grey-90/40 fixed top-0 bottom-0 left-0 right-0 z-50 grid place-items-center overflow-y-auto">
{children}
</Dialog.Overlay>
)
@@ -57,7 +57,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<Dialog.Content
style={style}
className="overflow-x-hidden min-w-modal rounded-rounded bg-grey-0"
className="min-w-modal rounded-rounded bg-grey-0 overflow-x-hidden"
>
{children}
</Dialog.Content>
@@ -125,7 +125,7 @@ Modal.Content = ({ children, className }) => {
Modal.Header = ({ handleClose = undefined, children }) => {
return (
<div
className="flex items-center w-full px-8 py-6 border-b"
className="flex w-full items-center border-b px-8 py-6"
onClick={(e) => e.stopPropagation()}
>
<div className="flex flex-grow">{children}</div>
packages/admin-ui/ui/src/components/molecules/modal/layered-modal.tsx
+3 -3
View File
@@ -112,13 +112,13 @@ const LayeredModal: React.FC<LayeredModalProps> = ({
<Button
variant="ghost"
size="small"
className="w-8 h-8 border text-grey-50"
className="text-grey-50 h-8 w-8 border"
onClick={screen.onBack}
>
<UTurnIcon size={20} />
</Button>
<div className="flex items-center gap-x-2xsmall">
<h2 className="ml-4 inter-xlarge-semibold">{screen.title}</h2>
<div className="gap-x-2xsmall flex items-center">
<h2 className="inter-xlarge-semibold ml-4">{screen.title}</h2>
{screen.subtitle && (
<span className="inter-xlarge-regular text-grey-50">
({screen.subtitle})
packages/admin-ui/ui/src/components/molecules/modal/stepped-modal.tsx
+5 -5
View File
@@ -139,7 +139,7 @@ const SteppedModal: React.FC<SteppedProps> = ({
>
<Modal.Body
className={clsx(
"transition-transform flex flex-col justify-between duration-100 max-h-full"
"flex max-h-full flex-col justify-between transition-transform duration-100"
)}
>
<Modal.Header handleClose={resetAndClose}>
@@ -149,20 +149,20 @@ const SteppedModal: React.FC<SteppedProps> = ({
(lastScreenIsSummary &&
context.currentStep !== steps.length - 1 && (
<div className="flex items-center">
<span className="text-grey-50 inter-small-regular w-[70px] mr-4">{`Step ${
<span className="text-grey-50 inter-small-regular mr-4 w-[70px]">{`Step ${
context.currentStep + 1
} of ${steps.length}`}</span>
{steps.map((_, i) => (
<span
key={i}
className={clsx(
"w-2 h-2 rounded-full mr-3",
"mr-3 h-2 w-2 rounded-full",
{
"bg-grey-20": i > context.currentStep,
"bg-violet-60": context.currentStep >= i,
},
{
"outline-4 outline outline-violet-20":
"outline-violet-20 outline outline-4":
context.currentStep === i,
}
)}
@@ -175,7 +175,7 @@ const SteppedModal: React.FC<SteppedProps> = ({
<Modal.Content>{steps[context.currentStep]}</Modal.Content>
</Modal.Body>
<Modal.Footer>
<div className="flex justify-end w-full gap-x-xsmall">
<div className="gap-x-xsmall flex w-full justify-end">
<Button
variant="ghost"
size="small"
packages/admin-ui/ui/src/components/molecules/native-select/index.tsx
+5 -5
View File
@@ -23,7 +23,7 @@ const NativeSelect: NativeSelectType = ({
return (
<RadixSelect.Root {...props}>
<RadixSelect.SelectTrigger
className="flex items-center inter-base-semibold gap-3 px-2"
className="inter-base-semibold flex items-center gap-3 px-2"
{...triggerProps}
>
<RadixSelect.Value />
@@ -33,13 +33,13 @@ const NativeSelect: NativeSelectType = ({
</RadixSelect.SelectTrigger>
<RadixSelect.Content
position="popper"
className="rounded-rounded scrollbar-hide border px-2 py-2 border-grey-20 bg-grey-0 w-full flex shadow-dropdown z-[9999] max-h-[305px] overflow-y-auto"
className="rounded-rounded scrollbar-hide border-grey-20 bg-grey-0 shadow-dropdown z-[9999] flex max-h-[305px] w-full overflow-y-auto border px-2 py-2"
>
<RadixSelect.ScrollUpButton className="h-[25px] flex items-center justify-center bg-gradient-to-b from-transparent to-grey-0">
<RadixSelect.ScrollUpButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
<ChevronUpIcon size={ICON_SIZE} />
</RadixSelect.ScrollUpButton>
<RadixSelect.Viewport className="p-2">{children}</RadixSelect.Viewport>
<RadixSelect.ScrollDownButton className="h-[25px] flex items-center justify-center bg-gradient-to-b from-transparent to-grey-0">
<RadixSelect.ScrollDownButton className="to-grey-0 flex h-[25px] items-center justify-center bg-gradient-to-b from-transparent">
<ChevronDownIcon size={ICON_SIZE} />
</RadixSelect.ScrollDownButton>
</RadixSelect.Content>
@@ -52,7 +52,7 @@ type ItemProps = RadixSelect.SelectItemProps
const Item: React.FC<ItemProps> = ({ children, ...props }) => (
<RadixSelect.Item
className={clsx(
"flex relative justify-start py-1.5 px-9 items-center inter-base-regular rounded hover:bg-grey-10"
"inter-base-regular hover:bg-grey-10 relative flex items-center justify-start rounded py-1.5 px-9"
)}
{...props}
>
packages/admin-ui/ui/src/components/molecules/note-input/index.tsx
+3 -3
View File
@@ -44,17 +44,17 @@ const NoteInput: React.FC<NoteInputProps> = ({ onSubmit }) => {
return (
<form>
<div
className="flex items-center py-xsmall px-small bg-grey-5 border border-grey-20 rounded-rounded"
className="py-xsmall px-small bg-grey-5 border-grey-20 rounded-rounded flex items-center border"
onClick={() => inputRef.current?.focus()}
>
<div className="flex items-center gap-x-small flex-grow">
<div className="gap-x-small flex flex-grow items-center">
<EmojiPicker onEmojiClick={handleAddEmoji} />
<input
type="text"
placeholder="Write a note..."
value={note}
onChange={(e) => setNote(e.target.value)}
className="flex-grow bg-transparent inter-base-regular placeholder:text-grey-40 focus:outline-none"
className="inter-base-regular placeholder:text-grey-40 flex-grow bg-transparent focus:outline-none"
ref={inputRef}
id="note-input"
autoComplete="off"
packages/admin-ui/ui/src/components/molecules/notification-bell/index.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const NotificationBell: React.FC<NotificationBellProps> = ({
...attributes
}) => {
return (
<Button className="w-8 h-8" size="small" {...attributes}>
<Button className="h-8 w-8" size="small" {...attributes}>
{hasNotifications ? <BellNotiIcon /> : <BellIcon />}
</Button>
)
packages/admin-ui/ui/src/components/molecules/numbered-item/index.tsx
+4 -4
View File
@@ -18,17 +18,17 @@ const NumberedItem: React.FC<NumberedItemProps> = ({
description,
}) => {
return (
<div className="p-base border rounded-rounded flex gap-base justify-between items-center">
<div className="flex overflow-hidden gap-base w-full">
<div className="p-base rounded-rounded gap-base flex items-center justify-between border">
<div className="gap-base flex w-full overflow-hidden">
<div>
<Badge
className="inter-base-semibold flex justify-center items-center w-[40px] h-[40px]"
className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
variant="default"
>
§{index}
</Badge>
</div>
<div className="truncate flex flex-col justify-center flex-1 w-full">
<div className="flex w-full flex-1 flex-col justify-center truncate">
<div className="inter-small-semibold">{title}</div>
{description &&
(typeof description === "string" ? (
packages/admin-ui/ui/src/components/molecules/rma-select-shipping/index.tsx
+4 -4
View File
@@ -21,7 +21,7 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
setUseCustomShippingPrice,
}) => {
return useCustomShippingPrice ? (
<div className="flex items-end mt-4 gap-x-base w-full">
<div className="gap-x-base mt-4 flex w-full items-end">
<AmountInput
label={`Shipping price (${inclTax ? "incl. tax" : "excl. tax"})`}
currencyCode={currencyCode}
@@ -30,7 +30,7 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
/>
<Button
onClick={() => setUseCustomShippingPrice(false)}
className="w-10 h-10 text-grey-40"
className="text-grey-40 h-10 w-10"
variant="ghost"
size="small"
>
@@ -38,11 +38,11 @@ const RMAShippingPrice: React.FC<RMAShippingPriceProps> = ({
</Button>
</div>
) : (
<div className="flex w-full mt-4 justify-end">
<div className="mt-4 flex w-full justify-end">
<Button
onClick={() => setUseCustomShippingPrice(true)}
variant="ghost"
className="border border-grey-20"
className="border-grey-20 border"
size="small"
>
Add custom price
packages/admin-ui/ui/src/components/molecules/sales-channels-list/index.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ const SalesChannelsList = ({ salesChannels, showMax = 3 }: Props) => {
{salesChannels
.slice(0, showMax)
.map((salesChannel, index, slicedArray) => (
<span className="ml-1 inter-base-regular text-grey-90 first-of-type:ml-0">
<span className="inter-base-regular text-grey-90 ml-1 first-of-type:ml-0">
{salesChannel.name}
{index < slicedArray.length - 1 && ", "}
</span>
@@ -34,7 +34,7 @@ const SalesChannelsList = ({ salesChannels, showMax = 3 }: Props) => {
}
side="top"
>
<span className="ml-1 text-grey-50">
<span className="text-grey-50 ml-1">
+ {salesChannels.length - showMax} more
</span>
</Tooltip>
packages/admin-ui/ui/src/components/molecules/search-bar.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const SearchBar: React.FC = () => {
<>
<button
onClick={() => setShowSearchModal(true)}
className="flex basis-1/2 items-center px-small py-[6px]"
className="px-small flex basis-1/2 items-center py-[6px]"
>
<SearchIcon className="text-grey-40" />
<div className="ml-5">
packages/admin-ui/ui/src/components/molecules/section/index.tsx
+2 -2
View File
@@ -15,10 +15,10 @@ const Section: React.FC<SectionProps> = ({
}) => {
return (
<div>
<div className="flex items-center mb-2xsmall">
<div className="mb-2xsmall flex items-center">
<h3 className="inter-base-semibold">{title}</h3>
{tooltip && (
<div className="flex items-center ml-1.5">
<div className="ml-1.5 flex items-center">
<IconTooltip content={tooltip} />
</div>
)}
packages/admin-ui/ui/src/components/molecules/select/next-select/components/containers.tsx
+7 -7
View File
@@ -34,7 +34,7 @@ export const AdjacentContainer = forwardRef<
ref
) => {
return (
<div className="flex flex-col gap-y-xsmall w-full" ref={ref}>
<div className="gap-y-xsmall flex w-full flex-col" ref={ref}>
{label && (
<label
className="inter-small-semibold text-grey-50"
@@ -77,7 +77,7 @@ export const SelectContainer = <
"--has-value": hasValue,
},
clsx(
"relative pointer-events-auto",
"pointer-events-auto relative",
{ "text-grey-40": isDisabled },
className
)
@@ -116,7 +116,7 @@ export const ValueContainer = <
"value-container--has-value": hasValue,
},
clsx(
"group flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
"scrolling-touch group relative flex flex-1 flex-wrap items-center overflow-hidden",
{
"gap-2xsmall": isMulti,
},
@@ -125,14 +125,14 @@ export const ValueContainer = <
)}
>
{value?.length > 0 && (
<div className="h-7 bg-grey-20 text-grey-50 px-small inter-small-semibold flex items-center rounded-rounded gap-x-2xsmall cursor-default">
<div className="bg-grey-20 text-grey-50 px-small inter-small-semibold rounded-rounded gap-x-2xsmall flex h-7 cursor-default items-center">
<span>{value.length}</span>
</div>
)}
<div className="relative grow">
{children}
{value?.length > 0 && inputValue === "" && (
<span className="absolute top-1/2 -translate-y-1/2 inter-base-regular text-grey-50">
<span className="inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2">
{selectedPlaceholder || label || "Selected"}
</span>
)}
@@ -151,7 +151,7 @@ export const ValueContainer = <
"value-container--has-value": hasValue,
},
clsx(
"flex items-center flex-wrap relative scrolling-touch overflow-hidden flex-1",
"scrolling-touch relative flex flex-1 flex-wrap items-center overflow-hidden",
{
"gap-2xsmall": isMulti,
},
@@ -181,7 +181,7 @@ export const IndicatorsContainer = <
{
"indicators-container": true,
},
clsx("text-grey-50 flex items-center gap-x-small px-small", className)
clsx("text-grey-50 gap-x-small px-small flex items-center", className)
)}
>
{children}
packages/admin-ui/ui/src/components/molecules/select/next-select/components/control.tsx
+2 -2
View File
@@ -38,7 +38,7 @@ const Control = <
"control--menu-is-open": menuIsOpen,
},
clsx(
"flex p-0 overflow-hidden rounded-rounded border border-gray-20 bg-grey-5 focus-within:shadow-cta transition-colors focus-within:border-violet-60 box-border pl-small",
"rounded-rounded border-gray-20 bg-grey-5 focus-within:shadow-cta focus-within:border-violet-60 pl-small box-border flex overflow-hidden border p-0 transition-colors",
{
"h-xlarge": size === "sm",
"h-10": size === "md" || !size,
@@ -50,7 +50,7 @@ const Control = <
>
<div
className={clsx(
"flex items-center flex-1",
"flex flex-1 items-center",
customStyles?.inner_control
)}
>
packages/admin-ui/ui/src/components/molecules/select/next-select/components/menu.tsx
+11 -11
View File
@@ -53,7 +53,7 @@ const Menu = <
className={cx(
{ menu: true },
clsx(
"absolute w-full overflow-hidden border-border z-[60] bg-grey-0 rounded-rounded border border-grey-20 shadow-dropdown mb-base",
"border-border bg-grey-0 rounded-rounded border-grey-20 shadow-dropdown mb-base absolute z-[60] w-full overflow-hidden border",
{
"top-[calc(100%+8px)]": placement === "bottom",
"bottom-full": placement === "top",
@@ -178,7 +178,7 @@ export const MenuList = <
"menu-list": true,
"menu-list--is-multi": isMulti,
},
clsx("overflow-y-auto flex flex-col py-xsmall no-scrollbar", className)
clsx("py-xsmall no-scrollbar flex flex-col overflow-y-auto", className)
)}
>
{isMulti && selectAll && (
@@ -208,14 +208,14 @@ export const LoadingMessage = <
return (
<div
className={clsx(
"w-full flex items-center px-base transition-colors hover:bg-grey-5",
"px-base hover:bg-grey-5 flex w-full items-center transition-colors",
{
"h-xlarge": size === "sm",
"h-10": size === "md" || !size,
}
)}
>
<div className="bg-grey-10 animate-pulse w-1/4 h-xsmall rounded-rounded" />
<div className="bg-grey-10 h-xsmall rounded-rounded w-1/4 animate-pulse" />
</div>
)
}
@@ -271,9 +271,9 @@ export const Option = <
"option--is-focused": isFocused,
},
clsx(
"flex items-center justify-between py-xsmall px-base transition-colors hover:bg-grey-5",
"py-xsmall px-base hover:bg-grey-5 flex items-center justify-between transition-colors",
{
"text-grey-30 select-none cursor-not-allowed": isDisabled,
"text-grey-30 cursor-not-allowed select-none": isDisabled,
"bg-grey-10": isFocused && !isDisabled,
hidden: hideSelectedOptions && isSelected,
},
@@ -290,13 +290,13 @@ export const Option = <
tabIndex={isDisabled ? -1 : 0}
{...innerProps}
>
<div className="flex items-center gap-x-small flex-1">
<div className="gap-x-small flex flex-1 items-center">
{isMulti && (
<CheckboxAdornment isSelected={isSelected} isDisabled={isDisabled} />
)}
<div
className={clsx(
"flex items-center justify-between gap-x-xsmall inter-base-regular flex-1",
"gap-x-xsmall inter-base-regular flex flex-1 items-center justify-between",
{
truncate: !!truncateOption,
}
@@ -306,14 +306,14 @@ export const Option = <
<span className="w-full">{children}</span>
{suffix && (
<span className="inter-base-regular justify-self-end text-grey-50">
<span className="inter-base-regular text-grey-50 justify-self-end">
{suffix}
</span>
)}
</div>
</div>
{!isMulti && (
<div className="w-5 ml-xsmall">
<div className="ml-xsmall w-5">
{isSelected && <CheckIcon size={16} />}
</div>
)}
@@ -328,7 +328,7 @@ const CheckboxAdornment = ({
return (
<div
className={clsx(
`w-base h-base flex justify-center text-grey-0 border-grey-30 border rounded-base transition-colors`,
`w-base h-base text-grey-0 border-grey-30 rounded-base flex justify-center border transition-colors`,
{
"bg-violet-60 border-violet-60": isSelected,
"bg-grey-5": isDisabled,
packages/admin-ui/ui/src/components/molecules/select/next-select/components/multi-value.tsx
+33 -28
View File
@@ -1,13 +1,12 @@
import clsx from "clsx";
import React from "react";
import clsx from "clsx"
import {
GroupBase,
MultiValueGenericProps,
MultiValueProps,
MultiValueRemoveProps
} from "react-select";
import CrossIcon from "../../../../fundamentals/icons/cross-icon";
import { optionIsFixed } from "../utils";
GroupBase,
MultiValueGenericProps,
MultiValueProps,
MultiValueRemoveProps,
} from "react-select"
import CrossIcon from "../../../../fundamentals/icons/cross-icon"
import { optionIsFixed } from "../utils"
const MultiValue = <
Option,
@@ -31,12 +30,15 @@ const MultiValue = <
<Container
data={data}
innerProps={{
className: cx({
"multi-value": true,
"multi-value--is-disabled": isDisabled,
}, clsx({
"bg-grey-70 text-grey-0": isFocused
})),
className: cx(
{
"multi-value": true,
"multi-value--is-disabled": isDisabled,
},
clsx({
"bg-grey-70 text-grey-0": isFocused,
})
),
...innerProps,
}}
selectProps={selectProps}
@@ -83,31 +85,34 @@ export const MultiValueContainer = <
children,
innerProps: { className },
}: MultiValueGenericProps<Option, IsMulti, Group>) => {
return (
<span className={clsx("flex items-center gap-x-2xsmall py-2xsmall pl-small pr-2.5 rounded-rounded transition-colors bg-grey-20 text-grey-50 inter-small-semibold", className)}>{children}</span>
)
return (
<span
className={clsx(
"gap-x-2xsmall py-2xsmall pl-small rounded-rounded bg-grey-20 text-grey-50 inter-small-semibold flex items-center pr-2.5 transition-colors",
className
)}
>
{children}
</span>
)
}
export const MultiValueRemove = <
Option = unknown,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
>(
>(
props: MultiValueRemoveProps<Option, IsMulti, Group>
) => {
const { children, innerProps, data } = props;
const { children, innerProps, data } = props
if (optionIsFixed(data) && data.isFixed) {
return null;
return null
}
return (
<div
{...innerProps}
role="button"
className="text-grey-40"
>
<div {...innerProps} role="button" className="text-grey-40">
{children || <CrossIcon size={16} />}
</div>
);
};
)
}
packages/admin-ui/ui/src/components/molecules/select/next-select/components/placeholder.tsx
+1 -2
View File
@@ -1,5 +1,4 @@
import clsx from "clsx"
import React from "react"
import { GroupBase, PlaceholderProps } from "react-select"
const Placeholder = <
@@ -20,7 +19,7 @@ const Placeholder = <
placeholder: true,
},
clsx(
"absolute top-1/2 -translate-y-1/2 select-none inter-base-regular text-grey-50",
"inter-base-regular text-grey-50 absolute top-1/2 -translate-y-1/2 select-none",
className
)
)}
packages/admin-ui/ui/src/components/molecules/select/next-select/components/single-value.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import clsx from "clsx"
import React from "react"
import { GroupBase, SingleValueProps } from "react-select"
import { hasPrefix } from "../utils"
@@ -26,12 +25,12 @@ const SingleValue = <
"single-value--is-disabled": isDisabled,
},
clsx(
"overflow-hidden absolute top-1/2 -translate-y-1/2 whitespace-nowrap overflow-ellipsis",
"absolute top-1/2 -translate-y-1/2 overflow-hidden overflow-ellipsis whitespace-nowrap",
className
)
)}
>
<div className="flex items-center gap-x-xsmall inter-base-regular">
<div className="gap-x-xsmall inter-base-regular flex items-center">
{prefix && <span className="inter-base-semibold">{prefix}</span>}
{children}
</div>
packages/admin-ui/ui/src/components/molecules/select/next-select/createable-select/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import type { MutableRefObject, ReactElement, RefAttributes } from "react"
import React, { forwardRef } from "react"
import { forwardRef } from "react"
import type { GroupBase, SelectInstance } from "react-select"
import type { CreatableProps } from "react-select/creatable"
import CreatableReactSelect from "react-select/creatable"
packages/admin-ui/ui/src/components/molecules/select/select-components.tsx
+18 -19
View File
@@ -1,5 +1,4 @@
import clsx from "clsx"
import React from "react"
import {
ClearIndicatorProps,
components,
@@ -39,7 +38,7 @@ const MultiValueLabel = <
return (
<div
{...innerProps}
className={clsx("bg-grey-5 mx-0 inter-base-regular p-0", {
className={clsx("bg-grey-5 inter-base-regular mx-0 p-0", {
"after:content-[',']": !isLast,
})}
>
@@ -59,9 +58,9 @@ const Menu = <
return (
<components.Menu
className={clsx("!rounded-rounded", {
"-mt-1 z-60":
"z-60 -mt-1":
!props.selectProps.isSearchable && props.menuPlacement === "bottom",
"mb-3 z-60":
"z-60 mb-3":
!props.selectProps.isSearchable && props.menuPlacement === "top",
})}
{...props}
@@ -95,7 +94,7 @@ const Placeholder = <
props: PlaceholderProps<Option, IsMulti, Group>
) => {
return props.selectProps.menuIsOpen ? null : (
<components.Placeholder {...props} className="!mx-0 !text-grey-40" />
<components.Placeholder {...props} className="!text-grey-40 !mx-0" />
)
}
@@ -142,7 +141,7 @@ const SelectContainer = <
props: ContainerProps<Option, IsMulti, Group>
) => {
return (
<div className="bg-grey-5 h-10 border border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small">
<div className="bg-grey-5 border-grey-20 rounded-rounded focus-within:shadow-cta focus-within:border-violet-60 px-small h-10 border">
<components.SelectContainer {...props} />
</div>
)
@@ -164,8 +163,8 @@ const Input = <
}
return (
<div className="w-full flex items-center h-full space-between">
<div className="w-full flex items-center">
<div className="space-between flex h-full w-full items-center">
<div className="flex w-full items-center">
<span className="text-grey-40 mr-2">
<SearchIcon size={16} />
</span>
@@ -190,7 +189,7 @@ const ClearIndicator = <
return (
<div
{...innerProps}
className="hover:bg-grey-10 text-grey-50 rounded cursor-pointer"
className="hover:bg-grey-10 text-grey-50 cursor-pointer rounded"
>
<XCircleIcon size={16} />
</div>
@@ -201,7 +200,7 @@ const CheckboxAdornment = ({ isSelected }: { isSelected: boolean }) => {
return (
<div
className={clsx(
`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border rounded-base`,
`text-grey-0 border-grey-30 rounded-base flex h-5 w-5 justify-center border`,
{
"bg-violet-60": isSelected,
}
@@ -219,18 +218,18 @@ const RadioAdornment = ({ isSelected }: { isSelected: boolean }) => {
<div
className={clsx(
"radio-outer-ring outline-0",
"shrink-0 w-[20px] h-[20px] rounded-circle",
"rounded-circle h-[20px] w-[20px] shrink-0",
{
"shadow-[0_0_0_1px] shadow-[#D1D5DB]": !isSelected,
"shadow-[0_0_0_2px] shadow-violet-60": isSelected,
"shadow-violet-60 shadow-[0_0_0_2px]": isSelected,
}
)}
>
{isSelected && (
<div
className={clsx(
"group flex items-center justify-center w-full h-full relative",
"after:absolute after:inset-0 after:m-auto after:block after:w-[12px] after:h-[12px] after:bg-violet-60 after:rounded-circle"
"group relative flex h-full w-full items-center justify-center",
"after:bg-violet-60 after:rounded-circle after:absolute after:inset-0 after:m-auto after:block after:h-[12px] after:w-[12px]"
)}
/>
)}
@@ -248,7 +247,7 @@ const NoOptionsMessage = <
}: NoticeProps<Option, IsMulti, Group>) => {
return (
<div
className="text-grey-50 inter-small-semibold text-center p-xsmall"
className="text-grey-50 inter-small-semibold p-xsmall text-center"
{...innerProps}
>
<p>{isLoading ? "Loading..." : "No options"}</p>
@@ -267,12 +266,12 @@ const Option = <
return (
<components.Option
{...props}
className="my-1 py-0 px-2 bg-grey-0 active:bg-grey-0"
className="bg-grey-0 active:bg-grey-0 my-1 py-0 px-2"
>
<div
className={`item-renderer h-full hover:bg-grey-10 py-2 px-2 cursor-pointer rounded`}
className={`item-renderer hover:bg-grey-10 h-full cursor-pointer rounded py-2 px-2`}
>
<div className="items-center h-full flex">
<div className="flex h-full items-center">
{props.data?.value !== "all" && props.data?.label !== "Select All" ? (
<>
{props.isMulti ? (
@@ -280,7 +279,7 @@ const Option = <
) : (
<RadioAdornment isSelected={props.isSelected} />
)}
<span className="ml-3 text-grey-90 inter-base-regular">
<span className="text-grey-90 inter-base-regular ml-3">
{props.data.label}
</span>
</>
packages/admin-ui/ui/src/components/molecules/shipping-option/index.tsx
+3 -3
View File
@@ -32,10 +32,10 @@ const ShippingOption: React.FC<ShippingOptionProps> = ({
onEdit,
}) => {
return (
<div className="flex items-baseline justify-between p-base rounded-base border border-grey-20">
<div className="p-base rounded-base border-grey-20 flex items-baseline justify-between border">
<div className="truncate">
<div className="flex items-center">
<p className="inter-small-semibold truncate mr-xsmall">
<p className="inter-small-semibold mr-xsmall truncate">
{option.name} {option.data.name && `(${option.data.name})`}{" "}
</p>
{option.admin_only && <Badge variant="primary">Not on website</Badge>}
@@ -45,7 +45,7 @@ const ShippingOption: React.FC<ShippingOptionProps> = ({
{option.amount !== undefined &&
`${option.amount / 100} ${currency_code.toUpperCase()}`}
{option.requirements.length
? option.requirements.map(r => {
? option.requirements.map((r) => {
const type =
r.type === "max_subtotal" ? "Max. subtotal" : "Min. subtotal"
return ` - ${type}: ${
packages/admin-ui/ui/src/components/molecules/sidebar-company-logo/index.tsx
+3 -3
View File
@@ -8,11 +8,11 @@ const SidebarCompanyLogo: React.FC<SidebarCompanyLogoProps> = ({
storeName,
}: SidebarCompanyLogoProps) => {
return (
<div className="flex items-center bg-grey-0 px-2.5 pb-6 w-full mb-4">
<div className="w-[32px] h-[32px] flex items-center justify-center bg-grey-90 text-grey-0 rounded">
<div className="bg-grey-0 mb-4 flex w-full items-center px-2.5 pb-6">
<div className="bg-grey-90 text-grey-0 flex h-[32px] w-[32px] items-center justify-center rounded">
<div>{storeName?.slice(0, 1) || "M"}</div>
</div>
<span className="font-semibold ml-2.5">{storeName}</span>
<span className="ml-2.5 font-semibold">{storeName}</span>
</div>
)
}
packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ const SidebarMenuItem: React.FC<SidebarMenuItemProps> & {
trigger={
<NavLink className={classNameFn} to={pageLink}>
<span className="items-start">{icon}</span>
<span className="ml-3 group-[.is-active]:text-grey-90">{text}</span>
<span className="group-[.is-active]:text-grey-90 ml-3">{text}</span>
</NavLink>
}
>
@@ -62,7 +62,7 @@ const SubItem = ({ pageLink, text }: SidebarMenuSubitemProps) => {
return (
<NavLink className={classNameFn} to={pageLink}>
<span className="ml-3 text-grey-90 text-small">{text}</span>
<span className="text-grey-90 text-small ml-3">{text}</span>
</NavLink>
)
}
packages/admin-ui/ui/src/components/molecules/sidebar-team-member/index.tsx
+3 -3
View File
@@ -16,11 +16,11 @@ const SidebarTeamMember: React.FC<SidebarTeamMemberProps> = ({
: user.email
return (
<div className="flex items-center bg-inherit px-2.5 py-1.5 w-full">
<div className="w-[24px] h-[24px]">
<div className="flex w-full items-center bg-inherit px-2.5 py-1.5">
<div className="h-[24px] w-[24px]">
<Avatar user={user} color={color} />
</div>
<span className="pl-2.5 w-40 truncate">{fullName}</span>
<span className="w-40 truncate pl-2.5">{fullName}</span>
</div>
)
}
packages/admin-ui/ui/src/components/molecules/status-selector/index.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ const StatusSelector: React.FC<StatusSelectorProps> = ({
</DropdownMenu.Trigger>
<DropdownMenu.Content
sideOffset={5}
className="border bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall min-w-[200px] z-30"
className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown p-xsmall z-30 min-w-[200px] border"
>
<DropdownMenu.Item>
{
packages/admin-ui/ui/src/components/molecules/switchable-item/index.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ const SwitchableItem: React.FC<SwitchableItemProps> = ({
<div>
<div className="flex items-start justify-between">
<div className="flex flex-col">
<div className="flex items-center gap-x-2xsmall">
<div className="gap-x-2xsmall flex items-center">
<p className="inter-base-semibold">{title}</p>
{tooltip && <IconTooltip content={tooltip} />}
</div>
@@ -39,7 +39,7 @@ const SwitchableItem: React.FC<SwitchableItemProps> = ({
</div>
<div
className={clsx(
"transition-[max-height,opacity] duration-500 ease-in-out overflow-hidden",
"overflow-hidden transition-[max-height,opacity] duration-500 ease-in-out",
{
"max-h-[1000px] opacity-100": open,
"max-h-0 opacity-0": !open,
packages/admin-ui/ui/src/components/molecules/table-fileds-filter/index.tsx
+10 -10
View File
@@ -7,7 +7,7 @@ import Button from "../../fundamentals/button"
import CrossIcon from "../../fundamentals/icons/cross-icon"
import Checkbox from "../../atoms/checkbox"
/******************** TYPES ********************/
/** ****************** TYPES ********************/
type Field = {
id: string
@@ -36,7 +36,7 @@ type FieldMenuItemProps = {
onChange: () => void
}
/******************** COMPONENTS ********************/
/** ****************** COMPONENTS ********************/
/**
* Table field chip component.
@@ -44,7 +44,7 @@ type FieldMenuItemProps = {
function Chip(props: ChipProps) {
const { remove, short } = props
return (
<div className="rounded-lg h-[32px] inline-flex gap-1 shrink-0 items-center text-small text-grey-70 border border-gray-70 px-3 mr-1 last:mr-2">
<div className="text-small text-grey-70 border-gray-70 mr-1 inline-flex h-[32px] shrink-0 items-center gap-1 rounded-lg border px-3 last:mr-2">
{short}
<CrossIcon
className="text-grey-40 cursor-pointer"
@@ -64,7 +64,7 @@ function FieldMenuItem(props: FieldMenuItemProps) {
<DropdownMenu.Item>
<Checkbox
checked={checked}
className="px-[6px] mx-2 h-[32px] hover:bg-grey-10 rounded text-small"
className="hover:bg-grey-10 text-small mx-2 h-[32px] rounded px-[6px]"
onChange={onChange}
label={
typeof field.label === "function"
@@ -76,7 +76,7 @@ function FieldMenuItem(props: FieldMenuItemProps) {
)
}
/******************** CONTAINERS ********************/
/** ****************** CONTAINERS ********************/
/**
* The dropdown menu for selecting currently active table fields.
@@ -132,9 +132,9 @@ function FieldsMenu(props: FieldsMenuProps) {
<Button
onClick={onTriggerClick}
variant="secondary"
className="rounded-lg h-[32px] px-3 text-small font-semibold text-grey-90 inline-flex"
className="text-small text-grey-90 inline-flex h-[32px] rounded-lg px-3 font-semibold"
>
<span className="flex whitespace-nowrap items-center gap-1">
<span className="flex items-center gap-1 whitespace-nowrap">
Add fields <PlusIcon size={14} />
</span>
</Button>
@@ -142,7 +142,7 @@ function FieldsMenu(props: FieldsMenuProps) {
<DropdownMenu.Content
ref={contentRef}
className="w-[240px] bg-white shadow rounded-xl p-2"
className="w-[240px] rounded-xl bg-white p-2 shadow"
>
{fields.map((f) => (
<FieldMenuItem
@@ -179,8 +179,8 @@ function TableFieldsFilters(props: TableFieldsFilterProps) {
const visibleFields = _selected.map((id) => fields.find((f) => f.id === id))
return (
<div className="flex-wrap flex items-center gap-y-2">
<span className="text-small font-semibold whitespace-nowrap text-gray-500 mr-2">
<div className="flex flex-wrap items-center gap-y-2">
<span className="text-small mr-2 whitespace-nowrap font-semibold text-gray-500">
Currently editing these fields:
</span>
packages/admin-ui/ui/src/components/molecules/table-pagination/table-pagination.tsx
+3 -3
View File
@@ -40,16 +40,16 @@ export const TablePagination = <T,>({
return (
<div
className={clsx(
"inter-small-regular flex items-center justify-between text-grey-50",
"inter-small-regular text-grey-50 flex items-center justify-between",
className
)}
>
<div>
<p>{`${from} – ${to} of ${count} results`}</p>
</div>
<div className="flex items-center gap-x-small">
<div className="gap-x-small flex items-center">
<p>{`${getState().pagination.pageIndex + 1} of ${getPageCount()}`}</p>
<div className="flex items-center gap-x-2xsmall">
<div className="gap-x-2xsmall flex items-center">
<Button
variant="ghost"
size="small"
packages/admin-ui/ui/src/components/molecules/table-toaster/index.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const TableToasterContainer = ({
})}
{...toast?.ariaProps}
>
<div className="flex items-center rounded-rounded bg-grey-90 px-base py-3.5">
<div className="rounded-rounded bg-grey-90 px-base flex items-center py-3.5">
{children}
</div>
</div>
packages/admin-ui/ui/src/components/molecules/table/filtering-option.tsx
+7 -7
View File
@@ -24,7 +24,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
return (
<div
className={clsx(
"inter-small-regular flex text-grey-50 mr-6 last:mr-0",
"inter-small-regular text-grey-50 mr-6 flex last:mr-0",
className
)}
{...props}
@@ -34,11 +34,11 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
<DropdownMenu.Trigger
asChild
className={clsx(
"inter-small-regular text-grey-50 flex items-center pl-1.5 pr-0.5 rounded active:bg-grey-5 hover:bg-grey-5",
"inter-small-regular text-grey-50 active:bg-grey-5 hover:bg-grey-5 flex items-center rounded pl-1.5 pr-0.5",
{ "bg-grey-5": open }
)}
>
<div className="flex align-center">
<div className="align-center flex">
{selected}
<div className="text-grey-40 h-min">
<ChevronDownIcon size={16} />
@@ -47,7 +47,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
</DropdownMenu.Trigger>
<DropdownMenu.Content
sideOffset={8}
className="bg-grey-0 p-2 border border-grey-20 rounded-rounded shadow-dropdown"
className="bg-grey-0 border-grey-20 rounded-rounded shadow-dropdown border p-2"
>
{options.map((opt, idx) => (
<DropdownMenu.DropdownMenuItem
@@ -58,9 +58,9 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
}}
disabled={typeof opt.count !== "undefined" && opt.count < 1}
className={clsx(
"py-1.5 my-1 w-48 px-3 flex items-center rounded text-grey-90 hover:border-0 hover:outline-none inter-small-semibold",
"text-grey-90 inter-small-semibold my-1 flex w-48 items-center rounded py-1.5 px-3 hover:border-0 hover:outline-none",
{
"cursor-pointer hover:bg-grey-10":
"hover:bg-grey-10 cursor-pointer":
typeof opt.count === "undefined" || opt.count > 0,
}
)}
@@ -71,7 +71,7 @@ const FilteringOptions: React.FC<FilteringOptionProps> = ({
</span>
)}
<div
className={clsx("ml-3 w-full flex justify-between", {
className={clsx("ml-3 flex w-full justify-between", {
"ml-7": selected !== opt.title,
"text-grey-30": (opt.count || 0) < 1,
})}
packages/admin-ui/ui/src/components/molecules/table/table-search.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ const TableSearch: React.FC<TableSearchProps> = ({
return (
<div
className={clsx(
"inter-small-regular mt-1 transition-color flex text-grey-50 items-center mb-1 pl-1 py-1.5 rounded-rounded border border-grey-20 min-w-content w-60 focus-within:shadow-input focus-within:border-violet-60 bg-grey-5",
"inter-small-regular transition-color text-grey-50 rounded-rounded border-grey-20 min-w-content focus-within:shadow-input focus-within:border-violet-60 bg-grey-5 mt-1 mb-1 flex w-60 items-center border py-1.5 pl-1",
className
)}
{...props}
@@ -33,7 +33,7 @@ const TableSearch: React.FC<TableSearchProps> = ({
type="text"
value={searchValue}
className={clsx(
"focus:outline-none focus:border-none inter-small-regular w-full bg-transparent focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40"
"inter-small-regular focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40 w-full bg-transparent focus:border-none focus:outline-none"
)}
placeholder={placeholder}
onChange={(e) => {
packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ const TagGrid: React.FC<TagGridProps> = ({ tags, badgeVariant }) => {
const remainder = tags.length - columns
return (
<div className="flex items-center gap-x-2xsmall w-1/2" ref={containerRef}>
<div className="gap-x-2xsmall flex w-1/2 items-center" ref={containerRef}>
{visibleTags?.map((tag, index) => {
return (
<Badge className="mr-2xsmall" key={index} variant={badgeVariant}>
packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx
+8 -7
View File
@@ -175,19 +175,20 @@ const TagInput: React.FC<TagInputProps> = ({
>
<div
className={clsx(
"h-auto min-h-[40px] bg-grey-5 shadow-border focus-within:outline-4 focus-within:outline focus-within:outline-violet-60/10 transition-colors focus-within:shadow-focus-border rounded-rounded flex items-center px-3 box-border",
"bg-grey-5 shadow-border focus-within:outline-violet-60/10 focus-within:shadow-focus-border rounded-rounded box-border flex h-auto min-h-[40px] items-center px-3 transition-colors focus-within:outline focus-within:outline-4",
{
"shadow-error-border focus-within:shadow-error-border focus-within:outline-rose-60/10": invalid,
"shadow-error-border focus-within:shadow-error-border focus-within:outline-rose-60/10":
invalid,
}
)}
>
<div className="h-full">
<div className="w-full gap-xsmall flex flex-wrap box-border h-28px py-1.5">
<div className="gap-xsmall h-28px box-border flex w-full flex-wrap py-1.5">
{values.map((v, index) => (
<div
key={index}
className={clsx(
"flex items-center justify-center whitespace-nowrap w-max bg-grey-20 rounded-rounded px-3 py-1 gap-x-1",
"bg-grey-20 rounded-rounded flex w-max items-center justify-center gap-x-1 whitespace-nowrap px-3 py-1",
{
["!bg-grey-90"]: index === highlighted,
}
@@ -195,7 +196,7 @@ const TagInput: React.FC<TagInputProps> = ({
>
<span
className={clsx(
"inline-block text-grey-50 inter-small-semibold",
"text-grey-50 inter-small-semibold inline-block",
{
["text-grey-20"]: index === highlighted,
}
@@ -204,7 +205,7 @@ const TagInput: React.FC<TagInputProps> = ({
{v}
</span>
<CrossIcon
className="inline cursor-pointer text-grey-40"
className="text-grey-40 inline cursor-pointer"
size="16"
onClick={() => handleRemove(index)}
/>
@@ -216,7 +217,7 @@ const TagInput: React.FC<TagInputProps> = ({
onBlur={handleBlur}
onKeyDown={handleKeyDown}
onChange={handleInput}
className={clsx("focus:outline-none bg-transparent flex-1")}
className={clsx("flex-1 bg-transparent focus:outline-none")}
placeholder={values?.length ? "" : placeholder} // only visible if no tags exist
{...props}
/>
packages/admin-ui/ui/src/components/molecules/textarea/index.tsx
+4 -4
View File
@@ -75,17 +75,17 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
)}
<div
className={clsx(
"w-full flex flex-col focus-within:shadow-input focus-within:border-violet-60 px-small py-xsmall bg-grey-5 border border-grey-20 rounded-rounded",
"focus-within:shadow-input focus-within:border-violet-60 px-small py-xsmall bg-grey-5 border-grey-20 rounded-rounded flex w-full flex-col border",
{
"border-rose-50 focus-within:shadow-cta focus-within:shadow-rose-60/10 focus-within:border-rose-50":
"focus-within:shadow-cta focus-within:shadow-rose-60/10 border-rose-50 focus-within:border-rose-50":
errors && name && errors[name],
}
)}
>
<textarea
className={clsx(
"relative text-justify overflow-hidden focus:overflow-auto resize-none bg-inherit outline-none outline-0",
"w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40",
"relative resize-none overflow-hidden bg-inherit text-justify outline-none outline-0 focus:overflow-auto",
"remove-number-spinner leading-base text-grey-90 caret-violet-60 placeholder-grey-40 w-full font-normal",
"line-clamp-[var(--lines)] focus:line-clamp-none"
)}
style={
packages/admin-ui/ui/src/components/molecules/timeline-events/event-actionables.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ type EventActionablesProps = {
const EventActionables: React.FC<EventActionablesProps> = ({ actions }) => {
const EventTrigger = (
<button className="btn-ghost py-0 px-2xsmall flex justify-center items-center focus:outline-none focus:ring-2 rounded-base focus:ring-violet-40">
<button className="btn-ghost px-2xsmall rounded-base focus:ring-violet-40 flex items-center justify-center py-0 focus:outline-none focus:ring-2">
<MoreHorizontalIcon size={20} />
</button>
)
packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx
+5 -5
View File
@@ -48,12 +48,12 @@ const EventContainer: React.FC<EventContainerProps> = ({
return (
<div className="mb-base">
<div className="flex items-center justify-between">
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
<div className={clsx("h-5 w-5", iconColor)}>{icon}</div>
<div className="inter-small-semibold">{title}</div>
<div className="inter-small-regular text-grey-50"></div>
</div>
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
{noNotification && (
<Tooltip content="Notifications related to this event are disabled">
<BellOffIcon size={20} className="text-grey-40" />
@@ -71,8 +71,8 @@ const EventContainer: React.FC<EventContainerProps> = ({
)}
</div>
</div>
<div className="flex gap-x-xsmall">
<div className="flex w-5 justify-center pt-base">
<div className="gap-x-xsmall flex">
<div className="pt-base flex w-5 justify-center">
{!isFirst && <div className="min-h-[24px] w-px" />}
</div>
<div className="inter-small-regular mt-2xsmall w-full">
@@ -90,7 +90,7 @@ const EventContainer: React.FC<EventContainerProps> = ({
{midNode}
</div>
{children && isExpanded && (
<div className="mt-small w-full pb-base">{children}</div>
<div className="mt-small pb-base w-full">{children}</div>
)}
</div>
</div>
packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx
+4 -4
View File
@@ -16,9 +16,9 @@ const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
return null
}
return (
<div className="flex items-center gap-x-small mb-base last:mb-0">
<div className="gap-x-small mb-base flex items-center last:mb-0">
{item.thumbnail && (
<div className="h-10 w-[30px] rounded-base overflow-hidden">
<div className="rounded-base h-10 w-[30px] overflow-hidden">
<img
src={item.thumbnail}
alt={`Thumbnail for ${item.title}`}
@@ -26,8 +26,8 @@ const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
/>
</div>
)}
<div className="flex flex-col inter-small-regular w-full">
<div className="flex items-center justify-between w-full">
<div className="inter-small-regular flex w-full flex-col">
<div className="flex w-full items-center justify-between">
<p>{item.title}</p>
<span className="inter-small-semibold text-violet-60">{`x${item.quantity}`}</span>
</div>
packages/admin-ui/ui/src/components/molecules/timeline-events/note.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const Note: React.FC<NoteProps> = ({ event }) => {
isFirst={event.first}
>
<div
className={clsx("rounded-2xl px-base py-base", {
className={clsx("px-base py-base rounded-2xl", {
"bg-grey-5": !isMe,
"bg-violet-5 text-violet-90": isMe,
})}
packages/admin-ui/ui/src/components/molecules/timeline-events/notification/resend-modal.tsx
+3 -3
View File
@@ -67,11 +67,11 @@ const ResendModal: React.FC<ResendModalProps> = ({
</div>
</Modal.Content>
<Modal.Footer>
<div className="flex w-full h-8 justify-end">
<div className="flex h-8 w-full justify-end">
<div className="flex">
<Button
variant="ghost"
className="mr-2 w-32 text-small justify-center"
className="text-small mr-2 w-32 justify-center"
size="large"
onClick={handleCancel}
>
@@ -79,7 +79,7 @@ const ResendModal: React.FC<ResendModalProps> = ({
</Button>
<Button
size="large"
className="w-32 text-small justify-center"
className="text-small w-32 justify-center"
variant="primary"
type="submit"
disabled={isLoading}
packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx
+12 -14
View File
@@ -45,9 +45,8 @@ const getInfo = (edit: OrderEdit): { type: string; user_id: string } => {
}
const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
const { isModalVisible, showModal, setActiveOrderEdit } = useContext(
OrderEditContext
)
const { isModalVisible, showModal, setActiveOrderEdit } =
useContext(OrderEditContext)
const { order_edit: orderEdit, isFetching } = useAdminOrderEdit(event.edit.id)
@@ -90,8 +89,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
const onConfirmEditClicked = async () => {
const shouldDelete = await forceConfirmDialog({
heading: "Delete Confirm",
text:
"By force confirming you allow the order edit to be fulfilled. You will still have to reconcile payments manually after confirming.",
text: "By force confirming you allow the order edit to be fulfilled. You will still have to reconcile payments manually after confirming.",
confirmText: "Yes, Force Confirm",
cancelText: "No, Cancel",
})
@@ -149,7 +147,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
{type === "created" ? (
<>
<Button
className="w-full border border-grey-20"
className="border-grey-20 w-full border"
size="small"
variant="ghost"
onClick={onContinueEdit}
@@ -158,7 +156,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
</Button>
<TwoStepDelete
onDelete={onDeleteOrderEditClicked}
className="w-full border border-grey-20"
className="border-grey-20 w-full border"
>
Delete the order edit
</TwoStepDelete>
@@ -166,7 +164,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
) : (
<>
<Button
className="w-full border border-grey-20"
className="border-grey-20 w-full border"
size="small"
variant="ghost"
onClick={onCopyConfirmationLinkClicked}
@@ -174,7 +172,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
Copy Confirmation-Request Link
</Button>
<Button
className="w-full border border-grey-20"
className="border-grey-20 w-full border"
size="small"
variant="ghost"
onClick={onConfirmEditClicked}
@@ -184,7 +182,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ event }) => {
<TwoStepDelete
onDelete={onCancelOrderEditClicked}
className="w-full border border-grey-20"
className="border-grey-20 w-full border"
>
Cancel Order Edit
</TwoStepDelete>
@@ -220,7 +218,7 @@ const OrderEditChanges = ({ orderEdit }) => {
)
return (
<div className="flex flex-col gap-y-base">
<div className="gap-y-base flex flex-col">
{added.length > 0 && (
<div>
<span className="inter-small-regular text-grey-50">Added</span>
@@ -264,9 +262,9 @@ const OrderEditChangeItem: React.FC<OrderEditChangeItemProps> = ({
const lineItem = isAdd ? change.line_item : change.original_line_item
return (
<div className="flex gap-x-base mt-xsmall">
<div className="gap-x-base mt-xsmall flex">
<div>
<div className="flex h-[40px] w-[30px] rounded-rounded overflow-hidden">
<div className="rounded-rounded flex h-[40px] w-[30px] overflow-hidden">
{lineItem?.thumbnail ? (
<img src={lineItem.thumbnail} className="object-cover" />
) : (
@@ -281,7 +279,7 @@ const OrderEditChangeItem: React.FC<OrderEditChangeItemProps> = ({
<CopyToClipboard value={lineItem?.variant?.sku} iconSize={14} />
)}
</span>
<span className="flex inter-small-regular text-grey-50">
<span className="inter-small-regular text-grey-50 flex">
{lineItem?.variant?.options?.map((option) => option.value)}
</span>
</div>
packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/index.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const ByLine: React.FC<ByLineProps> = ({ user }) => {
!first_name && !last_name ? email : `${first_name || ""} ${last_name || ""}`
return (
<div className="flex inter-small-regular items-center text-grey-50">
<div className="inter-small-regular text-grey-50 flex items-center">
By
<span className="w-base h-base mx-xsmall">
<Avatar user={user} font="inter-xsmall-semibold" />
packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/payment-required.tsx
+2 -2
View File
@@ -59,7 +59,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
>
<Button
size="small"
className="w-full border border-grey-20 mb-xsmall"
className="border-grey-20 mb-xsmall w-full border"
variant="ghost"
onClick={onCopyPaymentLinkClicked}
>
@@ -67,7 +67,7 @@ const PaymentRequired: React.FC<RequestedProps> = ({ event }) => {
</Button>
<Button
size="small"
className="w-full border border-grey-20"
className="border-grey-20 w-full border"
variant="ghost"
onClick={onMarkAsPaidClicked}
>
packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/refund-required.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const RefundRequired: React.FC<RequestedProps> = ({ event }) => {
onClick={() => setShowRefundModal(true)}
variant="ghost"
size="small"
className="w-full border border-grey-20 mb-xsmall text-rose-50"
className="border-grey-20 mb-xsmall w-full border text-rose-50"
>
Refund
{formatAmountWithSymbol({
packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/requested.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const EditRequested: React.FC<RequestedProps> = ({ event }) => {
}
>
<Button
className="w-full border border-grey-20 mb-5"
className="border-grey-20 mb-5 w-full border"
size="small"
variant="ghost"
onClick={() => setShowResend(true)}
packages/admin-ui/ui/src/components/molecules/timeline-events/order-placed.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import React from "react"
import { OrderPlacedEvent } from "../../../hooks/use-build-timeline"
import { formatAmountWithSymbol } from "../../../utils/prices"
import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
import EventContainer, { EventIconColor } from "./event-container"
import EventContainer from "./event-container"
type OrderPlacedProps = {
event: OrderPlacedEvent

Some files were not shown because too many files have changed in this diff Show More