Update link component (#425)

* Add glow to tooltip so its visible when on dark bg * Update link style * Exterminate sloppiness
marsfoundation · Nov 7, 2024 · 2ca400b · 2ca400b
1 parent 7bcc739
commit 2ca400b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/packages/app/src/ui/atoms/link/Link.tsx b/packages/app/src/ui/atoms/link/Link.tsx
@@ -7,12 +7,18 @@ export interface LinkProps extends RouterLinkProps {
   external?: boolean
 }
 
+const linkStyle = cn(
+  'cursor-pointer bg-gradient-spark-secondary active:brightness-[75%]',
+  'rounded-[1px] bg-clip-text text-transparent hover:brightness-[85%]',
+  'focus-visible:outline-none focus-visible:ring focus-visible:ring-reskin-primary-200 focus-visible:ring-offset-0',
+)
+
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(({ to, className, external, ...props }, ref) => {
   if (external) {
     return (
       <a
         href={to.toString()}
-        className={cn('cursor-pointer text-blue-600 hover:text-blue-800', className)}
+        className={cn(linkStyle, className)}
         target="_blank"
         rel="noreferrer"
         ref={ref}
@@ -24,7 +30,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(({ to, className, ex
     )
   }
 
-  return <RouterLink to={to} className={cn('text-blue-600 hover:text-blue-800', className)} ref={ref} {...props} />
+  return <RouterLink to={to} className={cn(linkStyle, className)} ref={ref} {...props} />
 })
 Link.displayName = 'Link'
 

diff --git a/packages/app/src/ui/atoms/new/tooltip/Tooltip.tsx b/packages/app/src/ui/atoms/new/tooltip/Tooltip.tsx
@@ -37,7 +37,10 @@ const Tooltip = RadixPrimitive.Root
 const TooltipTrigger = RadixPrimitive.Trigger
 
 const tooltipContentVariants = cva(
-  'typography-label-6 z-50 overflow-hidden rounded-sm bg-primary-inverse px-3 py-2 text-reskin-fg-primary-inverse shadow-lg ',
+  cn(
+    'typography-label-6 z-50 overflow-hidden rounded-sm bg-primary-inverse',
+    'border-primary/25 border-t px-3 py-2 text-reskin-fg-primary-inverse shadow-glow-lg',
+  ),
   {
     variants: {
       variant: {

diff --git a/packages/app/tailwind.config.ts b/packages/app/tailwind.config.ts
@@ -417,13 +417,20 @@ export default {
       boxShadow: {
         nav: '0px 20px 40px 0px var(--nav-shadow)',
         tooltip: '0px 4px 30px 7px var(--tooltip-shadow)',
-        xs: '0px 1px 4px rgba(16, 16, 20, 0.05)',
-        sm: '0px 1px 10px rgba(16, 16, 20, 0.1), 0px 1px 2px rgba(16, 16, 20, 0.06)',
-        md: '0px 4px 14px -2px rgba(16, 16, 20, 0.1), 0px 2px 8px -2px rgba(16, 16, 20, 0.04)',
-        lg: '0px 12px 16px -4px rgba(16, 16, 20, 0.08), 0px 4px 6px -2px rgba(16, 16, 20, 0.03)',
-        xl: '0px 20px 24px -4px rgba(16, 16, 20, 0.08), 0px 8px 8px -4px rgba(16, 16, 20, 0.03)',
-        '2xl': '0px 24px 48px -12px rgba(16, 16, 20, 0.18)',
-        '3xl': '0px 32px 64px -12px rgba(16, 16, 20, 0.24)',
+        xs: '0px 1px 4px rgb(16, 16, 20, 0.05)',
+        sm: '0px 1px 10px rgb(16, 16, 20, 0.1), 0px 1px 2px rgb(16, 16, 20, 0.06)',
+        md: '0px 4px 14px -2px rgb(16, 16, 20, 0.1), 0px 2px 8px -2px rgb(16, 16, 20, 0.04)',
+        lg: '0px 12px 16px -4px rgb(16, 16, 20, 0.08), 0px 4px 6px -2px rgb(16, 16, 20, 0.03)',
+        xl: '0px 20px 24px -4px rgb(16, 16, 20, 0.08), 0px 8px 8px -4px rgb(16, 16, 20, 0.03)',
+        '2xl': '0px 24px 48px -12px rgb(16, 16, 20, 0.18)',
+        '3xl': '0px 32px 64px -12px rgb(16, 16, 20, 0.24)',
+        'glow-xs': '0px 1px 4px rgb(255, 255, 255, 0.1)',
+        'glow-sm': '0px 1px 10px rgb(255, 255, 255, 0.2), 0px 1px 2px rgb(255, 255, 255, 0.12)',
+        'glow-md': '0px 4px 14px -2px rgb(255, 255, 255, 0.2), 0px 2px 8px -2px rgb(255, 255, 255, 0.8)',
+        'glow-lg': '0px 8px 14px -3px rgb(255, 255, 255, 0.16), 0px 0px 4px 0px rgb(255, 255, 255, 0.06)',
+        'glow-xl': '0px 20px 24px -4px rgb(255, 255, 255, 0.16), 0px 8px 8px -4px rgb(255, 255, 255, 0.06)',
+        'glow-2xl': '0px 24px 48px -12px rgb(255, 255, 255, 0.26)',
+        'glow-3xl': '0px 32px 64px -12px rgb(255, 255, 255, 0.44)',
       },
       borderRadius: {
         xxs: '4px',