From 5e3004c175368c9a6aa9c259f96aa9b429a23bf7 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Thu, 29 Feb 2024 17:53:49 +0100
Subject: [PATCH] #850 Fix searchbox styling issues

---
 .../components/forms/InputResourceArray.tsx   | 27 +++++++++++--------
 .../components/forms/SearchBox/SearchBox.tsx  | 24 +++++++++--------
 .../forms/SearchBox/SearchBoxButton.tsx       |  7 +----
 .../forms/SearchBox/SearchBoxWindow.tsx       |  1 +
 4 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/browser/data-browser/src/components/forms/InputResourceArray.tsx b/browser/data-browser/src/components/forms/InputResourceArray.tsx
index c97785840..cfcea521e 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 = ({
       <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
index c5264334e..c3c90d3c8 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 30109eab4..40526b7d2 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 d944c150d..965ba2574 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;
   }
 `;