From fb1a0adc6baa9ddb98bd06849b8c43f5df084f9f Mon Sep 17 00:00:00 2001 From: Joshua Israel Date: Fri, 13 Oct 2023 17:10:27 -0400 Subject: [PATCH 1/6] add compute ready to exports --- ui/index.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ui/index.ts b/ui/index.ts index 4c0bbd8482..28c0376f17 100644 --- a/ui/index.ts +++ b/ui/index.ts @@ -35,7 +35,9 @@ import ImageAutomationUpdatesTable from "./components/ImageAutomation/updates/Im import InfoList, { InfoField } from "./components/InfoList"; import Input, { InputProps } from "./components/Input"; import Interval from "./components/Interval"; -import KubeStatusIndicator from "./components/KubeStatusIndicator"; +import KubeStatusIndicator, { + computeReady, +} from "./components/KubeStatusIndicator"; import KustomizationDetail from "./components/KustomizationDetail"; import LargeInfo from "./components/LargeInfo"; import Layout from "./components/Layout"; @@ -180,13 +182,13 @@ export { ImageAutomation, ImageAutomationDetails, ImageAutomationIcon, - ImageRepositoriesTable, ImageAutomationRepoDetails, - ImageAutomationUpdatesTable, ImageAutomationUpdatesDetails, - ImagePolicy, + ImageAutomationUpdatesTable, ImagePoliciesTable, + ImagePolicy, ImagePolicyDetails, + ImageRepositoriesTable, ImageRepository, ImageUpdateAutomation, InfoField, @@ -245,6 +247,7 @@ export { ViolationDetails, YamlView, baseTheme, + computeReady, coreClient, createYamlCommand, filterByStatusCallback, From ba6e5fb0031d3a205bc0f76c46d469f3c1a3c582 Mon Sep 17 00:00:00 2001 From: Joshua Israel Date: Mon, 16 Oct 2023 12:09:13 -0400 Subject: [PATCH 2/6] additional pipeline colors --- ui/lib/theme.ts | 6 ++++++ ui/typedefs/styled.d.ts | 3 +++ 2 files changed, 9 insertions(+) diff --git a/ui/lib/theme.ts b/ui/lib/theme.ts index 16931b38f6..0993d3c8ff 100644 --- a/ui/lib/theme.ts +++ b/ui/lib/theme.ts @@ -74,15 +74,18 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { alertOriginal: "#BC3B1D", alertDark: "#9F3119", neutralGray: "#32324B", + pipelineGray: "#4b5778", neutral00: "#1a1a1a", neutral10: "#737373", neutral20: "#d8d8d8", neutral30: "#f5f5f5", neutral40: "#ffffff", + blackToBlack: "#1a1a1a", whiteToPrimary: "#32324B", grayToPrimary: "#009CCC", neutral20ToPrimary: "#32324B", backGray: "#32324B", + pipelinesBackGray: "#4b5778", blueWithOpacity: "rgba(0, 179, 236, 0.1)", feedbackLight: "#8A460A", feedbackMedium: "#F7BF8E", @@ -117,15 +120,18 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { alertOriginal: "#BC3B1D", alertDark: "#9F3119", neutralGray: "#F6F7F9", + pipelineGray: "dde1e9", neutral00: "#ffffff", neutral10: "#f5f5f5", neutral20: "#d8d8d8", neutral30: "#737373", neutral40: "#1a1a1a", + blackToBlack: "#1a1a1a", whiteToPrimary: "#fff", grayToPrimary: "#737373", neutral20ToPrimary: "#d8d8d8", backGray: "#eef0f4", + pipelinesBackGray: "eef0f4", blueWithOpacity: "rgba(0, 179, 236, 0.1)", feedbackLight: "#FCE6D2", feedbackMedium: "#F7BF8E", diff --git a/ui/typedefs/styled.d.ts b/ui/typedefs/styled.d.ts index 012cc05a4c..7c14907019 100644 --- a/ui/typedefs/styled.d.ts +++ b/ui/typedefs/styled.d.ts @@ -15,15 +15,18 @@ export namespace colors { const alertMedium: string; const alertDark: string; const neutralGray: string; + const pipelineGray: string; const neutral00: string; const neutral10: string; const neutral20: string; const neutral30: string; const neutral40: string; + const blackToBlack: string; const whiteToPrimary: string; const grayToPrimary: string; const neutral20ToPrimary: string; const backGray: string; + const pipelinesBackGray: string; const blueWithOpacity: string; const feedbackLight: string; const feedbackMedium: string; From be679a9cd37f8ce0b8f88445854a31cd7ed5c664 Mon Sep 17 00:00:00 2001 From: Joshua Israel Date: Mon, 16 Oct 2023 12:25:04 -0400 Subject: [PATCH 3/6] snaps --- ui/components/Breadcrumbs.tsx | 6 ++--- ui/components/Collapsible.tsx | 2 +- ui/components/DataTable/SortableLabel.tsx | 2 +- ui/components/FilterDialog.tsx | 2 +- ui/components/FluxObjectsTable.tsx | 6 ++--- ui/components/FluxRuntime.tsx | 2 +- ui/components/GraphNode.tsx | 2 +- ui/components/LargeInfo.tsx | 2 +- ui/components/Nav.tsx | 4 ++-- ui/components/Policies/Utils/HeaderRows.tsx | 4 ++-- .../__snapshots__/Metadata.test.tsx.snap | 22 +++++++++---------- .../__snapshots__/Page.test.tsx.snap | 2 +- ui/lib/theme.ts | 14 +++++------- ui/typedefs/styled.d.ts | 1 - 14 files changed, 34 insertions(+), 37 deletions(-) diff --git a/ui/components/Breadcrumbs.tsx b/ui/components/Breadcrumbs.tsx index b50b881166..59da39a714 100644 --- a/ui/components/Breadcrumbs.tsx +++ b/ui/components/Breadcrumbs.tsx @@ -30,21 +30,21 @@ export const Breadcrumbs = ({ path = [] }: Props) => { {label} ) : ( diff --git a/ui/components/Collapsible.tsx b/ui/components/Collapsible.tsx index 590aa92696..2a34c39dce 100644 --- a/ui/components/Collapsible.tsx +++ b/ui/components/Collapsible.tsx @@ -29,7 +29,7 @@ const Collapsible = ({ children }) => { : IconType.KeyboardArrowRightIcon } size="medium" - color="neutral40" + color="black" /> More Information diff --git a/ui/components/DataTable/SortableLabel.tsx b/ui/components/DataTable/SortableLabel.tsx index 878842833d..73b0613495 100644 --- a/ui/components/DataTable/SortableLabel.tsx +++ b/ui/components/DataTable/SortableLabel.tsx @@ -24,7 +24,7 @@ const TableButton = styled(Button)` &.MuiButton-text { min-width: 0px; .selected { - color: ${(props) => props.theme.colors.neutral40}; + color: ${(props) => props.theme.colors.black}; } } &.arrow { diff --git a/ui/components/FilterDialog.tsx b/ui/components/FilterDialog.tsx index 5a74fcd6f0..d6dc58741b 100644 --- a/ui/components/FilterDialog.tsx +++ b/ui/components/FilterDialog.tsx @@ -89,7 +89,7 @@ const FilterSection = ({ name={`${header}${filterSeparator}${option}`} /> - + {_.toString(option) || "-"} diff --git a/ui/components/FluxObjectsTable.tsx b/ui/components/FluxObjectsTable.tsx index 73dff31c52..a73c4fd601 100644 --- a/ui/components/FluxObjectsTable.tsx +++ b/ui/components/FluxObjectsTable.tsx @@ -13,10 +13,10 @@ import HealthCheckStatusIndicator, { } from "./HealthCheckStatusIndicator"; import ImageLink from "./ImageLink"; import KubeStatusIndicator, { - computeMessage, - createSyntheticCondition, ReadyStatusValue, SpecialObject, + computeMessage, + createSyntheticCondition, } from "./KubeStatusIndicator"; import Link from "./Link"; import Text from "./Text"; @@ -70,7 +70,7 @@ function FluxObjectsTable({ object: u, }) } - color={secret ? "neutral40" : "primary10"} + color={secret ? "black" : "primary10"} pointer={!secret} > {u.name} diff --git a/ui/components/FluxRuntime.tsx b/ui/components/FluxRuntime.tsx index f68f08151b..a432f185b7 100644 --- a/ui/components/FluxRuntime.tsx +++ b/ui/components/FluxRuntime.tsx @@ -15,7 +15,7 @@ const FluxVersionText = styled(Text)` margin-bottom: ${(props) => props.theme.spacing.medium}; span { - color: ${(props) => props.theme.colors.neutral40}; + color: ${(props) => props.theme.colors.black}; font-weight: 400; margin-left: ${(props) => props.theme.spacing.xs}; } diff --git a/ui/components/GraphNode.tsx b/ui/components/GraphNode.tsx index f10e058567..fe8dfb7637 100644 --- a/ui/components/GraphNode.tsx +++ b/ui/components/GraphNode.tsx @@ -135,7 +135,7 @@ function GraphNode({ className, object }: Props) { object: object, }) } - color={secret ? "neutral40" : "primary10"} + color={secret ? "black" : "primary10"} pointer={!secret} semiBold={object.isCurrentNode} > diff --git a/ui/components/LargeInfo.tsx b/ui/components/LargeInfo.tsx index 2107d1c571..3becf4d37a 100644 --- a/ui/components/LargeInfo.tsx +++ b/ui/components/LargeInfo.tsx @@ -18,7 +18,7 @@ function LargeInfo({ className, title, info, component }: Props) { {title}: - + {component ? component : info || "-"} diff --git a/ui/components/Nav.tsx b/ui/components/Nav.tsx index 4b0820e8ee..fc58c68a25 100644 --- a/ui/components/Nav.tsx +++ b/ui/components/Nav.tsx @@ -49,7 +49,7 @@ const NavContent = styled.div<{ collapsed: boolean }>` width: 100%; height: 100%; border-top-right-radius: 10px; - background-color: ${(props) => props.theme.colors.neutral00}; + background-color: ${(props) => props.theme.colors.white}; //28px bottom padding is medium + xxs - in the theme these are strings with px at the end so you can't add them together. This lines up with the footer. padding: ${(props) => props.theme.spacing.medium} 0px 28px 0px; box-sizing: border-box; @@ -179,7 +179,7 @@ function Nav({ return ( + {value || "--"} )} @@ -47,7 +47,7 @@ const HeaderRows = ({ items }: Props) => { {h.children ? ( h.children ) : ( - + {h.value || "-"} )} diff --git a/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap b/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap index ecfa8a95c4..e9cdbae601 100644 --- a/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap +++ b/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap @@ -207,7 +207,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 2 @@ -227,7 +227,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 3 @@ -247,7 +247,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 4 @@ -267,7 +267,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 1 @@ -287,7 +287,7 @@ exports[`Metadata snapshots renders with data 1`] = ` <p><b>html</b></p> @@ -307,7 +307,7 @@ exports[`Metadata snapshots renders with data 1`] = ` This is first line @@ -362,7 +362,7 @@ This is second line some version @@ -397,7 +397,7 @@ This is second line Value 1 @@ -417,7 +417,7 @@ This is second line <p><b>html</b></p> @@ -437,7 +437,7 @@ This is second line { alertDark: "#9F3119", neutralGray: "#32324B", pipelineGray: "#4b5778", - neutral00: "#1a1a1a", + neutral00: "#ffffff", neutral10: "#737373", neutral20: "#d8d8d8", neutral30: "#f5f5f5", - neutral40: "#ffffff", - blackToBlack: "#1a1a1a", + neutral40: "#1a1a1a", whiteToPrimary: "#32324B", grayToPrimary: "#009CCC", neutral20ToPrimary: "#32324B", @@ -126,7 +125,6 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { neutral20: "#d8d8d8", neutral30: "#737373", neutral40: "#1a1a1a", - blackToBlack: "#1a1a1a", whiteToPrimary: "#fff", grayToPrimary: "#737373", neutral20ToPrimary: "#d8d8d8", @@ -230,8 +228,8 @@ export const muiTheme = (colors, mode) => main: colors.alertOriginal, }, text: { - //Neutral - Neutral - 40 - primary: colors.neutral40, + //Neutral - black will switch to white, neutral40 will stay + primary: colors.black, //Neutral - Neutral - 30 secondary: colors.neutral30, disabled: colors.neutral30, @@ -287,7 +285,7 @@ export const muiTheme = (colors, mode) => MuiCheckbox: { colorSecondary: { "&$disabled": { - color: mode === ThemeTypes.Dark && colors.neutral40, + color: mode === ThemeTypes.Dark && colors.black, }, }, }, @@ -295,7 +293,7 @@ export const muiTheme = (colors, mode) => underline: { "&::before": { borderBottom: - mode === ThemeTypes.Dark && `1px solid ${colors.neutral40}`, + mode === ThemeTypes.Dark && `1px solid ${colors.black}`, }, }, }, diff --git a/ui/typedefs/styled.d.ts b/ui/typedefs/styled.d.ts index 7c14907019..b394cf754e 100644 --- a/ui/typedefs/styled.d.ts +++ b/ui/typedefs/styled.d.ts @@ -21,7 +21,6 @@ export namespace colors { const neutral20: string; const neutral30: string; const neutral40: string; - const blackToBlack: string; const whiteToPrimary: string; const grayToPrimary: string; const neutral20ToPrimary: string; From 4594a7141b27aab3fe0af600dc244ef92781a903 Mon Sep 17 00:00:00 2001 From: Joshua Israel Date: Mon, 16 Oct 2023 12:46:56 -0400 Subject: [PATCH 4/6] black and white will stay their respective colors in light/dark modes, while neutral colors will switch --- ui/App.tsx | 2 +- ui/components/Alert.tsx | 6 ++--- ui/components/Breadcrumbs.tsx | 6 ++--- ui/components/ChipGroup.tsx | 2 +- ui/components/Collapsible.tsx | 2 +- ui/components/DataTable/SortableLabel.tsx | 2 +- ui/components/DetailModal.tsx | 2 +- ui/components/ErrorList.tsx | 8 +++++-- ui/components/FilterDialog.tsx | 2 +- ui/components/FluxObjectsTable.tsx | 2 +- ui/components/FluxRuntime.tsx | 2 +- ui/components/GraphNode.tsx | 2 +- ui/components/HealthCheckStatusIndicator.tsx | 2 +- ui/components/KubeStatusIndicator.tsx | 2 +- ui/components/LargeInfo.tsx | 2 +- ui/components/Modal.tsx | 2 +- ui/components/Nav.tsx | 4 ++-- ui/components/Page.tsx | 2 +- ui/components/PodDetail.tsx | 2 +- ui/components/Policies/Utils/HeaderRows.tsx | 4 ++-- ui/components/Policies/Utils/Parameters.tsx | 2 +- ui/components/UserSettings.tsx | 4 ++-- .../__snapshots__/Metadata.test.tsx.snap | 22 +++++++++---------- .../__snapshots__/Page.test.tsx.snap | 6 ++--- .../__snapshots__/SyncActions.test.tsx.snap | 6 ++--- ui/lib/theme.ts | 20 ++++++++--------- ui/pages/SignIn.tsx | 2 +- 27 files changed, 62 insertions(+), 58 deletions(-) diff --git a/ui/App.tsx b/ui/App.tsx index b7aa50018d..c38b2c77a8 100644 --- a/ui/App.tsx +++ b/ui/App.tsx @@ -3,9 +3,9 @@ import qs from "query-string"; import * as React from "react"; import { QueryClient, QueryClientProvider } from "react-query"; import { - BrowserRouter as Router, Redirect, Route, + BrowserRouter as Router, Switch, } from "react-router-dom"; import { ToastContainer } from "react-toastify"; diff --git a/ui/components/Alert.tsx b/ui/components/Alert.tsx index 0f4221c8bf..14f7071e69 100644 --- a/ui/components/Alert.tsx +++ b/ui/components/Alert.tsx @@ -1,4 +1,4 @@ -import { Alert as MaterialAlert, AlertTitle } from "@material-ui/lab"; +import { AlertTitle, Alert as MaterialAlert } from "@material-ui/lab"; import * as React from "react"; import styled from "styled-components"; import { ThemeTypes } from "../contexts/AppContext"; @@ -28,7 +28,7 @@ function UnstyledAlert({ center, title, message, severity, className }: Props) { severity={severity} > {title} - {message} + {message} ); @@ -46,7 +46,7 @@ const Alert = styled(UnstyledAlert)` background-color: ${(props) => props.theme.colors.alertLight}; } .MuiAlertTitle-root { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; } .MuiAlert-standardInfo { svg { diff --git a/ui/components/Breadcrumbs.tsx b/ui/components/Breadcrumbs.tsx index 59da39a714..b50b881166 100644 --- a/ui/components/Breadcrumbs.tsx +++ b/ui/components/Breadcrumbs.tsx @@ -30,21 +30,21 @@ export const Breadcrumbs = ({ path = [] }: Props) => { {label} ) : ( diff --git a/ui/components/ChipGroup.tsx b/ui/components/ChipGroup.tsx index bf565d651f..ddbdcb8da9 100644 --- a/ui/components/ChipGroup.tsx +++ b/ui/components/ChipGroup.tsx @@ -41,7 +41,7 @@ function ChipGroup({ className, chips = [], onChipRemove, onClearAll }: Props) { export default styled(ChipGroup).attrs({ className: ChipGroup.name })` .MuiChip-root { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; margin-right: ${(props) => props.theme.spacing.xxs}; background-color: ${(props) => props.theme.colors.neutralGray}; transition: none; diff --git a/ui/components/Collapsible.tsx b/ui/components/Collapsible.tsx index 2a34c39dce..590aa92696 100644 --- a/ui/components/Collapsible.tsx +++ b/ui/components/Collapsible.tsx @@ -29,7 +29,7 @@ const Collapsible = ({ children }) => { : IconType.KeyboardArrowRightIcon } size="medium" - color="black" + color="neutral40" /> More Information diff --git a/ui/components/DataTable/SortableLabel.tsx b/ui/components/DataTable/SortableLabel.tsx index 73b0613495..878842833d 100644 --- a/ui/components/DataTable/SortableLabel.tsx +++ b/ui/components/DataTable/SortableLabel.tsx @@ -24,7 +24,7 @@ const TableButton = styled(Button)` &.MuiButton-text { min-width: 0px; .selected { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; } } &.arrow { diff --git a/ui/components/DetailModal.tsx b/ui/components/DetailModal.tsx index b458d938b5..551d678355 100644 --- a/ui/components/DetailModal.tsx +++ b/ui/components/DetailModal.tsx @@ -62,6 +62,6 @@ export default styled(DetailModal).attrs({ className: DetailModal.name })` padding: ${(props) => props.theme.spacing.small + " " + props.theme.spacing.medium}; .MuiIconButton-root { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; } `; diff --git a/ui/components/ErrorList.tsx b/ui/components/ErrorList.tsx index 9f038d39d8..62320c521b 100644 --- a/ui/components/ErrorList.tsx +++ b/ui/components/ErrorList.tsx @@ -57,7 +57,7 @@ const NavButton = styled(Button)` const ErrorsCount = styled.span` background: ${(props) => props.theme.colors.alertDark}; - color: ${(props) => props.theme.colors.white}; + color: ${(props) => props.theme.colors.neutral00}; padding: 4px; border-radius: 4px; margin: 0 4px; @@ -84,7 +84,11 @@ function ErrorList({ className, errors }: Props) { setExpand(false)}> - + {currentError.clusterName}:  {currentError.message} diff --git a/ui/components/FilterDialog.tsx b/ui/components/FilterDialog.tsx index d6dc58741b..5a74fcd6f0 100644 --- a/ui/components/FilterDialog.tsx +++ b/ui/components/FilterDialog.tsx @@ -89,7 +89,7 @@ const FilterSection = ({ name={`${header}${filterSeparator}${option}`} /> - + {_.toString(option) || "-"} diff --git a/ui/components/FluxObjectsTable.tsx b/ui/components/FluxObjectsTable.tsx index a73c4fd601..b39461223e 100644 --- a/ui/components/FluxObjectsTable.tsx +++ b/ui/components/FluxObjectsTable.tsx @@ -70,7 +70,7 @@ function FluxObjectsTable({ object: u, }) } - color={secret ? "black" : "primary10"} + color={secret ? "neutral40" : "primary10"} pointer={!secret} > {u.name} diff --git a/ui/components/FluxRuntime.tsx b/ui/components/FluxRuntime.tsx index a432f185b7..f68f08151b 100644 --- a/ui/components/FluxRuntime.tsx +++ b/ui/components/FluxRuntime.tsx @@ -15,7 +15,7 @@ const FluxVersionText = styled(Text)` margin-bottom: ${(props) => props.theme.spacing.medium}; span { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; font-weight: 400; margin-left: ${(props) => props.theme.spacing.xs}; } diff --git a/ui/components/GraphNode.tsx b/ui/components/GraphNode.tsx index fe8dfb7637..f10e058567 100644 --- a/ui/components/GraphNode.tsx +++ b/ui/components/GraphNode.tsx @@ -135,7 +135,7 @@ function GraphNode({ className, object }: Props) { object: object, }) } - color={secret ? "black" : "primary10"} + color={secret ? "neutral40" : "primary10"} pointer={!secret} semiBold={object.isCurrentNode} > diff --git a/ui/components/HealthCheckStatusIndicator.tsx b/ui/components/HealthCheckStatusIndicator.tsx index 2d01cc697c..34df864903 100644 --- a/ui/components/HealthCheckStatusIndicator.tsx +++ b/ui/components/HealthCheckStatusIndicator.tsx @@ -73,7 +73,7 @@ export default styled(HealthCheckStatusIndicator).attrs({ className: HealthCheckStatusIndicator.name, })` ${Icon} ${Text} { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; font-weight: 400; } `; diff --git a/ui/components/KubeStatusIndicator.tsx b/ui/components/KubeStatusIndicator.tsx index 075b76083e..da433171f2 100644 --- a/ui/components/KubeStatusIndicator.tsx +++ b/ui/components/KubeStatusIndicator.tsx @@ -211,7 +211,7 @@ export default styled(KubeStatusIndicator).attrs({ className: KubeStatusIndicator.name, })` ${Icon} ${Text} { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; font-weight: 400; } `; diff --git a/ui/components/LargeInfo.tsx b/ui/components/LargeInfo.tsx index 3becf4d37a..2107d1c571 100644 --- a/ui/components/LargeInfo.tsx +++ b/ui/components/LargeInfo.tsx @@ -18,7 +18,7 @@ function LargeInfo({ className, title, info, component }: Props) { {title}: - + {component ? component : info || "-"} diff --git a/ui/components/Modal.tsx b/ui/components/Modal.tsx index 3791cd4851..7238edf73d 100644 --- a/ui/components/Modal.tsx +++ b/ui/components/Modal.tsx @@ -26,7 +26,7 @@ export const Body = styled.div` display: flex; flex-direction: column; justify-content: space-evenly; - background-color: ${(props) => props.theme.colors.white}; + background-color: ${(props) => props.theme.colors.neutral00}; margin: 0 auto; max-width: 540px; padding: 16px 32px; diff --git a/ui/components/Nav.tsx b/ui/components/Nav.tsx index fc58c68a25..4b0820e8ee 100644 --- a/ui/components/Nav.tsx +++ b/ui/components/Nav.tsx @@ -49,7 +49,7 @@ const NavContent = styled.div<{ collapsed: boolean }>` width: 100%; height: 100%; border-top-right-radius: 10px; - background-color: ${(props) => props.theme.colors.white}; + background-color: ${(props) => props.theme.colors.neutral00}; //28px bottom padding is medium + xxs - in the theme these are strings with px at the end so you can't add them together. This lines up with the footer. padding: ${(props) => props.theme.spacing.medium} 0px 28px 0px; box-sizing: border-box; @@ -179,7 +179,7 @@ function Nav({ return ( props.theme.colors.white}; + background-color: ${(props) => props.theme.colors.neutral00}; border-radius: 10px; box-sizing: border-box; margin: 0 auto; diff --git a/ui/components/PodDetail.tsx b/ui/components/PodDetail.tsx index 19520c2a47..b0076b73b7 100644 --- a/ui/components/PodDetail.tsx +++ b/ui/components/PodDetail.tsx @@ -42,7 +42,7 @@ const ContainerDivider = styled(Flex)` border-bottom: 3px solid; border-image-slice: 1; border-image-source: ${(props) => - `linear-gradient(to right, ${props.theme.colors.neutral30} 0%, ${props.theme.colors.white} 100%)`}; + `linear-gradient(to right, ${props.theme.colors.neutral30} 0%, ${props.theme.colors.neutral00} 100%)`}; `; type ListProps = { diff --git a/ui/components/Policies/Utils/HeaderRows.tsx b/ui/components/Policies/Utils/HeaderRows.tsx index aff022eb61..13c4df7384 100644 --- a/ui/components/Policies/Utils/HeaderRows.tsx +++ b/ui/components/Policies/Utils/HeaderRows.tsx @@ -17,7 +17,7 @@ export function RowHeader({ children, rowkey, value }: RowItem) { {children ? ( children ) : ( - + {value || "--"} )} @@ -47,7 +47,7 @@ const HeaderRows = ({ items }: Props) => { {h.children ? ( h.children ) : ( - + {h.value || "-"} )} diff --git a/ui/components/Policies/Utils/Parameters.tsx b/ui/components/Policies/Utils/Parameters.tsx index ea26f2074d..77e3ed94e9 100644 --- a/ui/components/Policies/Utils/Parameters.tsx +++ b/ui/components/Policies/Utils/Parameters.tsx @@ -22,7 +22,7 @@ export const ParameterCell = ({ return ( {label} - {value} + {value} ); }; diff --git a/ui/components/UserSettings.tsx b/ui/components/UserSettings.tsx index a93a63ce22..a1f02a980e 100644 --- a/ui/components/UserSettings.tsx +++ b/ui/components/UserSettings.tsx @@ -26,7 +26,7 @@ const SettingsMenu = styled(Menu)` justify-content: flex-end; .MuiListItemIcon-root { min-width: 0; - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; } .MuiSvgIcon-root { padding-right: ${(props) => props.theme.spacing.xs}; @@ -40,7 +40,7 @@ const PersonButton = styled(IconButton)<{ open?: boolean }>` background-color: ${(props) => props.theme.colors.neutralGray}; color: ${(props) => props.theme.colors.neutral30}; :hover { - background-color: ${(props) => props.theme.colors.white}; + background-color: ${(props) => props.theme.colors.neutral00}; color: ${(props) => props.theme.colors.primary10}; } } diff --git a/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap b/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap index e9cdbae601..ecfa8a95c4 100644 --- a/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap +++ b/ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap @@ -207,7 +207,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 2 @@ -227,7 +227,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 3 @@ -247,7 +247,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 4 @@ -267,7 +267,7 @@ exports[`Metadata snapshots renders with data 1`] = ` Value 1 @@ -287,7 +287,7 @@ exports[`Metadata snapshots renders with data 1`] = ` <p><b>html</b></p> @@ -307,7 +307,7 @@ exports[`Metadata snapshots renders with data 1`] = ` This is first line @@ -362,7 +362,7 @@ This is second line some version @@ -397,7 +397,7 @@ This is second line Value 1 @@ -417,7 +417,7 @@ This is second line <p><b>html</b></p> @@ -437,7 +437,7 @@ This is second line { return { ...baseTheme, colors: { - black: "#fff", - white: "#1a1a1a", + black: "#1a1a1a", + white: "#ffffff", primary: "#009CCC", //only used in nav text when collapsed + selected/hover primaryLight05: "rgba(0,179,236,0.05)", @@ -75,11 +75,11 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { alertDark: "#9F3119", neutralGray: "#32324B", pipelineGray: "#4b5778", - neutral00: "#ffffff", + neutral00: "#1a1a1a", neutral10: "#737373", neutral20: "#d8d8d8", neutral30: "#f5f5f5", - neutral40: "#1a1a1a", + neutral40: "#ffffff", whiteToPrimary: "#32324B", grayToPrimary: "#009CCC", neutral20ToPrimary: "#32324B", @@ -103,7 +103,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { ...baseTheme, colors: { black: "#1a1a1a", - white: "#fff", + white: "#ffffff", primary: "#00b3ec", primaryLight05: "#E5F7FD", primaryLight10: "#98E0F7", @@ -163,7 +163,7 @@ export const GlobalStyle = createGlobalStyle` body { font-family: ${(props) => props.theme.fontFamilies.regular}; font-size: ${(props) => props.theme.fontSizes.medium}; - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; padding: 0; margin: 0; min-width: fit-content; @@ -228,8 +228,8 @@ export const muiTheme = (colors, mode) => main: colors.alertOriginal, }, text: { - //Neutral - black will switch to white, neutral40 will stay - primary: colors.black, + //Neutral - Neutral - 40 + primary: colors.neutral40, //Neutral - Neutral - 30 secondary: colors.neutral30, disabled: colors.neutral30, @@ -285,7 +285,7 @@ export const muiTheme = (colors, mode) => MuiCheckbox: { colorSecondary: { "&$disabled": { - color: mode === ThemeTypes.Dark && colors.black, + color: mode === ThemeTypes.Dark && colors.neutral40, }, }, }, @@ -293,7 +293,7 @@ export const muiTheme = (colors, mode) => underline: { "&::before": { borderBottom: - mode === ThemeTypes.Dark && `1px solid ${colors.black}`, + mode === ThemeTypes.Dark && `1px solid ${colors.neutral40}`, }, }, }, diff --git a/ui/pages/SignIn.tsx b/ui/pages/SignIn.tsx index d2d4f31c56..970c6887da 100644 --- a/ui/pages/SignIn.tsx +++ b/ui/pages/SignIn.tsx @@ -15,7 +15,7 @@ import images from "../lib/images"; import { withBasePath } from "../lib/utils"; export const FormWrapper = styled(Flex)` - background-color: ${(props) => props.theme.colors.white}; + background-color: ${(props) => props.theme.colors.neutral00}; border-radius: ${(props) => props.theme.borderRadius.soft}; width: 500px; align-content: space-between; From f752b5e488ecc5b05a798400f1e0add5da221652 Mon Sep 17 00:00:00 2001 From: Joshua Israel Date: Mon, 16 Oct 2023 13:01:11 -0400 Subject: [PATCH 5/6] a couple stragglers after local testing --- ui/components/GraphNode.tsx | 2 +- ui/components/Policies/Utils/PolicyUtils.tsx | 2 +- ui/components/SyncButton.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/components/GraphNode.tsx b/ui/components/GraphNode.tsx index f10e058567..9c82ae10f2 100644 --- a/ui/components/GraphNode.tsx +++ b/ui/components/GraphNode.tsx @@ -29,7 +29,7 @@ const GraphIcon = styled.img` `; const Node = styled(Flex)` - background: ${(props) => props.theme.colors.white}; + background: ${(props) => props.theme.colors.neutral00}; border: 5px solid ${(props) => props.theme.colors.grayToPrimary}; border-radius: ${nodeBorderRadius}px; user-select: none; diff --git a/ui/components/Policies/Utils/PolicyUtils.tsx b/ui/components/Policies/Utils/PolicyUtils.tsx index a17ac17859..7ec673d2ad 100644 --- a/ui/components/Policies/Utils/PolicyUtils.tsx +++ b/ui/components/Policies/Utils/PolicyUtils.tsx @@ -34,7 +34,7 @@ export const SectionWrapper = ({ title, children }) => { export const ChipWrap = styled(Chip)` &.MuiChip-root { - color: ${(props) => props.theme.colors.black}; + color: ${(props) => props.theme.colors.neutral40}; background-color: ${(props) => props.theme.colors.neutralGray}; padding: 2px 4px; height: inherit; diff --git a/ui/components/SyncButton.tsx b/ui/components/SyncButton.tsx index 92cec678e9..3ae7dec5a4 100644 --- a/ui/components/SyncButton.tsx +++ b/ui/components/SyncButton.tsx @@ -43,7 +43,7 @@ const Sync = styled(Button)<{ $hideDropdown: boolean }>` export const DropDown = styled(Flex)` position: absolute; overflow: hidden; - background: ${(props) => props.theme.colors.white}; + background: ${(props) => props.theme.colors.neutral00}; height: ${(props) => (props.open ? "100%" : "0px")}; transition-property: height; transition-duration: 0.2s; From 723240918a189f2151cd653df33587fc7b2d25fd Mon Sep 17 00:00:00 2001 From: Joshua Israel Date: Mon, 16 Oct 2023 13:20:08 -0400 Subject: [PATCH 6/6] missing hashtags --- ui/lib/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/lib/theme.ts b/ui/lib/theme.ts index 74261be38c..2270551ad4 100644 --- a/ui/lib/theme.ts +++ b/ui/lib/theme.ts @@ -119,7 +119,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { alertOriginal: "#BC3B1D", alertDark: "#9F3119", neutralGray: "#F6F7F9", - pipelineGray: "dde1e9", + pipelineGray: "#dde1e9", neutral00: "#ffffff", neutral10: "#f5f5f5", neutral20: "#d8d8d8", @@ -129,7 +129,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => { grayToPrimary: "#737373", neutral20ToPrimary: "#d8d8d8", backGray: "#eef0f4", - pipelinesBackGray: "eef0f4", + pipelinesBackGray: "#eef0f4", blueWithOpacity: "rgba(0, 179, 236, 0.1)", feedbackLight: "#FCE6D2", feedbackMedium: "#F7BF8E",