From 9252f4debc8f22bdb2ed3f8e201ab64981c02f1d Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Mon, 27 Mar 2023 16:47:21 +0800
Subject: [PATCH] fix: styles in links

---
 .../src/components/Command/Command.utils.tsx  | 68 +++++++++++--------
 .../ui/src/components/Command/DocsSearch.tsx  |  4 +-
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/packages/ui/src/components/Command/Command.utils.tsx b/packages/ui/src/components/Command/Command.utils.tsx
index f9f601d1bf0..97c2a89408f 100644
--- a/packages/ui/src/components/Command/Command.utils.tsx
+++ b/packages/ui/src/components/Command/Command.utils.tsx
@@ -178,7 +178,7 @@ type CommandPrimitiveItemElement = React.ElementRef<typeof CommandPrimitive.Item
 type CommandPrimitiveItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 
 export interface CommandItemProps extends CommandPrimitiveItemProps {
-  type: 'link' | 'command'
+  type: 'link' | 'block-link' | 'command'
 }
 
 export const CommandItem = React.forwardRef<CommandPrimitiveItemElement, CommandItemProps>(
@@ -186,42 +186,54 @@ export const CommandItem = React.forwardRef<CommandPrimitiveItemElement, Command
     <CommandPrimitive.Item
       ref={ref}
       className={cn(
-        type === 'link'
+        'cursor-default',
+        'select-none',
+        'items-center',
+        'rounded-md',
+        'text-sm',
+        'group',
+        'py-3',
+        'text-scale-1100',
+        'relative',
+        'flex',
+        type === 'block-link'
           ? `
-        bg-scale-300/90
+      bg-[#fbfcfd]/90
+      dark:bg-[#232323]/90
+        border 
+      border-[#ddd]/90
+      dark:border-[#282828]/90
         backdrop-filter
         backdrop-blur-md
-        text-scale-1100 relative flex
-
-        cursor-default select-none
-        items-center rounded-md
-        py-3 px-5 text-sm
+        px-5 
         transition-all
         outline-none
-        aria-selected:bg-scale-300
-        aria-selected:border-[#ccc]
-        dark:aria-selected:bg-[#323232]
-        dark:aria-selected:border-[#323232]
+      aria-selected:border-[#ccc]
+      dark:aria-selected:border-[#323232]
+      aria-selected:bg-[#f1f3f5]/90
+      dark:aria-selected:bg-[#323232]
         aria-selected:shadow-sm
         aria-selected:scale-[100.3%]
-        group
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50`
+          : type === 'link'
+          ? `
+        px-2 
+        backdrop-filter
+        backdrop-blur-md
+        transition-all
+        outline-none
+        aria-selected:bg-[#f1f3f5]/90
+        dark:aria-selected:bg-[#323232]
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50`
           : `
-          py-3 px-2
-          text-scale-1100
-          relative flex
-          cursor-default select-none items-center
-          rounded-md text-sm outline-none
-
-          aria-selected:bg-scale-300
-
-          dark:aria-selected:bg-[#323232]/80
-
-          aria-selected:backdrop-filter
-          aria-selected:backdrop-blur-md
-          data-[disabled]:pointer-events-none
-          data-[disabled]:opacity-50
-          `,
+        px-2
+        aria-selected:bg-scale-300
+        dark:aria-selected:bg-[#323232]/80
+        aria-selected:backdrop-filter
+        aria-selected:backdrop-blur-md
+        data-[disabled]:pointer-events-none
+        data-[disabled]:opacity-50
+        `,
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/Command/DocsSearch.tsx b/packages/ui/src/components/Command/DocsSearch.tsx
index faa0e0f7630..967cec0b250 100644
--- a/packages/ui/src/components/Command/DocsSearch.tsx
+++ b/packages/ui/src/components/Command/DocsSearch.tsx
@@ -158,7 +158,7 @@ const DocsSearch = () => {
                 forceMount
                 key={`${page.meta.title}-item-index-${i}`}
                 value={`${page.meta.title}-item-index-${i}`}
-                type="link"
+                type="block-link"
                 onSelect={() => {
                   // TODO: replace with Next.js router/Link when cross-project link logic solved
                   window.location.assign(`/docs/${page.path}`)
@@ -196,7 +196,7 @@ const DocsSearch = () => {
                       }}
                       key={`${page.meta.title}__${section.heading}-item-index-${i}`}
                       value={`${page.meta.title}__${section.heading}-item-index-${i}`}
-                      type="link"
+                      type="block-link"
                     >
                       <div className="grow flex gap-3 items-center">
                         <IconContainer>