diff --git a/browser/data-browser/src/components/forms/InputResourceArray.tsx b/browser/data-browser/src/components/forms/InputResourceArray.tsx index c9778584..cfcea521 100644 --- a/browser/data-browser/src/components/forms/InputResourceArray.tsx +++ b/browser/data-browser/src/components/forms/InputResourceArray.tsx @@ -17,6 +17,7 @@ import { import { transition } from '../../helpers/transition'; import { FaGripVertical, FaPlus, FaTrash } from 'react-icons/fa6'; import { createPortal } from 'react-dom'; +import { transparentize } from 'polished'; interface InputResourceArrayProps extends InputProps { isA?: string; @@ -205,6 +206,7 @@ const DraggableResourceSelector = ({ }: DraggableResourceSelectorProps) => { const { attributes, listeners, setNodeRef, active } = useDraggable({ id: subject, + disabled: props.disabled, }); if (subject === undefined) { @@ -216,14 +218,17 @@ const DraggableResourceSelector = ({ - - + !props.disabled ? ( + + + + ) : null } /> @@ -246,8 +251,8 @@ const DummySelector = (props: ResourceSelectorProps) => { }; const StyledDragOverlay = styled(DragOverlay)` - opacity: 0.8; - cursor: grabbing; + --search-box-bg: ${p => transparentize(0.5, p.theme.colors.bg)}; + backdrop-filter: blur(3px); `; const RelativeContainer = styled.div` @@ -258,7 +263,6 @@ const DragHandle = styled.button` display: flex; align-items: center; cursor: grab; - border-radius: ${p => p.theme.radius}; appearance: none; background: transparent; border: none; @@ -273,6 +277,7 @@ const DragHandle = styled.button` color: ${p => p.theme.colors.textLight2}; } `; + const DragWrapper = styled(Row)<{ active: boolean }>` position: relative; opacity: ${p => (p.active ? 0.4 : 1)}; diff --git a/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx b/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx index c5264334..c3c90d3c 100644 --- a/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx +++ b/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx @@ -227,7 +227,7 @@ const TriggerButton = styled.button<{ $empty: boolean }>` align-items: center; padding: 0.5rem; border-radius: ${props => props.theme.radius}; - background-color: ${props => props.theme.colors.bg}; + background: transparent; border: none; text-align: start; height: 2rem; @@ -236,10 +236,6 @@ const TriggerButton = styled.button<{ $empty: boolean }>` overflow: hidden; cursor: text; color: ${p => (p.$empty ? p.theme.colors.textLight : p.theme.colors.text)}; - - &:disabled { - background-color: ${props => props.theme.colors.bg1}; - } `; const TriggerButtonWrapper = styled.div<{ @@ -250,15 +246,21 @@ const TriggerButtonWrapper = styled.div<{ p.invalid ? p.theme.colors.alert : p.theme.colors.main}; display: flex; position: relative; - padding: 1px; + overflow: hidden; border: 1px solid ${props => props.theme.colors.bg2}; border-radius: ${props => props.theme.radius}; - background-color: ${props => props.theme.colors.bg}; + background-color: var(--search-box-bg, ${props => props.theme.colors.bg}); + &:has(:disabled) { + background-color: ${props => props.theme.colors.bg1}; + } + + &:has(${TriggerButton}:hover(), ${TriggerButton}:focus-visible) { + } &:hover, - &:focus-within { - border-color: ${p => - p.disabled ? 'none' : 'var(--search-box-hightlight)'}; - box-shadow: 0 0 0 1px inset var(--search-box-hightlight); + &:focus-visible { + border-color: transparent; + box-shadow: 0 0 0 2px var(--search-box-hightlight); + z-index: 1000; } `; diff --git a/browser/data-browser/src/components/forms/SearchBox/SearchBoxButton.tsx b/browser/data-browser/src/components/forms/SearchBox/SearchBoxButton.tsx index 30109eab..40526b7d 100644 --- a/browser/data-browser/src/components/forms/SearchBox/SearchBoxButton.tsx +++ b/browser/data-browser/src/components/forms/SearchBox/SearchBoxButton.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const SearchBoxButton = styled.button<{ ephimeral?: boolean }>` - background-color: ${p => p.theme.colors.bg}; + background-color: transparent; border: none; border-left: ${p => p.ephimeral ? 'none' : '1px solid ' + p.theme.colors.bg2}; @@ -18,11 +18,6 @@ export const SearchBoxButton = styled.button<{ ephimeral?: boolean }>` border-color: var(--search-box-hightlight); } - &:last-of-type { - border-top-right-radius: ${p => p.theme.radius}; - border-bottom-right-radius: ${p => p.theme.radius}; - } - visibility: ${p => (p.ephimeral ? 'hidden' : 'visible')}; div:hover > & { visibility: visible; diff --git a/browser/data-browser/src/components/forms/SearchBox/SearchBoxWindow.tsx b/browser/data-browser/src/components/forms/SearchBox/SearchBoxWindow.tsx index d944c150..965ba257 100644 --- a/browser/data-browser/src/components/forms/SearchBox/SearchBoxWindow.tsx +++ b/browser/data-browser/src/components/forms/SearchBox/SearchBoxWindow.tsx @@ -237,6 +237,7 @@ const SearchInputWrapper = styled.div` } &:focus-within { border-color: ${p => p.theme.colors.main}; + box-shadow: 0 0 0 1px ${p => p.theme.colors.main}; outline: none; } `;