flattened integrations

dashboard/src/components/Selector.tsx

@@ -98,7 +98,7 @@ export default class Selector extends Component<SelectorPropsType, StateType> {
           }}
         >
           <Plus>+</Plus>
-          Add Namespace
+          Add namespace
         </NewOption>
       );
     }

dashboard/src/components/expanded-object/Header.tsx

@@ -1,7 +1,6 @@
 import DynamicLink from "components/DynamicLink";
 import React from "react";
 import styled from "styled-components";
-import backArrow from "assets/back_arrow.png";
 import TitleSection from "components/TitleSection";
 
 import leftArrow from "assets/left-arrow.svg";
@@ -31,11 +30,16 @@ const Header: React.FunctionComponent<Props> = (props) => {
     <>
       <BreadcrumbRow>
         <Breadcrumb to={back_link}>
-          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
         </Breadcrumb>
       </BreadcrumbRow>
       <HeaderWrapper>
-        <Title icon={icon} iconWidth="25px" materialIconClass={materialIconClass}>
+        <Title
+          icon={icon}
+          iconWidth="25px"
+          materialIconClass={materialIconClass}
+        >
           {name}
           <Flex>{inline_title_items}</Flex>
         </Title>

dashboard/src/main/home/ModalHandler.tsx

@@ -143,7 +143,7 @@ const ModalHandler: React.FC<{
             onRequestClose={() => setCurrentModal(null, null)}
             width="600px"
             height="220px"
-            title="Add Namespace"
+            title="Add namespace"
           >
             <NamespaceModal />
           </Modal>

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

@@ -369,9 +369,9 @@ const StyledChart = styled.div`
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   border-radius: 5px;
-  background: #262A30;
+  background: #262a30;
   border: 1px solid #494b4f;
   :hover {
-    border: 1px solid #7A7B80;
+    border: 1px solid #7a7b80;
   }
 `;

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

@@ -132,7 +132,10 @@ export const Dashboard: React.FunctionComponent = () => {
       const res = await api.getCluster(
         "<token>",
         {},
-        { project_id: context.currentProject.id, cluster_id: context.currentCluster.id }
+        {
+          project_id: context.currentProject.id,
+          cluster_id: context.currentCluster.id,
+        }
       );
       if (res.data) {
         const { ingress_ip, ingress_error } = res.data;
@@ -161,12 +164,7 @@ export const Dashboard: React.FunctionComponent = () => {
             <i className="material-icons">info</i> Info
           </InfoLabel>
         </TopRow>
-        <Description>
-          {renderIngressIp(
-            ingressIp,
-            ingressError
-          )}
-        </Description>
+        <Description>{renderIngressIp(ingressIp, ingressError)}</Description>
       </InfoSection>
 
       <TabSelector

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

@@ -44,7 +44,13 @@ const Metrics: React.FC = () => {
     if (selectedMetric && selectedRange && selectedIngress) {
       getMetrics();
     }
-  }, [selectedMetric, selectedRange, selectedIngress, selectedPercentile, currentCluster]);
+  }, [
+    selectedMetric,
+    selectedRange,
+    selectedIngress,
+    selectedPercentile,
+    currentCluster,
+  ]);
 
   useEffect(() => {
     Promise.all([

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

@@ -155,7 +155,7 @@ export const NamespaceList: React.FunctionComponent = () => {
               {isAuthorized("namespace", "", ["get", "delete"]) &&
                 isAvailableForDeletion(namespace?.metadata?.name) &&
                 namespace?.status?.phase === "Active" && (
-                  <OptionsDropdown.Dropdown>
+                  <OptionsDropdown.Dropdown expandIcon="more_vert" shrinkIcon="more_vert">
                     <OptionsDropdown.Option onClick={() => onDelete(namespace)}>
                       <i className="material-icons-outlined">delete</i>
                       <span>Delete</span>
@@ -281,17 +281,14 @@ const Button = styled.div`
 `;
 
 const StyledCard = styled.div`
-  background: #26282f;
   min-height: 80px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 1px solid #26282f;
-  box-shadow: 0 4px 15px 0px #00000055;
-  border-radius: 8px;
   padding: 14px;
   animation: fadeIn 0.5s;
+  cursor: pointer;
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -300,12 +297,11 @@ const StyledCard = styled.div`
       opacity: 1;
     }
   }
-
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
   :hover {
-    transform: scale(1.05);
-    box-shadow: 0 8px 20px 0px #00000030;
-    cursor: pointer;
+    border: 1px solid #7a7b80;
   }
 `;
 

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

@@ -148,17 +148,16 @@ const NodeListWrapper = styled.div`
 `;
 
 const StyledChart = styled.div`
-  background: #26282f;
   padding: 14px;
-  border-radius: 8px;
-  box-shadow: 0 4px 15px 0px #00000055;
   position: relative;
-  border: 2px solid #9eb4ff00;
   width: 100%;
   height: 100%;
   :not(:last-child) {
     margin-bottom: 25px;
   }
+  border-radius: 8px;
+  background: #262a30;
+  border: 1px solid #494b4f;
 `;
 
 const StatusHeader = styled.div`

dashboard/src/main/home/cluster-dashboard/dashboard/node-view/ExpandedNodeView.tsx

@@ -92,7 +92,8 @@ export const ExpandedNodeView = () => {
     <StyledExpandedNodeView>
       <BreadcrumbRow>
         <Breadcrumb onClick={closeNodeView}>
-          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
         </Breadcrumb>
       </BreadcrumbRow>
       <HeaderWrapper>

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

@@ -203,9 +203,9 @@ const StyledEnvGroup = styled.div`
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   border-radius: 5px;
-  background: #262A30;
+  background: #262a30;
   border: 1px solid #494b4f;
   :hover {
-    border: 1px solid #7A7B80;
+    border: 1px solid #7a7b80;
   }
 `;

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

@@ -421,7 +421,8 @@ export const ExpandedEnvGroupFC = ({
     <StyledExpandedChart>
       <BreadcrumbRow>
         <Breadcrumb onClick={closeExpanded}>
-          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
         </Breadcrumb>
       </BreadcrumbRow>
       <HeaderWrapper>

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

@@ -762,7 +762,8 @@ const ExpandedChart: React.FC<Props> = (props) => {
         <StyledExpandedChart>
           <BreadcrumbRow>
             <Breadcrumb onClick={props.closeChart}>
-              <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+              <ArrowIcon src={leftArrow} />
+              <Wrap>Back</Wrap>
             </Breadcrumb>
           </BreadcrumbRow>
           <HeaderWrapper>
@@ -903,6 +904,7 @@ const BreadcrumbRow = styled.div`
   width: 100%;
   display: flex;
   justify-content: flex-start;
+  z-index: 999;
 `;
 
 const Breadcrumb = styled.div`

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

@@ -429,7 +429,8 @@ const ExpandedJobHeader: React.FC<{
   <>
     <BreadcrumbRow>
       <Breadcrumb onClick={closeChart}>
-        <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+        <ArrowIcon src={leftArrow} />
+        <Wrap>Back</Wrap>
       </Breadcrumb>
     </BreadcrumbRow>
     <HeaderWrapper>

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

@@ -199,7 +199,8 @@ const ExpandedJobRun = ({
     <StyledExpandedChart>
       <BreadcrumbRow>
         <Breadcrumb onClick={onClose}>
-          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
         </Breadcrumb>
       </BreadcrumbRow>
       <HeaderWrapper>

dashboard/src/main/home/cluster-dashboard/preview-environments/environments/EnvironmentCard.tsx

@@ -174,10 +174,10 @@ const EnvironmentCardWrapper = styled(DynamicLink)`
   padding: 12px;
   padding-left: 14px;
   border-radius: 5px;
-  background: #262A30;
+  background: #262a30;
   border: 1px solid #494b4f;
   :hover {
-    border: 1px solid #7A7B80;
+    border: 1px solid #7a7b80;
   }
   animation: fadeIn 0.5s;
   @keyframes fadeIn {

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/ExpandedStack.tsx

@@ -96,7 +96,8 @@ const ExpandedStack = () => {
     <div>
       <BreadcrumbRow>
         <Breadcrumb to="/stacks">
-          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
         </Breadcrumb>
       </BreadcrumbRow>
       <StackTitleWrapper>
@@ -156,7 +157,7 @@ const ExpandedStack = () => {
                 <Action.Row>
                   <Action.Button to={`${url}/new-app-resource`}>
                     <i className="material-icons">add</i>
-                    Create App Resource
+                    Create app resource
                   </Action.Button>
                 </Action.Row>
                 {currentRevision.id !== stack.latest_revision.id ? (
@@ -185,7 +186,7 @@ const ExpandedStack = () => {
             ),
           },
           {
-            label: "Source Config",
+            label: "Source config",
             value: "source_config",
             component: (
               <>
@@ -199,7 +200,7 @@ const ExpandedStack = () => {
             ),
           },
           {
-            label: "Env Groups",
+            label: "Env groups",
             value: "env_groups",
             component: (
               <>

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/styles.tsx

@@ -17,7 +17,7 @@ export const Card = {
     padding-left: 14px;
     align-items: center;
     border-radius: 5px;
-    background: #262A30;
+    background: #262a30;
     border: 1px solid #494b4f;
 
     ${(props) => {

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

@@ -3,10 +3,7 @@ import styled from "styled-components";
 
 import { Context } from "shared/Context";
 import api from "shared/api";
-import {
-  ClusterType,
-  DetailedClusterType,
-} from "shared/types";
+import { ClusterType, DetailedClusterType } from "shared/types";
 import Helper from "components/form-components/Helper";
 import { pushFiltered } from "shared/routing";
 
@@ -245,10 +242,10 @@ const TemplateBlock = styled.div`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: #262A30;
+  background: #262a30;
   border: 1px solid #494b4f;
   :hover {
-    border: 1px solid #7A7B80;
+    border: 1px solid #7a7b80;
   }
 
   animation: fadeIn 0.3s 0s;
@@ -265,4 +262,4 @@ const TemplateBlock = styled.div`
 const TemplateList = styled.div`
   overflow-y: auto;
   overflow: visible;
-`;
+`;

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

@@ -11,6 +11,7 @@ import Loading from "../../../components/Loading";
 import SlackIntegrationList from "./SlackIntegrationList";
 import TitleSection from "components/TitleSection";
 import GitlabIntegrationList from "./GitlabIntegrationList";
+import leftArrow from "assets/left-arrow.svg";
 
 type Props = RouteComponentProps & {
   category: string;
@@ -112,15 +113,14 @@ const IntegrationCategories: React.FC<Props> = (props) => {
 
   return (
     <>
+      <BreadcrumbRow>
+        <Breadcrumb onClick={() => pushFiltered(props, "/integrations", ["project_id"])}>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
       <Flex>
-        <TitleSection
-          handleNavBack={() =>
-            pushFiltered(props, "/integrations", ["project_id"])
-          }
-          icon={icon}
-        >
-          {label}
-        </TitleSection>
+        <TitleSection icon={icon} iconWidth="32px">{label}</TitleSection>
         <Button
           onClick={() => {
             if (props.category === "gitlab") {
@@ -169,6 +169,39 @@ const IntegrationCategories: React.FC<Props> = (props) => {
 
 export default withRouter(IntegrationCategories);
 
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled.div`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
 const Flex = styled.div`
   display: flex;
   align-items: center;
@@ -196,10 +229,12 @@ const Button = styled.div`
     background: #505edddd;
   }
   color: white;
+  height: 35px;
   font-weight: 500;
   font-size: 13px;
-  padding: 10px 15px;
-  border-radius: 3px;
+  padding: 7px 7px;
+  padding-right: 12px;
+  border-radius: 5px;
   cursor: pointer;
   box-shadow: 0 5px 8px 0px #00000010;
   display: flex;
@@ -210,10 +245,10 @@ const Button = styled.div`
   i {
     width: 20px;
     height: 20px;
-    font-size: 16px;
+    font-size: 15px;
     display: flex;
     align-items: center;
-    margin-right: 10px;
+    margin-right: 5px;
     justify-content: center;
   }
 `;

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

@@ -159,11 +159,11 @@ export default class IntegrationList extends Component<PropsType, StateType> {
     >
       {this.allCollapsed() ? (
         <>
-          <i className="material-icons">expand_more</i> Expand All
+          <i className="material-icons">expand_more</i> Expand all
         </>
       ) : (
         <>
-          <i className="material-icons">expand_less</i> Collapse All
+          <i className="material-icons">expand_less</i> Collapse all
         </>
       )}
     </Button>
@@ -182,9 +182,6 @@ export default class IntegrationList extends Component<PropsType, StateType> {
           onYes={this.handleDeleteIntegration}
           onNo={() => this.setState({ isDelete: false })}
         />
-        {this.props.titles && this.props.titles.length > 0 && (
-          <ControlRow>{this.collapseAllButton()}</ControlRow>
-        )}
         {this.renderContents()}
       </StyledIntegrationList>
     );
@@ -200,12 +197,11 @@ const Flex = styled.div`
 `;
 
 const MainRow = styled.div`
-  height: 70px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 25px;
+  padding: 15px;
   border-radius: 5px;
   :hover {
     background: ${(props: { disabled: boolean }) =>
@@ -233,12 +229,15 @@ const Integration = styled.div`
   margin-left: -2px;
   display: flex;
   flex-direction: column;
-  background: #26282f;
   cursor: ${(props: { disabled: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
-  margin-bottom: 15px;
-  border-radius: 8px;
-  box-shadow: 0 4px 15px 0px #00000055;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
+  :hover {
+    border: 1px solid #7a7b80;
+  }
 `;
 
 const Label = styled.div`
@@ -249,7 +248,7 @@ const Label = styled.div`
 
 const Icon = styled.img`
   width: 30px;
-  margin-right: 18px;
+  margin-right: 15px;
 `;
 
 const Placeholder = styled.div`
@@ -267,7 +266,7 @@ const Placeholder = styled.div`
 `;
 
 const StyledIntegrationList = styled.div`
-  margin-top: 20px;
+  margin-top: 30px;
   margin-bottom: 80px;
 `;
 
@@ -292,7 +291,7 @@ const Button = styled.div`
   font-size: 13px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
-  border-radius: 8px;
+  border-radius: 5px;
   color: white;
   height: 35px;
   padding: 0px 8px;

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

@@ -129,12 +129,15 @@ const Integration = styled.div`
   margin-left: -2px;
   display: flex;
   flex-direction: column;
-  background: #26282f;
   cursor: ${(props: { disabled: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 15px;
-  border-radius: 8px;
-  box-shadow: 0 4px 15px 0px #00000055;
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
+  :hover {
+    border: 1px solid #7a7b80;
+  }
 `;
 
 const Icon = styled.img`
@@ -148,11 +151,11 @@ const MainRow = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 25px;
+  padding: 15px;
+  padding-left: 20px;
+  padding-right: 30px;
   border-radius: 5px;
   :hover {
-    background: ${(props: { disabled: boolean }) =>
-      props.disabled ? "" : "#ffffff11"};
     > i {
       background: ${(props: { disabled: boolean }) =>
         props.disabled ? "" : "#ffffff11"};
@@ -178,9 +181,9 @@ const MaterialIconTray = styled.div`
   align-items: center;
   justify-content: space-between;
   > i {
-    background: #26282f;
     border-radius: 20px;
     font-size: 18px;
+    border: 1px solid #494b4f;
     padding: 5px;
     margin: 0 5px;
     color: #ffffff44;

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

@@ -193,10 +193,8 @@ const TemplateTitle = styled.div`
 `;
 
 const TemplateBlock = styled.div`
-  border: 1px solid #ffffff00;
   align-items: center;
   user-select: none;
-  border-radius: 8px;
   display: flex;
   font-size: 13px;
   font-weight: 500;
@@ -208,10 +206,11 @@ const TemplateBlock = styled.div`
   cursor: pointer;
   color: #ffffff;
   position: relative;
-  background: #26282f;
-  box-shadow: 0 4px 15px 0px #00000044;
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
   :hover {
-    background: #ffffff11;
+    border: 1px solid #7a7b80;
   }
 
   animation: fadeIn 0.3s 0s;

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

@@ -68,7 +68,7 @@ class SourcePage extends Component<PropsType, StateType> {
           {capabilities.github || capabilities.gitlab ? (
             <Block onClick={() => setSourceType("repo")}>
               <BlockIcon src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" />
-              <BlockTitle>Git Repository</BlockTitle>
+              <BlockTitle>Git repository</BlockTitle>
               <BlockDescription>
                 Deploy using source from a Git repo.
               </BlockDescription>
@@ -76,7 +76,7 @@ class SourcePage extends Component<PropsType, StateType> {
           ) : null}
           <Block onClick={() => setSourceType("registry")}>
             <BlockIcon src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png" />
-            <BlockTitle>Docker Registry</BlockTitle>
+            <BlockTitle>Docker registry</BlockTitle>
             <BlockDescription>
               Deploy a container from an image registry.
             </BlockDescription>
@@ -397,7 +397,6 @@ const BlockTitle = styled.div`
 const Block = styled.div<{ disabled?: boolean }>`
   align-items: center;
   user-select: none;
-  border-radius: 5px;
   display: flex;
   font-size: 13px;
   overflow: hidden;
@@ -410,10 +409,15 @@ const Block = styled.div<{ disabled?: boolean }>`
   cursor: ${(props) => (props.disabled ? "" : "pointer")};
   color: #ffffff;
   position: relative;
-  background: #26282f;
-  box-shadow: 0 3px 5px 0px #00000022;
+
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
+  :hover {
+    
+  }
   :hover {
-    background: ${(props) => (props.disabled ? "" : "#ffffff11")};
+    border: ${(props) => props.disabled ? "" : "1px solid #7a7b80"};
   }
 
   animation: fadeIn 0.3s 0s;

dashboard/src/main/home/navbar/Navbar.tsx

@@ -43,10 +43,10 @@ class Navbar extends Component<PropsType, StateType> {
               <SettingsIcon>
                 <i className="material-icons">settings</i>
               </SettingsIcon>
-              Account Settings
+              Account settings
             </UserDropdownButton>
             <UserDropdownButton onClick={this.props.logOut}>
-              <i className="material-icons">keyboard_return</i> Log Out
+              <i className="material-icons">keyboard_return</i> Log out
               {version !== "production" && <VersionTag>{version}</VersionTag>}
             </UserDropdownButton>
           </Dropdown>
@@ -211,16 +211,14 @@ const Dropdown = styled.div`
 `;
 
 const StyledNavbar = styled.div`
-  width: 100%;
   height: 60px;
   position: absolute;
   top: 0;
-  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
-  padding-right: 5px;
   justify-content: flex-end;
-  z-index: 0;
+  z-index: 1;
 `;
 
 const NavButton = styled.a`
@@ -245,4 +243,4 @@ const NavButton = styled.a`
       props.selected ? "#ffffff" : "#ffffff88"};
     font-size: 24px;
   }
-`;
+`;

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

@@ -352,7 +352,6 @@ const BlockTitle = styled.div`
 const Block = styled.div<{ disabled?: boolean }>`
   align-items: center;
   user-select: none;
-  border-radius: 5px;
   display: flex;
   font-size: 13px;
   overflow: hidden;
@@ -362,15 +361,16 @@ const Block = styled.div<{ disabled?: boolean }>`
   align-items: center;
   justify-content: space-between;
   height: 170px;
+  filter: ${({ disabled }) => (disabled ? "grayscale(1)" : "")};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   color: #ffffff;
   position: relative;
-  background: #26282f;
-  box-shadow: 0 3px 5px 0px #00000022;
+  border-radius: 5px;
+  background: #262a30;
+  border: 1px solid #494b4f;
   :hover {
-    background: ${(props) => (props.disabled ? "" : "#ffffff11")};
+    border: ${(props) => (props.disabled ? "" : "1px solid #7a7b80")};
   }
-  filter: ${({ disabled }) => (disabled ? "grayscale(1)" : "")};
 
   animation: fadeIn 0.3s 0s;
   @keyframes fadeIn {

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

@@ -148,15 +148,14 @@ export const ClusterSection: React.FC<Props> = ({
         onClick={() => setIsExpanded(!isExpanded)}
         active={
           !isExpanded &&
-          cluster.id === currentCluster.id && (
-            window.location.pathname.startsWith("/cluster-dashboard") ||
+          cluster.id === currentCluster.id &&
+          (window.location.pathname.startsWith("/cluster-dashboard") ||
             window.location.pathname.startsWith("/preview-environments") ||
             window.location.pathname.startsWith("/stacks") ||
             window.location.pathname.startsWith("/databases") ||
             window.location.pathname.startsWith("/env-groups") ||
             window.location.pathname.startsWith("/jobs") ||
-            window.location.pathname.startsWith("/applications")
-          )
+            window.location.pathname.startsWith("/applications"))
         }
       >
         <LinkWrapper>

dashboard/src/shared/common.tsx

@@ -33,8 +33,8 @@ export const integrationList: any = {
   registry: {
     icon:
       "https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png",
-    label: "Docker Registry",
-    buttonText: "Add a Registry",
+    label: "Docker registry",
+    buttonText: "Add a registry",
   },
   gke: {
     icon: "https://sysdig.com/wp-content/uploads/2016/08/GKE_color.png",