flatten chartlist

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

@@ -229,7 +229,7 @@ const BottomWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   padding-right: 11px;
-  margin-top: 12px;
+  margin-top: 3px;
 `;
 
 const TopRightContainer = styled.div`
@@ -362,16 +362,17 @@ const JobStatus = styled.span<{ status?: JobStatusType }>`
 
 const StyledChart = styled.div`
   cursor: pointer;
-  margin-bottom: 25px;
-  padding: 1px;
+  margin-bottom: 15px;
+  padding-top: 2px;
+  padding-bottom: 13px;
   border-radius: 8px;
   position: relative;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
-  background: #26292E;
   border-radius: 5px;
-  border: 1px solid #aaaabb33;
+  background: #262A30;
+  border: 1px solid #494b4f;
   :hover {
-    background: #ffffff11;
+    border: 1px solid #7A7B80;
   }
 `;

dashboard/src/main/home/cluster-dashboard/stacks/launch/index.tsx

@@ -45,7 +45,7 @@ const LaunchContainer = styled.div`
 `;
 
 const StyledLaunchFlow = styled.div`
-  width: calc(100%);
+  width: calc(100% - 100px);
   margin-left: 50px;
   min-width: 300px;
   margin-top: ${(props: { disableMarginTop?: boolean }) =>

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

@@ -244,11 +244,11 @@ const TemplateBlock = styled.div`
   cursor: pointer;
   color: #ffffff;
   position: relative;
-  background: #26292E;
   border-radius: 5px;
-  border: 1px solid #aaaabb33;
+  background: #262A30;
+  border: 1px solid #494b4f;
   :hover {
-    background: #ffffff11;
+    border: 1px solid #7A7B80;
   }
 
   animation: fadeIn 0.3s 0s;

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

@@ -379,7 +379,7 @@ const StyledSidebar = styled.section`
   animation-fill-mode: forwards;
   @keyframes showSidebar {
     from {
-      margin-left: -235px;
+      margin-left: -240px;
     }
     to {
       margin-left: 0px;
@@ -390,7 +390,7 @@ const StyledSidebar = styled.section`
       margin-left: 0px;
     }
     to {
-      margin-left: -235px;
+      margin-left: -240px;
     }
   }
 `;