add scrolling gradient

devflowinc · Sep 4, 2024 · 24a9b42 · 24a9b42
1 parent c542e04
commit 24a9b42
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 15 deletions.
diff --git a/clients/search-component/example/src/App.tsx b/clients/search-component/example/src/App.tsx
@@ -1,5 +1,5 @@
 import { TrieveSearch, TrieveSDK, TrieveModalSearch } from "../../src/index";
-import "../../dist/app.css";
+import "../../dist/index.css";
 import { useState } from "react";
 import { IconMoon, IconNext, IconPrevious, IconSun } from "./Icons";
 import SyntaxHighlighter from "react-syntax-highlighter";

diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -7,18 +7,18 @@
     "dist/*",
     "dist/**/*"
   ],
-  "version": "0.0.1-rc4",
+  "version": "0.0.1-rc5",
   "license": "MIT",
   "scripts": {
     "dev": "run-p watch:css watch:js",
-    "watch:css": "npx postcss src/app.css -o dist/app.css --watch",
+    "watch:css": "npx postcss src/app.css -o dist/index.css --watch",
     "watch:js": "node ./scripts/watch.js",
     "lint": "eslint",
     "build:clean": "rm -rf dist && yarn type:dts && yarn build",
     "build": "run-s build:src build:css type:dts",
     "build:src": "node ./scripts/build.js",
     "type:dts": "tsc --emitDeclarationOnly --declarationMap",
-    "build:css": "npx postcss src/app.css -o dist/app.css ",
+    "build:css": "npx postcss src/app.css -o dist/index.css ",
     "prepublish": "yarn build:clean"
   },
   "devDependencies": {
@@ -37,6 +37,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.41",
     "postcss-cli": "^11.0.0",
+    "postcss-csso": "^6.0.1",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^6.2.0",
     "react": "^18.3.1",

diff --git a/clients/search-component/postcss.config.cjs b/clients/search-component/postcss.config.cjs
@@ -4,5 +4,6 @@ module.exports = {
     require("postcss-nested"),
     require("autoprefixer"),
     require("tailwindcss"),
+    require("postcss-csso"),
   ],
 };
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -7,15 +7,15 @@ body {
     @apply data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[80vh] w-[90vw] sm:max-w-[550px] -translate-x-[50%] -translate-y-[50%] rounded-lg bg-zinc-50 p-2 pt-0 shadow-2xl focus:outline-none text-zinc-950;
 
     .trieve-powered {
-      @apply flex items-center justify-end w-full py-4 pr-2 gap-2 select-none cursor-pointer p-2 text-sm sticky -bottom-2 bg-white;
+      @apply flex items-center justify-end w-full py-4 pr-2 gap-2 select-none cursor-pointer p-2 text-sm sticky -bottom-2 bg-zinc-50;
 
       img {
         @apply h-4 w-4 cursor-pointer;
       }
     }
 
     .chat-modal-wrapper {
-      @apply flex flex-col gap-4 relative;
+      @apply flex flex-col gap-4 relative mt-1;
 
       .chat-ul {
         @apply border-zinc-300 rounded border p-4;
@@ -87,10 +87,15 @@ body {
     }
 
     .input-wrapper {
-      @apply sticky top-0 bg-zinc-50 pt-2 flex items-center;
+      @apply sticky top-0 bg-zinc-50 pt-2 flex items-center z-10 mt-1;
+
+      &::after {
+        @apply absolute h-[17px] w-full z-50 block top-[56px] bg-gradient-to-b from-zinc-50 via-zinc-50  to-transparent;
+        content: "";
+      }
 
       .search-icon {
-        @apply absolute left-2 text-zinc-400;
+        @apply absolute z-[51] left-2 text-zinc-400;
       }
 
       &.chat {
@@ -104,7 +109,7 @@ body {
     }
 
     input {
-      @apply block w-full rounded-md border-0 py-1.5 pr-14 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-200 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-magenta-500 outline-none sm:text-sm sm:leading-6 bg-zinc-50 px-4 pl-8 h-12;
+      @apply block w-full rounded-md border-0 py-1.5 pr-14 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-200 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-magenta-500 outline-none sm:text-sm sm:leading-6 bg-zinc-50 px-4 pl-8 h-12 z-10 relative;
     }
     ul {
       @apply mt-4;

diff --git a/yarn.lock b/yarn.lock
@@ -2508,11 +2508,26 @@ [email protected]:
     node-rsa "0.4.2"
     util.promisify "1.0.0"
 
+css-tree@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
+  integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==
+  dependencies:
+    mdn-data "2.0.28"
+    source-map-js "^1.0.1"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csso@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
+  integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
+  dependencies:
+    css-tree "~2.2.0"
+
 csstype@^3.0.2, csstype@^3.1.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -3641,11 +3656,6 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-browser-fingerprint@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/get-browser-fingerprint/-/get-browser-fingerprint-3.2.0.tgz#b45e16e6185bd07d371a25a8e9fcea15efb0ec44"
-  integrity sha512-EUDjS8nxSGI6ogbGFNkUMCp8bWQKk0Qt7kWVR6Q4aLi6uBuJt3PgqaD2qC0EhgA3GMJF6KNX83uGVUwGpxziNQ==
-
 get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -5001,6 +5011,11 @@ mdast-util-to-string@^4.0.0:
   dependencies:
     "@types/mdast" "^4.0.0"
 
+[email protected]:
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
+  integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
+
 mdurl@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
@@ -6122,6 +6137,13 @@ postcss-cli@^11.0.0:
     slash "^5.0.0"
     yargs "^17.0.0"
 
+postcss-csso@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-csso/-/postcss-csso-6.0.1.tgz#6a3e812e236fde6d710a525f2b63e6d9da5a5008"
+  integrity sha512-ZV4yEziMrx6CEiqabGLrDva0pMD7Fbw7yP+LzJvaynM4OJgTssGN6dHiMsJMJdpmNaLJltXVLsrb/5sxbFa8sA==
+  dependencies:
+    csso "^5.0.5"
+
 postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
@@ -6925,7 +6947,7 @@ solid-use@^0.8.0:
   resolved "https://registry.yarnpkg.com/solid-use/-/solid-use-0.8.0.tgz#d46258c45edb0f4c621285e0ad1aa6b6a674d79b"
   integrity sha512-YX+XmcKLvSx3bwMimMhFy40ZkDnShnUcEw6cW6fSscwKEgl1TG3GlgAvkBmQ3AeWjvQSd8+HGTr82ImsrjkkqA==
 
-source-map-js@^1.2.0:
+source-map-js@^1.0.1, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==