feat: 🎸 onboarding traits properties section

package.json

@@ -14,7 +14,7 @@
     "@radix-ui/react-checkbox": "^0.1.4",
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
-    "@radix-ui/react-hover-card": "^0.1.3",
+    "@radix-ui/react-hover-card": "^0.1.5",
     "@radix-ui/react-icons": "^1.0.3",
     "@radix-ui/react-popover": "^0.1.6",
     "@radix-ui/react-radio-group": "^1.0.0",

src/components/collections/explore-collections.tsx

@@ -33,14 +33,10 @@ const ExploreCollections = () => {
         <Flex>
           <div>
             <Heading>
-              {t(
-                'translation:collections.exploreCollections.exploreCollectionTitle',
-              )}
+              {t('translation:collections.exploreCollections.exploreCollectionTitle')}
             </Heading>
             <SubText>
-              {t(
-                'translation:collections.exploreCollections.description',
-              )}
+              {t('translation:collections.exploreCollections.description')}
             </SubText>
           </div>
           <CollectionFilterDropdown />

src/components/core/input-field-set/new-category-field.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  TabContentContainer,
+  TabContentWrapper,
+  ActionIconsContainer,
+  IconWrapper,
+  StyledIcon,
+} from '../../tabs/styles';
+import { NewCategoryInput } from './styles';
+import { Tooltip } from '../tooltip';
+
+const NewCategoryField = () => {
+  const { t } = useTranslation();
+
+  return (
+    <TabContentContainer>
+      <TabContentWrapper padding="rightSm" width="md">
+        <ActionIconsContainer>
+          <Tooltip
+            type="traits"
+            children={
+              <IconWrapper delete={true}>
+                <StyledIcon icon="delete" />
+              </IconWrapper>
+            }
+            text={t('translation:tooltip.delete')}
+            width={200}
+          />
+
+          <Tooltip
+            type="traits"
+            children={
+              <IconWrapper code={true}>
+                <StyledIcon icon="code" />
+              </IconWrapper>
+            }
+            text={t('translation:tooltip.code')}
+            width={176}
+          />
+          <Tooltip
+            type="traits"
+            children={
+              <IconWrapper>
+                <StyledIcon icon="disable" />
+              </IconWrapper>
+            }
+            text={t('translation:tooltip.disable')}
+            width={220}
+          />
+        </ActionIconsContainer>
+      </TabContentWrapper>
+      <TabContentWrapper width="lg" border="sides">
+        <NewCategoryInput type="text" />
+      </TabContentWrapper>
+      <TabContentWrapper width="lg">
+        <NewCategoryInput type="text" />
+      </TabContentWrapper>
+    </TabContentContainer>
+  );
+};
+
+export default NewCategoryField;

src/components/core/input-field-set/styles.ts

@@ -140,3 +140,11 @@ export const AmountTypeIcon = styled('img', {
   height: '14px',
   marginRight: '5px',
 });
+
+export const NewCategoryInput = styled('input', {
+  border: '0',
+
+  '&:focus': {
+    outline: 'unset !important',
+  },
+});

src/components/core/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover';

src/components/core/popover/popover.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import {
+  StyledContent,
+  StyledCloseIconWrapper,
+  StyledCloseIcon,
+  Header,
+  Title,
+  PopoverContent,
+  ButtonContainer,
+  Flex,
+  ButtonWrapper,
+} from './style';
+import { removePortalZIndexGlobals } from '../../../utils/styles';
+import { ActionButton } from '../buttons';
+import { useTranslation } from 'react-i18next';
+
+export type PopoverProps = {
+  trigger?: React.ReactNode;
+  text?: React.ReactNode;
+  setShowOverlay: (value: boolean) => void;
+};
+
+const Popover = ({ trigger, text, setShowOverlay }: PopoverProps) => {
+  const { t } = useTranslation();
+  const [popoverOpened, setPopoverOpened] = useState(false);
+
+  removePortalZIndexGlobals();
+
+  const handlePopoverOpen = (status: boolean) => {
+    setShowOverlay(status);
+    setPopoverOpened(status);
+  };
+
+  return (
+    <PopoverPrimitive.Root
+      open={popoverOpened}
+      onOpenChange={handlePopoverOpen}
+    >
+      <PopoverPrimitive.Trigger
+        asChild
+        onClick={() => setShowOverlay(true)}
+      >
+        <div>{trigger}</div>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Anchor />
+      <StyledContent portalled>
+        <Header>
+          <Title>{t('translation:traits.popover.title')}</Title>
+          <StyledCloseIconWrapper asChild>
+            <StyledCloseIcon
+              icon="close"
+              colorType="developerMode"
+              size="md"
+            />
+          </StyledCloseIconWrapper>
+        </Header>
+        <PopoverContent>{text}</PopoverContent>
+        <ButtonContainer>
+          <Flex>
+            <ButtonWrapper margin="right">
+              <ActionButton
+                type="outline"
+                onClick={() => handlePopoverOpen(false)}
+              >
+                {t('translation:traits.popover.buttons.cancel')}
+              </ActionButton>
+            </ButtonWrapper>
+            <ButtonWrapper>
+              <ActionButton
+                type="primary"
+                onClick={() => handlePopoverOpen(false)}
+              >
+                {t('translation:traits.popover.buttons.confirm')}
+              </ActionButton>
+            </ButtonWrapper>
+          </Flex>
+        </ButtonContainer>
+      </StyledContent>
+    </PopoverPrimitive.Root>
+  );
+};
+
+export default Popover;

src/components/core/popover/style.ts

@@ -0,0 +1,105 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { styled, keyframes } from '../../../stitches.config';
+import { Icon } from '../../icons';
+
+const slideUpAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideRightAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateX(-2px)' },
+  '100%': { opacity: 1, transform: 'translateX(0)' },
+});
+
+const slideDownAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(-2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideLeftAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateX(2px)' },
+  '100%': { opacity: 1, transform: 'translateX(0)' },
+});
+
+export const StyledContent = styled(PopoverPrimitive.Content, {
+  borderRadius: '14px',
+  width: 290,
+  backgroundColor: '$defaultBackgroundColour',
+  color: '$defaultTxtColour',
+  boxShadow:
+    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    willChange: 'transform, opacity',
+    '&[data-state="open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+    position: 'absolute',
+    right: '-500px',
+    top: '-100px',
+  },
+});
+
+export const StyledCloseIconWrapper = styled(PopoverPrimitive.Close, {
+  background: 'black',
+  cursor: 'pointer',
+});
+
+export const StyledCloseIcon = styled(Icon, {
+  justifyContent: 'flex-end',
+});
+
+export const Header = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '20px 20px 10px',
+  boxShadow: '0px 4px 4px rgba(96, 96, 96, 0.25)',
+});
+
+export const Title = styled('p', {
+  margin: '0',
+  fontStyle: 'normal',
+  fontWeight: '600',
+  fontSize: '16px',
+  lineHeight: '24px',
+  display: 'flex',
+  alignItems: 'center',
+  color: '#ffffff',
+});
+
+export const PopoverContent = styled('div', {
+  padding: '0px 20px',
+});
+
+export const ButtonContainer = styled('div', {
+  background: '$darkBlueMagenta',
+  height: '60px',
+  display: 'flex',
+  justifyContent: 'end',
+  alignItems: 'center',
+  padding: '0px 10px',
+  borderBottomRightRadius: '14px',
+  borderBottomLeftRadius: '14px',
+});
+
+export const Flex = styled('div', {
+  display: 'flex',
+});
+
+export const ButtonWrapper = styled('div', {
+  fontSize: '14px',
+
+  variants: {
+    margin: {
+      right: {
+        marginRight: '10px',
+      },
+    },
+  },
+});

src/components/core/tooltip/styles.ts

@@ -75,6 +75,20 @@ export const StyledContent = styled(TooltipPrimitive.Content, {
       },
     },
   },
+
+  variants: {
+    type: {
+      traits: {
+        fontSize: '14px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '10px 5px',
+        borderRadius: '14px',
+        height: '25px',
+      },
+    },
+  },
 });
 
 export const StyledArrow = styled(TooltipPrimitive.Arrow, {

src/components/core/tooltip/tooltip.tsx

@@ -10,9 +10,11 @@ import { useTheme } from '../../../hooks';
 export type TooltipProps = {
   children?: React.ReactNode;
   text?: string;
+  width?: number;
+  type?: string;
 };
 
-export const Tooltip = ({ children, text }: TooltipProps) => {
+export const Tooltip = ({ children, text, width, type }: TooltipProps) => {
   const [, themeObject] = useTheme();
 
   return (
@@ -21,7 +23,14 @@ export const Tooltip = ({ children, text }: TooltipProps) => {
         <div>{children}</div>
       </TooltipPrimitive.Trigger>
       {text && (
-        <StyledContent sideOffset={5} className={themeObject}>
+        <StyledContent
+          sideOffset={5}
+          className={themeObject}
+          style={{
+            width: `${width}px`,
+          }}
+          type={type === "traits" ? "traits" : undefined}
+        >
           {text}
           <StyledArrow />
         </StyledContent>

src/components/icons/styles.ts

@@ -37,6 +37,9 @@ export const IconWrapper = styled('span', {
       input: {
         color: '$textNeutralColor',
       },
+      developerMode: {
+        color: '$darkCyanBlue',
+      },
     },
   },
 });