Add colors and exports for new EE pipelines UI (#4084)

* add compute ready to exports * additional pipeline colors * snaps * black and white will stay their respective colors in light/dark modes, while neutral colors will switch * a couple stragglers after local testing * missing hashtags
weaveworks · Oct 16, 2023 · ff77b2f · ff77b2f
1 parent 564cec1
commit ff77b2f
Show file tree

Hide file tree

Showing 22 changed files with 48 additions and 35 deletions.
diff --git 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
@@ -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}
       >
         <AlertTitle>{title}</AlertTitle>
-        <Text color="black">{message}</Text>
+        <Text color="neutral40">{message}</Text>
       </MaterialAlert>
     </Flex>
   );
@@ -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
@@ -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
@@ -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
@@ -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) {
         <Alert severity="error" onClose={() => setExpand(false)}>
           <Flex align center>
             <Icon size="medium" type={IconType.ErrorIcon} color="alertDark" />
-            <ErrorText size="medium" data-testid="error-message" color="black">
+            <ErrorText
+              size="medium"
+              data-testid="error-message"
+              color="neutral40"
+            >
               {currentError.clusterName}:&nbsp;
               {currentError.message}
             </ErrorText>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -22,7 +22,7 @@ export const ParameterCell = ({
   return (
     <Flex wide column data-testid={label} gap="4">
       <Text color="neutral30">{label}</Text>
-      <Text color="black">{value}</Text>
+      <Text color="neutral40">{value}</Text>
     </Flex>
   );
 };

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;