Standardise shadows across cell types

packages/frontend-core/src/components/sheet/cells/AttachmentCell.svelte

@@ -123,30 +123,24 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    height: calc(var(--row-height) - 12px);
-    padding: 0 8px;
-    color: var(--spectrum-global-color-gray-800);
+    padding: 0 10px;
+    color: var(--spectrum-global-color-gray-700);
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     text-transform: uppercase;
     font-weight: 600;
-    font-size: 10px;
+    font-size: 12px;
     user-select: none;
   }
-  img {
-    height: auto;
-    /*height: calc(var(--row-height) - 12px);*/
-    /*max-width: 64px;*/
-  }
   .dropzone {
     position: absolute;
     top: 100%;
     left: 0;
     width: 320px;
-    background: var(--cell-background);
+    background: var(--background);
     border: var(--cell-border);
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.15);
     padding: var(--cell-padding);
+    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
   }
   .dropzone.invertX {
     left: auto;

packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte

@@ -77,7 +77,13 @@
   })
 </script>
 
-<div class="container" class:multi class:editable class:open>
+<div
+  class="container"
+  class:multi
+  class:editable
+  class:open
+  on:click|self={editable ? open : null}
+>
   <div class="values" on:click={editable ? open : null}>
     {#each values as val}
       {@const color = getOptionColor(val)}
@@ -112,6 +118,7 @@
           class="option"
           on:click={() => toggleOption(option)}
           class:focused={focusedOptionIdx === idx}
+          on:mouseenter={() => (focusedOptionIdx = idx)}
         >
           <div class="badge text" style="--color: {color}">
             {option}
@@ -193,18 +200,18 @@
     );
   }
   .options {
-    min-width: 100%;
+    min-width: calc(100% + 2px);
     position: absolute;
     top: 100%;
-    left: 0;
+    left: -1px;
     display: flex;
     flex-direction: column;
-    box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.1);
     justify-content: flex-start;
     align-items: stretch;
     max-height: var(--max-cell-render-height);
     overflow-y: auto;
     border: var(--cell-border);
+    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
   }
   .options.invertX {
     left: auto;
@@ -222,7 +229,7 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--cell-spacing);
-    background-color: var(--cell-background-hover);
+    background-color: var(--background);
   }
   .option:hover,
   .option.focused {

packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getColor } from "../lib/utils"
   import { onMount, getContext } from "svelte"
-  import { Icon, Input } from "@budibase/bbui"
+  import { Icon, Input, ProgressCircle } from "@budibase/bbui"
   import { debounce } from "../../../utils/utils"
 
   export let value
@@ -24,6 +24,7 @@
   let primaryDisplay
   let candidateIndex
   let lastSearchId
+  let searching = false
 
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
   $: editable = focused && !readonly
@@ -74,6 +75,7 @@
     // Search for results, using IDs to track invocations and ensure we're
     // handling the latest update
     lastSearchId = Math.random()
+    searching = true
     const thisSearchId = lastSearchId
     const results = await API.searchTable({
       paginate: false,
@@ -85,6 +87,7 @@
         },
       },
     })
+    searching = false
 
     // In case searching takes longer than our debounced update, abandon these
     // results
@@ -249,13 +252,11 @@
           placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
         />
       </div>
-      {#if searchString && searchResults}
-        <div class="info">
-          {searchResults.length} row{searchResults.length === 1 ? "" : "s"} found
+      {#if searching}
+        <div class="searching">
+          <ProgressCircle size="S" />
         </div>
-      {/if}
-
-      {#if searchResults?.length}
+      {:else if searchResults?.length}
         <div class="results">
           {#each searchResults as row, idx}
             <div
@@ -379,13 +380,12 @@
       var(--max-cell-render-height) + var(--row-height) -
         var(--max-relationship-height)
     );
-    background: var(--cell-background);
+    background: var(--background);
     border: var(--cell-border);
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    background-color: var(--cell-background-hover);
   }
   .dropdown.invertY {
     transform: translateY(-100%);
@@ -396,6 +396,11 @@
     right: 0;
   }
 
+  .searching {
+    padding: var(--cell-padding);
+    display: flex;
+    justify-content: center;
+  }
   .results {
     overflow-y: auto;
     overflow-x: hidden;
@@ -436,16 +441,4 @@
   .search :global(.spectrum-Form-item) {
     flex: 1 1 auto;
   }
-
-  .info {
-    color: var(--spectrum-global-color-gray-600);
-    font-size: 12px;
-    padding: 4px var(--cell-padding);
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
 </style>