Midnight (#2847)

* install github app button

* general error component

* auto-generate cluster name

* fix button text color

* infra tab for porter user

* init

* standard default

* usage exceeded

* launch and expanded

dashboard/src/App.tsx

@@ -1,10 +1,12 @@
 import React, { Component } from "react";
 import { BrowserRouter } from "react-router-dom";
 import PorterErrorBoundary from "shared/error_handling/PorterErrorBoundary";
-import styled, { createGlobalStyle } from "styled-components";
+import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import MainWrapper from "./main/MainWrapper";
+import midnight from "shared/themes/midnight";
+import standard from "shared/themes/standard";
 
 const queryClient = new QueryClient();
 
@@ -12,14 +14,16 @@ export default class App extends Component {
   render() {
     return (
       <QueryClientProvider client={queryClient}>
-        <StyledMain>
-          <GlobalStyle />
-          <PorterErrorBoundary errorBoundaryLocation="globalErrorBoundary">
-            <BrowserRouter>
-              <MainWrapper />
-            </BrowserRouter>
-          </PorterErrorBoundary>
-        </StyledMain>
+        <ThemeProvider theme={standard}>
+          <StyledMain>
+            <GlobalStyle />
+            <PorterErrorBoundary errorBoundaryLocation="globalErrorBoundary">
+              <BrowserRouter>
+                <MainWrapper />
+              </BrowserRouter>
+            </PorterErrorBoundary>
+          </StyledMain>
+        </ThemeProvider>
       </QueryClientProvider>
     );
   }

dashboard/src/components/ClusterProvisioningPlaceholder.tsx

@@ -61,7 +61,7 @@ const Img = styled.img`
 const ClusterPlaceholder = styled.div`
   padding: 25px;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   padding-bottom: 35px;
 `;

dashboard/src/components/MultiSelectFilter.tsx

@@ -189,7 +189,7 @@ const StyledMultiSelectFilter = styled.div`
   font-size: 13px;
   position: relative;
   padding: 10px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border-radius: 5px;
   border: 1px solid #aaaabb33;
   display: flex;

dashboard/src/components/OldPlaceholder.tsx

@@ -30,5 +30,5 @@ const StyledPlaceholder = styled.div<{
   font-size: 13px;
   color: #ffffff44;
   border-radius: 5px;
-  background: #ffffff11;
+  background: ${props => props.theme.fg};
 `;

dashboard/src/components/Placeholder.tsx

@@ -60,7 +60,7 @@ const StyledPlaceholder = styled.div<{
   justify-content: center;
   font-size: 13px;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   padding-bottom: 60px;
 

dashboard/src/components/RadioFilter.tsx

@@ -207,7 +207,7 @@ const StyledRadioFilter = styled.div<{ noMargin?: boolean }>`
   font-size: 13px;
   position: relative;
   padding: 10px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border-radius: 5px;
   display: flex;
   align-items: center;

dashboard/src/components/ResourceTab.tsx

@@ -143,7 +143,7 @@ const StyledResourceTab = styled.div`
   width: 100%;
   margin-bottom: 2px;
   font-size: 13px;
-  background: #ffffff11;
+  background: ${props => props.theme.fg};
   border-bottom-left-radius: ${(props: {
     isLast: boolean;
     roundAllCorners: boolean;

dashboard/src/components/Selector.tsx

@@ -346,7 +346,7 @@ const MainSelector = styled.div<{
   justify-content: space-between;
   align-items: center;
   cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
-  background: ${props => props.expanded ? "#ffffff33" : "#ffffff11"};
+  background: ${props => props.expanded ? "#ffffff33" : props.theme.fg};
   :hover {
     background: ${props => props.expanded ? "#ffffff33" : (
       props.disabled ? "#ffffff11" : "#ffffff22"

dashboard/src/components/TitleSection.tsx

@@ -91,6 +91,7 @@ const StyledTitle = styled.div<{
 }>`
   font-size: 21px;
   user-select: text;
+  color: ${props => props.theme.text.primary};
   text-transform: ${(props) => (props.capitalize ? "capitalize" : "")};
   display: flex;
   align-items: center;

dashboard/src/components/form-components/InputRow.tsx

@@ -104,10 +104,11 @@ const InputWrapper = styled.div`
   display: flex;
   margin-bottom: -1px;
   align-items: center;
+  overflow: hidden;
   border: 1px solid
     ${(props: { width: string; hasError: boolean }) =>
       props.hasError ? "red" : "#ffffff55"};
-  border-radius: 3px;
+  border-radius: 5px;
   ${(props: { width: string; hasError: boolean }) => {
     if (props.width) {
       return `width:${props.width};`;
@@ -119,7 +120,7 @@ const Input = styled.input<{ disabled: boolean; width: string }>`
   outline: none;
   border: none;
   font-size: 13px;
-  background: #ffffff11;
+  background: ${props => props.theme.fg};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "")};
   width: ${(props) => (props.width ? props.width : "100%")};
   color: ${(props) => (props.disabled ? "#ffffff44" : "white")};

dashboard/src/components/porter-form/PorterForm.tsx

@@ -268,6 +268,6 @@ const StyledPorterForm = styled.div<{ showSave?: boolean }>`
   margin-bottom: 5px;
   font-size: 13px;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
 `;

dashboard/src/components/porter/Text.tsx

@@ -43,7 +43,7 @@ const StyledText = styled.div<{
 }>`
   line-height: 1.5;
   font-weight: ${props => props.weight || 400};
-  color: ${props => props.color || "#ffffff"};
+  color: ${props => props.color || props.theme.text.primary};
   font-size: ${props => props.size || 13}px;
   display: flex;
   align-items: center;

dashboard/src/main/home/Home.tsx

@@ -492,7 +492,7 @@ const ViewWrapper = styled.div`
   flex: 1;
   overflow-y: auto;
   justify-content: center;
-  background: #202227;
+  background: ${props => props.theme.bg};
   position: relative;
 `;
 

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -352,7 +352,7 @@ const Title = styled.div`
   padding: 12px 35px 12px 45px;
   font-size: 14px;
   font-family: "Work Sans", sans-serif;
-  color: #ffffff;
+  color: ${props => props.theme.text.primary};
   width: 80%;
   overflow: hidden;
   white-space: nowrap;
@@ -393,7 +393,7 @@ const StyledChart = styled.div`
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   border-radius: 5px;
-  background: linear-gradient(180deg, #26292e, #24272c);
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/cluster-dashboard/dashboard/ClusterSettings.tsx

@@ -339,7 +339,7 @@ const StyledSettingsSection = styled.div`
   overflow: auto;
   height: 100%;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
 `;
 

dashboard/src/main/home/cluster-dashboard/dashboard/NamespaceList.tsx

@@ -300,7 +300,7 @@ const StyledCard = styled.div`
     }
   }
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/cluster-dashboard/dashboard/NodeList.tsx

@@ -156,7 +156,7 @@ const StyledChart = styled.div`
     margin-bottom: 25px;
   }
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
 `;
 

dashboard/src/main/home/cluster-dashboard/env-groups/CreateEnvGroup.tsx

@@ -234,7 +234,7 @@ const Wrapper = styled.div`
   padding-bottom: 25px;
   border-radius: 5px;
   margin-top: -15px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   margin-bottom: 30px;
 `;

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroup.tsx

@@ -201,7 +201,7 @@ const StyledEnvGroup = styled.div`
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -913,7 +913,7 @@ const InnerWrapper = styled.div<{ full?: boolean }>`
   overflow: auto;
   margin-bottom: 30px;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
 `;
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -1157,7 +1157,7 @@ const TabButton = styled.div`
   position: absolute;
   right: 0px;
   height: 30px;
-  background: linear-gradient(to right, #20222700, #202227 20%);
+  background: linear-gradient(to right, #00000000, ${props => props.theme.bg} 20%);
   padding-left: 30px;
   display: flex;
   align-items: center;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -752,7 +752,7 @@ const TabButton = styled.div`
   position: absolute;
   right: 0px;
   height: 30px;
-  background: linear-gradient(to right, #20222700, #202227 20%);
+  background: linear-gradient(to right, #00000000, ${props => props.theme.bg} 20%);
   padding-left: 30px;
   display: flex;
   align-items: center;

dashboard/src/main/home/cluster-dashboard/expanded-chart/RevisionSection.tsx

@@ -497,7 +497,7 @@ const StyledRevisionSection = styled.div`
   margin: 20px 0px 18px;
   overflow: hidden;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -482,7 +482,7 @@ const StyledSettingsSection = styled.div`
   overflow: auto;
   height: calc(100% - 55px);
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
 `;
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -279,7 +279,7 @@ const StyledJob = styled.div`
   margin-bottom: 20px;
   overflow: hidden;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/Logs.tsx

@@ -318,7 +318,7 @@ const LogStream = styled.div`
   float: right;
   height: 100%;
   font-size: 13px;
-  background: #121318;
+  background: #000000;
   user-select: text;
   max-width: 65%;
   overflow-y: auto;

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -219,7 +219,7 @@ const ClusterRow = styled.div`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/dashboard/OldClusterList.tsx

@@ -241,7 +241,7 @@ const TemplateBlock = styled.div`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -204,8 +204,6 @@ const MainRow = styled.div`
   padding: 15px;
   border-radius: 5px;
   :hover {
-    background: ${(props: { disabled: boolean }) =>
-      props.disabled ? "" : "#ffffff11"};
     > i {
       background: ${(props: { disabled: boolean }) =>
         props.disabled ? "" : "#ffffff11"};
@@ -233,7 +231,7 @@ const Integration = styled.div`
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 20px;
   border-radius: 5px;
-  background: linear-gradient(180deg, #26292e, #24272c);
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/integrations/IntegrationRow.tsx

@@ -133,7 +133,7 @@ const Integration = styled.div`
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 15px;
   border-radius: 5px;
-  background: linear-gradient(180deg, #26292e, #24272c);
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/launch/TemplateList.tsx

@@ -224,7 +224,7 @@ const TemplateBlock = styled.div`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: linear-gradient(160deg, #26292e, #1e2023);
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/launch/launch-flow/SettingsPage.tsx

@@ -346,7 +346,7 @@ const BackButton = styled.div`
   border-radius: 100px;
   width: ${(props: { width: string }) => props.width};
   color: white;
-  background: #ffffff11;
+  background: ${props => props.theme.fg};
 
   :hover {
     background: #ffffff22;

dashboard/src/main/home/launch/launch-flow/SourcePage.tsx

@@ -425,7 +425,7 @@ const Block = styled.div<{ disabled?: boolean }>`
   position: relative;
 
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
   }
@@ -491,6 +491,6 @@ const StyledSourceBox = styled.div`
   margin-top: 6px;
   margin-bottom: 25px;
   border-radius: 5px;
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
 `;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/StatusPage.tsx

@@ -189,18 +189,18 @@ export const StatusPage = ({
 
 const Placeholder = styled.div`
   padding: 30px;
-  margin-top: 35px;
   padding-bottom: 40px;
   font-size: 13px;
   color: #ffffff44;
   min-height: 400px;
   height: 50vh;
-  background: #ffffff11;
+  background: ${props => props.theme.fg};
   border-radius: 8px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid #494b4f;
 
   > i {
     font-size: 18px;

dashboard/src/main/home/provisioner/ProvisionerSettings.tsx

@@ -401,7 +401,7 @@ const Block = styled.div<{ disabled?: boolean }>`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: linear-gradient(180deg, #26292e, #24272c);
+  background: ${props => props.theme.clickable.bg};
   border: 1px solid #494b4f;
   :hover {
     border: ${(props) => (props.disabled ? "" : "1px solid #7a7b80")};

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -308,7 +308,7 @@ const NavButton = styled(SidebarLink)`
   padding: 0 30px 2px 8px;
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
-  color: #ffffff;
+  color: ${props => props.theme.text.primary};
   cursor: ${(props: { disabled?: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
 
@@ -333,6 +333,7 @@ const Img = styled.img<{ enlarge?: boolean }>`
   padding-top: 4px;
   border-radius: 3px;
   margin-right: 8px;
+  opacity: 85%;
 `;
 
 const ClusterName = styled.div`

dashboard/src/main/home/sidebar/Clusters.tsx

@@ -317,7 +317,7 @@ const NavButton = styled(SidebarLink)`
   padding: 0 30px 2px 8px;
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
-  color: #ffffff;
+  color: ${props => props.theme.text.primary};
   cursor: ${(props: { disabled?: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
 

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -157,7 +157,7 @@ const InitializeButton = styled.div`
   font-size: 13px;
   font-weight: 500;
   border-radius: 3px;
-  color: #ffffff;
+  color: ${props => props.theme.text.primary};
   padding-bottom: 1px;
   cursor: pointer;
   background: #ffffff11;
@@ -255,6 +255,7 @@ const ProjectIconAlt = styled(ProjectIcon)`
 const StyledProjectSection = styled.div`
   position: relative;
   margin-left: 3px;
+  color: ${props => props.theme.text.primary};
 `;
 
 const MainSelector = styled.div`

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -241,7 +241,7 @@ const NavButton = styled(SidebarLink)`
   padding: 0 30px 2px 6px;
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
-  color: #ffffff;
+  color: ${props => props.theme.text.primary};
   cursor: ${(props: { disabled?: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
 
@@ -272,6 +272,7 @@ const Img = styled.img<{ enlarge?: boolean }>`
   padding-top: 4px;
   border-radius: 3px;
   margin-right: 8px;
+  opacity: 0.8;
 `;
 
 const SidebarBg = styled.div`
@@ -279,14 +280,14 @@ const SidebarBg = styled.div`
   top: 0;
   left: 0;
   width: 100%;
-  background-color: #202227;
+  background-color: ${props => props.theme.bg};
   height: 100%;
   z-index: -1;
   border-right: 1px solid #383a3f;
 `;
 
 const SidebarLabel = styled.div`
-  color: #ffffff99;
+  color: ${props => props.theme.text.primary};
   padding: 5px 23px;
   margin-bottom: 5px;
   font-size: 13px;

dashboard/src/shared/themes/midnight.ts

@@ -0,0 +1,12 @@
+const theme = {
+  bg: "#121212",
+  fg: "#171B21",
+  clickable: {
+    bg: "linear-gradient(180deg, #171B21, #121212)",
+  },
+  text: {
+    primary: "#DFDFE1",
+  },
+}
+
+export default theme;

dashboard/src/shared/themes/standard.ts

@@ -0,0 +1,12 @@
+const theme = {
+  bg: "#202227",
+  fg: "#27292e",
+  clickable: {
+    bg: "#27292e",
+  },
+  text: {
+    primary: "#ffffff",
+  },
+}
+
+export default theme;