feat(ui): fine tuning components library with exiting app design

frontend/src/components/v2/Button/Button.tsx

@@ -18,7 +18,8 @@ const buttonVariants = cva(
     'font-inter font-medium',
     'cursor-pointer',
     'inline-flex items-center justify-center',
-    'relative'
+    'relative',
+    'whitespace-nowrap'
   ],
   {
     variants: {
@@ -33,7 +34,7 @@ const buttonVariants = cva(
         plain: ''
       },
       isDisabled: {
-        true: 'bg-opacity-70 cursor-not-allowed',
+        true: 'bg-opacity-40 cursor-not-allowed',
         false: ''
       },
       isFullWidth: {
@@ -45,9 +46,9 @@ const buttonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-2'],
+        xs: ['text-xs', 'py-1', 'px-1'],
-        sm: ['text-sm', 'py-2', 'px-4'],
+        sm: ['text-sm', 'py-2', 'px-2'],
-        md: ['text-md', 'py-2', 'px-6'],
+        md: ['text-md', 'py-2', 'px-4'],
         lg: ['text-lg', 'py-2', 'px-8']
       }
     },
@@ -75,7 +76,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'secondary',
         variant: 'plain',
-        className: 'text-mineshaft'
+        className: 'text-mineshaft-300'
       },
       {
         colorSchema: 'danger',
@@ -101,7 +102,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       isDisabled = false,
       className = '',
-      size = 'md',
+      size = 'sm',
       variant = 'solid',
       isFullWidth,
       isRounded = true,
@@ -144,7 +145,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         <span
           className={twMerge(
-            'transition-all shrink-0 cursor-pointer',
+            'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
             size === 'xs' ? 'mr-1' : 'mr-2'
           )}
@@ -154,7 +155,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <span className={twMerge('transition-all', loadingToggleClass)}>{children}</span>
         <span
           className={twMerge(
-            'transition-all shrink-0 cursor-pointer',
+            'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
             size === 'xs' ? 'ml-1' : 'ml-2'
           )}

frontend/src/components/v2/Card/Card.tsx

@@ -29,7 +29,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+  <div className={twMerge('p-6 pb-4 pt-0', className)}>{children}</div>
 );
 
 export type CardProps = {
@@ -47,7 +47,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          'flex flex-col w-full font-inter text-gray-200 bg-mineshaft-700 shadow-md',
+          'flex w-full flex-col bg-mineshaft-800 font-inter text-gray-200 shadow-md',
           isFullHeight && 'h-full',
           isRounded && 'rounded-md',
           isPlain && 'shadow-none',

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+
+import { useToggle } from '@app/hooks';
+
+import { Button } from '../Button';
+import { FormControl } from '../FormControl';
+import { Input } from '../Input';
+import { Modal, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onChange?: (isOpen: boolean) => void;
+  deleteKey: string;
+  title: string;
+  onDeleteApproved: () => Promise<void>;
+};
+
+export const DeleteActionModal = ({
+  isOpen,
+  onClose,
+  onChange,
+  deleteKey,
+  onDeleteApproved,
+  title
+}: Props): JSX.Element => {
+  const [inputData, setInputData] = useState('');
+  const [isLoading, setIsLoading] = useToggle();
+
+  useEffect(() => {
+    setInputData('');
+  }, [isOpen]);
+
+  const onDelete = async () => {
+    setIsLoading.on();
+    try {
+      await onDeleteApproved();
+    } catch {
+      setIsLoading.off();
+    } finally {
+      setIsLoading.off();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(isOpenState) => {
+        setInputData('');
+        if (onChange) onChange(isOpenState);
+      }}
+    >
+      <ModalContent
+        title={title}
+        subTitle="This action is irreversible!!!"
+        footerContent={
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              colorSchema="danger"
+              isDisabled={!(deleteKey === inputData) || isLoading}
+              onClick={onDelete}
+              isLoading={isLoading}
+            >
+              Delete
+            </Button>
+            <Button variant="plain" colorSchema="secondary" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        }
+        onClose={onClose}
+      >
+        <form>
+          <FormControl
+            label={
+              <div className="pb-2 text-sm">
+                Type <span className="font-bold">{deleteKey}</span> to delete the resource
+              </div>
+            }
+            className="mb-4"
+          >
+            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} />
+          </FormControl>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/v2/DeleteActionModal/index.tsx

@@ -0,0 +1 @@
+export { DeleteActionModal } from './DeleteActionModal';

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -11,7 +11,7 @@ export type FormLabelProps = {
 };
 
 export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="text-mineshaft-300 text-sm font-medium block mb-1 ml-0.5" htmlFor={id}>
+  <Label.Root className="mb-1 ml-0.5 block text-sm font-medium text-mineshaft-300" htmlFor={id}>
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
   </Label.Root>
@@ -25,7 +25,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      'text-xs font-inter flex items-center opacity-90 text-mineshaft-300 mt-2',
+      'mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90',
       isError && 'text-red-600'
     )}
   >
@@ -46,6 +46,7 @@ export type FormControlProps = {
   helperText?: ReactNode;
   errorText?: ReactNode;
   children: JSX.Element;
+  className?: string;
 };
 
 export const FormControl = ({
@@ -55,10 +56,11 @@ export const FormControl = ({
   helperText,
   errorText,
   id,
-  isError
+  isError,
+  className
 }: FormControlProps): JSX.Element => {
   return (
-    <div>
+    <div className={twMerge('mb-4', className)}>
       {typeof label === 'string' ? (
         <FormLabel label={label} isRequired={isRequired} id={id} />
       ) : (

frontend/src/components/v2/IconButton/IconButton.tsx

@@ -14,7 +14,7 @@ const iconButtonVariants = cva(
   [
     'button',
     'transition-all',
-    'font-inter font-medium',
+    'font-inter font-medium user-select-none',
     'cursor-pointer',
     'inline-flex items-center justify-center',
     'relative'

frontend/src/components/v2/Input/Input.tsx

@@ -8,6 +8,7 @@ type Props = {
   isRequired?: boolean;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
+  isDisabled?: boolean;
 };
 
 const inputVariants = cva(
@@ -46,7 +47,7 @@ const inputParentContainerVariants = cva('inline-flex font-inter items-center bo
     },
     isError: {
       true: 'border-red',
-      false: 'border-mineshaft-400'
+      false: 'border-mineshaft-500'
     },
     isFullWidth: {
       true: 'w-full',
@@ -70,6 +71,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       className,
       isRounded = true,
       isFullWidth = true,
+      isDisabled,
       isError = false,
       isRequired,
       leftIcon,
@@ -87,6 +89,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
           required={isRequired}
           ref={ref}
+          disabled={isDisabled}
           className={twMerge(
             leftIcon ? 'pl-9' : 'pl-4',
             rightIcon ? 'pr-9' : 'pr-4',

frontend/src/components/v2/Modal/Modal.tsx

@@ -11,31 +11,32 @@ export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
   subTitle?: string;
   footerContent?: ReactNode;
+  onClose?: () => void;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
-  ({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
+  ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 w-full h-full animate-fadeIn"
+        className="fixed inset-0 h-full w-full animate-fadeIn"
-        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-md',
             className
           )}
         >
           {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
           <CardBody>{children}</CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <DialogPrimitive.Close aria-label="Close" asChild>
+          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
+              className="absolute top-2.5 right-2.5 rounded text-white hover:bg-gray-600"
             >
               <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
             </IconButton>
@@ -55,3 +56,6 @@ export const Modal = ({ isOpen, ...props }: ModalProps) => (
 
 export const ModalTrigger = DialogPrimitive.Trigger;
 export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;
+
+export const ModalClose = DialogPrimitive.Close;
+export type ModalCloseProps = DialogPrimitive.DialogCloseProps;

frontend/src/components/v2/Modal/index.tsx

@@ -1,2 +1,2 @@
-export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
+export type { ModalCloseProps, ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
-export { Modal, ModalContent, ModalTrigger } from './Modal';
+export { Modal, ModalClose, ModalContent, ModalTrigger } from './Modal';

frontend/src/components/v2/Select/Select.tsx

@@ -22,21 +22,23 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
-            `inline-flex items-center justify-between data-[placeholder]:text-gray-500
+            `inline-flex items-center justify-between rounded-md
-            px-3 py-2 font-inter text-sm text-bunker-200 font-normal rounded-md bg-mineshaft-800 outline-none`,
+            bg-mineshaft-800 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
             className
           )}
         >
           <SelectPrimitive.Value placeholder={placeholder} />
-          {!props.disabled && <SelectPrimitive.Icon className="ml-3">
+          {!props.disabled && (
-            <FontAwesomeIcon icon={faChevronDown} size="sm" />
+            <SelectPrimitive.Icon className="ml-3">
-          </SelectPrimitive.Icon>}
+              <FontAwesomeIcon icon={faChevronDown} size="sm" />
+            </SelectPrimitive.Icon>
+          )}
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             // position="popper"
             sideOffset={4}
-            className="overflow-hidden text-bunker-100 rounded-md shadow-md font-inter bg-mineshaft-800"
+            className="overflow-hidden rounded-md bg-mineshaft-800 font-inter text-bunker-100 shadow-md"
             style={{ width: 'var(--radix-select-trigger-width) + 6' }}
           >
             <SelectPrimitive.ScrollUpButton>
@@ -75,11 +77,11 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `text-sm rounded-sm transition-all hover:bg-mineshaft-500
+          `relative flex cursor-pointer
-          flex items-center pl-10 pr-4 py-2 cursor-pointer rounded-md
+          select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
-          select-none outline-none relative`,
+          outline-none transition-all hover:bg-mineshaft-500`,
           isSelected && 'bg-primary',
-          isDisabled && 'text-gray-600 hover:bg-transparent cursor-not-allowed hover:text-gray-600',
+          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-gray-600',
           className
         )}
         ref={forwardedRef}

frontend/src/components/v2/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export type TableContainerProps = {
@@ -14,7 +14,7 @@ export const TableContainer = ({
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
-      'overflow-x-auto font-inter shadow-md relative border border-solid border-mineshaft-700',
+      'relative w-full overflow-x-auto border border-solid border-mineshaft-700 font-inter shadow-md',
       isRounded && 'rounded-md',
       className
     )}
@@ -32,7 +32,7 @@ export type TableProps = {
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
     className={twMerge(
-      'bg-bunker-800 p-2 roun  text-gray-300 w-full text-sm text-left rounded-md',
+      'w-full rounded rounded-md  bg-bunker-800 p-2 text-left text-sm text-gray-300',
       className
     )}
   >
@@ -47,7 +47,7 @@ export type THeadProps = {
 };
 
 export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge('text-xs bg-bunker text-bunker-300 uppercase', className)}>
+  <thead className={twMerge('bg-bunker text-xs uppercase text-bunker-300', className)}>
     {children}
   </thead>
 );
@@ -56,15 +56,17 @@ export const THead = ({ children, className }: THeadProps): JSX.Element => (
 export type TrProps = {
   children: ReactNode;
   className?: string;
-};
+} & HTMLAttributes<HTMLTableRowElement>;
 
-export const Tr = ({ children, className }: TrProps): JSX.Element => (
+export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
-  <tr className={twMerge('border border-solid border-mineshaft-700', className)}>{children}</tr>
+  <tr className={twMerge('border border-solid border-mineshaft-700', className)} {...props}>
+    {children}
+  </tr>
 );
 
 // table head columns
 export type ThProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
 };
 
@@ -84,10 +86,12 @@ export const TBody = ({ children, className }: TBodyProps): JSX.Element => (
 
 // table body columns
 export type TdProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
-};
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
-export const Td = ({ children, className }: TdProps): JSX.Element => (
+export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
-  <td className={twMerge('text-left px-6 py-3', className)}>{children}</td>
+  <td className={twMerge('px-6 py-3 text-left', className)} {...props}>
+    {children}
+  </td>
 );

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+
+import { Button } from '../Button';
+import { Modal, ModalClose, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  text: string;
+};
+
+export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => (
+  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <ModalContent
+      title="Unleash Infisical's Full Power"
+      footerContent={[
+        <Link
+          href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
+          key="upgrade-plan"
+        >
+          <Button className="mr-4">Upgrade Plan</Button>
+        </Link>,
+        <ModalClose asChild key="upgrade-plan-cancel">
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      ]}
+    >
+      <p className="mb-4 text-bunker-300">{text}</p>
+      <p className="font-medium text-bunker-300">
+        Upgrade and get access to this, as well as to other powerful enhancements.
+      </p>
+    </ModalContent>
+  </Modal>
+);

frontend/src/components/v2/UpgradePlanModal/index.tsx

@@ -0,0 +1 @@
+export { UpgradePlanModal } from './UpgradePlanModal';

frontend/src/components/v2/index.tsx

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './DeleteActionModal';
 export * from './Dropdown';
 export * from './FormControl';
 export * from './IconButton';
@@ -12,3 +13,4 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Table';
 export * from './TextArea';
+export * from './UpgradePlanModal';