From aad2b5b2b6b0dae4780bf70317743c7733b3415f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 8 Oct 2024 14:17:19 +0100 Subject: [PATCH] feat: Setup colours via theme --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 10 ++++---- .../components/Flow/components/Tag.tsx | 25 +++++++++++-------- editor.planx.uk/src/theme.ts | 5 ++++ editor.planx.uk/src/themeOverrides.d.ts | 2 ++ .../src/ui/editor/ComponentTagSelect.tsx | 11 +++++--- 6 files changed, 35 insertions(+), 20 deletions(-) diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 1cc088f1af..c88562c7d1 100644 --- a/editor.planx.uk/package.json +++ b/editor.planx.uk/package.json @@ -15,7 +15,7 @@ "@mui/material": "^5.15.10", "@mui/utils": "^5.15.11", "@opensystemslab/map": "1.0.0-alpha.3", - "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c19c3be", + "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#0ade7fa", "@tiptap/core": "^2.4.0", "@tiptap/extension-bold": "^2.0.3", "@tiptap/extension-bubble-menu": "^2.1.13", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index b08089cf79..c49a588d06 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -47,8 +47,8 @@ dependencies: specifier: 1.0.0-alpha.3 version: 1.0.0-alpha.3 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#c19c3be - version: github.com/theopensystemslab/planx-core/c19c3be(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#0ade7fa + version: github.com/theopensystemslab/planx-core/0ade7fa(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) @@ -15353,9 +15353,9 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false - github.com/theopensystemslab/planx-core/c19c3be(@types/react@18.2.45): - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/c19c3be} - id: github.com/theopensystemslab/planx-core/c19c3be + github.com/theopensystemslab/planx-core/0ade7fa(@types/react@18.2.45): + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/0ade7fa} + id: github.com/theopensystemslab/planx-core/0ade7fa name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index cf765d4514..a11ad5324e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -1,4 +1,5 @@ import Box from "@mui/material/Box"; +import { PaletteOptions, useTheme } from "@mui/material/styles"; import { NodeTag } from "@opensystemslab/planx-core/types"; import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; @@ -7,38 +8,42 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme"; export const TAG_DISPLAY_VALUES: Record< NodeTag, - { color: string; displayName: string } + { color: keyof PaletteOptions["nodeTag"]; displayName: string } > = { placeholder: { - color: "#FAE1B7", + color: "blocking", displayName: "Placeholder", }, - "to review": { - color: "#E9EDC9", + toReview: { + color: "nonBlocking", displayName: "To review", }, - "sensitive data": { - color: "#F4978E", + sensitiveData: { + color: "information", displayName: "Sensitive data", }, analytics: { - color: "#E9EDC9", + color: "information", displayName: "Analytics", }, automation: { - color: "#E9EDC9", + color: "information", displayName: "Automation", }, } as const; export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => { + const theme = useTheme(); + const showTags = useStore((state) => state.showTags); if (!showTags) return null; + const tagBgColor = theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color]; + return ( ({ - bgcolor: TAG_DISPLAY_VALUES[tag].color, + bgcolor: tagBgColor, borderColor: theme.palette.common.black, borderWidth: "0 1px 1px 1px", borderStyle: "solid", @@ -46,7 +51,7 @@ export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => { p: 0.5, textAlign: "center", fontWeight: FONT_WEIGHT_SEMI_BOLD, - color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"), + color: getContrastTextColor(tagBgColor, "#FFF"), })} > {TAG_DISPLAY_VALUES[tag].displayName} diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts index 088d927808..b0c6534f37 100644 --- a/editor.planx.uk/src/theme.ts +++ b/editor.planx.uk/src/theme.ts @@ -76,6 +76,11 @@ const DEFAULT_PALETTE: Partial = { input: "#0B0C0C", light: "#E0E0E0", }, + nodeTag: { + blocking: "#F4978E", + nonBlocking: "#B7FAD7", + information: "#FAE1B7", + }, tonalOffset: DEFAULT_TONAL_OFFSET, }; diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts index 7dc5f5b35c..9afa697bb7 100644 --- a/editor.planx.uk/src/themeOverrides.d.ts +++ b/editor.planx.uk/src/themeOverrides.d.ts @@ -32,6 +32,7 @@ declare module "@mui/material/styles/createPalette" { border: { main: string; input: string; light: string }; link: { main: string }; prompt: { main: string; contrastText: string; light: string; dark: string }; + nodeTag: { nonBlocking: string; blocking: string; information: string }; } interface PaletteOptions { @@ -43,6 +44,7 @@ declare module "@mui/material/styles/createPalette" { light: string; dark: string; }; + nodeTag?: { nonBlocking: string; blocking: string; information: string }; } interface TypeText { diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index 279e4e36ab..d055481444 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -41,10 +41,13 @@ const renderTags: AutocompleteProps< {...getTagProps({ index })} key={tag} label={TAG_DISPLAY_VALUES[tag].displayName} - sx={{ - backgroundColor: TAG_DISPLAY_VALUES[tag].color, - color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"), - }} + sx={(theme) => ({ + backgroundColor: theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], + color: getContrastTextColor( + theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], + "#FFF", + ), + })} /> ));