Svelte: search results styling updates (#61162)

This makes a handful of small styling updates to the Svelte implementation of the search results page to bring it more in line with the designs and the react app. It is not comprehensive, but it takes care of the big things.

Author: camdencheek

client/web-sveltekit/src/lib/search/dynamicFilters/CountBadge.svelte

@@ -30,3 +30,10 @@
         {/if}
     </span>
 {/if}
+
+<style lang="scss">
+    span.count :global(span) {
+        background-color: var(--secondary-2);
+        color: var(--text-muted);
+    }
+</style>

client/web-sveltekit/src/lib/search/dynamicFilters/Section.svelte

@@ -154,7 +154,7 @@
         }
 
         &:hover {
-            background-color: var(--secondary-4);
+            background-color: var(--secondary-2);
         }
 
         &.selected {

client/web-sveltekit/src/lib/search/dynamicFilters/index.ts

@@ -1,11 +1,4 @@
-import {
-    mdiCodeTags,
-    mdiFileCodeOutline,
-    mdiPlusMinus,
-    mdiShapeOutline,
-    mdiSourceCommit,
-    mdiSourceRepository,
-} from '@mdi/js'
+import { mdiCodeBraces, mdiFileOutline, mdiFunction, mdiPlusMinus, mdiSourceCommit, mdiSourceFork } from '@mdi/js'
 
 import type { Filter } from '@sourcegraph/shared/src/search/stream'
 
@@ -90,10 +83,10 @@ export const staticTypeFilters: URLQueryFilter[] = [
 ]
 
 export const typeFilterIcons: Record<string, string> = {
-    Code: mdiCodeTags,
-    Repositories: mdiSourceRepository,
-    Paths: mdiFileCodeOutline,
-    Symbols: mdiShapeOutline,
+    Code: mdiCodeBraces,
+    Repositories: mdiSourceFork,
+    Paths: mdiFileOutline,
+    Symbols: mdiFunction,
     Commits: mdiSourceCommit,
     Diffs: mdiPlusMinus,
 }

client/web-sveltekit/src/routes/search/FileContentSearchResult.svelte

@@ -114,13 +114,15 @@
                             startLine={group.startLine}
                             matches={group.matches}
                             plaintextLines={group.plaintextLines}
+                            --background-color="transparent"
                         />
                     {:then result}
                         <CodeExcerpt
                             startLine={group.startLine}
                             matches={group.matches}
                             plaintextLines={group.plaintextLines}
                             highlightedHTMLRows={result?.[index]?.slice(0, group.plaintextLines.length)}
+                            --background-color="transparent"
                         />
                     {/await}
                 </a>
@@ -156,6 +158,10 @@
             position: sticky;
             bottom: 0;
         }
+
+        &:hover {
+            background-color: var(--subtle-bg-2);
+        }
     }
 
     .code {
@@ -165,6 +171,10 @@
             border-bottom: none;
         }
 
+        &:hover {
+            background-color: var(--subtle-bg-2);
+        }
+
         a {
             text-decoration: none;
             color: inherit;

client/web-sveltekit/src/routes/search/PreviewPanel.svelte

@@ -152,5 +152,6 @@
 
     .content {
         overflow: auto;
+        background-color: var(--code-bg);
     }
 </style>

client/web-sveltekit/src/routes/search/RepoSearchResult.svelte

@@ -75,8 +75,9 @@
                 {limitDescription(description)}
             </p>
         {/key}
-    {/if}
-    {#if badges.length > 0}
+    {/if}<!--
+        Intentional weird comment to avoid adding an empty line to the body
+    -->{#if badges.length > 0}
         <ul class="p-2">
             {#each badges as badge}
                 <li>

client/web-sveltekit/src/routes/search/SearchResult.svelte

@@ -57,7 +57,7 @@
         align-items: center;
     }
 
-    .body {
+    .body:not(:empty) {
         background-color: var(--code-bg);
         border-bottom: 1px solid var(--border-color);
     }

client/web-sveltekit/src/routes/search/SymbolSearchResult.svelte

@@ -66,9 +66,13 @@
         display: flex;
         align-items: center;
         width: 100%;
-        background-color: var(--code-bg);
         padding: 0.5rem;
         border-bottom: 1px solid var(--border-color);
+
+        background-color: var(--code-bg);
+        &:hover {
+            background-color: var(--subtle-bg-2);
+        }
     }
 
     .symbol-kind {