style(design-system): update style Popover and PressableDiv

aymericzip · Jul 8, 2024 · be7f461 · be7f461
1 parent 0cc6240
commit be7f461
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 10 deletions.
diff --git a/packages/@intlayer/design-system/src/components/Popover/index.tsx b/packages/@intlayer/design-system/src/components/Popover/index.tsx
@@ -7,8 +7,7 @@ type PopoverProps = {
 };
 
 const StyledTrigger = tw.div`relative`;
-const StyledContent = tw.div`opacity-0 group-hover:opacity-100 absolute right-5 bottom-0 translate-y-7 text-opacity-75 text-xs bg-current rounded-md p-1 transition-all duration-200 delay-700 ease-in hover:delay-0 ease-in-out`;
-const StyledString = tw.span`mix-blend-difference select-none text-white max-w-[60%]`;
+const StyledContent = tw.div`z-50 opacity-0 group-hover:opacity-100 absolute left-5 bottom-0 translate-y-[150%] text-opacity-75 text-xs rounded-md p-1 transition-all duration-200 delay-200 ease-in hover:delay-0 ease-in-out ring-current ring-2 bg-card dark:bg-card-dark`;
 
 export const Popover: FC<PopoverProps> = ({ children, content }) => (
   <StyledTrigger
@@ -18,12 +17,6 @@ export const Popover: FC<PopoverProps> = ({ children, content }) => (
     aria-label="Display the popup by hovering this element"
   >
     {children}
-    <StyledContent aria-hidden={true}>
-      {typeof content === 'string' ? (
-        <StyledString>{content}</StyledString>
-      ) : (
-        content
-      )}
-    </StyledContent>
+    <StyledContent aria-hidden={true}>{content}</StyledContent>
   </StyledTrigger>
 );
diff --git a/packages/@intlayer/design-system/src/components/PressableDiv/PressableDiv.tsx b/packages/@intlayer/design-system/src/components/PressableDiv/PressableDiv.tsx
@@ -23,7 +23,7 @@ type PressableDivProps = {
 
 const StyledContentSelector = styled.div<{ $isSelecting?: boolean }>(
   ({ $isSelecting }) => [
-    tw`inline cursor-pointer outline outline-offset-4 outline-2 outline-transparent rounded-md transition-all duration-200 delay-100`,
+    tw`inline cursor-pointer select-none outline outline-offset-4 outline-2 outline-transparent rounded-md transition-all duration-200 delay-100`,
     $isSelecting ? tw`outline-inherit` : tw`hover:outline-inherit`,
   ]
 );