feat(ui): add search functionality to chat view (#1790)

Co-authored-by: Nahiyan Khan <nahiyan.khan@gmail.com>

ui/desktop/src/styles/main.css

@@ -117,7 +117,9 @@
     --text-placeholder: var(--grey-60);
     --text-prominent: var(--grey-10);
     --text-standard: var(--grey-20);
+    --text-standard-inverse: var(--dark-grey-90);
     --text-subtle: var(--grey-50);
+    --text-subtle-inverse: var(--dark-grey-60);
     --text-prominent-inverse: var(--constant-white);
 
     &.dark {
@@ -144,7 +146,9 @@
       --text-placeholder: var(--dark-grey-45);
       --text-prominent: var(--constant-white);
       --text-standard: var(--dark-grey-90);
+      --text-standard-inverse: var(--grey-20);
       --text-subtle: var(--dark-grey-60);
+      --text-subtle-inverse: var(--grey-50);
       --text-prominent-inverse: var(--grey-20);
     }
     /* end arcade colors */

ui/desktop/src/styles/search.css

@@ -0,0 +1,42 @@
+/* Search highlight styles */
+mark {
+  background-color: rgba(255, 213, 0, 0.5);
+  color: var(--text-standard);
+  padding: 0;
+  border-radius: 2px;
+}
+
+mark.current {
+  background-color: rgba(252, 213, 3, 0.6);
+  box-shadow: inset 0 0 0 1px var(--text-prominent);
+}
+
+@keyframes expandDown {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: var(--search-bar-height);
+  }
+}
+
+@keyframes collapseUp {
+  from {
+    max-height: var(--search-bar-height);
+  }
+  to {
+    max-height: 0;
+  }
+}
+
+.search-bar-enter {
+  --search-bar-height: 72px;
+  animation: expandDown 0.15s ease-out forwards;
+  overflow: hidden;
+}
+
+.search-bar-exit {
+  --search-bar-height: 72px;
+  animation: collapseUp 0.15s ease-out forwards;
+  overflow: hidden;
+}