atomicdata-dev#850 Fix searchbox styling issues

ngi-nix · Feb 29, 2024 · 5e3004c · 5e3004c
1 parent 73fd0fc
commit 5e3004c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 28 deletions.
diff --git 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 = ({
       <ResourceSelector
         {...props}
         prefix={
-          <DragHandle
-            {...listeners}
-            {...attributes}
-            type='button'
-            title='Move item'
-          >
-            <FaGripVertical />
-          </DragHandle>
+          !props.disabled ? (
+            <DragHandle
+              {...listeners}
+              {...attributes}
+              disabled={props.disabled}
+              type='button'
+              title='Move item'
+            >
+              <FaGripVertical />
+            </DragHandle>
+          ) : null
         }
       />
     </DragWrapper>
@@ -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
@@ -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
@@ -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
@@ -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;
   }
 `;