[extension] Apply css feedback (#10141)

dust-tt · Jan 22, 2025 · 50fc9d3 · 50fc9d3
1 parent d7d729a
commit 50fc9d3
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 56 deletions.
diff --git a/extension/app/src/components/auth/ProtectedRoute.tsx b/extension/app/src/components/auth/ProtectedRoute.tsx
@@ -108,7 +108,7 @@ export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   }
 
   return (
-    <div className="flex h-screen flex-col gap-2 px-4">
+    <div className="flex h-screen flex-col gap-2 px-4 overflow-y-auto">
       {typeof children === "function"
         ? children({ user, workspace, handleLogout })
         : children}

diff --git a/extension/app/src/components/conversation/AgentMessage.tsx b/extension/app/src/components/conversation/AgentMessage.tsx
@@ -501,6 +501,7 @@ export function AgentMessage({
               );
             }}
             icon={ClipboardIcon}
+            className="text-muted-foreground"
           />,
           <Button
             key="retry-msg-button"
@@ -511,6 +512,7 @@ export function AgentMessage({
               void retryHandler(agentMessageToRender);
             }}
             icon={ArrowPathIcon}
+            className="text-muted-foreground"
             disabled={isRetryHandlerProcessing || shouldStream}
           />,
           // One cannot leave feedback on global agents.

diff --git a/extension/app/src/css/custom.css b/extension/app/src/css/custom.css
@@ -1,5 +1,6 @@
 html {
-  font-size: 14px;
+  font-size: 16px;
+  container-type: inline-size;
 }
 
 body {
@@ -38,6 +39,7 @@ body {
   from {
     color: currentColor;
   }
+
   to {
     color: transparent;
   }
@@ -47,6 +49,7 @@ body {
   0% {
     background-position: 0% center;
   }
+
   100% {
     background-position: -200% center;
   }

diff --git a/extension/config/tailwind.config.js b/extension/config/tailwind.config.js
@@ -3,11 +3,23 @@ const colors = require("tailwindcss/colors"); // eslint-disable-line @typescript
 
 module.exports = {
   theme: {
+    screens: {
+      xxs: "384px",
+      xs: "512px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+    },
     fontFamily: {
       sans: ["'darkmode-off-cc'", "sans-serif"],
       objektiv: ["'objektiv-mk1'", "sans-serif"],
     },
     extend: {
+      borderRadius: {
+        "4xl": "2rem",
+      },
       maxWidth: {
         48: "12rem",
       },
@@ -28,14 +40,23 @@ module.exports = {
         lg: "0 10px 20px rgba(15, 23, 42, 0.12)",
         xl: "0 20px 25px rgba(15, 23, 42, 0.12)",
         "2xl": "0 25px 50px rgba(15, 23, 42, 0.12)",
+        tale: "0px 0px 12px 12px #F6F8FB",
+        "tale-white": "0px 0px 12px 12px #FFF",
       },
       zIndex: {
         60: "60",
       },
+      minWidth: (theme) => ({
+        ...theme("spacing"),
+      }),
       minHeight: (theme) => ({
         ...theme("spacing"),
       }),
       keyframes: {
+        appear: {
+          "0%": { opacity: "0", width: "0" },
+          "100%": { opacity: "1", width: "320px" },
+        },
         "move-square": {
           "0%": {
             paddingLeft: "0",
@@ -121,6 +142,9 @@ module.exports = {
             opacity: 0,
           },
         },
+        transitionProperty: {
+          width: "width",
+        },
         fadeout: {
           "0%": {
             opacity: "1",
@@ -150,91 +174,109 @@ module.exports = {
         fadeout: "fadeout 500ms ease-out",
       },
       colors: {
-        separator: {
-          DEFAULT: colors.slate[200],
-          dark: colors.slate[800],
+        brand: {
+          DEFAULT: colors.emerald[500],
+          dark: colors.emerald[500],
         },
         border: {
-          DEFAULT: colors.slate[100],
-          dark: colors.slate[900],
-        },
-        "border-dark": {
-          DEFAULT: colors.slate[200],
-          dark: colors.slate[800],
+          DEFAULT: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
+          dark: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
+          darker: { DEFAULT: colors.slate[400], dark: colors.slate[6800] },
+          focus: {
+            DEFAULT: colors.slate[400],
+            dark: colors.slate[600],
+          },
+          warning: {
+            DEFAULT: colors.red[200],
+            dark: colors.red[800],
+          },
         },
-        background: {
-          DEFAULT: colors.white,
-          dark: colors.slate[950],
+        separator: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
+        ring: {
+          DEFAULT: colors.blue[300],
+          dark: colors.slate[700],
+          warning: {
+            DEFAULT: colors.red[300],
+            dark: colors.red[700],
+          },
         },
+        background: { DEFAULT: colors.white, dark: colors.slate[950] },
         foreground: {
           DEFAULT: colors.slate[950],
           dark: colors.white,
+          warning: {
+            DEFAULT: colors.red[500],
+            dark: colors.red[500],
+          },
         },
         muted: {
-          DEFAULT: colors.slate[50],
-          dark: colors.slate[900],
-        },
-        "muted-foreground": {
-          DEFAULT: colors.slate[500],
-          dark: colors.slate[500],
+          DEFAULT: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
+          foreground: {
+            DEFAULT: colors.slate[500],
+            dark: colors.slate[500],
+          },
+          background: {
+            DEFAULT: "#F6F8FB",
+            dark: colors.slate[900],
+          },
         },
         highlight: {
+          DEFAULT: colors.blue[500],
+          light: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          dark: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          muted: { DEFAULT: "#AFCDEF", dark: "#284896" },
           950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
           900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
           800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
           700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
           600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          500: colors.blue[500],
           400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
           300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
           200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
           100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
           50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
         },
         primary: {
-          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
-          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
-          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
-          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
-          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
-          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
-          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
-          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
-          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
-          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
-        },
-        brand: {
-          DEFAULT: colors.emerald[500],
-          dark: colors.emerald[500],
-        },
-        action: {
-          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
-          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
-          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
-          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
-          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
-          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
-          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
-          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
-          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
-          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
+          DEFAULT: colors.slate[800],
+          light: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
+          dark: { DEFAULT: colors.slate[950], dark: "#F6F8FB" },
+          muted: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
+          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] },
+          600: { DEFAULT: colors.slate[600], dark: colors.slate[400] },
+          500: { DEFAULT: colors.slate[500], dark: colors.slate[500] },
+          400: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
+          300: { DEFAULT: colors.slate[300], dark: colors.slate[700] },
+          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: "#F6F8FB", dark: colors.slate[950] },
         },
         warning: {
+          DEFAULT: colors.red[500],
+          light: { DEFAULT: colors.red[400], dark: colors.red[600] },
+          dark: { DEFAULT: colors.red[600], dark: colors.red[400] },
+          muted: { DEFAULT: "#E3BDC3", dark: "#762F39" },
+          950: { DEFAULT: colors.red[950], dark: colors.red[50] },
+          900: { DEFAULT: colors.red[900], dark: colors.red[100] },
+          800: { DEFAULT: colors.red[800], dark: colors.red[200] },
+          700: { DEFAULT: colors.red[700], dark: colors.red[300] },
+          600: { DEFAULT: colors.red[600], dark: colors.red[400] },
           500: { DEFAULT: colors.red[500], dark: colors.red[500] },
           400: { DEFAULT: colors.red[400], dark: colors.red[600] },
           200: { DEFAULT: colors.red[200], dark: colors.red[800] },
           300: { DEFAULT: colors.red[300], dark: colors.red[700] },
           100: { DEFAULT: colors.red[100], dark: colors.red[900] },
-          600: { DEFAULT: colors.red[600], dark: colors.red[400] },
-          700: { DEFAULT: colors.red[700], dark: colors.red[300] },
-          800: { DEFAULT: colors.red[800], dark: colors.red[200] },
-          900: { DEFAULT: colors.red[900], dark: colors.red[100] },
-          950: { DEFAULT: colors.red[950], dark: colors.red[50] },
           50: { DEFAULT: colors.red[50], dark: colors.red[950] },
         },
         success: {
+          DEFAULT: colors.emerald[500],
+          light: { DEFAULT: colors.emerald[400], dark: colors.emerald[600] },
+          dark: { DEFAULT: colors.emerald[600], dark: colors.emerald[400] },
+          muted: { DEFAULT: "#9CDECC", dark: "#1C5D56" },
           500: { DEFAULT: colors.emerald[500], dark: colors.emerald[500] },
           400: { DEFAULT: colors.emerald[400], dark: colors.emerald[600] },
           200: { DEFAULT: colors.emerald[200], dark: colors.emerald[800] },
@@ -247,15 +289,30 @@ module.exports = {
           950: { DEFAULT: colors.emerald[950], dark: colors.emerald[50] },
           50: { DEFAULT: colors.emerald[50], dark: colors.emerald[950] },
         },
+        action: {
+          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
+          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
+          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
+          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
+          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
+          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
+          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
+          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
+        },
         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: {
-          900: { DEFAULT: colors.slate[900], 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] },
           600: { DEFAULT: colors.slate[400], dark: colors.slate[400] },