Style buttons and containers for new app and new env group

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

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import DashboardHeader from "../DashboardHeader";
 import NamespaceSelector from "../NamespaceSelector";
 import SortSelector from "../SortSelector";
+import { Action } from "./components/styles";
 import StackList from "./_StackList";
 const Dashboard = () => {
   const [currentNamespace, setCurrentNamespace] = useState("default");
@@ -38,11 +39,11 @@ const Dashboard = () => {
         title="Stacks"
         description="Groups of applications deployed from a shared source."
       />
-      <ActionRow>
-        <Button to={"/stacks/launch"}>
+      <Action.Row>
+        <Action.Button to={"/stacks/launch"}>
           <i className="material-icons">add</i>
           Create Stack
-        </Button>
+        </Action.Button>
         <FilterWrapper>
           <StyledSortSelector>
             <Label>
@@ -76,7 +77,7 @@ const Dashboard = () => {
             setNamespace={handleNamespaceChange}
           />
         </FilterWrapper>
-      </ActionRow>
+      </Action.Row>
       <StackList namespace={currentNamespace} sortBy={currentSort} />
     </>
   );
@@ -102,58 +103,6 @@ const StyledSortSelector = styled.div`
   margin-right: 30px;
 `;
 
-const Button = styled(DynamicLink)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  cursor: pointer;
-  font-family: "Work Sans", sans-serif;
-  border-radius: 20px;
-  color: white;
-  height: 35px;
-  padding: 0px 8px;
-  min-width: 130px;
-  padding-bottom: 1px;
-  margin-right: 10px;
-  font-weight: 500;
-  padding-right: 15px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  box-shadow: 0 5px 8px 0px #00000010;
-  cursor: ${(props: { disabled?: boolean }) =>
-    props.disabled ? "not-allowed" : "pointer"};
-
-  background: ${(props: { disabled?: boolean }) =>
-    props.disabled ? "#aaaabbee" : "#616FEEcc"};
-  :hover {
-    background: ${(props: { disabled?: boolean }) =>
-      props.disabled ? "" : "#505edddd"};
-  }
-
-  > i {
-    color: white;
-    width: 18px;
-    height: 18px;
-    font-weight: 600;
-    font-size: 12px;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-    justify-content: center;
-  }
-`;
-
-const ActionRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 35px;
-`;
-
 const FilterWrapper = styled.div`
   display: flex;
 `;

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

@@ -13,6 +13,7 @@ import styled from "styled-components";
 import ChartList from "../../chart/ChartList";
 import Status from "../components/Status";
 import {
+  Action,
   Br,
   InfoWrapper,
   LastDeployed,
@@ -150,9 +151,12 @@ const ExpandedStack = () => {
             component: (
               <>
                 <Gap></Gap>
-                <DynamicLink to={`${url}/new-app-resource`}>
-                  Add new app
-                </DynamicLink>
+                <Action.Row>
+                  <Action.Button to={`${url}/new-app-resource`}>
+                    <i className="material-icons">add</i>
+                    Create App Resource
+                  </Action.Button>
+                </Action.Row>
                 {currentRevision.id !== stack.latest_revision.id ? (
                   <ChartListWrapper>
                     <Placeholder>
@@ -198,6 +202,12 @@ const ExpandedStack = () => {
             component: (
               <>
                 <Gap></Gap>
+                <Action.Row>
+                  <Action.Button to={`${url}/new-env-group`}>
+                    <i className="material-icons">add</i>
+                    Create Env Group
+                  </Action.Button>
+                </Action.Row>
                 <EnvGroups stack={stack} />
               </>
             ),

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

@@ -81,7 +81,6 @@ const EnvGroups = ({ stack }: { stack: Stack }) => {
 
   return (
     <>
-      <DynamicLink to={`${url}/new-env-group`}>Add new env group</DynamicLink>
       <Card.Grid style={{ marginTop: "0px" }}>
         {envGroups.map((envGroup) => {
           return (

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

@@ -6,6 +6,7 @@ import {
   useLocation,
   useRouteMatch,
 } from "react-router";
+import styled from "styled-components";
 
 import ExpandedStack from "./ExpandedStack";
 import NewAppResourceRoutes from "./NewAppResource";
@@ -21,10 +22,18 @@ const ExpandedStackRoutes = () => {
       <Switch>
         <Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} />
         <Route path={`${path}/new-env-group`} exact>
-          <NewEnvGroup />
+          <StyledLaunchFlow>
+            <LaunchContainer>
+              <NewEnvGroup />
+            </LaunchContainer>
+          </StyledLaunchFlow>
         </Route>
         <Route path={`${path}/new-app-resource`}>
-          <NewAppResourceRoutes />
+          <StyledLaunchFlow>
+            <LaunchContainer>
+              <NewAppResourceRoutes />
+            </LaunchContainer>
+          </StyledLaunchFlow>
         </Route>
         <Route path={`${path}`} exact>
           <ExpandedStack />
@@ -38,3 +47,17 @@ const ExpandedStackRoutes = () => {
 };
 
 export default ExpandedStackRoutes;
+
+const LaunchContainer = styled.div`
+  margin: 0 auto;
+  width: 100%;
+`;
+
+const StyledLaunchFlow = styled.div`
+  width: calc(100% - 100px);
+  margin-left: 50px;
+  min-width: 300px;
+  margin-top: ${(props: { disableMarginTop?: boolean }) =>
+    props.disableMarginTop ? "inherit" : "calc(50vh - 380px)"};
+  margin-bottom: 50px;
+`;

dashboard/src/main/home/cluster-dashboard/stacks/components/styles.ts

@@ -1,3 +1,4 @@
+import DynamicLink from "components/DynamicLink";
 import styled from "styled-components";
 
 const StatusBase = styled.div`
@@ -129,3 +130,56 @@ export const NamespaceTag = {
     text-overflow: ellipsis;
   `,
 };
+
+export const Action = {
+  Row: styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 35px;
+  `,
+  Button: styled(DynamicLink)`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 13px;
+    cursor: pointer;
+    font-family: "Work Sans", sans-serif;
+    border-radius: 20px;
+    color: white;
+    height: 35px;
+    padding: 0px 8px;
+    min-width: 130px;
+    padding-bottom: 1px;
+    margin-right: 10px;
+    font-weight: 500;
+    padding-right: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-shadow: 0 5px 8px 0px #00000010;
+    cursor: ${(props: { disabled?: boolean }) =>
+      props.disabled ? "not-allowed" : "pointer"};
+
+    background: ${(props: { disabled?: boolean }) =>
+      props.disabled ? "#aaaabbee" : "#616FEEcc"};
+    :hover {
+      background: ${(props: { disabled?: boolean }) =>
+        props.disabled ? "" : "#505edddd"};
+    }
+
+    > i {
+      color: white;
+      width: 18px;
+      height: 18px;
+      font-weight: 600;
+      font-size: 12px;
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      margin-right: 5px;
+      justify-content: center;
+    }
+  `,
+};