preview env go back

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

@@ -155,33 +155,6 @@ const Wrap = styled.div`
   z-index: 999;
 `;
 
-const BackButton = styled.div`
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  display: flex;
-  width: 36px;
-  cursor: pointer;
-  height: 36px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ffffff55;
-  border-radius: 100px;
-  background: #ffffff11;
-
-  :hover {
-    background: #ffffff22;
-    > img {
-      opacity: 1;
-    }
-  }
-`;
-
-const BackButtonImg = styled.img`
-  width: 16px;
-  opacity: 0.75;
-`;
-
 const StatusWrapper = styled.div`
   margin-left: 3px;
   margin-bottom: 20px;

dashboard/src/main/home/cluster-dashboard/databases/DatabasesList.tsx

@@ -253,12 +253,11 @@ const DatabasesListWrapper = styled.div`
 `;
 
 const StyledTableWrapper = styled.div`
-  background: #26282f;
   padding: 14px;
-  border-radius: 8px;
-  box-shadow: 0 4px 15px 0px #00000055;
   position: relative;
-  border: 2px solid #9eb4ff00;
+  border-radius: 8px;
+  background: #262a30;
+  border: 1px solid #494b4f;
   width: 100%;
   height: 100%;
   :not(:last-child) {

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

@@ -49,7 +49,7 @@ GraphSection.contextType = Context;
 const StyledGraphSection = styled.div`
   width: 100%;
   min-height: 400px;
-  height: 50vh;
+  height: calc(100vh - 400px);
   font-size: 13px;
   overflow: hidden;
   border-radius: 8px;

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

@@ -100,6 +100,7 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
             value={this.state.values}
             onChange={(e: any) => this.setState({ values: e })}
             readOnly={this.props.disabled}
+            height="calc(100vh - 462px)"
           />
         </Wrapper>
         {!this.props.disabled && (
@@ -129,7 +130,7 @@ const StyledValuesYaml = styled.div`
   flex-direction: column;
   width: 100%;
   min-height: 400px;
-  height: 50vh;
+  height: calc(100vh - 400px);
   font-size: 13px;
   overflow: hidden;
   border-radius: 8px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/MetricsSection.tsx

@@ -686,7 +686,7 @@ const MetricsLabel = styled.div`
 const StyledMetricsSection = styled.div`
   width: 100%;
   min-height: 400px;
-  height: 50vh;
+  height: calc(100vh - 400px);
   display: flex;
   flex-direction: column;
   position: relative;

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

@@ -243,7 +243,7 @@ const StyledStatusSection = styled.div`
   overflow: hidden;
   width: 100%;
   min-height: 400px;
-  height: 50vh;
+  height: calc(100vh - 400px);
   font-size: 13px;
   overflow: hidden;
   border-radius: 8px;

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentDetail.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
-import backArrow from "assets/back_arrow.png";
 import TitleSection from "components/TitleSection";
 import pr_icon from "assets/pull_request_icon.svg";
 import { useRouteMatch, useLocation } from "react-router";
@@ -13,6 +12,7 @@ import ChartList from "../../chart/ChartList";
 import github from "assets/github-white.png";
 import { integrationList } from "shared/common";
 import { capitalize } from "shared/string_utils";
+import leftArrow from "assets/left-arrow.svg";
 
 const DeploymentDetail = () => {
   const { params } = useRouteMatch<{ namespace: string }>();
@@ -65,12 +65,13 @@ const DeploymentDetail = () => {
 
   return (
     <StyledExpandedChart>
+      <BreadcrumbRow>
+        <Breadcrumb to={`/preview-environments/deployments/${environmentId}/${repository}`}>
+          <ArrowIcon src={leftArrow} />
+          <Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
       <HeaderWrapper>
-        <BackButton
-          to={`/preview-environments/deployments/${environmentId}/${repository}`}
-        >
-          <BackButtonImg src={backArrow} />
-        </BackButton>
         <Title icon={pr_icon} iconWidth="25px">
           {prDeployment.gh_pr_name}
         </Title>
@@ -142,6 +143,39 @@ const DeploymentDetail = () => {
 
 export default DeploymentDetail;
 
+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(DynamicLink)`
+  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 Wrap = styled.div`
+  z-index: 999;
+`;
+
 const Flex = styled.div`
   display: flex;
   align-items: center;

dashboard/src/main/home/infrastructure/InfrastructureList.tsx

@@ -223,12 +223,11 @@ const DatabasesListWrapper = styled.div`
 `;
 
 const StyledTableWrapper = styled.div`
-  background: #26282f;
   padding: 14px;
-  border-radius: 8px;
-  box-shadow: 0 4px 15px 0px #00000055;
   position: relative;
-  border: 2px solid #9eb4ff00;
+  border-radius: 8px;
+  background: #262a30;
+  border: 1px solid #494b4f;
   width: 100%;
   height: 100%;
   :not(:last-child) {