diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
index 4bef6738a..b8b4acd37 100644
--- a/python/src/aiconfig/editor/client/src/Editor.tsx
+++ b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -146,7 +146,7 @@ export default function Editor() {
withGlobalStyles
withNormalizeCSS
theme={{
- // colorScheme: "dark",
+ colorScheme: "dark",
headings: {
fontFamily:
@@ -162,10 +162,11 @@ export default function Editor() {
deg: 90,
},
- //gradio light theme
- globalStyles: (theme) => ({
+ // local editor theme
+ globalStyles: (local) => ({
".editorBackground": {
- background: theme.colorScheme === "light" ? "white" : "#0b0f19",
+ background:
+ "radial-gradient(ellipse at top,#08122d,#030712),radial-gradient(ellipse at bottom,#030712,#030712)",
margin: "0 auto",
minHeight: "100vh",
},
@@ -178,67 +179,52 @@ export default function Editor() {
maxHeight: "16px",
fontFamily:
"sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
- borderRadius: "8px",
- margin: "8px 0px 0px 0px",
- backgroundColor:
- theme.colorScheme === "light" ? "white" : "#384152",
- boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset",
- ":focus": {
- outline: "solid 1px #E85921 !important",
- outlineOffset: "-1px",
+ border: "none",
+ borderRadius: "4px",
+ padding: "4px",
+ margin: "0px",
+ backgroundColor: "transparent",
+ ":hover": {
+ backgroundColor: "rgba(226,232,255,.1)",
},
},
},
".cellStyle": {
- border: "1px solid",
- borderColor:
- theme.colorScheme === "light" ? "#E5E7EB" : "#384152",
- background: theme.colorScheme === "light" ? "white" : "#1f2938",
+ border: "1px solid rgba(226,232,255,.1) !important",
+ background: "rgb(12 21 57 / 10%)",
flex: 1,
borderTopRightRadius: "0px",
borderBottomRightRadius: "0px",
- borderTopLeftRadius: "8px",
- borderBottomLeftRadius: "8px",
":hover": {
- background:
- theme.colorScheme === "light"
- ? "rgba(249, 250, 251, 0.5) !important"
- : "#1f2938",
+ background: "rgba(255, 255, 255, 0.03) !important",
},
textarea: {
- border: "1px solid !important",
- borderColor:
- theme.colorScheme === "light"
- ? "#E5E7EB !important"
- : "#384152 !important",
- borderRadius: "8px",
- margin: "8px 0px 0px 0px",
- boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset",
- backgroundColor:
- theme.colorScheme === "light" ? "white" : "#384152",
+ border: "1px solid rgba(226,232,255,.1)",
+ backgroundColor: "#060c21",
":focus": {
- outline: "solid 1px #E85921 !important",
+ outline: "solid 1px #ff1cf7 !important",
outlineOffset: "-1px",
},
},
},
".sidePanel": {
- border: "1px solid",
- borderColor:
- theme.colorScheme === "light" ? "#E5E7EB" : "#384152",
+ border: "1px solid rgba(226,232,255,.1)",
borderLeft: "none",
- borderTopRightRadius: "8px",
- borderBottomRightRadius: "8px",
- background:
- theme.colorScheme === "light"
- ? "linear-gradient(90deg, #F6F6F6, #FFFFFF)"
- : "transparent",
+ borderTopRightRadius: "4px",
+ borderBottomRightRadius: "4px",
input: {
- border: "1px solid #E5E7EB !important",
- boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset",
- backgroundColor: "#ffffff",
+ border: "1px solid rgba(226,232,255,.1)",
+ backgroundColor: "#060c21",
":focus": {
- outline: "solid 1px #E85921 !important",
+ outline: "solid 1px #ff1cf7 !important",
+ outlineOffset: "-1px",
+ },
+ },
+ textarea: {
+ border: "1px solid rgba(226,232,255,.1)",
+ backgroundColor: "#060c21",
+ ":focus": {
+ outline: "solid 1px #ff1cf7 !important",
outlineOffset: "-1px",
},
},
@@ -249,18 +235,12 @@ export default function Editor() {
marginBottom: "0.5em",
},
".runPromptButton": {
- borderRadius: "8px",
- border: "1px solid #FDD7AD",
- background: "linear-gradient(180deg, #FEE1C0 0%, #FCC792 100%)",
- boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05)",
- margin: "4px",
+ background: "#ff1cf7",
+ color: "white",
+ borderRadius: "0",
height: "auto",
- color: "#E85921",
- path: {
- color: "#E85921",
- },
- ":hover": {
- background: "linear-gradient(180deg, #FEE1C0 0%, #FF9E3D 100%)",
+ "&:hover": {
+ background: "#ff46f8",
},
},
".actionTabsPanel": {
@@ -274,81 +254,75 @@ export default function Editor() {
justifyContent: "space-between",
alignItems: "center",
},
-
".parametersContainer": {
maxWidth: "1250px",
maxHeight: "-webkit-fill-available",
margin: "16px auto",
padding: "0",
- backgroundColor:
- theme.colorScheme === "light" ? "#F9FAFB" : "#1f2938",
- borderRadius: "8px",
- border: "1px solid",
- borderColor:
- theme.colorScheme === "light" ? "#E5E7EB" : "#384152",
+ backgroundColor: "rgba(226,232,255,.1)",
+ borderRadius: "4px",
+ border: "1px solid rgba(226,232,255,.1) !important",
button: {
":hover": {
- backgroundColor:
- theme.colorScheme === "light" ? "#F0F1F1" : "transparent",
+ backgroundColor: "rgba(226,232,255,.1)",
},
},
input: {
- border: "1px solid !important",
- borderColor:
- theme.colorScheme === "light"
- ? "#E5E7EB !important"
- : "#384152 !important",
- boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset",
- borderRadius: "8px",
- backgroundColor:
- theme.colorScheme === "light" ? "white" : "#384152",
+ border: "1px solid rgba(226,232,255,.1)",
+ backgroundColor: "#060c21",
+ borderRadius: "4px",
":focus": {
- outline: "solid 1px #E85921 !important",
+ outline: "solid 1px #ff1cf7 !important",
outlineOffset: "-1px",
},
},
textarea: {
- border: "1px solid !important",
- borderColor:
- theme.colorScheme === "light"
- ? "#E5E7EB !important"
- : "#384152 !important",
- boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset",
- borderRadius: "8px",
- backgroundColor:
- theme.colorScheme === "light" ? "white" : "#384152",
+ border: "1px solid rgba(226,232,255,.1)",
+ backgroundColor: "#060c21",
+ borderRadius: "4px",
":focus": {
- outline: "solid 1px #E85921 !important",
+ outline: "solid 1px #ff1cf7 !important",
outlineOffset: "-1px",
},
},
- ".addParameterButton": {
- position: "sticky",
- left: "0",
- bottom: "0",
- margin: "16px 0 0 0",
- background: "linear-gradient(180deg, #FEE1C0 0%, #FCC792 100%)",
- path: {
- color: "#E85921",
- },
+ },
+ ".addParameterButton": {
+ position: "sticky",
+ left: "0",
+ bottom: "0",
+ margin: "16px 0 0 0",
+ background: "#ff1cf7",
+ "&:hover": {
+ background: "#ff46f8",
},
},
-
+ ".mantine-InputWrapper-label": {
+ display: "none",
+ },
".mantine-Slider-thumb": {
- border: "0.25rem solid #E85921",
+ border: "0.25rem solid #ff1cf7",
+ backgroundColor: "white",
},
".mantine-Slider-bar": {
- backgroundColor: "#E85921",
+ backgroundColor: "#ff1cf7",
},
".mantine-Tabs-tab[data-active]": {
- borderBottom: "solid 1px #E85921",
+ borderBottom: "solid 1px #ff1cf7",
":hover": {
- borderBottom: "solid 1px #E85921",
+ borderBottom: "solid 1px #ff1cf7",
},
},
}),
}}
>
+
+
+
{!aiconfig ? (