From 9facc9379ff1a49e8530d47ae0fee6e80cf30e52 Mon Sep 17 00:00:00 2001 From: caranicas Date: Fri, 30 Sep 2022 14:52:21 -0400 Subject: [PATCH] getting the cards and tabs sorted out --- .../src/components/_recipes/card.css.ts | 13 +++-- .../components/_recipes/tabs_headless.css.ts | 49 +++++++++++++++++++ .../components/layouts/CreationTabs/index.tsx | 42 +++++++++++++--- .../build_src/src/pages/Home/home.css.ts | 10 ++-- .../build_src/src/styles/theme/index.css.ts | 36 +++----------- 5 files changed, 104 insertions(+), 46 deletions(-) diff --git a/ui/frontend/build_src/src/components/_recipes/card.css.ts b/ui/frontend/build_src/src/components/_recipes/card.css.ts index 07814460..9522a882 100644 --- a/ui/frontend/build_src/src/components/_recipes/card.css.ts +++ b/ui/frontend/build_src/src/components/_recipes/card.css.ts @@ -3,10 +3,9 @@ import { vars } from "../../styles/theme/index.css"; export const card = recipe({ base: { - // background: vars.colors.background, color: vars.colors.text.normal, padding: vars.spacing.medium, - borderRadius: vars.trim.smallBorderRadius, + }, variants: { @@ -22,7 +21,14 @@ export const card = recipe({ }, }, + rounded: { + true: { + borderRadius: vars.trim.smallBorderRadius, + }, + }, + level: { + flat: {}, 1: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" }, 2: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" }, 3: { boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)" }, @@ -30,7 +36,8 @@ export const card = recipe({ }, defaultVariants: { baking: "light", - level: 1, + level: 'flat', + rounded: true, }, }); diff --git a/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts b/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts index e69de29b..f4ebd6bf 100644 --- a/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts +++ b/ui/frontend/build_src/src/components/_recipes/tabs_headless.css.ts @@ -0,0 +1,49 @@ +import { style } from '@vanilla-extract/css'; +import { recipe } from "@vanilla-extract/recipes"; +import { vars } from "../../styles/theme/index.css"; + +export const tabStyles = recipe({ + base: { + background: vars.backgroundMain, + color: vars.colors.text.normal, + padding: vars.spacing.small, + borderRadius: `${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius} 0 0`, + border: `1px solid ${vars.backgroundLight}`, + borderBottom: 'none', + marginLeft: vars.spacing.small, + boxShadow: `0px -1px 4px -2px ${vars.backgroundAccentMain}`, + }, + + variants: { + selected: { + true: { + background: vars.backgroundLight, + color: vars.colors.text.normal, + } + } + } +}); + +export const tabPanelStyles = recipe({ + base: { + color: vars.colors.text.normal, + borderRadius: `0 0 ${vars.trim.smallBorderRadius} ${vars.trim.smallBorderRadius}`, + background: vars.backgroundLight, + padding: vars.spacing.medium, + }, + variants: { + + baking: { + normal: { + background: vars.backgroundMain, + }, + light: { + background: vars.backgroundLight, + }, + dark: { + background: vars.backgroundDark, + }, + }, + }, +}); + diff --git a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx b/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx index 39d62eca..3b68d593 100644 --- a/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx +++ b/ui/frontend/build_src/src/components/layouts/CreationTabs/index.tsx @@ -1,6 +1,5 @@ -import React from "react"; +import React, { Fragment } from "react"; import { Tab } from '@headlessui/react'; - import CreationPanel from "../../organisms/creationPanel"; import QueueDisplay from "../../organisms/queueDisplay"; @@ -8,21 +7,50 @@ import { CreationTabsMain } from "./creationTabs.css"; +import { + tabPanelStyles, + tabStyles, +} from "../../_recipes/tabs_headless.css"; + import { card as cardStyle } from "../../_recipes/card.css"; + + export default function CreationTabs() { return ( - Create - Queue + + {({ selected }) => ( + + )} + + + + {({ selected }) => ( + + + )} + + + - + 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 bfc5cf37..36ae7181 100644 --- a/ui/frontend/build_src/src/pages/Home/home.css.ts +++ b/ui/frontend/build_src/src/pages/Home/home.css.ts @@ -3,12 +3,12 @@ import { vars } from "../../styles/theme/index.css"; export const AppLayout = style({ position: "relative", - backgroundColor: vars.colors.background, + width: "100%", height: "100%", pointerEvents: "auto", display: "grid", - // backgroundColor: "rgb(32, 33, 36)", + backgroundColor: vars.backgroundMain, gridTemplateColumns: "400px 1fr", gridTemplateRows: "100px 1fr 115px", gridTemplateAreas: ` @@ -42,13 +42,9 @@ export const CreateLayout = style({ flexDirection: "column", overflowY: "auto", overflowX: "hidden", + padding: `0 ${vars.spacing.small}`, }); -// globalStyle(`${CreateLayout}`, { - - - -// } export const DisplayLayout = style({ gridArea: "display", 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 d0fdbb1f..064cafaa 100644 --- a/ui/frontend/build_src/src/styles/theme/index.css.ts +++ b/ui/frontend/build_src/src/styles/theme/index.css.ts @@ -4,27 +4,6 @@ import { createTheme, } from "@vanilla-extract/css"; -/** - * Colors are all the same across the themes, this is just to set up a contract - * Colors can be decided later. I am just the architect. - * Tried to pull things from the original app. - * - * 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, @@ -61,11 +40,6 @@ const colors = createThemeContract({ accentDimmed: null, }, - // pending: null, - // processing: null, - // paused: null, - - link: null, warning: null, @@ -102,9 +76,6 @@ const app = createGlobalTheme(":root", { }, colors, - backgroundMain: 'hsl(0, 0%, 30%)', - backgroundLight: 'hsl(0, 0%, 50%)', - backgroundDark: 'hsl(0, 0%, 20%)', brandHue: '265', secondaryHue: '54', @@ -127,6 +98,13 @@ const app = createGlobalTheme(":root", { }, }, + backgroundMain: 'hsl(225, 6%, 13%)', + backgroundLight: 'hsl(225, 4%, 18%)', + backgroundDark: 'hsl(225, 3%, 7%)', + + backgroundAccentMain: 'hsl(225, 6%, 30%)', + + }); export const darkTheme = createTheme(colors, {