From 077524f4505216abd114b24e6bfe8efa07fe7c69 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Mon, 10 Jun 2024 16:38:09 -0700 Subject: [PATCH 01/14] Adding card styling for docs Wizards --- packages/app/src/devex-theme.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index f861ddc..9be4370 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -6,6 +6,8 @@ import { lightTheme, pageTheme as defaultPageThemes, PageTheme, + genPageTheme, + shapes, } from '@backstage/theme'; import { alpha } from '@material-ui/core/styles'; @@ -93,7 +95,13 @@ const baseTheme = createTheme({ }, }, fontFamily: 'BCSans, Noto Sans, Roboto, sans-serif', - pageTheme: pageThemesFontColorOverride, + pageTheme: { + ...pageThemesFontColorOverride, + documentation: genPageTheme({ + colors: ['#013366', '#7AB8F9'], + shape: shapes.round, + }) + }, defaultPageTheme: 'home', }); @@ -246,6 +254,11 @@ const createCustomThemeOverrides = ( '& svg': { color: theme.palette.grey[50], }, + '& button[aria-label="favorite"]': { + '& svg': { + color: '#FFFFFF', + }, + }, }, }, MuiChip: { From 13b270141d58534d4bdb6b70adf43e0863c8ae61 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Tue, 11 Jun 2024 14:46:50 -0700 Subject: [PATCH 02/14] Incorporate design tokens --- packages/app/package.json | 1 + packages/app/src/devex-theme.ts | 7 ++++--- yarn.lock | 26 +++++++++----------------- 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index a7d6158..4d958c4 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -44,6 +44,7 @@ "@backstage/plugin-user-settings": "^0.8.5", "@backstage/theme": "^0.5.3", "@bcgov/bc-sans": "^2.0.0", + "@bcgov/design-tokens": "^3.0.0", "@internal/plugin-analytics-module-snowplow": "^0.1.0", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index 9be4370..7f089aa 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -15,6 +15,7 @@ import { AutocompleteClassKey } from '@material-ui/lab/Autocomplete'; import { AlertClassKey } from '@material-ui/lab/Alert'; import { OutlinedInputClassKey } from '@material-ui/core'; import '@bcgov/bc-sans/css/BCSans.css'; +import * as tokens from "@bcgov/design-tokens/js"; // Labs types not included in overrides; https://github.com/mui/material-ui/issues/19427 declare module '@material-ui/core/styles/overrides' { @@ -98,8 +99,8 @@ const baseTheme = createTheme({ pageTheme: { ...pageThemesFontColorOverride, documentation: genPageTheme({ - colors: ['#013366', '#7AB8F9'], - shape: shapes.round, + colors: [tokens.themePrimaryBlue, tokens.themeBlue80], + shape: shapes.wave, }) }, defaultPageTheme: 'home', @@ -256,7 +257,7 @@ const createCustomThemeOverrides = ( }, '& button[aria-label="favorite"]': { '& svg': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, }, diff --git a/yarn.lock b/yarn.lock index eda08a5..db1df73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4867,6 +4867,11 @@ resolved "https://registry.yarnpkg.com/@bcgov/bc-sans/-/bc-sans-2.1.0.tgz#881f626901c0bf3324c56563fa0c5045fded420a" integrity sha512-1MesF4NAVpM5dywoJ68wNcBylHbPqg1dDV/FNuQm0BbspETGlPmfX8LG8rtrCjCAPhWuL2qRT/lBYDUMvFTUnw== +"@bcgov/design-tokens@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@bcgov/design-tokens/-/design-tokens-3.0.0.tgz#c83ac4bee5e37b98cb50343d6a9b1d0e4ba1b873" + integrity sha512-RH7FyZNg2RovlmLBzQRtoFcSAaQt1SV+6/5MiovUv8+Vib6KpBj1RSWgYc9V0cXJwpR6Az5KniAcqhAhqiJcFg== + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -10414,9 +10419,9 @@ "@types/react" "*" "@types/react@*", "@types/react@^16.13.1 || ^17.0.0", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0", "@types/react@^18": - version "18.3.2" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.2.tgz#462ae4904973bc212fa910424d901e3d137dbfcd" - integrity sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w== + version "18.3.3" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f" + integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw== dependencies: "@types/prop-types" "*" csstype "^3.0.2" @@ -11289,6 +11294,7 @@ apg-lite@^1.0.3: "@backstage/plugin-user-settings" "^0.8.5" "@backstage/theme" "^0.5.3" "@bcgov/bc-sans" "^2.0.0" + "@bcgov/design-tokens" "^3.0.0" "@internal/plugin-analytics-module-snowplow" "^0.1.0" "@material-ui/core" "^4.12.4" "@material-ui/icons" "^4.11.3" @@ -25157,20 +25163,6 @@ types-ramda@^0.30.0: dependencies: ts-toolbelt "^9.6.0" -typescript-json-schema@^0.62.0: - version "0.62.0" - resolved "https://registry.yarnpkg.com/typescript-json-schema/-/typescript-json-schema-0.62.0.tgz#774b06b0c9d86d7f3580ea9136363a6eafae1470" - integrity sha512-qRO6pCgyjKJ230QYdOxDRpdQrBeeino4v5p2rYmSD72Jf4rD3O+cJcROv46sQukm46CLWoeusqvBgKpynEv25g== - dependencies: - "@types/json-schema" "^7.0.9" - "@types/node" "^16.9.2" - glob "^7.1.7" - path-equal "^1.2.5" - safe-stable-stringify "^2.2.0" - ts-node "^10.9.1" - typescript "~5.1.0" - yargs "^17.1.1" - typescript-json-schema@^0.63.0: version "0.63.0" resolved "https://registry.yarnpkg.com/typescript-json-schema/-/typescript-json-schema-0.63.0.tgz#55ef6c4dde71625425b169d37e0de3d2ea14e093" From b8af7893bdb80c531a37d9e1b40309a0f7d628dc Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Tue, 18 Jun 2024 11:18:42 -0700 Subject: [PATCH 03/14] revmap homepage, more tokens, and cleaner cards --- packages/app/src/components/Root/Root.tsx | 1 - .../src/components/home/HomeHeaderText.tsx | 32 ++ packages/app/src/components/home/HomePage.tsx | 377 +++--------------- .../app/src/components/home/HomePageCards.tsx | 282 +++++++++++++ packages/app/src/devex-theme.ts | 148 +++---- 5 files changed, 449 insertions(+), 391 deletions(-) create mode 100644 packages/app/src/components/home/HomeHeaderText.tsx create mode 100644 packages/app/src/components/home/HomePageCards.tsx diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index ced98ff..4ccc5fd 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -215,7 +215,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { */} - diff --git a/packages/app/src/components/home/HomeHeaderText.tsx b/packages/app/src/components/home/HomeHeaderText.tsx new file mode 100644 index 0000000..4457eb1 --- /dev/null +++ b/packages/app/src/components/home/HomeHeaderText.tsx @@ -0,0 +1,32 @@ +import {Typography, withStyles} from "@material-ui/core"; +import * as tokens from "@bcgov/design-tokens/js"; + +export const BCGovBannerText = withStyles({ + root: { + position: 'relative', + '&::before': { + content: `''`, + position: 'absolute', + top: '-6px', + left: '-25px', + width: '4px', + height: '64px', + background: tokens.themePrimaryGold + }, + } +})(Typography); + +export const BCGovHeaderText = withStyles({ + root: { + position: 'relative', + '&::before': { + content: `''`, + position: 'absolute', + top: '-10px', + left: '0', + width: '36px', + height: '4px', + background: tokens.themePrimaryGold + }, + } +})(Typography); \ No newline at end of file diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index e3aeba5..09cb0c0 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/packages/app/src/components/home/HomePage.tsx @@ -1,108 +1,50 @@ import React from 'react'; import {createGlobalStyle} from 'styled-components'; -import {useTheme} from '@material-ui/styles'; -import {Content, ItemCardGrid, ItemCardHeader, LinkButton, Page} from '@backstage/core-components'; -import {Theme} from '@material-ui/core/styles'; +import {Content, Page} from '@backstage/core-components'; import {HomePageSearchBar} from "@backstage/plugin-search"; -import {Card, CardActions, CardContent, CardMedia, makeStyles, Typography, Box, Grid} from "@material-ui/core"; -import {GitHubSvgIcon, RocketChatIcon, StackOverFlowIcon} from "../utils/icons"; -import LockIcon from '@material-ui/icons/Lock'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import {makeStyles, Typography, Box} from "@material-ui/core"; import { Link } from 'react-router-dom'; +import { BCGovBannerText, BCGovHeaderText } from './HomeHeaderText'; +import { HomePageCards } from './HomePageCards'; +import * as tokens from "@bcgov/design-tokens/js"; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ searchBar: { display: 'flex', width: '65%', - backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], - padding: '8px 0', + boxShadow: tokens.surfaceShadowSmall, + padding: `${tokens.layoutPaddingSmall} 0`, borderRadius: '50px', - margin: 'auto', - border: '1px solid #606060', + margin: `${tokens.layoutMarginXlarge} auto`, + border: `${tokens.layoutBorderWidthSmall} solid ${tokens.themeGray80}`, + '@media (max-width: 700px)': { + width: '90%', + } }, searchBarOutline: { borderStyle: 'none', }, - cardGrid: { - gridTemplateColumns: 'repeat(auto-fill)', - gridGap: theme.spacing(3), - }, - card: { - color: theme.palette.primary.main, - display: 'flex', - flex: 1, - justiyContent:'space-between', - flexDirection:'column', - borderRadius: '1rem', - boxShadow: 'rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px', - }, - cardDocsHeader: { - color: theme.palette.primary.main, - backgroundColor: theme.palette.background.paper, - backgroundImage: 'none', - paddingBottom: theme.spacing(1), - }, - cardEventHeader: { - color: 'white', - backgroundColor: theme.palette.primary.main, - backgroundImage: `linear-gradient(to bottom right, ${theme.palette.primary.main} 30%, rgba(0, 0, 0, .3))` - - }, - cardToolHeader: { - color: theme.palette.primary.main, - backgroundColor: theme.palette.background.paper, - backgroundImage: `linear-gradient(to bottom right, ${theme.palette.background.paper} 30%, rgba(0, 0, 0, .11))` - }, - cardActions: { - justifyContent: 'flex-start', - paddingLeft: '1rem' - }, - defaultButton: { - marginTop: 'auto', - width: 'fit-content', - borderColor: 'currentcolor', - borderBottom: '2px solid rgba(0, 0, 0, .2)', - borderRadius: '0', - color: theme.palette.primary.main, - padding: 'calc(0.667em + 4px) 4px calc(0.33em + 4px)', - boxShadow: 'rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px', - }, root: { - padding: 'calc(2.1rem - 24px) 9%', + padding: `calc(2.1rem - ${tokens.layoutPaddingLarge}) 9% 0px`, }, - cardRecon: { - color: 'white', - backgroundColor: theme.palette.primary.main, - display:'flex', - justiyContent:'space-between', - flexDirection:'column', - borderRadius: '0', - paddingRight: '9%', - paddingLeft: '9%', + feedback: { + padding: `${tokens.layoutMarginXxxlarge} 9%`, }, - ReconButton: { - marginTop: 'auto', - width: 'fit-content', - borderColor: 'currentcolor', - borderBottom: '2px solid rgba(0, 0, 0, .2)', - borderRadius: '0', - color: 'white', - padding: 'calc(0.667em + 4px) 4px calc(0.33em + 4px)', - boxShadow: 'rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .14) 0 10px 10px -5px', + cardRecon: { + color: tokens.typographyColorPrimaryInvert, + backgroundColor: tokens.themeGray100, + padding: `${tokens.layoutPaddingXlarge} 9%`, }, footer: { width: 'auto', - marginLeft: '-24px', - marginRight: '-24px', - borderTop: '4px solid #FCBA19', - borderBottom: '4px solid #FCBA19', + marginLeft: `-${tokens.layoutMarginLarge}`, + marginRight: `-${tokens.layoutMarginLarge}`, + marginBottom: tokens.layoutMarginXxxlarge, + borderTop: `${tokens.layoutBorderWidthLarge} solid ${tokens.themePrimaryGold}`, + borderBottom: `${tokens.layoutBorderWidthLarge} solid ${tokens.themePrimaryGold}`, } -})); -makeStyles(theme => ({ - container: { - margin: theme.spacing(5, 0), - }, +}); +makeStyles({ svg: { width: 'auto', height: 100, @@ -110,269 +52,60 @@ makeStyles(theme => ({ path: { fill: '#7df3e1', }, -})); +}); const GlobalStyle = createGlobalStyle` a { text-decoration: none; + color: ${tokens.typographyColorLink}; } a:hover { text-decoration: underline; }`; - const HomePage = () => { const classes = useStyles(); - const theme: Theme = useTheme(); - - const tools = [ - { - key: 't1', - url: 'https://stackoverflow.developer.gov.bc.ca', - label: 'Stack Overflow', - icon: , - buttonText: ['Ask a question', ], - desc: 'Ask, answer and discuss technical questions specific to the B.C. government on the popular Q & A platform.' - }, - { - key: 't2', - url: 'https://chat.developer.gov.bc.ca', - label: 'RocketChat', - icon: , - buttonText: 'Message teams', - desc: 'Connect on an open-source team communication app that offers real-time chat, file sharing and collaboration features.' - }, - { - key: 't3', - url: 'https://github.com/bcgov', - label: 'GitHub', - icon: , - buttonText: 'Find code', - desc: 'Work together on a web-based version control platform that enables developers to host, review and manage code repositories.' - } - ] return (
- - - - B.C. government DevHub - - - - - - - The B.C. government DevHub is a place to access common technical documentation, community knowledge bases, code samples and APIs. - - - - - - - - - - - Documentation library - - - View all docs - - - - - - - - - Application development guide} - /> - - - Everything you need to know to build a quality, consistent and compliant application. - - - Build a quality application - - - - - - - Mobile development guide} - /> - - - Detailed guidance on the steps and practices you must follow when developing a mobile application. - - - Review the mobile guide - - - - - - - Private cloud technical docs} - /> - - - Learn how to build, deploy, maintain, and retire applications on OpenShift. - - - Explore the Private cloud docs - - - - - - - Public cloud technical docs} - /> - - - Learn about building and deploying applications through B.C. government AWS landing zone. - - Explore the Public cloud docs - - - - - + B.C. government DevHub + + The B.C. government DevHub is a place to access common technical documentation, community knowledge bases, code samples and APIs. + - - - Events - - - - - - - - -

- This four-session technical training covers the DevOps platform and application operational tasks. -

-
What: The OpenShift 101 course -
Where: Online -
When: Recurring monthly - - - - Register for OpenShift 101 - - - - - - - - -

- This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. -

-
What: The OpenShift 201 course -
Where: Online -
When: Recurring every other month - - - - Register for OpenShift 201 - - - - + +
- - - Get support from the developer community - - - We're all here to help! Connect with other developers across the B.C. government, ask questions and improve your knowledge. - - - - {tools.map(t => ( - - - - {t.icon}  {t.label} - } - classes={{ root: classes.cardToolHeader }} - /> - - - {t.desc} - - - {t.buttonText} - - - ))} - + - - - - Provide feedback - - - +
+ + + Provide feedback + + The B.C. government DevHub is managed by the Developer Experience team. Join us as we work together to create impactful solutions by providing feedback or participating in user research.
- - - - - The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. - We acknowledge the rights, interests, priorities and concerns of all Indigenous Peoples - First Nations, Métis and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws and governments. - - - - Learn more about the Calls to Action - - + + +
+ + The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. + We acknowledge the rights, interests, priorities and concerns of all Indigenous Peoples - First Nations, Métis and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws and governments. + +
+ ) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx new file mode 100644 index 0000000..8931571 --- /dev/null +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -0,0 +1,282 @@ +import React, { PropsWithChildren } from 'react'; +import {ItemCardGrid, ItemCardHeader, LinkProps} from '@backstage/core-components'; +import {Card, CardActions, CardContent, CardMedia, makeStyles, Typography, Box, Grid, withStyles, Button} from "@material-ui/core"; +import {GitHubSvgIcon, RocketChatIcon, StackOverFlowIcon} from "../utils/icons"; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { Link } from 'react-router-dom'; +import DocsIcon from '@material-ui/icons/Description'; +import EventIcon from '@material-ui/icons/Event'; +import { BCGovHeaderText } from './HomeHeaderText'; +import * as tokens from "@bcgov/design-tokens/js"; + +const CardTitleIcon = withStyles({ + root: { + display: 'flex', + alignItems: 'flex-start', + gap: tokens.layoutMarginSmall, + '& .icon': { + paddingTop: '4px' + } + }, +})(Box); + +interface CardTileProps { + icon: React.ReactNode, + linkProps: PropsWithChildren +}; + +const CardTitle = ({children, icon, ...props}: PropsWithChildren) => { + return ( + +
{icon}
+ + {children} + + + ); +}; + +const CardLinkButton = withStyles({ + root: { + display: 'flex', + alignItems: 'center', + '& .icon': { + fill: tokens.iconsColorLink, + marginLeft: tokens.layoutMarginXsmall, + transition: 'transform .25s ease', + }, + '&:hover .icon': { + transform: 'translateX(6px)' + }, + '&:hover': { + background: 'none', + }, + '& a:hover': { + textDecoration: 'none', + }, + }, +})(Button); + +const CardButton = (props: PropsWithChildren) => { + return ( + + {props.children} + + + ); +}; + +const useStyles = makeStyles({ + cardGroup: { + paddingTop: tokens.layoutMarginXxxlarge, + }, + docsCardGrid: { // probably need media stuff for this + minWidth: '450px', + gridTemplateColumns: 'repeat(auto-fit)', + // gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 2fr))', + // gridTemplateColumns: 'repeat(minmax(auto-fit,3), 1fr)', + // gridTemplateColumns: 'repeat(max-content)', + gridGap: tokens.layoutMarginXlarge, + }, + cardGrid: { + gridTemplateColumns: 'repeat(auto-fit)', + gridGap: tokens.layoutMarginXlarge, + }, + card: { + display: 'flex', + flex: 1, + justifyContent:'space-between', + flexDirection:'column', + '&:hover': { + background: tokens.surfaceColorMenusHover, + } + }, + cardActions: { + justifyContent: 'flex-start', + paddingLeft: tokens.layoutPaddingMedium, + }, + background: { + width: 'auto', + padding: `0px calc(9% + ${tokens.layoutPaddingLarge}) ${tokens.layoutMarginXxxlarge}`, + marginLeft: `-${tokens.layoutMarginLarge}`, + marginRight: `-${tokens.layoutMarginLarge}`, + background: tokens.surfaceColorBackgroundLightGray, + } +}); + +export const HomePageCards = () => { + const classes = useStyles(); + + const tools = [ + { + key: 't1', + url: 'https://stackoverflow.developer.gov.bc.ca', + label: 'Stack Overflow', + icon: , + buttonText: 'Ask a question', + desc: 'Ask, answer and discuss technical questions specific to the B.C. government on the popular Q & A platform.' + }, + { + key: 't2', + url: 'https://chat.developer.gov.bc.ca', + label: 'RocketChat', + icon: , + buttonText: 'Message teams', + desc: 'Connect on an open-source team communication app that offers real-time chat, file sharing and collaboration features.' + }, + { + key: 't3', + url: 'https://github.com/bcgov', + label: 'GitHub', + icon: , + buttonText: 'Find code', + desc: 'Work together on a web-based version control platform that enables developers to host, review and manage code repositories.' + } + ] + + return ( +
+
+ + + Documentation library + + View all docs + + + {/* */} + + + + + }>Application development guide} + /> + + + Everything you need to know to build a quality, consistent and compliant application. + + + Build a quality application + + + + + + + }>Mobile development guide} + /> + + + Detailed guidance on the steps and practices you must follow when developing a mobile application. + + + Review the mobile guide + + + + + + + }>Private cloud technical docs} + /> + + + Learn how to build, deploy, maintain, and retire applications on OpenShift. + + + Explore the Private cloud docs + + + + + + + }>Public cloud technical docs} + /> + + + Learn about building and deploying applications through B.C. government AWS landing zone. + + + Explore the Public cloud docs + + + + + {/* */} +
+ +
+ + Events + + + + + + }>OpenShift 101} + /> + + + This four-session technical training covers the DevOps platform and application operational tasks. + What: The OpenShift 101 course + Where: Online + When: Recurring monthly + + + Register for OpenShift 101 + + + + + }>OpenShift 201} + /> + + + This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. + What: The OpenShift 201 course + Where: Online + When: Recurring every other month + + + Register for OpenShift 201 + + + +
+ +
+ + Get support from the developer community + + + We're all here to help! Connect with other developers across the B.C. government, ask questions and improve your knowledge. + + + + {tools.map(t => ( + + + {t.label}} + /> + + + {t.desc} + + + {t.buttonText} + + + ))} + +
+
+ ); +} \ No newline at end of file diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index 7f089aa..82e3804 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -7,7 +7,6 @@ import { pageTheme as defaultPageThemes, PageTheme, genPageTheme, - shapes, } from '@backstage/theme'; import { alpha } from '@material-ui/core/styles'; @@ -30,7 +29,7 @@ const pageThemesFontColorOverride: Record = {}; Object.keys(defaultPageThemes).map(key => { pageThemesFontColorOverride[key] = { ...defaultPageThemes[key], - fontColor: '#0E3468', + fontColor: tokens.typographyColorPrimary, }; }); @@ -38,69 +37,69 @@ const baseTheme = createTheme({ palette: { ...lightTheme.palette, primary: { - main: '#0E3468', - light: '#4C9AFF', - dark: '#0E3468', + main: tokens.themePrimaryBlue, + light: tokens.themeBlue60, + dark: tokens.themePrimaryBlue, }, - secondary: { - main: '#FF5630', - light: '#FFAB00', - dark: '#6554C0', + secondary: { // I dont think I get these color selections + main: tokens.supportSurfaceColorDanger, + light: tokens.themePrimaryGold, + dark: tokens.surfaceColorBorderActive, }, grey: { - 50: '#C1C7D0', - 100: '#7A869A', - 200: '#6B778C', - 300: '#5E6C84', - 400: '#505F79', - 500: '#42526E', - 600: '#344563', - 700: '#253858', - 800: '#0E3468', - 900: '#091E42', + 50: tokens.themeGray10, + 100: tokens.themeGray20, + 200: tokens.themeGray30, + 300: tokens.themeGray40, + 400: tokens.themeGray50, + 500: tokens.themeGray60, + 600: tokens.themeGray70, + 700: tokens.themeGray80, + 800: tokens.themeGray90, + 900: tokens.themeGray100, }, error: { - main: '#FF5630', - light: '#FF8F73', - dark: '#DE350B', + main: '#CE3E39', + light: tokens.supportSurfaceColorDanger, + dark: '#A2312D', }, warning: { - main: '#FFAB00', - light: '#FFE380', - dark: '#FF8B00', + main: '#F8BB47', + light: tokens.supportSurfaceColorWarning, + dark: tokens.themeGold100, }, success: { - main: '#36B37E', - light: '#79F2C0', + main: '#42814A', + light: tokens.supportSurfaceColorSuccess, dark: '#006644', }, info: { - main: '#0065FF', - light: '#4C9AFF', + main: '#053662', + light: tokens.supportSurfaceColorInfo, dark: '#0747A6', }, navigation: { ...lightTheme.palette.navigation, - background: '#0E3468', - color: '#FFFFFF', - indicator: '#2684FF', + background: tokens.themePrimaryBlue, + color: tokens.typographyColorPrimaryInvert, + indicator: tokens.themePrimaryGold, navItem: { - hoverBackground: 'rgba(116,118,121,0.6)', + hoverBackground: tokens.surfaceColorPrimaryButtonHover, }, }, text: { - primary: '#222222', + primary: tokens.themeGray110, }, background: { - default: '#FFFFFF', + default: tokens.surfaceColorBackgroundWhite, }, }, fontFamily: 'BCSans, Noto Sans, Roboto, sans-serif', pageTheme: { ...pageThemesFontColorOverride, documentation: genPageTheme({ - colors: [tokens.themePrimaryBlue, tokens.themeBlue80], - shape: shapes.wave, + colors: [tokens.surfaceColorBackgroundWhite], + shape: 'none', }) }, defaultPageTheme: 'home', @@ -113,9 +112,9 @@ const createCustomThemeOverrides = ( BackstageHeader: { header: { backgroundImage: 'unset', - borderBottom: '2px solid #c7c7c7', - boxShadow: '0 -3px 12px rgba(0,0,0,.5)', - paddingBottom: theme.spacing(2), + borderBottom: `${tokens.layoutBorderWidthMedium} solid ${tokens.surfaceColorBorderDefault}`, + boxShadow: tokens.surfaceShadowSmall, + paddingBottom: tokens.layoutPaddingMedium, '& h1': { fontSize: '1.5rem', }, @@ -148,14 +147,14 @@ const createCustomThemeOverrides = ( BackstageOpenedDropdown: { icon: { '& path': { - fill: '#FFFFFF', + fill: tokens.iconsColorPrimaryInvert, }, }, }, BackstageTable: { root: { '&> :first-child': { - borderBottom: '1px solid #D5D5D5', + borderBottom: `${tokens.layoutBorderWidthSmall} solid ${tokens.surfaceColorBorderDefault}`, boxShadow: 'none', }, '& th': { @@ -164,6 +163,16 @@ const createCustomThemeOverrides = ( }, }, }, + BackstageItemCardHeader: { + root: { + // color: tokens.typographyColorLink, + backgroundImage: 'none', + paddingBottom: 0, + // '&:hover': { + // background: tokens.surfaceColorMenusHover, + // } + } + }, CatalogReactUserListPicker: { title: { textTransform: 'none', @@ -174,24 +183,24 @@ const createCustomThemeOverrides = ( borderRadius: 0, }, standardError: { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, backgroundColor: theme.palette.error.dark, '& $icon': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, standardInfo: { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, backgroundColor: theme.palette.primary.dark, '& $icon': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, standardSuccess: { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, backgroundColor: theme.palette.success.dark, '& $icon': { - color: '#FFFFFF', + color: tokens.iconsColorPrimaryInvert, }, }, standardWarning: { @@ -205,7 +214,7 @@ const createCustomThemeOverrides = ( MuiAutocomplete: { root: { '&[aria-expanded=true]': { - color: '#FFFFFF', + color: tokens.typographyColorPrimaryInvert, }, '&[aria-expanded=true] path': { fill: theme.palette.primary.main, @@ -215,16 +224,13 @@ const createCustomThemeOverrides = ( MuiOutlinedInput: { root: { "& $notchedOutline": { - borderColor: '#606060' - }, - "&:hover $notchedOutline": { - borderColor: theme.palette.grey[50] + borderColor: tokens.surfaceColorBorderDefault, }, "&$focused $notchedOutline": { borderColor: theme.palette.primary.main, }, '& [class^="MuiSvgIcon-root"]': { - fill: '#606060' + fill: tokens.iconsColorSecondary, } }, }, @@ -245,53 +251,59 @@ const createCustomThemeOverrides = ( MuiCard: { root: { backgroundImage: 'unset', - paddingBottom: theme.spacing(1), + paddingBottom: tokens.layoutPaddingSmall, + borderRadius: tokens.layoutBorderRadiusMedium, + boxShadow: tokens.surfaceShadowSmall, '& h3': { - color: '#FFFFFF', + color: tokens.typographyColorPrimary, }, '& h4': { - color: '#FFFFFF', + color: tokens.typographyColorPrimary, }, - '& svg': { - color: theme.palette.grey[50], + '&:hover': { + boxShadow: tokens.surfaceShadowMedium, + }, + '& svg': { // also the searchPage drop down icons + color: tokens.themeGray80, }, '& button[aria-label="favorite"]': { '& svg': { - color: tokens.iconsColorPrimaryInvert, + color: tokens.iconsColorPrimary, + background: 'inherit', }, }, }, }, MuiChip: { root: { - borderRadius: 3, + borderRadius: tokens.layoutBorderRadiusMedium, backgroundColor: 'rgba(0, 0, 0, .11)', color: theme.palette.primary.dark, - margin: 4, + margin: tokens.layoutMarginXsmall, }, }, MuiSelect: { root: { '&[aria-expanded]': { - backgroundColor: '#26385A', - color: '#FFFFFF', + backgroundColor: tokens.surfaceColorBackgroundDarkBlue, + color: tokens.typographyColorPrimaryInvert, }, }, }, MuiSwitch: { root: { - padding: 10, + padding: tokens.layoutPaddingSmall, }, switchBase: { - padding: 12, + padding: tokens.layoutPaddingMedium, }, thumb: { - backgroundColor: '#FFFFFF', + backgroundColor: tokens.surfaceColorBackgroundWhite, height: 14, width: 14, }, track: { - borderRadius: 9, + borderRadius: tokens.layoutBorderRadiusLarge, }, }, MuiTabs: { From 71bcb06cbdacf9ec697304e6c46962e17d5c8497 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Mon, 8 Jul 2024 09:55:43 -0700 Subject: [PATCH 04/14] Card theme + css clean up --- packages/app/src/components/home/HomePage.tsx | 19 +- .../app/src/components/home/HomePageCards.tsx | 162 ++++++++---------- packages/app/src/devex-theme.ts | 80 ++++----- 3 files changed, 125 insertions(+), 136 deletions(-) diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index 09cb0c0..36170bb 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/packages/app/src/components/home/HomePage.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles({ borderStyle: 'none', }, root: { - padding: `calc(2.1rem - ${tokens.layoutPaddingLarge}) 9% 0px`, + padding: `calc(2.1rem - ${tokens.layoutPaddingLarge}) 9% ${tokens.layoutPaddingNone}`, }, feedback: { padding: `${tokens.layoutMarginXxxlarge} 9%`, @@ -87,14 +87,12 @@ const HomePage = () => {
- - - Provide feedback - - - The B.C. government DevHub is managed by the Developer Experience team. Join us as we work together to create impactful solutions by providing feedback or participating in user research. - - + + Provide feedback + + + The B.C. government DevHub is managed by the Developer Experience team. Join us as we work together to create impactful solutions by providing feedback or participating in user research. +
@@ -108,8 +106,7 @@ const HomePage = () => { - ) - ; + ); }; export default HomePage; diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 8931571..3bfbc34 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -15,7 +15,7 @@ const CardTitleIcon = withStyles({ alignItems: 'flex-start', gap: tokens.layoutMarginSmall, '& .icon': { - paddingTop: '4px' + paddingTop: tokens.layoutPaddingXsmall, } }, })(Box); @@ -39,7 +39,7 @@ const CardTitle = ({children, icon, ...props}: PropsWithChildren) const CardLinkButton = withStyles({ root: { display: 'flex', - alignItems: 'center', + paddingLeft: tokens.layoutPaddingNone, '& .icon': { fill: tokens.iconsColorLink, marginLeft: tokens.layoutMarginXsmall, @@ -59,7 +59,7 @@ const CardLinkButton = withStyles({ const CardButton = (props: PropsWithChildren) => { return ( - + {props.children} @@ -70,14 +70,6 @@ const useStyles = makeStyles({ cardGroup: { paddingTop: tokens.layoutMarginXxxlarge, }, - docsCardGrid: { // probably need media stuff for this - minWidth: '450px', - gridTemplateColumns: 'repeat(auto-fit)', - // gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 2fr))', - // gridTemplateColumns: 'repeat(minmax(auto-fit,3), 1fr)', - // gridTemplateColumns: 'repeat(max-content)', - gridGap: tokens.layoutMarginXlarge, - }, cardGrid: { gridTemplateColumns: 'repeat(auto-fit)', gridGap: tokens.layoutMarginXlarge, @@ -91,15 +83,15 @@ const useStyles = makeStyles({ background: tokens.surfaceColorMenusHover, } }, - cardActions: { - justifyContent: 'flex-start', - paddingLeft: tokens.layoutPaddingMedium, - }, + cardHeader: { + backgroundImage: 'none', + paddingBottom: tokens.layoutPaddingNone, + }, background: { - width: 'auto', + width: 'auto', padding: `0px calc(9% + ${tokens.layoutPaddingLarge}) ${tokens.layoutMarginXxxlarge}`, - marginLeft: `-${tokens.layoutMarginLarge}`, - marginRight: `-${tokens.layoutMarginLarge}`, + marginLeft: `-${tokens.layoutMarginLarge}`, + marginRight: `-${tokens.layoutMarginLarge}`, background: tokens.surfaceColorBackgroundLightGray, } }); @@ -144,70 +136,68 @@ export const HomePageCards = () => { View all docs - {/* */} - - - - }>Application development guide} - /> - - - Everything you need to know to build a quality, consistent and compliant application. - - - Build a quality application - - - - - - - }>Mobile development guide} - /> - - - Detailed guidance on the steps and practices you must follow when developing a mobile application. - - - Review the mobile guide - - - - - - - }>Private cloud technical docs} - /> - - - Learn how to build, deploy, maintain, and retire applications on OpenShift. - - - Explore the Private cloud docs - - - - - - - }>Public cloud technical docs} - /> - - - Learn about building and deploying applications through B.C. government AWS landing zone. - - - Explore the Public cloud docs - - - + + + + }>Application development guide} + /> + + + Everything you need to know to build a quality, consistent and compliant application. + + + Build a quality application + + + + + + + }>Mobile development guide} + /> + + + Detailed guidance on the steps and practices you must follow when developing a mobile application. + + + Review the mobile guide + + + + + + + }>Private cloud technical docs} + /> + + + Learn how to build, deploy, maintain, and retire applications on OpenShift. + + + Explore the Private cloud docs + + + + + + + }>Public cloud technical docs} + /> + + + Learn about building and deploying applications through B.C. government AWS landing zone. + + + Explore the Public cloud docs + + + - {/* */}
@@ -218,7 +208,7 @@ export const HomePageCards = () => { - }>OpenShift 101} /> @@ -228,13 +218,13 @@ export const HomePageCards = () => { Where: Online When: Recurring monthly - + Register for OpenShift 101 - }>OpenShift 201} /> @@ -244,7 +234,7 @@ export const HomePageCards = () => { Where: Online When: Recurring every other month - + Register for OpenShift 201 @@ -263,14 +253,14 @@ export const HomePageCards = () => { {tools.map(t => ( - {t.label}} /> {t.desc} - + {t.buttonText} diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index 82e3804..b098faa 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -7,6 +7,7 @@ import { pageTheme as defaultPageThemes, PageTheme, genPageTheme, + shapes, } from '@backstage/theme'; import { alpha } from '@material-ui/core/styles'; @@ -41,9 +42,9 @@ const baseTheme = createTheme({ light: tokens.themeBlue60, dark: tokens.themePrimaryBlue, }, - secondary: { // I dont think I get these color selections - main: tokens.supportSurfaceColorDanger, - light: tokens.themePrimaryGold, + secondary: { + main: tokens.themePrimaryGold, + light: tokens.themePrimaryGold, // this is the graph node color for catalog components dark: tokens.surfaceColorBorderActive, }, grey: { @@ -59,22 +60,22 @@ const baseTheme = createTheme({ 900: tokens.themeGray100, }, error: { - main: '#CE3E39', + main: tokens.iconsColorDanger, light: tokens.supportSurfaceColorDanger, dark: '#A2312D', }, warning: { - main: '#F8BB47', + main: tokens.iconsColorWarning, light: tokens.supportSurfaceColorWarning, - dark: tokens.themeGold100, + dark: '#FF8B00', }, success: { - main: '#42814A', + main: tokens.iconsColorSuccess, light: tokens.supportSurfaceColorSuccess, dark: '#006644', }, info: { - main: '#053662', + main: tokens.iconsColorInfo, light: tokens.supportSurfaceColorInfo, dark: '#0747A6', }, @@ -98,8 +99,8 @@ const baseTheme = createTheme({ pageTheme: { ...pageThemesFontColorOverride, documentation: genPageTheme({ - colors: [tokens.surfaceColorBackgroundWhite], - shape: 'none', + colors: [ tokens.themeGray30, tokens.surfaceColorBackgroundWhite ], + shape: shapes.round, }) }, defaultPageTheme: 'home', @@ -124,10 +125,10 @@ const createCustomThemeOverrides = ( fontWeight: 900, }, subtitle: { - color: alpha(theme.page.fontColor, 0.8), + color: alpha(theme.page.fontColor, 0.9), }, type: { - color: alpha(theme.page.fontColor, 0.8), + color: alpha(theme.page.fontColor, 0.9), }, }, BackstageHeaderLabel: { @@ -135,7 +136,7 @@ const createCustomThemeOverrides = ( color: theme.page.fontColor, }, value: { - color: alpha(theme.page.fontColor, 0.8), + color: alpha(theme.page.fontColor, 0.9), }, }, BackstageHeaderTabs: { @@ -165,13 +166,8 @@ const createCustomThemeOverrides = ( }, BackstageItemCardHeader: { root: { - // color: tokens.typographyColorLink, - backgroundImage: 'none', - paddingBottom: 0, - // '&:hover': { - // background: tokens.surfaceColorMenusHover, - // } - } + padding: `${tokens.layoutPaddingLarge} ${tokens.layoutPaddingLarge} calc(${tokens.layoutPaddingLarge} / 2)`, + } }, CatalogReactUserListPicker: { title: { @@ -180,7 +176,7 @@ const createCustomThemeOverrides = ( }, MuiAlert: { root: { - borderRadius: 0, + borderRadius: tokens.layoutBorderRadiusNone, }, standardError: { color: tokens.typographyColorPrimaryInvert, @@ -204,10 +200,10 @@ const createCustomThemeOverrides = ( }, }, standardWarning: { - color: theme.palette.grey[700], + color: theme.palette.grey[800], backgroundColor: theme.palette.secondary.light, '& $icon': { - color: theme.palette.grey[700], + color: theme.palette.grey[800], }, }, }, @@ -224,13 +220,13 @@ const createCustomThemeOverrides = ( MuiOutlinedInput: { root: { "& $notchedOutline": { - borderColor: tokens.surfaceColorBorderDefault, + borderColor: tokens.surfaceColorBackgroundDarkBlue, }, "&$focused $notchedOutline": { - borderColor: theme.palette.primary.main, + borderColor: tokens.surfaceColorBorderActive, }, - '& [class^="MuiSvgIcon-root"]': { - fill: tokens.iconsColorSecondary, + '& svg': { + fill: tokens.themeGray80, } }, }, @@ -241,7 +237,7 @@ const createCustomThemeOverrides = ( }, MuiButton: { root: { - borderRadius: 3, + borderRadius: tokens.layoutBorderRadiusMedium, textTransform: 'none', }, contained: { @@ -251,7 +247,6 @@ const createCustomThemeOverrides = ( MuiCard: { root: { backgroundImage: 'unset', - paddingBottom: tokens.layoutPaddingSmall, borderRadius: tokens.layoutBorderRadiusMedium, boxShadow: tokens.surfaceShadowSmall, '& h3': { @@ -263,17 +258,24 @@ const createCustomThemeOverrides = ( '&:hover': { boxShadow: tokens.surfaceShadowMedium, }, - '& svg': { // also the searchPage drop down icons + '& svg': { color: tokens.themeGray80, }, - '& button[aria-label="favorite"]': { - '& svg': { - color: tokens.iconsColorPrimary, - background: 'inherit', - }, - }, }, }, + MuiCardContent: { + root: { + padding: `calc(${tokens.layoutPaddingLarge} / 2) ${tokens.layoutPaddingLarge} 0`, + } + }, + MuiCardActions: { + root: { + // /create cards have 16px padding on CardActions regardless of what's specified here + // so setting all to 16px (layoutPaddingMedium), and use margin to reach desired layoutPaddingLarge value + padding: tokens.layoutPaddingMedium, + margin: `${tokens.layoutMarginNone} ${tokens.layoutMarginSmall} ${tokens.layoutMarginSmall}` + } + }, MuiChip: { root: { borderRadius: tokens.layoutBorderRadiusMedium, @@ -292,10 +294,10 @@ const createCustomThemeOverrides = ( }, MuiSwitch: { root: { - padding: tokens.layoutPaddingSmall, + padding: 10, }, switchBase: { - padding: tokens.layoutPaddingMedium, + padding: 12, }, thumb: { backgroundColor: tokens.surfaceColorBackgroundWhite, @@ -303,7 +305,7 @@ const createCustomThemeOverrides = ( width: 14, }, track: { - borderRadius: tokens.layoutBorderRadiusLarge, + borderRadius: 9, }, }, MuiTabs: { From 3749ee79723b253cc78ef28f8e0b5980d4fdb943 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Mon, 8 Jul 2024 14:55:08 -0700 Subject: [PATCH 05/14] add Card Button hover color --- .../app/src/components/home/HomePageCards.tsx | 36 +++++++++++-------- packages/app/src/devex-theme.ts | 2 ++ 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 3bfbc34..c082792 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -40,27 +40,33 @@ const CardLinkButton = withStyles({ root: { display: 'flex', paddingLeft: tokens.layoutPaddingNone, - '& .icon': { - fill: tokens.iconsColorLink, - marginLeft: tokens.layoutMarginXsmall, - transition: 'transform .25s ease', - }, - '&:hover .icon': { - transform: 'translateX(6px)' - }, - '&:hover': { - background: 'none', - }, - '& a:hover': { - textDecoration: 'none', - }, + '& .link-text': { + color: tokens.typographyColorLink, + transition: 'transform .25s ease', + }, + '& .icon': { + fill: tokens.typographyColorLink, + marginLeft: tokens.layoutMarginXsmall, + transition: 'transform .25s ease', + }, + '&:hover': { + background: 'none', + '& .link-text': { + textDecoration: 'none', + color: tokens.themeBlue80, + }, + '& .icon': { + transform: 'translateX(6px)', + fill: tokens.themeBlue80, + }, + }, }, })(Button); const CardButton = (props: PropsWithChildren) => { return ( - {props.children} + {props.children} ); diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index b098faa..0c8693d 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -98,6 +98,8 @@ const baseTheme = createTheme({ fontFamily: 'BCSans, Noto Sans, Roboto, sans-serif', pageTheme: { ...pageThemesFontColorOverride, + // apply to all? ideally + documentation: genPageTheme({ colors: [ tokens.themeGray30, tokens.surfaceColorBackgroundWhite ], shape: shapes.round, From c90cf50601e85a8d4357d34206541641e1e7ef81 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Wed, 10 Jul 2024 16:17:46 -0700 Subject: [PATCH 06/14] Apply page theme to all builtin themes --- .../app/src/components/home/HomePageCards.tsx | 24 +++++++------- packages/app/src/devex-theme.ts | 33 +++++++++---------- 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index c082792..0c88916 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -38,7 +38,7 @@ const CardTitle = ({children, icon, ...props}: PropsWithChildren) const CardLinkButton = withStyles({ root: { - display: 'flex', + display: 'flex', paddingLeft: tokens.layoutPaddingNone, '& .link-text': { color: tokens.typographyColorLink, @@ -78,17 +78,17 @@ const useStyles = makeStyles({ }, cardGrid: { gridTemplateColumns: 'repeat(auto-fit)', - gridGap: tokens.layoutMarginXlarge, - }, - card: { - display: 'flex', - flex: 1, - justifyContent:'space-between', - flexDirection:'column', - '&:hover': { - background: tokens.surfaceColorMenusHover, - } + gridGap: tokens.layoutMarginXlarge, }, + card: { + display: 'flex', + flex: 1, + justifyContent:'space-between', + flexDirection:'column', + '&:hover': { + background: tokens.surfaceColorMenusHover, + } + }, cardHeader: { backgroundImage: 'none', paddingBottom: tokens.layoutPaddingNone, @@ -99,7 +99,7 @@ const useStyles = makeStyles({ marginLeft: `-${tokens.layoutMarginLarge}`, marginRight: `-${tokens.layoutMarginLarge}`, background: tokens.surfaceColorBackgroundLightGray, - } + } }); export const HomePageCards = () => { diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index 0c8693d..fc5b68a 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -26,25 +26,17 @@ declare module '@material-ui/core/styles/overrides' { } } -const pageThemesFontColorOverride: Record = {}; -Object.keys(defaultPageThemes).map(key => { - pageThemesFontColorOverride[key] = { - ...defaultPageThemes[key], - fontColor: tokens.typographyColorPrimary, - }; -}); - const baseTheme = createTheme({ palette: { ...lightTheme.palette, primary: { main: tokens.themePrimaryBlue, - light: tokens.themeBlue60, + light: tokens.themeBlue60, // this is a graph node color for catalog components dark: tokens.themePrimaryBlue, }, secondary: { main: tokens.themePrimaryGold, - light: tokens.themePrimaryGold, // this is the graph node color for catalog components + light: tokens.themePrimaryGold, // this is a graph node color for catalog components dark: tokens.surfaceColorBorderActive, }, grey: { @@ -96,14 +88,19 @@ const baseTheme = createTheme({ }, }, fontFamily: 'BCSans, Noto Sans, Roboto, sans-serif', + // Generate page header + font color & card header. Currently we have page header backgrounds turned off + // HomePage card header backgrounds are also turned off, so this mainly controls page header font color + // and the card headers on /create pageTheme: { - ...pageThemesFontColorOverride, - // apply to all? ideally - - documentation: genPageTheme({ - colors: [ tokens.themeGray30, tokens.surfaceColorBackgroundWhite ], - shape: shapes.round, - }) + // set all the builtin page themes to the same header background and font color + ...Object.keys(defaultPageThemes).reduce((acc: {[key: string]: PageTheme}, themeName) => { + acc[themeName] = genPageTheme({ + colors: [ tokens.themeGray30, tokens.surfaceColorBackgroundWhite ], + shape: shapes.round, + options: { fontColor: tokens.themePrimaryBlue }, + }); + return acc; + }, {}), }, defaultPageTheme: 'home', }); @@ -267,7 +264,7 @@ const createCustomThemeOverrides = ( }, MuiCardContent: { root: { - padding: `calc(${tokens.layoutPaddingLarge} / 2) ${tokens.layoutPaddingLarge} 0`, + padding: `${tokens.layoutPaddingMedium} ${tokens.layoutPaddingLarge} 0`, } }, MuiCardActions: { From 9a09884677de4d13927cc3432174229676f73c68 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Wed, 10 Jul 2024 16:48:24 -0700 Subject: [PATCH 07/14] typo + minor cleanup --- packages/app/src/components/home/HomePage.tsx | 6 +++--- packages/app/src/components/home/HomePageCards.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index 36170bb..ebaa043 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/packages/app/src/components/home/HomePage.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {createGlobalStyle} from 'styled-components'; import {Content, Page} from '@backstage/core-components'; import {HomePageSearchBar} from "@backstage/plugin-search"; -import {makeStyles, Typography, Box} from "@material-ui/core"; +import {makeStyles, Typography} from "@material-ui/core"; import { Link } from 'react-router-dom'; import { BCGovBannerText, BCGovHeaderText } from './HomeHeaderText'; import { HomePageCards } from './HomePageCards'; @@ -95,14 +95,14 @@ const HomePage = () => {
- +
The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. We acknowledge the rights, interests, priorities and concerns of all Indigenous Peoples - First Nations, Métis and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws and governments.
- +
diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 0c88916..3ad3eea 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -20,12 +20,12 @@ const CardTitleIcon = withStyles({ }, })(Box); -interface CardTileProps { +interface CardTitleProps { icon: React.ReactNode, linkProps: PropsWithChildren }; -const CardTitle = ({children, icon, ...props}: PropsWithChildren) => { +const CardTitle = ({children, icon, ...props}: PropsWithChildren) => { return (
{icon}
From 17add3dee84fb8f88776dea624c6a67f69cd0069 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Thu, 11 Jul 2024 11:41:36 -0700 Subject: [PATCH 08/14] Switch cards to generate from data array --- .../app/src/components/home/HomePageCards.tsx | 191 +++++++++--------- 1 file changed, 97 insertions(+), 94 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 3ad3eea..3dc18be 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -38,7 +38,6 @@ const CardTitle = ({children, icon, ...props}: PropsWithChildren const CardLinkButton = withStyles({ root: { - display: 'flex', paddingLeft: tokens.layoutPaddingNone, '& .link-text': { color: tokens.typographyColorLink, @@ -105,6 +104,70 @@ const useStyles = makeStyles({ export const HomePageCards = () => { const classes = useStyles(); + const docs = [ + { + key: 'd1', + url: 'docs/default/component/bcdg', + label: 'Application development guide', + icon: , + buttonText: 'Build a quality application', + desc: 'Everything you need to know to build a quality, consistent and compliant application.' + }, + { + key: 'd2', + url: 'docs/default/component/mobile-developer-guide', + label: 'Mobile development guide', + icon: , + buttonText: 'Review the mobile guide', + desc: 'Detailed guidance on the steps and practices you must follow when developing a mobile application.' + }, + { + key: 'd3', + url: 'docs/default/component/platform-developer-docs', + label: 'Private cloud technical docs', + icon: , + buttonText: 'Explore the Private cloud docs', + desc: 'Learn how to build, deploy, maintain, and retire applications on OpenShift.' + }, + { + key: 'd4', + url: 'docs/default/component/public-cloud-techdocs', + label: 'Public cloud technical docs', + icon: , + buttonText: 'Explore the Public cloud docs', + desc: 'Learn about building and deploying applications through B.C. government AWS landing zone.' + } + ] + + const events = [ + { + key: 'e1', + url: 'https://openshift101.eventbrite.com/', + label: 'OpenShift 101', + icon: , + buttonText: 'Register for OpenShift 101', + desc: <> + This four-session technical training covers the DevOps platform and application operational tasks. + What: The OpenShift 101 course + Where: Online + When: Recurring monthly + + }, + { + key: 'e2', + url: 'https://openshift201.eventbrite.com/', + label: 'OpenShift 201', + icon: , + buttonText: 'Register for OpenShift 201', + desc: <> + This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. + What: The OpenShift 201 course + Where: Online + When: Recurring every other month + + }, + ] + const tools = [ { key: 't1', @@ -143,66 +206,23 @@ export const HomePageCards = () => { - - - - }>Application development guide} - /> - - - Everything you need to know to build a quality, consistent and compliant application. - - - Build a quality application - - - - - - - }>Mobile development guide} - /> - - - Detailed guidance on the steps and practices you must follow when developing a mobile application. - - - Review the mobile guide - - - - - - - }>Private cloud technical docs} - /> - - - Learn how to build, deploy, maintain, and retire applications on OpenShift. - - - Explore the Private cloud docs - - - - - - - }>Public cloud technical docs} - /> - - - Learn about building and deploying applications through B.C. government AWS landing zone. - - - Explore the Public cloud docs - - - + {docs.map(d => ( + + + + {d.label}} + /> + + + {d.desc} + + + {d.buttonText} + + + + ))} @@ -212,38 +232,21 @@ export const HomePageCards = () => { - - - }>OpenShift 101} - /> - - - This four-session technical training covers the DevOps platform and application operational tasks. - What: The OpenShift 101 course - Where: Online - When: Recurring monthly - - - Register for OpenShift 101 - - - - - }>OpenShift 201} - /> - - - This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. - What: The OpenShift 201 course - Where: Online - When: Recurring every other month - - - Register for OpenShift 201 - - + {events.map(e => ( + + + {e.label}} + /> + + + {e.desc} + + + {e.buttonText} + + + ))} @@ -264,7 +267,7 @@ export const HomePageCards = () => { /> - {t.desc} + {t.desc} {t.buttonText} From e6a045dc71fe717c4447c71773b44114b324955d Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Thu, 11 Jul 2024 16:59:03 -0700 Subject: [PATCH 09/14] Mildly improve dark theme, fix links --- .../app/src/components/home/HomePageCards.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 3dc18be..3009084 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -62,16 +62,16 @@ const CardLinkButton = withStyles({ }, })(Button); -const CardButton = (props: PropsWithChildren) => { +const CardButton = ({children, ...props}: PropsWithChildren) => { return ( - {props.children} + {children} ); }; -const useStyles = makeStyles({ +const useStyles = makeStyles((theme) => ({ cardGroup: { paddingTop: tokens.layoutMarginXxxlarge, }, @@ -85,7 +85,7 @@ const useStyles = makeStyles({ justifyContent:'space-between', flexDirection:'column', '&:hover': { - background: tokens.surfaceColorMenusHover, + background: (theme.palette.type === 'dark')? tokens.themeGray80 : tokens.surfaceColorMenusHover, } }, cardHeader: { @@ -97,9 +97,9 @@ const useStyles = makeStyles({ padding: `0px calc(9% + ${tokens.layoutPaddingLarge}) ${tokens.layoutMarginXxxlarge}`, marginLeft: `-${tokens.layoutMarginLarge}`, marginRight: `-${tokens.layoutMarginLarge}`, - background: tokens.surfaceColorBackgroundLightGray, + background: (theme.palette.type === 'dark')? tokens.themeGray90: tokens.surfaceColorBackgroundLightGray, } -}); +})); export const HomePageCards = () => { const classes = useStyles(); @@ -236,14 +236,14 @@ export const HomePageCards = () => { {e.label}} + title={{e.label}} /> {e.desc} - {e.buttonText} + {e.buttonText} ))} @@ -263,14 +263,14 @@ export const HomePageCards = () => { {t.label}} + title={{t.label}} /> {t.desc} - {t.buttonText} + {t.buttonText} ))} From 3ed83d32ccdfc962e9810b2d80b57cf8125702b0 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Thu, 11 Jul 2024 17:17:59 -0700 Subject: [PATCH 10/14] Minor code cleanup --- .../app/src/components/home/HomePageCards.tsx | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 3009084..4ada426 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -37,7 +37,7 @@ const CardTitle = ({children, icon, ...props}: PropsWithChildren }; const CardLinkButton = withStyles({ - root: { + root: { paddingLeft: tokens.layoutPaddingNone, '& .link-text': { color: tokens.typographyColorLink, @@ -59,7 +59,7 @@ const CardLinkButton = withStyles({ fill: tokens.themeBlue80, }, }, - }, + }, })(Button); const CardButton = ({children, ...props}: PropsWithChildren) => { @@ -93,7 +93,6 @@ const useStyles = makeStyles((theme) => ({ paddingBottom: tokens.layoutPaddingNone, }, background: { - width: 'auto', padding: `0px calc(9% + ${tokens.layoutPaddingLarge}) ${tokens.layoutMarginXxxlarge}`, marginLeft: `-${tokens.layoutMarginLarge}`, marginRight: `-${tokens.layoutMarginLarge}`, @@ -128,7 +127,7 @@ export const HomePageCards = () => { icon: , buttonText: 'Explore the Private cloud docs', desc: 'Learn how to build, deploy, maintain, and retire applications on OpenShift.' - }, + }, { key: 'd4', url: 'docs/default/component/public-cloud-techdocs', @@ -140,32 +139,32 @@ export const HomePageCards = () => { ] const events = [ - { - key: 'e1', - url: 'https://openshift101.eventbrite.com/', - label: 'OpenShift 101', - icon: , - buttonText: 'Register for OpenShift 101', - desc: <> + { + key: 'e1', + url: 'https://openshift101.eventbrite.com/', + label: 'OpenShift 101', + icon: , + buttonText: 'Register for OpenShift 101', + desc: <> This four-session technical training covers the DevOps platform and application operational tasks. What: The OpenShift 101 course Where: Online When: Recurring monthly - }, - { - key: 'e2', - url: 'https://openshift201.eventbrite.com/', - label: 'OpenShift 201', - icon: , - buttonText: 'Register for OpenShift 201', - desc: <> + }, + { + key: 'e2', + url: 'https://openshift201.eventbrite.com/', + label: 'OpenShift 201', + icon: , + buttonText: 'Register for OpenShift 201', + desc: <> This two-day training is designed to introduce new skills, and build on knowledge gained during OpenShift 101. What: The OpenShift 201 course Where: Online When: Recurring every other month - }, + }, ] const tools = [ From 567c7a7218d61af6dc3950ff7a058483edaac865 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Thu, 11 Jul 2024 17:19:45 -0700 Subject: [PATCH 11/14] whitespace change --- .../app/src/components/home/HomePageCards.tsx | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index 4ada426..a4d49e0 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -104,38 +104,38 @@ export const HomePageCards = () => { const classes = useStyles(); const docs = [ - { - key: 'd1', - url: 'docs/default/component/bcdg', - label: 'Application development guide', - icon: , - buttonText: 'Build a quality application', - desc: 'Everything you need to know to build a quality, consistent and compliant application.' - }, - { - key: 'd2', - url: 'docs/default/component/mobile-developer-guide', - label: 'Mobile development guide', - icon: , - buttonText: 'Review the mobile guide', - desc: 'Detailed guidance on the steps and practices you must follow when developing a mobile application.' - }, - { - key: 'd3', - url: 'docs/default/component/platform-developer-docs', - label: 'Private cloud technical docs', - icon: , - buttonText: 'Explore the Private cloud docs', - desc: 'Learn how to build, deploy, maintain, and retire applications on OpenShift.' + { + key: 'd1', + url: 'docs/default/component/bcdg', + label: 'Application development guide', + icon: , + buttonText: 'Build a quality application', + desc: 'Everything you need to know to build a quality, consistent and compliant application.' }, { - key: 'd4', - url: 'docs/default/component/public-cloud-techdocs', - label: 'Public cloud technical docs', - icon: , - buttonText: 'Explore the Public cloud docs', - desc: 'Learn about building and deploying applications through B.C. government AWS landing zone.' - } + key: 'd2', + url: 'docs/default/component/mobile-developer-guide', + label: 'Mobile development guide', + icon: , + buttonText: 'Review the mobile guide', + desc: 'Detailed guidance on the steps and practices you must follow when developing a mobile application.' + }, + { + key: 'd3', + url: 'docs/default/component/platform-developer-docs', + label: 'Private cloud technical docs', + icon: , + buttonText: 'Explore the Private cloud docs', + desc: 'Learn how to build, deploy, maintain, and retire applications on OpenShift.' + }, + { + key: 'd4', + url: 'docs/default/component/public-cloud-techdocs', + label: 'Public cloud technical docs', + icon: , + buttonText: 'Explore the Public cloud docs', + desc: 'Learn about building and deploying applications through B.C. government AWS landing zone.' + } ] const events = [ From 82c7ad2c1e4fb90eea59ad86b7a6cd9cdaa19664 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Thu, 11 Jul 2024 17:21:24 -0700 Subject: [PATCH 12/14] More whitespace cleanup --- .../app/src/components/home/HomePageCards.tsx | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index a4d49e0..e035c5a 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -136,7 +136,7 @@ export const HomePageCards = () => { buttonText: 'Explore the Public cloud docs', desc: 'Learn about building and deploying applications through B.C. government AWS landing zone.' } - ] + ] const events = [ { @@ -168,31 +168,31 @@ export const HomePageCards = () => { ] const tools = [ - { - key: 't1', - url: 'https://stackoverflow.developer.gov.bc.ca', - label: 'Stack Overflow', - icon: , - buttonText: 'Ask a question', - desc: 'Ask, answer and discuss technical questions specific to the B.C. government on the popular Q & A platform.' - }, - { - key: 't2', - url: 'https://chat.developer.gov.bc.ca', - label: 'RocketChat', - icon: , - buttonText: 'Message teams', - desc: 'Connect on an open-source team communication app that offers real-time chat, file sharing and collaboration features.' - }, - { - key: 't3', - url: 'https://github.com/bcgov', - label: 'GitHub', - icon: , - buttonText: 'Find code', - desc: 'Work together on a web-based version control platform that enables developers to host, review and manage code repositories.' - } - ] + { + key: 't1', + url: 'https://stackoverflow.developer.gov.bc.ca', + label: 'Stack Overflow', + icon: , + buttonText: 'Ask a question', + desc: 'Ask, answer and discuss technical questions specific to the B.C. government on the popular Q & A platform.' + }, + { + key: 't2', + url: 'https://chat.developer.gov.bc.ca', + label: 'RocketChat', + icon: , + buttonText: 'Message teams', + desc: 'Connect on an open-source team communication app that offers real-time chat, file sharing and collaboration features.' + }, + { + key: 't3', + url: 'https://github.com/bcgov', + label: 'GitHub', + icon: , + buttonText: 'Find code', + desc: 'Work together on a web-based version control platform that enables developers to host, review and manage code repositories.' + } + ] return (
From 4f6f684eab26d2a3eb1d4981c3df27f3246bc450 Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Fri, 12 Jul 2024 11:20:46 -0700 Subject: [PATCH 13/14] Adjust view all docs button --- packages/app/src/components/home/HomePageCards.tsx | 5 +++-- packages/app/src/devex-theme.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index e035c5a..ffa2fdc 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -22,7 +22,7 @@ const CardTitleIcon = withStyles({ interface CardTitleProps { icon: React.ReactNode, - linkProps: PropsWithChildren + linkProps: LinkProps, }; const CardTitle = ({children, icon, ...props}: PropsWithChildren) => { @@ -39,6 +39,7 @@ const CardTitle = ({children, icon, ...props}: PropsWithChildren const CardLinkButton = withStyles({ root: { paddingLeft: tokens.layoutPaddingNone, + paddingRight: tokens.layoutPaddingNone, '& .link-text': { color: tokens.typographyColorLink, transition: 'transform .25s ease', @@ -197,7 +198,7 @@ export const HomePageCards = () => { return (
- + Documentation library diff --git a/packages/app/src/devex-theme.ts b/packages/app/src/devex-theme.ts index fc5b68a..b884cd6 100644 --- a/packages/app/src/devex-theme.ts +++ b/packages/app/src/devex-theme.ts @@ -54,7 +54,7 @@ const baseTheme = createTheme({ error: { main: tokens.iconsColorDanger, light: tokens.supportSurfaceColorDanger, - dark: '#A2312D', + dark: '#DE350B', }, warning: { main: tokens.iconsColorWarning, From 0970c38f7e26f1a08a9876c3c58af67dc6b3b0bd Mon Sep 17 00:00:00 2001 From: Galen Gray Date: Fri, 12 Jul 2024 14:53:57 -0700 Subject: [PATCH 14/14] indent --- packages/app/src/components/home/HomePageCards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/home/HomePageCards.tsx b/packages/app/src/components/home/HomePageCards.tsx index ffa2fdc..a153de4 100644 --- a/packages/app/src/components/home/HomePageCards.tsx +++ b/packages/app/src/components/home/HomePageCards.tsx @@ -79,7 +79,7 @@ const useStyles = makeStyles((theme) => ({ cardGrid: { gridTemplateColumns: 'repeat(auto-fit)', gridGap: tokens.layoutMarginXlarge, - }, + }, card: { display: 'flex', flex: 1,