Fixing input align (Sidebar) (#9959)

* Fixing alignement issues * Patching
dust-tt · Jan 14, 2025 · 41b8274 · 41b8274
1 parent 1e206b1
commit 41b8274
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -233,9 +233,9 @@ module.exports = {
         primary: {
           DEFAULT: colors.slate[800],
           light: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
-          dark: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          dark: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
           muted: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
-          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          950: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
           900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
           800: { DEFAULT: colors.slate[800], dark: colors.slate[200] },
           700: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
@@ -304,7 +304,7 @@ module.exports = {
           300: { DEFAULT: colors.slate[300], dark: colors.slate[600] },
         },
         element: {
-          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          950: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
           900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
           800: { DEFAULT: colors.slate[700], dark: colors.slate[200] },
           700: { DEFAULT: colors.slate[500], dark: colors.slate[300] },

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.363",
+  "version": "0.2.364",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/Input.tsx b/sparkle/src/components/Input.tsx
@@ -33,7 +33,7 @@ const messageVariantStyles: Record<MessageStatus, string> = {
 
 const stateVariantStyles: Record<InputStateType, string> = {
   default:
-    "s-border-border-dark/50 s-ring-highlight/0 focus-visible:s-border-border-focus focus-visible:s-outline-none focus-visible:s-ring-highlight/10",
+    "s-border-border-dark s-ring-highlight/0 focus-visible:s-border-border-focus focus-visible:s-outline-none focus-visible:s-ring-highlight/10",
   disabled: "disabled:s-cursor-not-allowed disabled:s-text-muted-foreground",
   error:
     "s-border-border-warning/30 s-ring-warning/0 focus-visible:s-border-border-warning focus-visible:s-outline-none focus-visible:s-ring-warning/10",
@@ -50,7 +50,7 @@ const messageVariant = cva("", {
 
 const inputStyleClasses = cva(
   cn(
-    "s-text-sm s-bg-background s-rounded-xl s-bg-muted-background s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
+    "s-text-sm s-rounded-xl s-bg-muted-background s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
     "s-border focus-visible:s-ring",
     "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
     "placeholder:s-text-muted-foreground"

diff --git a/sparkle/src/components/SearchInput.tsx b/sparkle/src/components/SearchInput.tsx
@@ -32,7 +32,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
     };
 
     return (
-      <div className={cn("s-relative s-m-px s-flex-grow", className)}>
+      <div className={cn("s-relative s-flex-grow", className)}>
         <Input
           type="text"
           name={name}

diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js
@@ -253,13 +253,13 @@ module.exports = {
           },
         },
         muted: {
-          DEFAULT: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
+          DEFAULT: { DEFAULT: "#F6F8FB", dark: colors.slate[900] },
           foreground: {
             DEFAULT: colors.slate[500],
             dark: colors.slate[500],
           },
           background: {
-            DEFAULT: colors.slate[50],
+            DEFAULT: "#F6F8FB",
             dark: colors.slate[900],
           },
         },
@@ -283,9 +283,9 @@ module.exports = {
         primary: {
           DEFAULT: colors.slate[800],
           light: { DEFAULT: colors.slate[600], dark: colors.slate[300] },
-          dark: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          dark: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
           muted: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
-          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          950: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
           900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
           800: { DEFAULT: colors.slate[800], dark: colors.slate[200] },
           700: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
@@ -296,7 +296,7 @@ module.exports = {
           200: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
           150: { DEFAULT: "#E9EFF5", dark: "#172033" },
           100: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
-          50: { DEFAULT: colors.slate[50], dark: colors.slate[950] },
+          50: { DEFAULT: "#F6F8FB", dark: colors.slate[950] },
         },
         warning: {
           DEFAULT: colors.red[500],
@@ -347,14 +347,14 @@ module.exports = {
         },
         structure: {
           0: { DEFAULT: colors.white, dark: colors.black },
-          50: { DEFAULT: colors.slate[50], dark: colors.slate[900] },
+          50: { DEFAULT: "#F6F8FB", dark: colors.slate[900] },
           100: { DEFAULT: colors.slate[100], dark: colors.slate[800] },
           150: { DEFAULT: "#E9EFF5", dark: "#172033" },
           200: { DEFAULT: colors.slate[200], dark: colors.slate[700] },
           300: { DEFAULT: colors.slate[300], dark: colors.slate[600] },
         },
         element: {
-          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
+          950: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
           900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
           800: { DEFAULT: colors.slate[700], dark: colors.slate[200] },
           700: { DEFAULT: colors.slate[500], dark: colors.slate[300] },