From efc4b92074218c3027bb3d1c4134563be0849f54 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Fri, 25 Oct 2024 12:36:25 -0400 Subject: [PATCH] Rebase fix and move semantic color gen to a function --- airflow/ui/src/pages/DagsList/DagCard.tsx | 118 ++++++++++------------ airflow/ui/src/theme.ts | 27 ++--- 2 files changed, 70 insertions(+), 75 deletions(-) diff --git a/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow/ui/src/pages/DagsList/DagCard.tsx index 41f24493c5f2d..e3b933c8ebb20 100644 --- a/airflow/ui/src/pages/DagsList/DagCard.tsx +++ b/airflow/ui/src/pages/DagsList/DagCard.tsx @@ -26,12 +26,12 @@ import { Tooltip, VStack, Link, - useColorModeValue, } from "@chakra-ui/react"; import { FiCalendar } from "react-icons/fi"; import { Link as RouterLink } from "react-router-dom"; import type { DAGResponse } from "openapi/requests/types.gen"; +import Time from "src/components/Time"; import { TogglePause } from "src/components/TogglePause"; import { DagTags } from "./DagTags"; @@ -40,71 +40,63 @@ type Props = { readonly dag: DAGResponse; }; -export const DagCard = ({ dag }: Props) => { - const cardBorder = useColorModeValue("gray.100", "gray.700"); - - return ( - ( + + - - - - - {dag.dag_display_name} - - - - - - - - - -
- - - Last Run - - - - - Next Run - - {Boolean(dag.next_dagrun) ? ( + + + + {dag.dag_display_name} + + + + + + + + + +
+ + + Last Run + + + + + Next Run + + + + {Boolean(dag.timetable_summary) ? ( + {" "} {" "} {dag.timetable_summary} - ) : undefined} - {Boolean(dag.timetable_summary) ? ( - - - {" "} - {" "} - {dag.timetable_summary} - - - ) : undefined} - -
- - - ); -}; + + ) : undefined} + +
+ + +); diff --git a/airflow/ui/src/theme.ts b/airflow/ui/src/theme.ts index 08e300a9bb4ec..ea6bc39794055 100644 --- a/airflow/ui/src/theme.ts +++ b/airflow/ui/src/theme.ts @@ -52,6 +52,19 @@ const baseStyle = definePartsStyle(() => ({ export const tableTheme = defineMultiStyleConfig({ baseStyle }); +const generateSemanticColors = (color: string) => ({ + /* eslint-disable perfectionist/sort-objects */ + contrast: { _dark: `${color}.200`, _light: `${color}.600` }, + focusRing: `${color}.500`, + fg: { _dark: `${color}.600`, _light: `${color}.400` }, + emphasized: { _dark: `${color}.700`, _light: `${color}.300` }, + solid: { _dark: `${color}.800`, _light: `${color}.200` }, + muted: { _dark: `${color}.900`, _light: `${color}.100` }, + subtle: { _dark: `${color}.950`, _light: `${color}.50` }, + minimal: { _dark: "gray.900", _light: `${color}.50` }, + /* eslint-enable perfectionist/sort-objects */ +}); + const theme = extendTheme({ colors: { blue: { @@ -67,18 +80,8 @@ const theme = extendTheme({ }, semanticTokens: { colors: { - blue: { - /* eslint-disable perfectionist/sort-objects */ - contrast: { _dark: "blue.200", _light: "blue.600" }, - focusRing: "blue.500", - fg: { _dark: "blue.600", _light: "blue.400" }, - emphasized: { _dark: "blue.700", _light: "blue.300" }, - solid: { _dark: "blue.800", _light: "blue.200" }, - muted: { _dark: "blue.900", _light: "blue.100" }, - subtle: { _dark: "blue.950", _light: "blue.50" }, - minimal: { _dark: "gray.900", _light: "blue.50" }, - /* eslint-enable perfectionist/sort-objects */ - }, + blue: generateSemanticColors("blue"), + gray: generateSemanticColors("gray"), }, }, styles: {