Polishing Menu

dust-tt · Oct 4, 2023 · 8b366b0 · 8b366b0
1 parent d7c259e
commit 8b366b0
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 54 deletions.
diff --git a/front/components/assistant/conversation/ConversationTitle.tsx b/front/components/assistant/conversation/ConversationTitle.tsx
@@ -120,7 +120,7 @@ export function ConversationTitle({
         )}
 
         {isEditingTitle ? (
-          <div className="flex flex-row">
+          <div className="flex flex-row gap-1">
             <div
               onClick={(e: MouseEvent<HTMLDivElement>) => {
                 e.preventDefault();

diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
@@ -333,7 +333,7 @@ export default function AppLayout({
             className={classNames(
               "fixed left-0 right-0 top-0 z-30 flex h-16 flex-row pl-12 lg:pl-0",
               !hideSidebar ? "lg:left-80" : "",
-              "border-b border-structure-100 bg-white/30 backdrop-blur-md",
+              "s-border-b s-border-structure-300/30 s-bg-white/90 s-px-4 s-backdrop-blur-xl",
               titleChildren ? "fixed" : "lg:hidden"
             )}
           >

diff --git a/sparkle/src/components/Input.tsx b/sparkle/src/components/Input.tsx
@@ -2,52 +2,42 @@ import React from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
-export function Input({
-  placeholder,
-  value,
-  onChange,
-  error,
-  showErrorLabel = false,
-  name,
-  isPassword = false,
-  disabled = false,
-  className = "",
-}: {
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   placeholder: string;
-  value: string | null;
-  onChange?: (value: string) => void;
   error?: string | null;
   showErrorLabel?: boolean;
-  name: string;
   isPassword?: boolean;
-  disabled?: boolean;
   className?: string;
-}) {
+}
+
+export const Input: React.FC<InputProps> = ({
+  placeholder,
+  error,
+  showErrorLabel = false,
+  isPassword = false,
+  className = "",
+  ...props
+}) => {
   return (
-    <div className="flex flex-col">
+    <div>
       <input
         type={isPassword ? "password" : "text"}
-        name={name}
-        id={name}
         className={classNames(
-          "s-w-full s-rounded-md",
+          "s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2",
+          "s-w-full s-rounded-md  s-bg-structure-50 s-py-1.5 s-pl-4 s-pr-8 s-placeholder-element-600",
+          "s-transition-all s-duration-300 s-ease-out",
           className ?? "",
           !error
-            ? "focus:ring-action-500 s-border-gray-300 focus:s-border-action-500"
-            : "focus:border-red-500 focus:ring-red-500 s-border-red-500",
-          "s-bg-structure-50 s-stroke-structure-50"
+            ? "focus:s-ring-action-300"
+            : "s-ring-red-200 focus:s-ring-red-200"
         )}
         placeholder={placeholder}
-        value={value ?? ""}
-        onChange={(e) => {
-          onChange?.(e.target.value);
-        }}
         data-1p-ignore={!isPassword}
-        disabled={disabled}
+        {...props}
       />
       <div className="s-ml-2 s-h-4 s-text-red-500">
         {showErrorLabel && error ? error : null}
       </div>
     </div>
   );
-}
+};
diff --git a/sparkle/src/stories/BarHeader.stories.tsx b/sparkle/src/stories/BarHeader.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ChatBubbleBottomCenterText } from "@sparkle/icons/solid";
 
-import { Avatar, BarHeader, PageHeader } from "../index_with_tw_base";
+import { BarHeader, PageHeader } from "../index_with_tw_base";
 
 const meta = {
   title: "Molecule/BarHeader",
@@ -23,7 +23,7 @@ export const BasicBarHeaderValidate = () => {
   const [isSaving, setIsSaving] = React.useState(false);
 
   return (
-    <div className="s-mt-16 s-h-full s-w-full">
+    <div className="s-h-full s-w-full">
       <BarHeader
         title="Knowledge Base"
         rightActions={
@@ -40,13 +40,13 @@ export const BasicBarHeaderValidate = () => {
           />
         }
       />
-      <div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
+      <div className="s-mt-16 s-h-full s-w-full s-overflow-y-auto">
         <PageHeader title="Page Title" icon={ChatBubbleBottomCenterText} />
         <div className="s-flex s-flex-col s-gap-y-96">
-          <Avatar visual="https://source.unsplash.com/random" size="xl" />
-          <Avatar visual="https://source.unsplash.com/random" size="xl" />
-          <Avatar visual="https://source.unsplash.com/random" size="xl" />
-          <Avatar visual="https://source.unsplash.com/random" size="xl" />
+          <img src="https://source.unsplash.com/random" />
+          <img src="https://source.unsplash.com/random" />
+          <img src="https://source.unsplash.com/random" />
+          <img src="https://source.unsplash.com/random" />
         </div>
       </div>
     </div>
@@ -62,10 +62,10 @@ export const BasicBarHeaderValidateSaveDisabled = () => (
     <div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
       <PageHeader title="Page Title" icon={ChatBubbleBottomCenterText} />
       <div className="s-flex s-flex-col s-gap-y-96">
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
       </div>
     </div>
   </div>
@@ -80,10 +80,10 @@ export const BasicBarHeaderBack = () => (
     <div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
       <PageHeader title="Page Title" icon={ChatBubbleBottomCenterText} />
       <div className="s-flex s-flex-col s-gap-y-96">
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
       </div>
     </div>
   </div>
@@ -98,10 +98,10 @@ export const BasicBarHeaderClose = () => (
     <div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
       <PageHeader title="Page Title" icon={ChatBubbleBottomCenterText} />
       <div className="s-flex s-flex-col s-gap-y-96">
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
       </div>
     </div>
   </div>
@@ -116,10 +116,10 @@ export const BasicBarHeaderConversation = () => (
     <div className="s-flex s-flex-col s-gap-16 s-overflow-auto">
       <PageHeader title="Page Title" icon={ChatBubbleBottomCenterText} />
       <div className="s-flex s-flex-col s-gap-y-96">
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
-        <Avatar visual="https://source.unsplash.com/random" size="xl" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
+        <img src="https://source.unsplash.com/random" />
       </div>
     </div>
   </div>