Merge branch 'main' into feature/google-sign

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

@@ -36,11 +36,11 @@ const buttonVariants = cva(
         selected: '',
         outline_bg: '',
         // a constant color not in use on hover or click goes colorSchema color
-        star: 'text-bunker-200 bg-mineshaft-500'
+        star: 'text-bunker-200 bg-mineshaft-700 border-mineshaft-600'
       },
       isDisabled: {
-        true: 'bg-mineshaft text-white opacity-50 cursor-not-allowed',
-        false: ''
+        true: 'bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed',
+        false: 'border border-primary-400'
       },
       isFullWidth: {
         true: 'w-full',
@@ -61,7 +61,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'primary',
         variant: 'star',
-        className: 'hover:bg-primary hover:text-black'
+        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary hover:text-black hover:border-primary-400 duration-100'
       },
       {
         colorSchema: 'primary',

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

@@ -30,7 +30,8 @@ const iconButtonVariants = cva(
         solid: '',
         outline: ['bg-transparent', 'border-2', 'border-solid'],
         plain: '',
-        star: 'text-bunker-200 bg-mineshaft-500'
+        star: 'text-bunker-200 bg-mineshaft-500',
+        outline_bg: ''
       },
       isDisabled: {
         true: 'bg-opacity-70 cursor-not-allowed',
@@ -53,6 +54,11 @@ const iconButtonVariants = cva(
         variant: 'star',
         className: 'hover:bg-primary hover:text-black'
       },
+      {
+        colorSchema: 'primary',
+        variant: 'outline_bg',
+        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100'
+      },
       {
         colorSchema: 'danger',
         variant: 'star',

frontend/src/components/v2/Menu/Menu.stories.tsx

@@ -1,7 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { faKey, faUser } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Menu, MenuGroup, MenuItem } from './Menu';
@@ -74,14 +71,14 @@ export const WithIcons: Story = {
   render: (args) => (
     <Menu {...args}>
       <MenuGroup title="Group 1">
-        <MenuItem isDisabled icon={<FontAwesomeIcon icon={faKey} />}>
+        <MenuItem isDisabled icon="system-outline-90-lock-closed">
           Secrets
         </MenuItem>
-        <MenuItem icon={<FontAwesomeIcon icon={faUser} />}>Members</MenuItem>
+        <MenuItem icon="system-outline-96-groups">Members</MenuItem>
       </MenuGroup>
       <MenuGroup title="Group 2">
-        <MenuItem icon={<FontAwesomeIcon icon={faKey} />}>Secrets</MenuItem>
-        <MenuItem icon={<FontAwesomeIcon icon={faKey} />}>Members</MenuItem>
+        <MenuItem icon="system-outline-90-lock-closed">Secrets</MenuItem>
+        <MenuItem icon="system-outline-96-groups">Members</MenuItem>
       </MenuGroup>
     </Menu>
   ),
@@ -93,12 +90,12 @@ export const WithDescription: Story = {
     <Menu {...args}>
       <MenuItem
         isDisabled
-        icon={<FontAwesomeIcon icon={faKey} />}
+        icon="system-outline-90-lock-closed"
         description="Some random description"
       >
         Secrets
       </MenuItem>
-      <MenuItem icon={<FontAwesomeIcon icon={faUser} />} description="Some random description">
+      <MenuItem icon="system-outline-96-groups" description="Some random description">
         Members
       </MenuItem>
     </Menu>

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,4 +1,9 @@
-import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from 'react';
+// @ts-nocheck
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable global-require */
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from 'react';
+import { motion } from 'framer-motion'
+import Lottie from 'lottie-react'
 import { twMerge } from 'tailwind-merge';
 
 export type MenuProps = {
@@ -14,7 +19,7 @@ export type MenuItemProps<T extends ElementType> = {
   // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
   as?: T;
   children: ReactNode;
-  icon?: ReactNode;
+  icon?: string;
   description?: ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
@@ -33,23 +38,43 @@ export const MenuItem = <T extends ElementType = 'button'>({
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
   inputRef,
   ...props
-}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
-  <li
-    className={twMerge(
-      'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
-      isSelected && 'bg-mineshaft-500',
-      isDisabled && 'hover:bg-transparent cursor-not-allowed',
-      className
-    )}
-  >
-    <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
-      <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
-      {icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
-      <span className="flex-grow text-left">{children}</span>
-    </Item>
-    {description && <span className="mt-2 text-xs">{description}</span>}
-  </li>
-);
+}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
+  const iconRef = useRef()
+
+  return( 
+    <a 
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()} 
+    >
+      <li
+        className={twMerge(
+          'group px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50',
+          isSelected && 'bg-mineshaft-600 hover:bg-mineshaft-600',
+          isDisabled && 'hover:bg-transparent cursor-not-allowed',
+          className
+        )}
+      >
+        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
+          <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+            <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
+            {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
+            <Lottie
+              lottieRef={iconRef}
+              style={{ width: 24, height: 24 }}
+              // eslint-disable-next-line import/no-dynamic-require
+              animationData={require(`../../../../public/lotties/${icon}.json`)}
+              loop={false}
+              autoplay={false}
+              className="my-auto ml-3 mr-3"
+            />
+            <span className="flex-grow text-left">{children}</span>
+          </Item>
+          {description && <span className="mt-2 text-xs">{description}</span>}
+        </motion.span>
+      </li>
+    </a>
+  )
+};
 
 MenuItem.displayName = 'MenuItem';
 

frontend/src/components/v2/Popoverv2/Popoverv2.tsx

@@ -13,7 +13,7 @@ export const Popover = PopoverPrimitive.Root;
 export type PopoverContentProps = {
   children?: ReactNode;
   hideCloseBtn?: boolean;
-} & PopoverPrimitive.PopperContentProps;
+} & PopoverPrimitive.PopoverContentProps;
 
 export const PopoverContent = ({
   children,