andre/CrewAI-Visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix theme of TESelect

Browse Source
This commit is contained in:
Eng. Elias
2024-02-26 22:25:17 +04:00
parent e703726bcc
commit 6673e4258f
4 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/inputs/mission_tasks_editor.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { selectTheme } from "@/data/consts";
import { Mission } from "@/types/mission";
import { Task } from "@/types/task";
import React, { useState } from "react";
@@ -89,7 +90,7 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
<div className="m-2">
<label>Agent</label>
<TESelect
className="bg-gray-700"
className="bg-gray-700 text-white"
data={[
{ text: "None", value: "None" },
...mission.crew.map((agent) => ({
@@ -100,6 +101,7 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
onValueChange={(event: any) => {
setNewTaskAgent(event.value);
}}
theme={selectTheme}
/>
</div>
<button

3
src/components/modals/agent_modal.tsx
View File

@@ -18,6 +18,7 @@ import {
} from "tw-elements-react";
import Switch from "../inputs/switch";
import TWFileInput from "../inputs/file";
import { selectTheme } from "@/data/consts";
export default function AgentModal(props: {
agent: Agent | null;
@@ -120,6 +121,8 @@ export default function AgentModal(props: {
tools: newValue,
}));
}}
className="w-full"
theme={selectTheme}
/>
) : (
agent?.tools.map((tool) => (

10
src/components/modals/mission_modal.tsx
View File

@@ -18,6 +18,7 @@ import Switch from "../inputs/switch";
import { Mission } from "@/types/mission";
import MissionTaskEditor from "../inputs/mission_tasks_editor";
import { TasksAccordion } from "../ui/tasks_accordions";
import { Process, selectTheme } from "@/data/consts";
export default function MissionModal(props: {
mission: Mission | null;
@@ -88,6 +89,7 @@ export default function MissionModal(props: {
tools: newValue,
}));
}}
theme={selectTheme}
/>
) : (
mission?.crew.map((agent, i) => (
@@ -123,8 +125,11 @@ export default function MissionModal(props: {
{isEdit ? (
<TESelect
data={[
{ text: "SEQUENTIAL", value: "SEQUENTIAL" },
{ text: "HIERARCHICAL", value: "HIERARCHICAL" },
{ text: Process.SEQUENTIAL, value: Process.SEQUENTIAL },
{
text: Process.HIERARCHICAL,
value: Process.HIERARCHICAL,
},
]}
value={tempMission?.process}
onValueChange={(event: any) => {
@@ -134,6 +139,7 @@ export default function MissionModal(props: {
}));
}}
className="dark:text-black"
theme={selectTheme}
/>
) : (
<span className="bg-blue-300 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1">

53
src/data/consts.ts
View File

@@ -2,3 +2,56 @@ export enum Process {
SEQUENTIAL = "SEQUENTIAL",
HIERARCHICAL = "HIERARCHICAL",
}
export const selectTheme = {
dropdown:
"relative outline-none min-w-[100px] m-0 bg-gray-700 shadow-[0_2px_5px_0_rgba(0,0,0,0.16),_0_2px_10px_0_rgba(0,0,0,0.12)] transition duration-200 motion-reduce:transition-none",
dropdownVisible: "opacity-100 scale-100",
dropdownHidden: "opacity-0 scale-[0.8]",
formCheckInput:
"relative float-left mt-[0.15rem] mr-[8px] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-neutral-300 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:ml-[0.25rem] checked:after:-mt-px checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-t-0 checked:after:border-l-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:ml-[0.25rem] checked:focus:after:-mt-px checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-t-0 checked:focus:after:border-l-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent",
formOutline: "relative",
inputGroup:
"flex items-center whitespace-nowrap p-2.5 text-center text-base font-normal leading-[1.6] text-gray-700",
noResult: "flex items-center px-4",
optionsList: "list-none m-0 p-0",
optionsWrapper: "overflow-y-auto",
optionsWrapperScrollbar:
"[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-button]:block [&::-webkit-scrollbar-button]:h-0 [&::-webkit-scrollbar-button]:bg-transparent [&::-webkit-scrollbar-track-piece]:bg-transparent [&::-webkit-scrollbar-track-piece]:rounded-none [&::-webkit-scrollbar-track-piece]: [&::-webkit-scrollbar-track-piece]:rounded-l [&::-webkit-scrollbar-thumb]:h-[50px] [&::-webkit-scrollbar-thumb]:bg-[#999] [&::-webkit-scrollbar-thumb]:rounded",
selectArrow:
"absolute right-3 text-[0.8rem] cursor-pointer w-5 h-5 pointer-events-none",
selectArrowFocused: "text-primary",
selectArrowWhite: "text-gray-50",
selectArrowWhiteFocused: "!text-white",
selectArrowDefault: "top-2",
selectArrowLg: "top-[13px]",
selectArrowSm: "top-1",
selectClearBtn:
"absolute top-2 right-9 text-black cursor-pointer focus:text-primary outline-none w-5 h-5",
selectClearBtnWhite: "!text-gray-50",
selectClearBtnDefault: "top-2 text-base",
selectClearBtnLg: "top-[11px] text-base",
selectClearBtnSm: "top-1 text-[0.8rem]",
selectDropdownContainer: "z-[1070]",
selectFilterInput:
"relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-gray-300 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-gray-700 transition duration-300 ease-in-out motion-reduce:transition-none focus:border-primary focus:text-gray-700 focus:shadow-te-primary focus:outline-none",
selectInput:
"peer block min-h-[auto] w-full rounded border-0 bg-transparent outline-none transition-all duration-200 ease-linear peer-focus:text-primary motion-reduce:transition-none disabled:bg-neutral-100 cursor-pointer disabled:cursor-default",
selectLabel:
"pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate text-neutral-500 transition-all duration-200 ease-out peer-focus:scale-[0.8] peer-focus:text-primary motion-reduce:transition-none",
selectOption:
"flex flex-row items-center justify-between w-full px-4 truncate select-none",
selectOptionDefault: "bg-transparent text-gray-400",
selectOptionDisabled: "cursor-default text-gray-500 bg-transparent",
selectOptionSelected: "bg-black/5 text-white",
selectOptionActive: "bg-black/5 text-gray-400",
selectOptionNonDisabled: "hover:bg-black/5 cursor-pointer",
selectOptionsMultipleActive: "bg-black/5",
selectOptionsOptGroup: "pl-7",
selectOptionGroup: "group/opt pointer-none",
selectOptionGroupLabel:
"flex flex-row items-center w-full px-4 truncate bg-transparent text-black/50 select-none",
selectOptionIcon: "w-7 h-7 rounded-full",
selectOptionSecondaryText: "block text-[0.8rem] text-gray-500",
};