mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-14 23:52:09 +00:00
Fix: Format entire frontend properly
This commit is contained in:
Daniel Hougaard
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable */
|
||||
import { PostHog } from 'posthog-js';
|
||||
import { initPostHog } from '@app/components/analytics/posthog';
|
||||
import { ENV } from '@app/components/utilities/config';
|
||||
import { PostHog } from "posthog-js";
|
||||
import { initPostHog } from "@app/components/analytics/posthog";
|
||||
import { ENV } from "@app/components/utilities/config";
|
||||
|
||||
declare let TELEMETRY_CAPTURING_ENABLED: any;
|
||||
|
||||
@@ -13,23 +13,23 @@ class Capturer {
|
||||
}
|
||||
|
||||
capture(item: string) {
|
||||
if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
|
||||
if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
|
||||
try {
|
||||
this.api.capture(item);
|
||||
} catch (error) {
|
||||
console.error('PostHog', error);
|
||||
console.error("PostHog", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
identify(id: string, email?: string) {
|
||||
if (ENV === 'production' && TELEMETRY_CAPTURING_ENABLED === "true") {
|
||||
if (ENV === "production" && TELEMETRY_CAPTURING_ENABLED === "true") {
|
||||
try {
|
||||
this.api.identify(id, {
|
||||
email: email
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('PostHog', error);
|
||||
console.error("PostHog", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Accordion>;
|
||||
|
||||
export const Basic: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<Accordion {...args}>
|
||||
<AccordionItem value="section-1">
|
||||
<AccordionTrigger>Section 1</AccordionTrigger>
|
||||
|
||||
@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
|
||||
({ children, className, ...props }, forwardedRef) => (
|
||||
<AccordionPrimitive.Item
|
||||
className={twMerge(
|
||||
"mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
|
||||
"mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
className={twMerge(
|
||||
"py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
|
||||
"group flex h-11 flex-1 items-center justify-between py-2 px-4 outline-none hover:text-primary data-[state=open]:text-primary ",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
|
||||
{children}
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
|
||||
className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</AccordionPrimitive.Trigger>
|
||||
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
|
||||
>(({ children, className, ...props }, forwardedRef) => (
|
||||
<AccordionPrimitive.Content
|
||||
className={twMerge(
|
||||
"data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
|
||||
"overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<div className="text-sm py-2 px-4">{children}</div>
|
||||
<div className="py-2 px-4 text-sm">{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
));
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";
|
||||
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
|
||||
|
||||
@@ -10,7 +10,7 @@ export type CardTitleProps = {
|
||||
export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
|
||||
<div
|
||||
className={twMerge(
|
||||
"px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words",
|
||||
"mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -30,7 +30,7 @@ export const Checkbox = ({
|
||||
<div className="flex items-center font-inter text-bunker-300">
|
||||
<CheckboxPrimitive.Root
|
||||
className={twMerge(
|
||||
"flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
|
||||
"flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
|
||||
isDisabled && "bg-bunker-400 hover:bg-bunker-400",
|
||||
isChecked && "bg-primary hover:bg-primary",
|
||||
Boolean(children) && "mr-3",
|
||||
@@ -46,7 +46,7 @@ export const Checkbox = ({
|
||||
<FontAwesomeIcon icon={faCheck} size="sm" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
<label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
|
||||
<label className="truncate whitespace-nowrap text-sm" htmlFor={id}>
|
||||
{children}
|
||||
{isRequired && <span className="pl-1 text-red">*</span>}
|
||||
</label>
|
||||
|
||||
@@ -58,7 +58,7 @@ export const DeleteActionModal = ({
|
||||
title={title}
|
||||
subTitle={subTitle}
|
||||
footerContent={
|
||||
<div className="flex items-center mx-2">
|
||||
<div className="mx-2 flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
colorSchema="danger"
|
||||
@@ -91,7 +91,11 @@ export const DeleteActionModal = ({
|
||||
}
|
||||
className="mb-0"
|
||||
>
|
||||
<Input value={inputData} onChange={(e) => setInputData(e.target.value)} placeholder="Type to delete..." />
|
||||
<Input
|
||||
value={inputData}
|
||||
onChange={(e) => setInputData(e.target.value)}
|
||||
placeholder="Type to delete..."
|
||||
/>
|
||||
</FormControl>
|
||||
</form>
|
||||
</ModalContent>
|
||||
|
||||
@@ -45,7 +45,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
|
||||
ref={forwardedRef}
|
||||
className={twMerge(drawerContentVariation({ direction, className }))}
|
||||
>
|
||||
<Card isRounded={false} className="h-full w-full dark">
|
||||
<Card isRounded={false} className="dark h-full w-full">
|
||||
{title && (
|
||||
<CardTitle subTitle={subTitle} className="px-4">
|
||||
{title}
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from "./Drawer";
|
||||
export { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from "./Drawer";
|
||||
|
||||
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof DropdownMenuContent>;
|
||||
|
||||
export const Basic: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
@@ -43,7 +43,7 @@ export const Basic: Story = {
|
||||
|
||||
export const Icons: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
@@ -65,7 +65,7 @@ export const Icons: Story = {
|
||||
|
||||
export const WithDivider: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
@@ -86,7 +86,7 @@ export const WithDivider: Story = {
|
||||
|
||||
export const Group: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
|
||||
@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
className={twMerge(
|
||||
"min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
"z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
className={twMerge(
|
||||
"min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
"z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
|
||||
export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
{...props}
|
||||
className={twMerge("text-xs text-bunker-400 px-4 pt-2 pb-1", className)}
|
||||
className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -91,14 +91,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
|
||||
<DropdownMenuPrimitive.Item
|
||||
{...props}
|
||||
className={twMerge(
|
||||
"text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
|
||||
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
|
||||
{icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
|
||||
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
|
||||
<span className="flex-grow text-left">{children}</span>
|
||||
{icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
|
||||
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
|
||||
</Item>
|
||||
</DropdownMenuPrimitive.Item>
|
||||
);
|
||||
@@ -124,14 +124,14 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
{...props}
|
||||
className={twMerge(
|
||||
"text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
|
||||
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
|
||||
{icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
|
||||
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
|
||||
<span className="flex-grow text-left">{children}</span>
|
||||
{icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
|
||||
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
|
||||
</Item>
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
@@ -143,7 +143,7 @@ export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupPro
|
||||
({ ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Group
|
||||
{...props}
|
||||
className={twMerge("text-xs py-2 pl-3", props.className)}
|
||||
className={twMerge("py-2 pl-3 text-xs", props.className)}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
@@ -159,7 +159,7 @@ export const DropdownMenuSeparator = forwardRef<
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={twMerge("h-[1px] bg-gray-700 m-1", className)}
|
||||
className={twMerge("m-1 h-[1px] bg-gray-700", className)}
|
||||
/>
|
||||
));
|
||||
|
||||
|
||||
@@ -10,9 +10,10 @@ export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Ele
|
||||
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent title="Email service not configured">
|
||||
<p className="mb-4 text-bunker-300">
|
||||
The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
|
||||
The administrators of this Infisical instance have not yet set up an email service provider
|
||||
required to perform this action
|
||||
</p>
|
||||
|
||||
|
||||
<a href="https://infisical.com/docs/self-hosting/configuration/email">
|
||||
<Button className="mr-4">Learn more</Button>
|
||||
</a>
|
||||
|
||||
@@ -23,7 +23,7 @@ export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelP
|
||||
{label}
|
||||
{isRequired && <span className="ml-1 text-red">*</span>}
|
||||
{icon && (
|
||||
<span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
|
||||
<span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -10,22 +10,16 @@ type Props = {
|
||||
|
||||
export type HoverCardProps = Props;
|
||||
|
||||
export const HoverObject = ({
|
||||
text,
|
||||
icon,
|
||||
color
|
||||
}: Props): JSX.Element => (
|
||||
export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
|
||||
<HoverCard.Root openDelay={50}>
|
||||
<HoverCard.Trigger asChild>
|
||||
<a
|
||||
className="ImageTrigger z-20"
|
||||
>
|
||||
<a className="ImageTrigger z-20">
|
||||
<FontAwesomeIcon icon={icon} className={`text-${color}`} />
|
||||
</a>
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Portal>
|
||||
<HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
|
||||
<div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
|
||||
<div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
|
||||
<div>
|
||||
<div className="Text bold">{text}</div>
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { HoverCard,HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
|
||||
export { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
|
||||
|
||||
@@ -29,7 +29,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
|
||||
<Card
|
||||
isRounded
|
||||
className={twMerge(
|
||||
"fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen thin-scrollbar max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
|
||||
"thin-scrollbar fixed top-1/2 left-1/2 z-30 max-h-screen max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -44,7 +44,7 @@ export const Pagination = ({
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center justify-end text-white w-full py-3 px-4 bg-mineshaft-800",
|
||||
"flex w-full items-center justify-end bg-mineshaft-800 py-3 px-4 text-white",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -3,39 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Popover from "@radix-ui/react-popover";
|
||||
|
||||
type Props = {
|
||||
children: any;
|
||||
text: string;
|
||||
onChangeHandler: (value: string, id: string) => void;
|
||||
children: any;
|
||||
text: string;
|
||||
onChangeHandler: (value: string, id: string) => void;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export type PopoverProps = Props;
|
||||
|
||||
export const PopoverObject = ({children, text, onChangeHandler, id}: Props) => (
|
||||
export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) => (
|
||||
<Popover.Root>
|
||||
<Popover.Trigger asChild className='data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400'>
|
||||
<Popover.Trigger
|
||||
asChild
|
||||
className="data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400"
|
||||
>
|
||||
{children}
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
className="rounded z-[100] p-3 w-[460px] min-h-fit border border-chicago-700 bg-mineshaft-600 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
||||
className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
||||
sideOffset={5}
|
||||
hideWhenDetached
|
||||
side="left"
|
||||
>
|
||||
<div className="flex flex-col pt-2 dark">
|
||||
<p className="text-bunker-200 text-[15px] leading-[0px] font-medium mb-5">Comment</p>
|
||||
<div className="dark flex flex-col pt-2">
|
||||
<p className="mb-5 text-[15px] font-medium leading-[0px] text-bunker-200">Comment</p>
|
||||
<textarea
|
||||
onChange={(e) => onChangeHandler(e.target.value, id)}
|
||||
// type={type}
|
||||
value={text}
|
||||
className='z-10 dark:[color-scheme:dark] peer h-[20rem] ph-no-capture bg-bunker-600 border border-mineshaft-500 rounded-md py-2.5 caret-bunker-200 text-sm px-2 w-full outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
|
||||
className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 py-2.5 px-2 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
|
||||
spellCheck="false"
|
||||
placeholder='–'
|
||||
placeholder="–"
|
||||
/>
|
||||
</div>
|
||||
<Popover.Close
|
||||
className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-bunker-300 hover:text-white absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
|
||||
className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
|
||||
aria-label="Close"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Popover,PopoverContent, PopoverTrigger } from "./Popoverv2";
|
||||
export { Popover, PopoverContent, PopoverTrigger } from "./Popoverv2";
|
||||
|
||||
@@ -6,35 +6,35 @@ export type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
|
||||
|
||||
// Note this component is not customizable (Heroku integration and potentially other pages depend on it)
|
||||
export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) => (
|
||||
<RadioGroupPrimitive.Root
|
||||
className={twMerge("flex flex-row gap-5 px-6 mb-6", className)}
|
||||
<RadioGroupPrimitive.Root
|
||||
className={twMerge("mb-6 flex flex-row gap-5 px-6", className)}
|
||||
defaultValue="App"
|
||||
aria-label="View density"
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<RadioGroupPrimitive.Item
|
||||
className="bg-bunker-400/20 w-[20px] h-[20px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
|
||||
className="h-[20px] w-[20px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
|
||||
value="App"
|
||||
id="r1"
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
|
||||
<RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-primary after:content-['']" />
|
||||
</RadioGroupPrimitive.Item>
|
||||
<label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r1">
|
||||
<label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
|
||||
App
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<RadioGroupPrimitive.Item
|
||||
className="bg-bunker-400/20 w-[22px] h-[22px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
|
||||
className="h-[22px] w-[22px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
|
||||
value="Pipeline"
|
||||
id="r2"
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[13px] after:h-[13px] after:rounded-[50%] after:bg-primary" />
|
||||
<RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:bg-primary after:content-['']" />
|
||||
</RadioGroupPrimitive.Item>
|
||||
<label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r2">
|
||||
<label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
|
||||
Pipeline
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroupPrimitive.Root>
|
||||
);
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { forwardRef, ReactNode } from "react";
|
||||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faCaretDown, faCaretUp,faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
@@ -57,7 +57,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
className={twMerge(
|
||||
"relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md",
|
||||
"relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
|
||||
dropdownContainerClassName
|
||||
)}
|
||||
position={position}
|
||||
|
||||
@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={twMerge(
|
||||
"text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
|
||||
"m-1 animate-spin fill-primary text-gray-200 dark:text-gray-600",
|
||||
sizeChart[size],
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
|
||||
"flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 p-2",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -25,15 +25,15 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center space-x-3 flex-shrink-0",
|
||||
"flex flex-shrink-0 items-center space-x-3",
|
||||
isNotLast && "flex-grow"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center space-x-2 flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 items-center space-x-2">
|
||||
<div
|
||||
className={twMerge(
|
||||
"w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
|
||||
isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
|
||||
"flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium text-mineshaft-800 transition-all",
|
||||
isCompleted ? "bg-primary" : "border border-primary/30 text-bunker-300",
|
||||
isActive && "bg-primary text-mineshaft-800"
|
||||
)}
|
||||
>
|
||||
@@ -71,7 +71,7 @@ export type StepProps = {
|
||||
export const Step = ({ title, description }: StepProps) => {
|
||||
return (
|
||||
<div className="flex flex-col text-gray-300">
|
||||
<div className="font-medium text-sm">{title}</div>
|
||||
<div className="text-sm font-medium">{title}</div>
|
||||
{description && <div className="text-xs">{description}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export type { StepperProps,StepProps } from "./Stepper";
|
||||
export { Step,Stepper } from "./Stepper";
|
||||
export type { StepperProps, StepProps } from "./Stepper";
|
||||
export { Step, Stepper } from "./Stepper";
|
||||
|
||||
@@ -6,5 +6,6 @@ export type {
|
||||
TFootProps,
|
||||
THeadProps,
|
||||
ThProps,
|
||||
TrProps} from "./Table";
|
||||
export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";
|
||||
TrProps
|
||||
} from "./Table";
|
||||
export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot, Th, THead, Tr } from "./Table";
|
||||
|
||||
@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
|
||||
|
||||
export const TabList = ({ className, children, ...props }: TabListProps) => (
|
||||
<TabsPrimitive.List
|
||||
className={twMerge("flex-shrink-0 flex border-b-2 border-mineshaft-800", className)}
|
||||
className={twMerge("flex flex-shrink-0 border-b-2 border-mineshaft-800", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
|
||||
export const Tab = ({ className, children, ...props }: TabProps) => (
|
||||
<TabsPrimitive.Trigger
|
||||
className={twMerge(
|
||||
"px-3 h-10 font-medium text-sm flex items-center justify-center select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 text-mineshaft-400 transition-all data-[state=active]:text-white data-[state=active]:border-b data-[state=active]:border-primary",
|
||||
"flex h-10 select-none items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
|
||||
|
||||
export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
|
||||
<TabsPrimitive.Content
|
||||
className={twMerge("outline-none flex-grow py-5 rounded-bl-md rounded-br-md", className)}
|
||||
className={twMerge("flex-grow rounded-bl-md rounded-br-md py-5 outline-none", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export type { TabListProps,TabPanelProps, TabProps, TabsProps } from "./Tabs";
|
||||
export type { TabListProps, TabPanelProps, TabProps, TabsProps } from "./Tabs";
|
||||
export { Tab, TabList, TabPanel, Tabs } from "./Tabs";
|
||||
|
||||
Reference in New Issue
Block a user