Merge branch 'main' into aric-sparkle_citaion_action_avatar

dust-tt · Nov 16, 2023 · c7ee06d · c7ee06d
2 parents 8effb1f + 6aace59
commit c7ee06d
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 11 deletions.
diff --git a/front/components/assistant/conversation/InputBar.tsx b/front/components/assistant/conversation/InputBar.tsx
@@ -381,7 +381,7 @@ export function AssistantInputBar({
             className={classNames(
               "relative flex flex-1 flex-row items-stretch px-4",
               "s-backdrop-blur border-2  border-action-300 bg-white/80 focus-within:border-action-400",
-              "rounded-xl drop-shadow-2xl transition-all duration-300",
+              "rounded-xl transition-all duration-300 box-shadow-2xl",
               isAnimating
                 ? "animate-shake border-action-500 focus-within:border-action-800"
                 : ""

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -13,7 +13,7 @@
     "initdb": "env $(cat .env.local) npx tsx admin/db.ts"
   },
   "dependencies": {
-    "@dust-tt/sparkle": "^0.2.40",
+    "@dust-tt/sparkle": "^0.2.41",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.7",

diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require("tailwindcss/colors"); // eslint-disable-line @typescript-eslint/no-var-requires
+const plugin = require("tailwindcss/plugin"); // eslint-disable-line @typescript-eslint/no-var-requires
 
 module.exports = {
   theme: {
@@ -173,7 +174,35 @@ module.exports = {
       backgroundColor: ["dark"],
     },
   },
-  plugins: [require("@tailwindcss/forms"), require("tailwind-scrollbar-hide")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("tailwind-scrollbar-hide"),
+    plugin(function ({ addUtilities }) {
+      const newUtilities = {
+        ".box-shadow": {
+          boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        },
+        ".box-shadow-md": {
+          boxShadow:
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        },
+        ".box-shadow-lg": {
+          boxShadow:
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        },
+        ".box-shadow-xl": {
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        },
+        ".box-shadow-2xl": {
+          boxShadow: "0 50px 100px -20px rgba(0, 0, 0, 0.25)",
+        },
+        ".box-shadow-none": {
+          boxShadow: "none",
+        },
+      };
+      addUtilities(newUtilities);
+    }),
+  ],
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",

diff --git a/sparkle/src/components/Modal.tsx b/sparkle/src/components/Modal.tsx
@@ -29,7 +29,7 @@ const modalStyles = {
   [ModalType.Side]: {
     containerClasses: "s-flex s-h-full s-p-0 s-justify-end sm:s-p-2",
     panelClasses:
-      "s-m-0 s-h-full s-max-h-full s-w-full s-max-w-full s-r-0 sm:s-rounded-xl s-drop-shadow-xl s-border s-border-structure-100",
+      "s-m-0 s-h-full s-max-h-full s-w-full s-max-w-full s-r-0 sm:s-rounded-xl s-box-shadow-xl s-border s-border-structure-100",
     transitionEnterFrom: "s-opacity-0 -s-translate-x-20 s-scale-99",
     transitionEnterTo: "s-opacity-100 s-translate-x-0 s-scale-100",
     transitionLeaveFrom: "s-opacity-100 s-translate-x-0 s-scale-100",
@@ -38,7 +38,7 @@ const modalStyles = {
   },
   [ModalType.FullScreen]: {
     containerClasses:
-      "s-flex s-items-center s-justify-center s-h-full s-p-0 s-drop-shadow-xl",
+      "s-flex s-items-center s-justify-center s-h-full s-p-0 s-box-shadow-xl",
     panelClasses: "s-m-0 s-h-full s-max-h-full s-w-full s-max-w-full s-r-0",
     transitionEnterFrom: "s-opacity-0 s-translate-y-4 s-scale-95 s-rounded-xl",
     transitionEnterTo: "s-opacity-100 s-translate-y-0 s-scale-100 s-rounded-0",
@@ -51,7 +51,7 @@ const modalStyles = {
     containerClasses:
       "s-flex s-items-center s-justify-center s-min-h-full s-p-4",
     panelClasses:
-      "s-w-full sm:s-w-[448px] overflow-hidden s-drop-shadow-2xl s-rounded-xl s-border s-border-structure-100",
+      "s-w-full sm:s-w-[448px] overflow-hidden s-box-shadow-2xl s-rounded-xl s-border s-border-structure-100",
     transitionEnterFrom: "s-opacity-0 s-translate-y-4 s-scale-95",
     transitionEnterTo: "s-opacity-100 s-translate-y-0 s-scale-100",
     transitionLeaveFrom: "s-opacity-100 s-translate-y-0 s-scale-100",

diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require("tailwindcss/colors");
+const plugin = require("tailwindcss/plugin");
 
 const safeColorsArray = [
   "emerald",
@@ -185,7 +186,34 @@ module.exports = {
       backgroundColor: ["dark"],
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    plugin(function ({ addUtilities }) {
+      const newUtilities = {
+        ".box-shadow": {
+          boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        },
+        ".box-shadow-md": {
+          boxShadow:
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        },
+        ".box-shadow-lg": {
+          boxShadow:
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        },
+        ".box-shadow-xl": {
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        },
+        ".box-shadow-2xl": {
+          boxShadow: "0 50px 100px -20px rgba(0, 0, 0, 0.25)",
+        },
+        ".box-shadow-none": {
+          boxShadow: "none",
+        },
+      };
+      addUtilities(newUtilities);
+    }),
+  ],
   prefix: "s-",
   content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
   safelist: safeColorlist,