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/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/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/FluxObjectsTable.tsx b/ui/components/FluxObjectsTable.tsx
index 73dff31c52..b39461223e 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";
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/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/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/Page.tsx b/ui/components/Page.tsx
index 033a5f4da8..14701e4fcd 100644
--- a/ui/components/Page.tsx
+++ b/ui/components/Page.tsx
@@ -35,7 +35,7 @@ const PageLayout = styled(Flex)`
overflow: hidden;
`;
export const Content = styled(Flex)`
- background-color: ${(props) => 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/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/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;
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__/Page.test.tsx.snap b/ui/components/__tests__/__snapshots__/Page.test.tsx.snap
index 21a52fe0e2..63c693b958 100644
--- a/ui/components/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/ui/components/__tests__/__snapshots__/Page.test.tsx.snap
@@ -197,7 +197,7 @@ exports[`Page snapshots default 1`] = `
}
.c10.MuiIconButton-root:hover {
- background-color: #fff;
+ background-color: #ffffff;
color: #009CCC;
}
@@ -221,7 +221,7 @@ exports[`Page snapshots default 1`] = `
}
.c15 {
- background-color: #fff;
+ background-color: #ffffff;
border-radius: 10px;
box-sizing: border-box;
margin: 0 auto;
diff --git a/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap b/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
index c3c2b33cf2..670a346298 100644
--- a/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
+++ b/ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
.c5 {
position: absolute;
overflow: hidden;
- background: #fff;
+ background: #ffffff;
height: 0px;
-webkit-transition-property: height;
transition-property: height;
@@ -330,7 +330,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
.c9 {
position: absolute;
overflow: hidden;
- background: #fff;
+ background: #ffffff;
height: 0px;
-webkit-transition-property: height;
transition-property: height;
@@ -640,7 +640,7 @@ exports[`SyncActions snapshots suspended 1`] = `
.c9 {
position: absolute;
overflow: hidden;
- background: #fff;
+ background: #ffffff;
height: 0px;
-webkit-transition-property: height;
transition-property: height;
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,
diff --git a/ui/lib/theme.ts b/ui/lib/theme.ts
index 16931b38f6..2270551ad4 100644
--- a/ui/lib/theme.ts
+++ b/ui/lib/theme.ts
@@ -56,8 +56,8 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
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)",
@@ -74,6 +74,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
alertOriginal: "#BC3B1D",
alertDark: "#9F3119",
neutralGray: "#32324B",
+ pipelineGray: "#4b5778",
neutral00: "#1a1a1a",
neutral10: "#737373",
neutral20: "#d8d8d8",
@@ -83,6 +84,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
grayToPrimary: "#009CCC",
neutral20ToPrimary: "#32324B",
backGray: "#32324B",
+ pipelinesBackGray: "#4b5778",
blueWithOpacity: "rgba(0, 179, 236, 0.1)",
feedbackLight: "#8A460A",
feedbackMedium: "#F7BF8E",
@@ -101,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",
@@ -117,6 +119,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
alertOriginal: "#BC3B1D",
alertDark: "#9F3119",
neutralGray: "#F6F7F9",
+ pipelineGray: "#dde1e9",
neutral00: "#ffffff",
neutral10: "#f5f5f5",
neutral20: "#d8d8d8",
@@ -126,6 +129,7 @@ export const theme = (mode: ThemeTypes = ThemeTypes.Light): DefaultTheme => {
grayToPrimary: "#737373",
neutral20ToPrimary: "#d8d8d8",
backGray: "#eef0f4",
+ pipelinesBackGray: "#eef0f4",
blueWithOpacity: "rgba(0, 179, 236, 0.1)",
feedbackLight: "#FCE6D2",
feedbackMedium: "#F7BF8E",
@@ -159,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;
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;
diff --git a/ui/typedefs/styled.d.ts b/ui/typedefs/styled.d.ts
index 012cc05a4c..b394cf754e 100644
--- a/ui/typedefs/styled.d.ts
+++ b/ui/typedefs/styled.d.ts
@@ -15,6 +15,7 @@ export namespace colors {
const alertMedium: string;
const alertDark: string;
const neutralGray: string;
+ const pipelineGray: string;
const neutral00: string;
const neutral10: string;
const neutral20: string;
@@ -24,6 +25,7 @@ export namespace colors {
const grayToPrimary: string;
const neutral20ToPrimary: string;
const backGray: string;
+ const pipelinesBackGray: string;
const blueWithOpacity: string;
const feedbackLight: string;
const feedbackMedium: string;