Merge branch 'main' into feat/ui-improvements

frontend/src/components/v2/Popover/Popover.tsx

@@ -0,0 +1,49 @@
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as Popover from '@radix-ui/react-popover';
+
+type Props = {
+  children: any; 
+  text: string; 
+  onChangeHandler: (value: string, position: number) => void; 
+  position: number;
+};
+
+export type PopoverProps = Props;
+
+export const PopoverObject = ({children, text, onChangeHandler, position}: 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'>
+      {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"
+        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>
+          <textarea
+            onChange={(e) => onChangeHandler(e.target.value, position)}
+            // 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'
+            spellCheck="false"
+            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"
+          aria-label="Close"
+        >
+          <FontAwesomeIcon icon={faXmark} />
+        </Popover.Close>
+        <Popover.Arrow className="fill-chicago-700" />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+);
+
+PopoverObject.displayName = 'Popover';

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

@@ -0,0 +1,2 @@
+export type { PopoverProps } from './Popover';
+export { PopoverObject } from './Popover';

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

@@ -1,4 +1,5 @@
 import { forwardRef, ReactNode } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -13,6 +14,7 @@ type Props = {
   dropdownContainerClassName?: string;
   isLoading?: boolean;
   position?: 'item-aligned' | 'popper';
+  icon?: IconProp;
 };
 
 export type SelectProps = SelectPrimitive.SelectProps & Props;
@@ -32,7 +34,9 @@ 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 && (
             <SelectPrimitive.Icon className="ml-3">
               <FontAwesomeIcon icon={faChevronDown} size="sm" />
@@ -43,7 +47,6 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPrimitive.Content
             className={twMerge(
               'relative top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
-
               dropdownContainerClassName
             )}
             position={position}
@@ -77,6 +80,7 @@ Select.displayName = 'Select';
 export type SelectItemProps = Omit<SelectPrimitive.SelectItemProps, 'disabled'> & {
   isDisabled?: boolean;
   isSelected?: boolean;
+  customIcon?: IconProp;
 };
 
 export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
@@ -89,13 +93,13 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
           select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 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-gray-600',
+          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
           className
         )}
         ref={forwardedRef}
       >
         <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
-          <FontAwesomeIcon icon={faCheck} />
+          <FontAwesomeIcon icon={props.customIcon ? props.customIcon : faCheck} />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
       </SelectPrimitive.Item>