-
-
+
+
{requests.map((request) => {
return
;
diff --git a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts
index e5ba8aea..a23b806a 100644
--- a/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts
+++ b/ui/frontend/build_src/src/components/organisms/queueDisplay/queueDisplay.css.ts
@@ -7,7 +7,7 @@ import { vars } from "../../../styles/theme/index.css";
export const QueueDisplayMain = style({
display: "flex",
flexDirection: "column",
- width: '400px',
+ width: '100%',
height: '100%',
});
diff --git a/ui/frontend/build_src/src/pages/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts
index 8e80cba2..bfc5cf37 100644
--- a/ui/frontend/build_src/src/pages/Home/home.css.ts
+++ b/ui/frontend/build_src/src/pages/Home/home.css.ts
@@ -1,4 +1,4 @@
-import { style } from "@vanilla-extract/css";
+import { style, globalStyle } from "@vanilla-extract/css";
import { vars } from "../../styles/theme/index.css";
export const AppLayout = style({
@@ -38,8 +38,18 @@ export const HeaderLayout = style({
export const CreateLayout = style({
gridArea: "create",
position: "relative",
+ display: "flex",
+ flexDirection: "column",
+ overflowY: "auto",
+ overflowX: "hidden",
});
+// globalStyle(`${CreateLayout}`, {
+
+
+
+// }
+
export const DisplayLayout = style({
gridArea: "display",
overflow: "auto",
diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx
index 368ceb0c..86e7da7b 100644
--- a/ui/frontend/build_src/src/pages/Home/index.tsx
+++ b/ui/frontend/build_src/src/pages/Home/index.tsx
@@ -19,6 +19,7 @@ import HeaderDisplay from "../../components/organisms/headerDisplay";
import CreationPanel from "../../components/organisms/creationPanel";
import DisplayPanel from "../../components/organisms/displayPanel";
import FooterDisplay from "../../components/organisms/footerDisplay";
+import CreationTabs from "../../components/layouts/CreationTabs";
function Home({ className }: { className: any }) {
// Get the original save directory
@@ -56,7 +57,8 @@ function Home({ className }: { className: any }) {
diff --git a/ui/frontend/build_src/src/styles/recipes/index.css.ts b/ui/frontend/build_src/src/styles/recipes/index.css.ts
deleted file mode 100644
index ad7ebafb..00000000
--- a/ui/frontend/build_src/src/styles/recipes/index.css.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-
-export const button = recipe({
- variants: {
- color: {
- neutral: { background: "whitesmoke" },
- brand: { background: "blueviolet" },
- accent: { background: "slateblue" },
- },
- size: {
- small: { padding: 12 },
- medium: { padding: 16 },
- large: { padding: 24 },
- },
- },
-});
-
-// export const card = recipe({
-// variants: {
-// color: {
-
-// alt: { background: 'whitesmoke' },
diff --git a/ui/frontend/build_src/src/styles/shared.css.ts b/ui/frontend/build_src/src/styles/shared.css.ts
index ed548e7f..96d47854 100644
--- a/ui/frontend/build_src/src/styles/shared.css.ts
+++ b/ui/frontend/build_src/src/styles/shared.css.ts
@@ -26,13 +26,11 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
//TODO this should probably just be for all li elements
export const SettingItem = style({
marginBottom: vars.spacing.medium,
-
selectors: {
"&:last-of-type": {
marginBottom: vars.spacing.none,
},
},
-
});
diff --git a/ui/frontend/build_src/src/styles/theme/index.css.ts b/ui/frontend/build_src/src/styles/theme/index.css.ts
index 7aee7f2e..bb3c5f12 100644
--- a/ui/frontend/build_src/src/styles/theme/index.css.ts
+++ b/ui/frontend/build_src/src/styles/theme/index.css.ts
@@ -11,6 +11,21 @@ import {
*
* Lots of these arent used yet, but once they are defined and useable then they can be set.
*/
+
+// const SharedColors = {
+
+// pending: null,
+// processing: null,
+// paused: null,
+
+// link: null,
+
+// warning: null,
+// error: null,
+// success: null,
+
+// }
+
const colors = createThemeContract({
brand: null,
brandDimmed: null,
@@ -46,7 +61,13 @@ const colors = createThemeContract({
accentDimmed: null,
},
+ // pending: null,
+ // processing: null,
+ // paused: null,
+
+
link: null,
+
warning: null,
error: null,
success: null,
@@ -80,6 +101,28 @@ const app = createGlobalTheme(":root", {
},
},
colors,
+
+ brandHue: '265',
+ secondaryHue: '54',
+ tertiaryHue: '116',
+
+ errorHue: '0',
+ warningHue: '60',
+ successHue: '120',
+
+ colorMod: {
+ saturation: {
+ normal: "70%",
+ bright: "100%",
+ dim: "30%",
+ },
+ lightness: {
+ normal: "50%",
+ bright: "60%",
+ dim: "40%",
+ },
+ },
+
});
export const darkTheme = createTheme(colors, {