@furystack/shades-common-components 10.0.28 → 10.0.29

package/src/components/suggest/suggestion-list.tsx

@@ -18,11 +18,13 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
         onChange: (idx) => {
           ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
             if (i === idx) {
-              s.style.background = theme.background.paper
-              s.style.fontWeight = 'bolder'
+              s.style.background = 'rgba(128,128,128,0.2)'
+              s.style.fontWeight = '500'
+              s.style.borderLeft = `3px solid ${theme.text.primary}`
             } else {
-              s.style.background = theme.background.default
-              s.style.fontWeight = 'normal'
+              s.style.background = 'transparent'
+              s.style.fontWeight = '400'
+              s.style.borderLeft = '3px solid transparent'
             }
           })
         },
@@ -64,15 +66,17 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
           style={{
             borderTop: 'none',
             position: 'absolute',
-            borderRadius: '0px 0px 5px 5px',
+            borderRadius: '0px 0px 12px 12px',
             marginLeft: '14px',
+            marginTop: '4px',
             overflow: 'hidden',
             zIndex: '1',
             left: 'auto',
-            backgroundColor: theme.background.paper, //'rgba(8,8,8,0.85)',
+            backgroundColor: theme.background.paper,
             color: theme.text.secondary,
-            boxShadow: '3px 3px 5px rgba(0,0,0,0.3)',
-            backdropFilter: 'blur(15px)',
+            boxShadow: '0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid rgba(128,128,128,0.2)',
             width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
           }}
         >
@@ -84,11 +88,25 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
                   manager.selectSuggestion(i)
                 }
               }}
+              onmouseenter={(ev) => {
+                if (i !== selectedIndex) {
+                  ;(ev.target as HTMLElement).style.background = 'rgba(128,128,128,0.1)'
+                }
+              }}
+              onmouseleave={(ev) => {
+                if (i !== selectedIndex) {
+                  ;(ev.target as HTMLElement).style.background = 'transparent'
+                }
+              }}
               style={{
-                padding: '1em',
-                cursor: 'default',
-                background: i === selectedIndex ? theme.background.paper : theme.background.default,
-                fontWeight: i === selectedIndex ? 'bolder' : 'normal',
+                padding: '0.875em 1.25em',
+                cursor: 'pointer',
+                background: i === selectedIndex ? 'rgba(128,128,128,0.2)' : 'transparent',
+                fontWeight: i === selectedIndex ? '500' : '400',
+                borderLeft: i === selectedIndex ? `3px solid ${theme.text.primary}` : '3px solid transparent',
+                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+                fontSize: '0.95em',
+                letterSpacing: '0.01em',
               }}
             >
               {s.suggestion.element}

package/src/services/theme-provider-service.ts

@@ -84,7 +84,7 @@ export class ThemeProviderService extends EventHub<{ themeChanged: DeepPartial<T
   }
 
   /**
-   *
+   * Parses a color string and returns RGB values
    * @param color The color string
    * @returns The parsed R,G,B, A values
    */