feat(ui): components changes for new org settings page

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

@@ -3,14 +3,19 @@ import { twMerge } from 'tailwind-merge';
 
 export type CardTitleProps = {
   children: ReactNode;
-  subTitle?: string;
+  subTitle?: ReactNode;
   className?: string;
 };
 
 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', className)}>
+  <div
+    className={twMerge(
+      'px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600',
+      className
+    )}
+  >
     {children}
-    {subTitle && <p className="pt-0.5 text-sm font-normal text-gray-400">{subTitle}</p>}
+    {subTitle && <p className="pt-2 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
 );
 

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

@@ -5,7 +5,7 @@ import { useToggle } from '@app/hooks';
 import { Button } from '../Button';
 import { FormControl } from '../FormControl';
 import { Input } from '../Input';
-import { Modal, ModalContent } from '../Modal';
+import { Modal, ModalClose, ModalContent } from '../Modal';
 
 type Props = {
   isOpen?: boolean;
@@ -64,9 +64,11 @@ export const DeleteActionModal = ({
             >
               Delete
             </Button>
-            <Button variant="plain" colorSchema="secondary" onClick={onClose}>
-              Cancel
-            </Button>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+            </ModalClose>{' '}
           </div>
         }
         onClose={onClose}

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

@@ -84,19 +84,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ): JSX.Element => {
     return (
       <div className={inputParentContainerVariants({ isRounded, isError, isFullWidth, variant })}>
-        {leftIcon && <span className="absolute left-0 ml-2">{leftIcon}</span>}
+        {leftIcon && <span className="absolute left-0 ml-3">{leftIcon}</span>}
         <input
           {...props}
           required={isRequired}
           ref={ref}
           disabled={isDisabled}
           className={twMerge(
-            leftIcon ? 'pl-9' : 'pl-2.5',
-            rightIcon ? 'pr-9' : 'pr-2.5',
+            leftIcon ? 'pl-10' : 'pl-2.5',
+            rightIcon ? 'pr-10' : 'pr-2.5',
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
-        {rightIcon && <span className="absolute right-0 mr-2">{rightIcon}</span>}
+        {rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
       </div>
     );
   }

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

@@ -9,7 +9,7 @@ import { IconButton } from '../IconButton';
 
 export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
-  subTitle?: string;
+  subTitle?: ReactNode;
   footerContent?: ReactNode;
   onClose?: () => void;
 };

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

@@ -14,18 +14,28 @@ type Props = {
   dropdownContainerClassName?: string;
   isLoading?: boolean;
   position?: 'item-aligned' | 'popper';
+  isDisabled?: boolean;
   icon?: IconProp;
 };
 
-export type SelectProps = SelectPrimitive.SelectProps & Props;
+export type SelectProps = Omit<SelectPrimitive.SelectProps, 'disabled'> & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   (
-    { children, placeholder, className, isLoading, dropdownContainerClassName, position, ...props },
+    {
+      children,
+      placeholder,
+      className,
+      isLoading,
+      isDisabled,
+      dropdownContainerClassName,
+      position,
+      ...props
+    },
     ref
   ): JSX.Element => {
     return (
-      <SelectPrimitive.Root {...props}>
+      <SelectPrimitive.Root {...props} disabled={isDisabled}>
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
@@ -34,10 +44,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             className
           )}
         >
-          <SelectPrimitive.Value placeholder={placeholder}> 
+          <SelectPrimitive.Value placeholder={placeholder}>
             {props.icon ? <FontAwesomeIcon icon={props.icon} /> : placeholder}
           </SelectPrimitive.Value>
-          {!props.disabled && (
+          {!isDisabled && (
             <SelectPrimitive.Icon className="ml-3">
               <FontAwesomeIcon icon={faChevronDown} size="sm" />
             </SelectPrimitive.Icon>
@@ -46,7 +56,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              'relative top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
+              'relative top-1 z-[100] overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
               dropdownContainerClassName
             )}
             position={position}
@@ -89,11 +99,12 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `relative flex cursor-pointer
-          select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 text-sm
+          `relative mb-0.5 flex
+          cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
           outline-none transition-all hover:bg-mineshaft-500`,
           isSelected && 'bg-primary',
-          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
+          isDisabled &&
+            'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
           className
         )}
         ref={forwardedRef}

frontend/src/components/v2/Tag/Tag.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+} & VariantProps<typeof tagVariants>;
+
+const tagVariants = cva('inline-flex whitespace-nowrap text-sm rounded-md mx-1 text-bunker-200 ', {
+  variants: {
+    colorSchema: {
+      gray: 'bg-mineshaft-500',
+      red: 'bg-red/80 text-bunker-100'
+    },
+    size: {
+      sm: 'px-2 py-1'
+    }
+  }
+});
+
+export const Tag = ({ children, className, colorSchema = 'gray', size = 'sm' }: Props) => (
+  <div className={twMerge(tagVariants({ colorSchema, className, size }))}>{children}</div>
+);

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

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

frontend/src/components/v2/index.tsx

@@ -12,5 +12,6 @@ export * from './Select';
 export * from './Spinner';
 export * from './Switch';
 export * from './Table';
+export * from './Tag';
 export * from './TextArea';
 export * from './UpgradePlanModal';