Merge pull request #31 from tylerslaton/input-colors

style: update input styles

Author: tylerslaton

components/build/modalTextArea.tsx

@@ -33,7 +33,8 @@ const ModalTextArea = (props: ModalTextAreaProps) => {
                 >
                     <GrExpand className="text-zinc-500"/>
                 </Button>
-                <Textarea 
+                <Textarea
+                    color="primary"
                     value={props.defaultValue}
                     onChange={(e) => props.setText(e.target.value)}
                     placeholder={props.placeholder}

components/build/tool/config.tsx

@@ -70,6 +70,7 @@ const Custom = () => {
                             </Switch>
 
                             <Textarea
+                                color="primary"
                                 fullWidth
                                 label="Description"
                                 placeholder="Describe your tool..."

components/edit/configure.tsx

@@ -76,13 +76,15 @@ const Configure: React.FC<ConfigureProps> = ({file, className, custom }) => {
         </div>
         <div className="px-2 flex flex-col space-y-4 mb-6">
             <Input
+                color="primary"
                 variant="bordered"
                 label="Name"
                 placeholder="Give your chat bot a name..."
                 defaultValue={root.name}
                 onChange={(e) => setRoot({...root, name: e.target.value})}
             />
             <Textarea
+                color="primary"
                 fullWidth
                 variant="bordered"
                 label="Description"
@@ -91,6 +93,7 @@ const Configure: React.FC<ConfigureProps> = ({file, className, custom }) => {
                 onChange={(e) => setRoot({...root, description: e.target.value})}
             />
             <Textarea
+                color="primary"
                 fullWidth
                 variant="bordered"
                 label="Instructions"

components/edit/configure/customTool.tsx

@@ -144,13 +144,15 @@ const CustomTool: React.FC<ConfigureProps> = ({file, className, models, tool })
             </div>
             <div className="px-2 flex flex-col space-y-4 mb-6">
                 <Input
+                    color="primary"
                     variant="bordered"
                     label="Name"
                     placeholder="Give your chat bot a name"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
                 />
                 <Textarea
+                    color="primary"
                     fullWidth
                     variant="bordered"
                     label="Description"
@@ -159,6 +161,7 @@ const CustomTool: React.FC<ConfigureProps> = ({file, className, models, tool })
                     onChange={(e) => setCustomTool({...customTool, description: e.target.value})}
                 />
                 <Textarea
+                    color="primary"
                     fullWidth
                     variant="bordered"
                     label="Instructions"

components/edit/configure/imports.tsx

@@ -82,6 +82,7 @@ const Imports: React.FC<ExternalProps> = ({tools, setTools, label, className, de
             )}
             <div className="flex w-full h-full space-x-2">
                 <Input
+                    color="primary"
                     size="sm"
                     variant="bordered"
                     id="toolInput"

components/edit/configure/models.tsx

@@ -71,6 +71,7 @@ const Models: React.FC<ModelsProps> = ({ options, onChange, defaultValue }) => {
     return (
         <div className="relative">
             <Input
+                color='primary'
                 label="Model"
                 placeholder="Select a non-default model..."
                 type="text"
@@ -94,14 +95,14 @@ const Models: React.FC<ModelsProps> = ({ options, onChange, defaultValue }) => {
                 />
             )}
             {showDropdown && filteredOptions.length > 0 && (
-                <div className="absolute top-full left-0 z-50 max-h-80 overflow-y-auto rounded-xl bg-white border w-full shadow-2xl py-2">
+                <div className="absolute top-full left-0 z-50 max-h-80 overflow-y-auto rounded-xl bg-white dark:bg-zinc-900 border-2 border-primary w-full shadow-2xl py-2">
                     {filteredOptions.map((option, index) => (
                         <h1
                             aria-label={option}
                             key={index}
                             role="button"
                             onMouseDown={() => handleOptionSelect(option)}
-                            className={`cursor-pointer p-2 mx-2 my-1 hover:bg-gray-200 rounded-xl ${option === selectedOption ? 'bg-gray-200' : ''}`}
+                            className={`cursor-pointer text-sm p-2 mx-2 my-1 hover:bg-gray-200 dark:hover:bg-zinc-600 rounded-xl ${option === selectedOption ? 'bg-gray-300 dark:bg-zinc-700' : ''}`}
                         >
                             {option}
                         </h1>

components/edit/configure/params.tsx

@@ -53,6 +53,7 @@ const Imports: React.FC<ExternalProps> = ({params, setParams, className, descrip
             {params && Object.keys(params).map((param) => (
                 <div key={param} className="flex space-x-2 mt-2">
                     <Input
+                        color="primary"
                         size="sm"
                         placeholder="Name..."
                         className="w-1/3"
@@ -67,6 +68,7 @@ const Imports: React.FC<ExternalProps> = ({params, setParams, className, descrip
                         }}
                     />
                     <Input
+                        color="primary"
                         size="sm"
                         placeholder="Description..."
                         variant="bordered"
@@ -92,6 +94,7 @@ const Imports: React.FC<ExternalProps> = ({params, setParams, className, descrip
             ))}
             <div className="flex space-x-2 mt-2">
                 <Input
+                    color="primary"
                     size="sm"
                     placeholder="Name..."
                     className="w-1/3"
@@ -103,6 +106,7 @@ const Imports: React.FC<ExternalProps> = ({params, setParams, className, descrip
                     onKeyDown={handleKeyDown}
                 />
                 <Input
+                    color="primary"
                     size="sm"
                     placeholder="Description..."
                     variant="bordered"

components/edit/new.tsx

@@ -25,6 +25,7 @@ const NewForm: React.FC<NewFormProps> = ({className, setFile}) => {
         <form className={`flex flex-col gap-4 ${className}`} onSubmit={handleSubmit}>
             <h1 className="text-lg">Create a new chat bot</h1>
             <Input
+                color="primary"
                 label="Filename"
                 type="text"
                 variant="bordered"
@@ -35,13 +36,15 @@ const NewForm: React.FC<NewFormProps> = ({className, setFile}) => {
                 onChange={(e) => setFilename(e.target.value)}
             />
             <Input
+                color="primary"
                 label="Chat Bot Name"
                 variant="bordered"
                 type="text"
                 placeholder="Name for the chat bot"
                 onChange={(e) => setName(e.target.value)}
             />
             <Textarea
+                color="primary"
                 label="Instructions"
                 variant="bordered"
                 type="text"

components/script/chatBar.tsx

@@ -71,6 +71,7 @@ const ChatBar = ({
             </Tooltip>
             <Upload disabled={disabled} onRestart={onRestart}/>
             <Textarea
+                color="primary"
                 isDisabled={disabled}
                 id="chatInput"
                 autoComplete="off"
@@ -79,7 +80,6 @@ const ChatBar = ({
                 radius="full"
                 minRows={1}
                 variant="bordered"
-                color="primary"
                 onChange={(e) => setInputValue(e.target.value)}
                 onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
                     if (event.key === "Enter" && !event.shiftKey) {

components/script/chatBar/upload/workspace.tsx

@@ -33,6 +33,7 @@ const Workspace = ({onRestart}: WorkspaceProps) => {
     return (
         <div className="flex w-full space-x-4">
             <Input 
+                color="primary"
                 variant="bordered"
                 placeholder="Set your workspace folder..."
                 label="Workspace folder"