From fa5c47151eec1806c8bd65d00b26d4458d5675ac Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 23 May 2024 14:50:10 +0100 Subject: [PATCH 1/8] wip: Editor layout and style updates --- editor.planx.uk/src/components/Header.tsx | 26 ++- .../FlowEditor/components/GlobalMenu.tsx | 105 ++++++++++ .../pages/FlowEditor/components/TeamMenu.tsx | 105 ++++++++++ editor.planx.uk/src/pages/Team.tsx | 181 ++++++++++-------- editor.planx.uk/src/pages/Teams.tsx | 129 +++++++++---- editor.planx.uk/src/routes/authenticated.tsx | 7 +- 6 files changed, 425 insertions(+), 128 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 00f9fc66ed..895afd16c7 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -467,26 +467,32 @@ const EditorToolbar: React.FC<{ )} - + + {user.firstName[0]} {user.lastName[0]} - - + + Account + diff --git a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx new file mode 100644 index 0000000000..a0c1fc781c --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx @@ -0,0 +1,105 @@ +import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; +import TuneIcon from "@mui/icons-material/Tune"; +import ViewListIcon from "@mui/icons-material/ViewList"; +import Box from "@mui/material/Box"; +import IconButton from "@mui/material/IconButton"; +import { styled } from "@mui/material/styles"; +import Typography from "@mui/material/Typography"; +import React from "react"; +import { useCurrentRoute, useNavigation } from "react-navi"; +import { rootFlowPath } from "routes/utils"; +import { FONT_WEIGHT_SEMI_BOLD } from "theme"; + +const MENU_WIDTH = "180px"; + +const Root = styled(Box)(({ theme }) => ({ + width: MENU_WIDTH, + flexShrink: 0, + background: theme.palette.background.paper, + borderRight: `1px solid ${theme.palette.border.main}`, +})); + +const MenuWrap = styled("ul")(({ theme }) => ({ + listStyle: "none", + margin: 0, + padding: theme.spacing(2.5, 0, 0, 0), + position: "sticky", + top: 0, +})); + +const MenuItem = styled("li")(({ theme }) => ({ + margin: theme.spacing(0.75, 0), + padding: 0, +})); + +const MenuTitle = styled(Typography)(({ theme }) => ({ + fontWeight: FONT_WEIGHT_SEMI_BOLD, + paddingLeft: theme.spacing(0.5), + textAlign: "left", +})) as typeof Typography; + +const MenuButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== "isActive", +})<{ isActive: boolean }>(({ theme, isActive }) => ({ + color: theme.palette.primary.main, + width: MENU_WIDTH, + border: "1px solid transparent", + borderRightColor: theme.palette.border.main, + justifyContent: "flex-start", + "&:hover": { + background: "white", + borderTopColor: theme.palette.border.light, + borderBottomColor: theme.palette.border.light, + }, + ...(isActive && { + background: theme.palette.common.white, + color: theme.palette.text.primary, + border: `1px solid ${theme.palette.border.main}`, + borderRightColor: "transparent", + }), +})); + +function GlobalMenu() { + const { navigate } = useNavigation(); + const { url } = useCurrentRoute(); + const rootPath = rootFlowPath(); + + const isActive = (route: string) => url.pathname.endsWith(route); + const handleClick = (route: string) => + !isActive(route) && navigate(rootPath + route); + + const routes = [ + { + title: "Select a team", + Icon: ViewListIcon, + route: "/", + }, + { + title: "Admin panel", + Icon: AdminPanelSettingsIcon, + route: "/admin-panel", + }, + { + title: "Global settings", + Icon: TuneIcon, + route: "/global-settings", + }, + ]; + + return ( + + + {routes.map(({ title, Icon, route }) => ( + handleClick(route)} key={title}> + + + {title} + + + ))} + + + ); +} + +export default GlobalMenu; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx new file mode 100644 index 0000000000..5ef066a09c --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx @@ -0,0 +1,105 @@ +import GroupIcon from "@mui/icons-material/Group"; +import PaletteIcon from "@mui/icons-material/Palette"; +import ViewListIcon from "@mui/icons-material/ViewList"; +import Box from "@mui/material/Box"; +import IconButton from "@mui/material/IconButton"; +import { styled } from "@mui/material/styles"; +import Typography from "@mui/material/Typography"; +import React from "react"; +import { useCurrentRoute, useNavigation } from "react-navi"; +import { rootFlowPath } from "routes/utils"; +import { FONT_WEIGHT_SEMI_BOLD } from "theme"; + +const MENU_WIDTH = "180px"; + +const Root = styled(Box)(({ theme }) => ({ + width: MENU_WIDTH, + flexShrink: 0, + background: theme.palette.background.paper, + borderRight: `1px solid ${theme.palette.border.main}`, +})); + +const MenuWrap = styled("ul")(({ theme }) => ({ + listStyle: "none", + margin: 0, + padding: theme.spacing(2.5, 0, 0, 0), + position: "sticky", + top: 0, +})); + +const MenuItem = styled("li")(({ theme }) => ({ + margin: theme.spacing(0.75, 0), + padding: 0, +})); + +const MenuTitle = styled(Typography)(({ theme }) => ({ + fontWeight: FONT_WEIGHT_SEMI_BOLD, + paddingLeft: theme.spacing(0.5), + textAlign: "left", +})) as typeof Typography; + +const MenuButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== "isActive", +})<{ isActive: boolean }>(({ theme, isActive }) => ({ + color: theme.palette.primary.main, + width: MENU_WIDTH, + border: "1px solid transparent", + borderRightColor: theme.palette.border.main, + justifyContent: "flex-start", + "&:hover": { + background: "white", + borderTopColor: theme.palette.border.light, + borderBottomColor: theme.palette.border.light, + }, + ...(isActive && { + background: theme.palette.common.white, + color: theme.palette.text.primary, + border: `1px solid ${theme.palette.border.main}`, + borderRightColor: "transparent", + }), +})); + +function TeamMenu() { + const { navigate } = useNavigation(); + const { url } = useCurrentRoute(); + const rootPath = rootFlowPath(); + + const isActive = (route: string) => url.pathname.endsWith(route); + const handleClick = (route: string) => + !isActive(route) && navigate(rootPath + route); + + const routes = [ + { + title: "Services", + Icon: ViewListIcon, + route: "/", + }, + { + title: "Team members", + Icon: GroupIcon, + route: "/members", + }, + { + title: "Design", + Icon: PaletteIcon, + route: "/settings/design", + }, + ]; + + return ( + + + {routes.map(({ title, Icon, route }) => ( + handleClick(route)} key={title}> + + + {title} + + + ))} + + + ); +} + +export default TeamMenu; diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx index 0de4b82836..3e59eac9d4 100644 --- a/editor.planx.uk/src/pages/Team.tsx +++ b/editor.planx.uk/src/pages/Team.tsx @@ -1,10 +1,11 @@ import { gql } from "@apollo/client"; -import Add from "@mui/icons-material/Add"; +import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline"; import Edit from "@mui/icons-material/Edit"; import Visibility from "@mui/icons-material/Visibility"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import ButtonBase from "@mui/material/ButtonBase"; +import Container from "@mui/material/Container"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; @@ -12,6 +13,8 @@ import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; +import { HEADER_HEIGHT } from "components/Header"; +import formatDistanceToNow from "date-fns/formatDistanceToNow"; import orderBy from "lodash/orderBy"; import React, { useCallback, useEffect, useState } from "react"; import { Link, useNavigation } from "react-navi"; @@ -20,25 +23,29 @@ import { slugify } from "utils"; import { client } from "../lib/graphql"; import SimpleMenu from "../ui/editor/SimpleMenu"; +import TeamMenu from "./FlowEditor/components/TeamMenu"; import { useStore } from "./FlowEditor/lib/store"; import { formatLastEditMessage } from "./FlowEditor/utils"; +interface TeamTheme { + slug: string; + primaryColour: string; +} + const Root = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.dark, - color: "#fff", + backgroundColor: theme.palette.background.default, width: "100%", - flex: 1, + display: "flex", justifyContent: "flex-start", - alignItems: "center", + alignItems: "flex-start", + flexGrow: 1, })); -const Dashboard = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.dark, - color: "#fff", +const Dashboard = styled(Box)(() => ({ width: "100%", - maxWidth: 600, - margin: "auto", - padding: theme.spacing(8, 0, 4, 0), + display: "flex", + flexDirection: "row", + minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, })); const DashboardList = styled("ul")(({ theme }) => ({ @@ -50,7 +57,12 @@ const DashboardList = styled("ul")(({ theme }) => ({ const DashboardListItem = styled("li")(({ theme }) => ({ listStyle: "none", position: "relative", - padding: theme.spacing(2.5, 2), + color: theme.palette.common.white, + margin: theme.spacing(1.5, 0), + background: theme.palette.text.primary, + display: "flex", + justifyContent: "space-between", + alignItems: "stretch", })); const DashboardLink = styled(Link)(({ theme }) => ({ @@ -60,20 +72,19 @@ const DashboardLink = styled(Link)(({ theme }) => ({ color: "currentColor", fontWeight: FONT_WEIGHT_SEMI_BOLD, marginBottom: theme.spacing(1.5), - marginTop: 0, + padding: theme.spacing(2), + margin: 0, })); const StyledSimpleMenu = styled(SimpleMenu)(({ theme }) => ({ - position: "absolute", - top: theme.spacing(2), - right: theme.spacing(1), + display: "flex", + borderLeft: `1px solid ${theme.palette.border.main}`, })); const LinkSubText = styled(Box)(() => ({ color: "#aaa", - "& a": { - color: "#fff", - }, + fontWeight: "normal", + paddingTop: "0.5em", })); const Confirm = ({ @@ -113,13 +124,12 @@ const Confirm = ({ ); const AddButtonRoot = styled(ButtonBase)(({ theme }) => ({ - width: "100%", - padding: theme.spacing(4), fontSize: 20, - backgroundColor: "rgba(255,255,255,0.25)", - display: "block", + display: "flex", + alignItems: "center", textAlign: "left", - marginTop: theme.spacing(2), + color: theme.palette.primary.main, + fontWeight: FONT_WEIGHT_SEMI_BOLD, })); function AddButton({ @@ -131,7 +141,7 @@ function AddButton({ }): FCReturn { return ( - {children} + {children} ); } @@ -191,17 +201,15 @@ const FlowItem: React.FC = ({ /> )} - - - {flow.slug} - + + {flow.slug} {formatLastEditMessage( flow.operations[0].createdAt, flow.operations[0]?.actor, )} - + {useStore.getState().canUserEditTeam(teamSlug) && ( { return ( - - - My services - - {useStore.getState().canUserEditTeam(slug) ? ( - - ) : ( - - )} - - {useStore.getState().canUserEditTeam(slug) && ( - { - const newFlowName = prompt("Service name"); - if (newFlowName) { - const newFlowSlug = slugify(newFlowName); - useStore - .getState() - .createFlow(teamId, newFlowSlug) - .then((newId: string) => { - navigation.navigate(`/${slug}/${newId}`); - }); - } - }} - > - Add a new service - - )} - {flows && ( - - {flows.map((flow: any) => ( - { - fetchFlows(); + + + + + - ))} - - )} + > + + Services + + {useStore.getState().canUserEditTeam(slug) ? ( + + ) : ( + + )} + + {useStore.getState().canUserEditTeam(slug) && ( + { + const newFlowName = prompt("Service name"); + if (newFlowName) { + const newFlowSlug = slugify(newFlowName); + useStore + .getState() + .createFlow(teamId, newFlowSlug) + .then((newId: string) => { + navigation.navigate(`/${slug}/${newId}`); + }); + } + }} + > + Add a new service + + )} + + {flows && ( + + {flows.map((flow: any) => ( + { + fetchFlows(); + }} + /> + ))} + + )} + + ); diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx index ea11e0d1b1..77d54ca3f2 100644 --- a/editor.planx.uk/src/pages/Teams.tsx +++ b/editor.planx.uk/src/pages/Teams.tsx @@ -1,71 +1,126 @@ -import Edit from "@mui/icons-material/Edit"; -import Visibility from "@mui/icons-material/Visibility"; import Box from "@mui/material/Box"; import Card from "@mui/material/Card"; +import Container from "@mui/material/Container"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { Team } from "@opensystemslab/planx-core/types"; +import { HEADER_HEIGHT } from "components/Header"; +import GlobalMenu from "pages/FlowEditor/components/GlobalMenu"; import React from "react"; import { Link } from "react-navi"; import { useStore } from "./FlowEditor/lib/store"; +interface TeamTheme { + slug: string; + primaryColour: string; + logo: string; +} + interface Props { teams: Array; + teamTheme: Array; } const Root = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.dark, - color: "#fff", + backgroundColor: theme.palette.background.default, width: "100%", flex: 1, justifyContent: "flex-start", alignItems: "center", })); -const Dashboard = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.dark, - color: "#fff", +const Dashboard = styled(Box)(() => ({ width: "100%", - maxWidth: 600, - margin: "auto", - padding: theme.spacing(8, 0, 4, 0), + display: "flex", + flexDirection: "row", + minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, })); const StyledLink = styled(Link)(() => ({ textDecoration: "none", })); -const Teams: React.FC = ({ teams }) => { +const LogoWrap = styled(Box)(() => ({ + width: "90px", + height: "50px", + display: "flex", + justifyContent: "center", + alignItems: "center", +})); + +const TeamLogo = styled("img")(() => ({ + width: "100%", + height: "100%", + objectFit: "contain", +})); + +const Teams: React.FC = ({ teams, teamTheme }) => { + const canUserEditTeam = useStore.getState().canUserEditTeam; + + const editableTeams = teams.filter((team) => canUserEditTeam(team.slug)); + const viewOnlyTeams = teams.filter((team) => !canUserEditTeam(team.slug)); + + const renderTeams = (teamsToRender: Array) => + teamsToRender.map(({ name, slug }) => { + const theme = teamTheme.find((t) => t.slug === slug); + const primaryColour = theme ? theme.primaryColour : "#000"; + const logo = theme ? theme.logo : ""; + + return ( + + + + {name} + + + {logo && } + + + + ); + }); + return ( - - - Select a team - - - {teams.map(({ name, slug }) => ( - - - - {name} - - {useStore.getState().canUserEditTeam(slug) ? ( - - ) : ( - - )} - - - ))} + + + + + Select a team + + {editableTeams.length > 0 && ( + <> + + My teams + + {renderTeams(editableTeams)} + + )} + + {viewOnlyTeams.length > 0 && ( + <> + + Other teams (view only) + + {renderTeams(viewOnlyTeams)} + + )} + + ); diff --git a/editor.planx.uk/src/routes/authenticated.tsx b/editor.planx.uk/src/routes/authenticated.tsx index 659b907d79..0a78075977 100644 --- a/editor.planx.uk/src/routes/authenticated.tsx +++ b/editor.planx.uk/src/routes/authenticated.tsx @@ -31,6 +31,11 @@ const editorRoutes = compose( name slug } + teamThemes: teams_summary { + slug + primaryColour: primary_colour + logo + } } `, }); @@ -39,7 +44,7 @@ const editorRoutes = compose( return { title: makeTitle("Teams"), - view: , + view: , }; }), From d669a4eb312a21d9ef7337aa4188497c27b1eb90 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 23 May 2024 15:11:17 +0100 Subject: [PATCH 2/8] fix: tests --- e2e/tests/ui-driven/src/login.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/tests/ui-driven/src/login.spec.ts b/e2e/tests/ui-driven/src/login.spec.ts index ea7df20615..e686c0700b 100644 --- a/e2e/tests/ui-driven/src/login.spec.ts +++ b/e2e/tests/ui-driven/src/login.spec.ts @@ -67,7 +67,7 @@ test.describe("Login", () => { route.continue(); }); await expect( - page.locator("h1").filter({ hasText: "My services" }), + page.locator("h1").filter({ hasText: "Services" }), ).toBeVisible(); await expect(page.getByText(toastText)).toBeHidden(); }); From e49c9d06bb82ad7dd0a523ca215f16bc8ab7caa5 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 23 May 2024 15:16:37 +0100 Subject: [PATCH 3/8] fix: link width --- editor.planx.uk/src/pages/Team.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx index 3e59eac9d4..f9fb43ef75 100644 --- a/editor.planx.uk/src/pages/Team.tsx +++ b/editor.planx.uk/src/pages/Team.tsx @@ -71,9 +71,9 @@ const DashboardLink = styled(Link)(({ theme }) => ({ textDecoration: "none", color: "currentColor", fontWeight: FONT_WEIGHT_SEMI_BOLD, - marginBottom: theme.spacing(1.5), padding: theme.spacing(2), margin: 0, + width: "100%", })); const StyledSimpleMenu = styled(SimpleMenu)(({ theme }) => ({ From e71c466aa0e22fb616d6fbfac2b99525577f5dbc Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 23 May 2024 18:32:43 +0100 Subject: [PATCH 4/8] wip: Menu settings --- .../FlowEditor/components/GlobalMenu.tsx | 4 +- .../components/Team/TeamMembers.tsx | 76 ++++++++++--------- .../src/pages/PlatformAdminPanel.tsx | 40 +++++++--- editor.planx.uk/src/pages/Team.tsx | 5 -- editor.planx.uk/src/pages/Teams.tsx | 13 ++-- 5 files changed, 80 insertions(+), 58 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx index a0c1fc781c..d5ee8f1188 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx @@ -77,12 +77,12 @@ function GlobalMenu() { { title: "Admin panel", Icon: AdminPanelSettingsIcon, - route: "/admin-panel", + route: "admin-panel", }, { title: "Global settings", Icon: TuneIcon, - route: "/global-settings", + route: "global-settings", }, ]; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx index f1fe300a82..dc02490d2a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -11,10 +11,13 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Typography from "@mui/material/Typography"; import { Role, User } from "@opensystemslab/planx-core/types"; +import { Dashboard, DashboardWrap } from "pages/Teams"; import React from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import EditorRow from "ui/editor/EditorRow"; +import TeamMenu from "../TeamMenu"; + const StyledAvatar = styled(Avatar)(({ theme }) => ({ background: theme.palette.background.dark, color: theme.palette.common.white, @@ -127,39 +130,44 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { ); return ( - - - - - Team editors - - - Editors have access to edit your services. - - - - - - Admins - - - Admins have editor access across all teams. - - - - {archivedMembers.length > 0 && ( - - - Archived team editors - - - Past team members who no longer have access to the Editor, but may - be part of the edit history of your services. - - - - )} - - + + + + + + + + Team editors + + + Editors have access to edit your services. + + + + + + Admins + + + Admins have editor access across all teams. + + + + {archivedMembers.length > 0 && ( + + + Archived team editors + + + Past team members who no longer have access to the Editor, but + may be part of the edit history of your services. + + + + )} + + + + ); }; diff --git a/editor.planx.uk/src/pages/PlatformAdminPanel.tsx b/editor.planx.uk/src/pages/PlatformAdminPanel.tsx index 30fcd5456b..a95f78d172 100644 --- a/editor.planx.uk/src/pages/PlatformAdminPanel.tsx +++ b/editor.planx.uk/src/pages/PlatformAdminPanel.tsx @@ -4,11 +4,14 @@ import Accordion from "@mui/material/Accordion"; import AccordionDetails from "@mui/material/AccordionDetails"; import AccordionSummary from "@mui/material/AccordionSummary"; import Box from "@mui/material/Box"; +import Container from "@mui/material/Container"; import Grid from "@mui/material/Grid"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList"; +import GlobalMenu from "pages/FlowEditor/components/GlobalMenu"; import { useStore } from "pages/FlowEditor/lib/store"; +import { Dashboard, DashboardWrap } from "pages/Teams"; import React from "react"; import useSWR from "swr"; import { AdminPanelData } from "types"; @@ -34,15 +37,24 @@ function Component() { const adminPanelData = useStore((state) => state.adminPanelData); return ( - - Platform Admin Panel - - {`This is an overview of each team's integrations and settings for the `} - {process.env.REACT_APP_ENV} - {` environment`} - - {adminPanelData?.map((team) => )} - + + + + + + Platform Admin Panel + + {`This is an overview of each team's integrations and settings for the `} + {process.env.REACT_APP_ENV} + {` environment`} + + {adminPanelData?.map((team) => ( + + ))} + + + + ); } @@ -58,7 +70,7 @@ const TeamData: React.FC = ({ data }) => { const a4Endpoint = `${process.env.REACT_APP_API_URL}/gis/${data.slug}/article4-schema`; const fetcher = (url: string) => fetch(url).then((r) => r.json()); const { data: a4Check, isValidating } = useSWR( - () => data.slug ? a4Endpoint : null, + () => (data.slug ? a4Endpoint : null), fetcher, ); @@ -123,7 +135,13 @@ const TeamData: React.FC = ({ data }) => { <> {"Article 4s (API)"} - {!isValidating && a4Check?.status ? : } + + {!isValidating && a4Check?.status ? ( + + ) : ( + + )} + <> {"Reference code"} diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx index f9fb43ef75..03c3f42743 100644 --- a/editor.planx.uk/src/pages/Team.tsx +++ b/editor.planx.uk/src/pages/Team.tsx @@ -27,11 +27,6 @@ import TeamMenu from "./FlowEditor/components/TeamMenu"; import { useStore } from "./FlowEditor/lib/store"; import { formatLastEditMessage } from "./FlowEditor/utils"; -interface TeamTheme { - slug: string; - primaryColour: string; -} - const Root = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.default, width: "100%", diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx index 77d54ca3f2..f435910eaa 100644 --- a/editor.planx.uk/src/pages/Teams.tsx +++ b/editor.planx.uk/src/pages/Teams.tsx @@ -22,15 +22,16 @@ interface Props { teamTheme: Array; } -const Root = styled(Box)(({ theme }) => ({ +export const DashboardWrap = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.default, width: "100%", - flex: 1, + display: "flex", justifyContent: "flex-start", - alignItems: "center", + alignItems: "flex-start", })); -const Dashboard = styled(Box)(() => ({ +export const Dashboard = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, width: "100%", display: "flex", flexDirection: "row", @@ -94,7 +95,7 @@ const Teams: React.FC = ({ teams, teamTheme }) => { }); return ( - + @@ -122,7 +123,7 @@ const Teams: React.FC = ({ teams, teamTheme }) => { - + ); }; From 301fee678ed36e63e3344ef6e6b33ace1176b89c Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 24 May 2024 17:19:52 +0100 Subject: [PATCH 5/8] feat: Editor breadcrumb link style --- editor.planx.uk/src/components/Header.tsx | 30 +++++++++++------------ 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 895afd16c7..e416a67f1c 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -48,8 +48,8 @@ import TestEnvironmentBanner from "./TestEnvironmentBanner"; export const HEADER_HEIGHT = 74; -const Root = styled(AppBar)(() => ({ - color: "#fff", +const Root = styled(AppBar)(({ theme }) => ({ + color: theme.palette.common.white, })); const BreadcrumbsRoot = styled(Box)(() => ({ @@ -60,6 +60,12 @@ const BreadcrumbsRoot = styled(Box)(() => ({ alignItems: "center", })); +const BreadcrumbsLink = styled(Link)(({ theme }) => ({ + color: theme.palette.common.white, + textDecoration: "none", + borderBottom: "1px solid currentColor", +})) as typeof Link; + const StyledToolbar = styled(MuiToolbar)(() => ({ height: HEADER_HEIGHT, })); @@ -103,7 +109,7 @@ const StyledPopover = styled(Popover)(({ theme }) => ({ const StyledPaper = styled(Paper)(({ theme }) => ({ backgroundColor: theme.palette.background.dark, - color: "#fff", + color: theme.palette.common.white, borderRadius: 0, boxShadow: "none", minWidth: 180, @@ -131,7 +137,7 @@ const SkipLink = styled("a")(({ theme }) => ({ width: "100vw", height: HEADER_HEIGHT / 2, backgroundColor: theme.palette.background.dark, - color: "#fff", + color: theme.palette.common.white, textDecoration: "underline", padding: theme.spacing(1), paddingLeft: theme.spacing(3), @@ -203,33 +209,25 @@ const Breadcrumbs: React.FC = () => { return ( - Planâś• - + {team.slug && ( <> {" / "} - {team.slug} - + )} {route.data.flow && ( From b7bcaaa68309c6d0a18ddafc708c1b03e2196420 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 30 May 2024 10:37:50 +0100 Subject: [PATCH 6/8] feat: Simplify nav menus --- .../FlowEditor/components/EditorMenu.tsx | 20 +++++++++---------- .../FlowEditor/components/GlobalMenu.tsx | 18 ++++++++--------- .../pages/FlowEditor/components/TeamMenu.tsx | 18 ++++++++--------- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index e99fb24bd9..12e8e58fcc 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -11,19 +11,19 @@ import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import EditorIcon from "ui/icons/Editor"; -const MENU_WIDTH = "46px"; +const MENU_WIDTH = "54px"; const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.light}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(4, 0, 0, 0), + padding: theme.spacing(4, 0.5, 0, 0.5), })); const MenuItem = styled("li")(({ theme }) => ({ @@ -49,21 +49,19 @@ const TooltipWrap = styled(({ className, ...props }: TooltipProps) => ( const MenuButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "isActive", })<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, - height: MENU_WIDTH, + color: theme.palette.text.primary, + width: "100%", border: "1px solid transparent", - borderRightColor: theme.palette.border.main, + justifyContent: "flex-start", + borderRadius: "3px", "&:hover": { background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, + borderColor: theme.palette.border.light, }, ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", + border: `1px solid ${theme.palette.border.light}`, }), })); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx index d5ee8f1188..59f217ba28 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx @@ -10,19 +10,19 @@ import { useCurrentRoute, useNavigation } from "react-navi"; import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -const MENU_WIDTH = "180px"; +const MENU_WIDTH = "185px"; const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.light}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(2.5, 0, 0, 0), + padding: theme.spacing(2.5, 0.5, 0, 0.5), position: "sticky", top: 0, })); @@ -41,21 +41,19 @@ const MenuTitle = styled(Typography)(({ theme }) => ({ const MenuButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "isActive", })<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, + color: theme.palette.text.primary, + width: "100%", border: "1px solid transparent", - borderRightColor: theme.palette.border.main, justifyContent: "flex-start", + borderRadius: "3px", "&:hover": { background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, + borderColor: theme.palette.border.light, }, ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", + border: `1px solid ${theme.palette.border.light}`, }), })); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx index 5ef066a09c..b7864161db 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx @@ -10,19 +10,19 @@ import { useCurrentRoute, useNavigation } from "react-navi"; import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -const MENU_WIDTH = "180px"; +const MENU_WIDTH = "185px"; const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.light}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(2.5, 0, 0, 0), + padding: theme.spacing(2.5, 0.5, 0, 0.5), position: "sticky", top: 0, })); @@ -41,21 +41,19 @@ const MenuTitle = styled(Typography)(({ theme }) => ({ const MenuButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "isActive", })<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, + color: theme.palette.text.primary, + width: "100%", border: "1px solid transparent", - borderRightColor: theme.palette.border.main, justifyContent: "flex-start", + borderRadius: "3px", "&:hover": { background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, + borderColor: theme.palette.border.light, }, ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", + border: `1px solid ${theme.palette.border.light}`, }), })); From 3a12aecc4bec5a050febc3a0800129a252f9e462 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 11 Jun 2024 11:10:40 +0100 Subject: [PATCH 7/8] feat: Updated team card styling, menu icons --- .../FlowEditor/components/GlobalMenu.tsx | 9 ++-- .../pages/FlowEditor/components/TeamMenu.tsx | 3 ++ editor.planx.uk/src/pages/Team.tsx | 2 - editor.planx.uk/src/pages/Teams.tsx | 44 +++++++------------ 4 files changed, 25 insertions(+), 33 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx index 59f217ba28..372e706717 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx @@ -1,6 +1,6 @@ import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; +import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import TuneIcon from "@mui/icons-material/Tune"; -import ViewListIcon from "@mui/icons-material/ViewList"; import Box from "@mui/material/Box"; import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; @@ -34,7 +34,7 @@ const MenuItem = styled("li")(({ theme }) => ({ const MenuTitle = styled(Typography)(({ theme }) => ({ fontWeight: FONT_WEIGHT_SEMI_BOLD, - paddingLeft: theme.spacing(0.5), + paddingLeft: theme.spacing(0.75), textAlign: "left", })) as typeof Typography; @@ -55,6 +55,9 @@ const MenuButton = styled(IconButton, { color: theme.palette.text.primary, border: `1px solid ${theme.palette.border.light}`, }), + "& > svg": { + width: "20px", + }, })); function GlobalMenu() { @@ -69,7 +72,7 @@ function GlobalMenu() { const routes = [ { title: "Select a team", - Icon: ViewListIcon, + Icon: FormatListBulletedIcon, route: "/", }, { diff --git a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx index b7864161db..21bc922923 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx @@ -55,6 +55,9 @@ const MenuButton = styled(IconButton, { color: theme.palette.text.primary, border: `1px solid ${theme.palette.border.light}`, }), + "& > svg": { + width: "20px", + }, })); function TeamMenu() { diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx index 03c3f42743..24d46c5199 100644 --- a/editor.planx.uk/src/pages/Team.tsx +++ b/editor.planx.uk/src/pages/Team.tsx @@ -14,8 +14,6 @@ import DialogTitle from "@mui/material/DialogTitle"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { HEADER_HEIGHT } from "components/Header"; -import formatDistanceToNow from "date-fns/formatDistanceToNow"; -import orderBy from "lodash/orderBy"; import React, { useCallback, useEffect, useState } from "react"; import { Link, useNavigation } from "react-navi"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx index f435910eaa..60013dd9d7 100644 --- a/editor.planx.uk/src/pages/Teams.tsx +++ b/editor.planx.uk/src/pages/Teams.tsx @@ -14,7 +14,6 @@ import { useStore } from "./FlowEditor/lib/store"; interface TeamTheme { slug: string; primaryColour: string; - logo: string; } interface Props { @@ -42,18 +41,22 @@ const StyledLink = styled(Link)(() => ({ textDecoration: "none", })); -const LogoWrap = styled(Box)(() => ({ - width: "90px", - height: "50px", +const TeamCard = styled(Card)(({ theme }) => ({ display: "flex", - justifyContent: "center", + justifyContent: "flex-start", alignItems: "center", + marginBottom: theme.spacing(2), + color: theme.palette.text.primary, + outline: `1px solid ${theme.palette.border.light}`, + outlineOffset: "-1px", + borderRadius: "1px", })); -const TeamLogo = styled("img")(() => ({ - width: "100%", - height: "100%", - objectFit: "contain", +const TeamColourBand = styled(Box)(({ theme }) => ({ + display: "flex", + alignSelf: "stretch", + width: theme.spacing(1.5), + zIndex: 1, })); const Teams: React.FC = ({ teams, teamTheme }) => { @@ -66,30 +69,15 @@ const Teams: React.FC = ({ teams, teamTheme }) => { teamsToRender.map(({ name, slug }) => { const theme = teamTheme.find((t) => t.slug === slug); const primaryColour = theme ? theme.primaryColour : "#000"; - const logo = theme ? theme.logo : ""; return ( - - + + + {name} - - {logo && } - - + ); }); From 054bbe37e6b507825e63c0760b45fde25d1aa0c9 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 11 Jun 2024 11:12:58 +0100 Subject: [PATCH 8/8] feat: Update icons --- editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx index 21bc922923..d274538456 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx @@ -1,6 +1,6 @@ +import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import GroupIcon from "@mui/icons-material/Group"; import PaletteIcon from "@mui/icons-material/Palette"; -import ViewListIcon from "@mui/icons-material/ViewList"; import Box from "@mui/material/Box"; import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; @@ -72,7 +72,7 @@ function TeamMenu() { const routes = [ { title: "Services", - Icon: ViewListIcon, + Icon: FormatListBulletedIcon, route: "/", }, {