diff --git a/apollo/ui/src/components/Overview.tsx b/apollo/ui/src/components/Overview.tsx index 3e58976..be96e66 100644 --- a/apollo/ui/src/components/Overview.tsx +++ b/apollo/ui/src/components/Overview.tsx @@ -51,6 +51,7 @@ import { Input, InputGroup, InputLeftElement, + Link, Select, Spinner, Stack, @@ -80,13 +81,18 @@ import { } from 'bazel-bin/apollo/proto/v1/client_typescript/models'; import { reqap } from 'common/ui/reqap'; import React, { useEffect, useState } from 'react'; -import { Link } from 'react-router-dom'; +import { Link as RouterLink } from 'react-router-dom'; import { api } from '../api'; import { COLOR_RESF_GREEN } from '../styles'; export const Overview = () => { - const inputBackground = useColorModeValue('white', 'gray.800'); + const inputBackground = useColorModeValue('white', undefined); + + const tableBg = useColorModeValue('white', 'gray.800'); + const pagerButtonScheme = useColorModeValue('blackAlpha', 'gray'); + const linkBlue = useColorModeValue('blue.600', 'blue.300'); + const linkPurple = useColorModeValue('purple.600', 'purple.300'); const [advisories, setAdvisories] = useState(); const [lastUpdated, setLastUpdated] = useState(); @@ -340,7 +346,7 @@ export const Overview = () => { size="xs" isAttached alignItems="stretch" - colorScheme="blackAlpha" + colorScheme={pagerButtonScheme} > { // borderTop="1px solid" // borderBottom="1px solid" borderColor="gray.200" - backgroundColor="white" + backgroundColor={tableBg} lineHeight="24px" px={2} > @@ -401,9 +407,9 @@ export const Overview = () => { Failed to load errata ) : ( - + - +
- - - - - - +
@@ -424,37 +430,33 @@ export const Overview = () => { )} {advisories?.map((a, idx) => (
+ {severityToBadge(a.severity, a.type)} + {a.name} + {a.synopsis?.replace( /^(Critical|Important|Moderate|Low): /, '' )} + {typeToText(a.type)} {a.type === V1AdvisoryType.Security ? ` / ${severityToText(a.severity)}` : ''} - {a.affectedProducts?.join(', ')} - + {a.affectedProducts?.join(', ')} {Intl.DateTimeFormat(undefined, { day: '2-digit', month: 'short', diff --git a/apollo/ui/src/components/Root.tsx b/apollo/ui/src/components/Root.tsx index c4bd0bb..a6117a3 100644 --- a/apollo/ui/src/components/Root.tsx +++ b/apollo/ui/src/components/Root.tsx @@ -30,7 +30,17 @@ * POSSIBILITY OF SUCH DAMAGE. */ -import { Box, HStack, Text, Link as ChakraLink } from '@chakra-ui/react'; +import { MoonIcon, SunIcon } from '@chakra-ui/icons'; +import { + Box, + HStack, + Text, + Link as ChakraLink, + useColorMode, + IconButton, + useColorModeValue, + DarkMode, +} from '@chakra-ui/react'; import { RESFLogo } from 'common/ui/RESFLogo'; import React from 'react'; import { Route, Switch } from 'react-router'; @@ -41,6 +51,11 @@ import { Overview } from './Overview'; import { ShowErrata } from './ShowErrata'; export const Root = () => { + const { colorMode, toggleColorMode } = useColorMode(); + + const SwitchIcon = useColorModeValue(MoonIcon, SunIcon); + const bodyBg = useColorModeValue('gray.100', 'gray.900'); + return ( { display="flex" flexDirection="row" alignItems="center" + justifyContent="space-between" py="1" px={4} > @@ -75,8 +91,20 @@ export const Root = () => { + + } + /> + - + diff --git a/apollo/ui/src/components/ShowErrata.tsx b/apollo/ui/src/components/ShowErrata.tsx index 26e3048..a1efd7e 100644 --- a/apollo/ui/src/components/ShowErrata.tsx +++ b/apollo/ui/src/components/ShowErrata.tsx @@ -51,6 +51,7 @@ import { Tabs, Text, UnorderedList, + useColorModeValue, VStack, } from '@chakra-ui/react'; import { @@ -68,7 +69,7 @@ import { RouteComponentProps } from 'react-router'; import { Link as RouterLink } from 'react-router-dom'; import { api } from '../api'; -import { COLOR_RESF_BLUE, COLOR_RESF_GREEN } from '../styles'; +import { COLOR_RESF_GREEN } from '../styles'; interface ShowErrataParams { id: string; @@ -80,6 +81,11 @@ export interface ShowErrataProps export const ShowErrata = (props: ShowErrataProps) => { const id = props.match.params.id; + const cardBg = useColorModeValue('white', 'gray.800'); + const sideBg = useColorModeValue('gray.100', 'gray.700'); + const linkBlue = useColorModeValue('blue.600', 'blue.300'); + const linkPurple = useColorModeValue('purple.600', 'purple.300'); + const [errata, setErrata] = useState(); const [isLoading, setIsLoading] = useState(true); const [isError, setIsError] = useState(false); @@ -152,7 +158,7 @@ export const ShowErrata = (props: ShowErrataProps) => { <> { {errata.synopsis} - + Erratum Affected Packages @@ -238,7 +244,7 @@ export const ShowErrata = (props: ShowErrataProps) => { minWidth="300px" spacing="5" flexShrink={0} - backgroundColor="gray.100" + backgroundColor={sideBg} > Issued: {errata.publishedAt?.toLocaleDateString()} @@ -270,7 +276,10 @@ export const ShowErrata = (props: ShowErrataProps) => { {x.sourceBy} - {x.ticket} @@ -295,7 +304,10 @@ export const ShowErrata = (props: ShowErrataProps) => { {text} diff --git a/apollo/ui/src/entrypoint.tsx b/apollo/ui/src/entrypoint.tsx index 1dae4dd..6b351e3 100644 --- a/apollo/ui/src/entrypoint.tsx +++ b/apollo/ui/src/entrypoint.tsx @@ -32,20 +32,24 @@ import 'tailwind/tailwind.css'; -import { ChakraProvider } from '@chakra-ui/react'; +import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'; import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Root } from './components/Root'; +import theme from './theme'; export const app = () => { ReactDOM.render( - - - - - , + <> + + + + + + + , document.getElementById('root') ); }; diff --git a/apollo/ui/src/theme.ts b/apollo/ui/src/theme.ts new file mode 100644 index 0000000..c9f1b59 --- /dev/null +++ b/apollo/ui/src/theme.ts @@ -0,0 +1,41 @@ +/* + * Copyright (c) All respective contributors to the Peridot Project. All rights reserved. + * Copyright (c) 2021-2022 Rocky Enterprise Software Foundation, Inc. All rights reserved. + * Copyright (c) 2021-2022 Ctrl IQ, Inc. All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * 1. Redistributions of source code must retain the above copyright notice, + * this list of conditions and the following disclaimer. + * + * 2. Redistributions in binary form must reproduce the above copyright notice, + * this list of conditions and the following disclaimer in the documentation + * and/or other materials provided with the distribution. + * + * 3. Neither the name of the copyright holder nor the names of its contributors + * may be used to endorse or promote products derived from this software without + * specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" + * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE + * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE + * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR + * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + */ + +import { extendTheme, type ThemeConfig } from '@chakra-ui/react'; + +const config: ThemeConfig = { + initialColorMode: 'system', +}; + +const theme = extendTheme({ config }); + +export default theme;