Style for connect new repo

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

@@ -20,25 +20,25 @@ const mockData: Environment[] = [
     id: 1,
     url: "http://some-url",
     pr_link: "https://githubsuper",
-    status: "some",
+    status: "deployed",
   },
   {
     id: 2,
     url: "http://some-url",
     pr_link: "https://githubsuper",
-    status: "some",
+    status: "deployed",
   },
   {
     id: 3,
     url: "http://some-url",
     pr_link: "https://githubsuper",
-    status: "some",
+    status: "deployed",
   },
   {
     id: 4,
     url: "http://some-url",
     pr_link: "https://githubsuper",
-    status: "some",
+    status: "deployed",
   },
 ];
 
@@ -110,7 +110,11 @@ const EnvironmentList = () => {
   }, [location.search, history]);
 
   if (showConnectRepoFlow) {
-    return <ConnectNewRepo />;
+    return (
+      <Container>
+        <ConnectNewRepo />
+      </Container>
+    );
   }
 
   if (isLoading) {
@@ -130,9 +134,12 @@ const EnvironmentList = () => {
   }
 
   return (
-    <>
+    <Container>
       <ControlRow>
-        <Button onClick={() => console.log("launch repo")}>
+        <Button
+          to={`${currentUrl}?selected_tab=preview_environments&action=connect-repo`}
+          onClick={() => console.log("launch repo")}
+        >
           <i className="material-icons">add</i> Add repository
         </Button>
         <SortFilterWrapper>
@@ -158,7 +165,7 @@ const EnvironmentList = () => {
               </DataAndIconContainer>
               <StatusContainer>
                 <Status>
-                  <StatusDot status="deployed" />
+                  <StatusDot status={env.status} />
                   {capitalize(env.status)}
                 </Status>
               </StatusContainer>
@@ -166,14 +173,17 @@ const EnvironmentList = () => {
           );
         })}
       </EventsGrid>
-    </>
+    </Container>
   );
 };
 
 export default EnvironmentList;
 
-const ControlRow = styled.div`
+const Container = styled.div`
   margin-top: 30px;
+`;
+
+const ControlRow = styled.div`
   display: flex;
   margin-left: auto;
   justify-content: space-between;
@@ -182,7 +192,7 @@ const ControlRow = styled.div`
   padding-left: 0px;
 `;
 
-const Button = styled.div`
+const Button = styled(DynamicLink)`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -246,7 +256,7 @@ const EnvironmentCard = styled(DynamicLink)`
   border-radius: 8px;
   padding: 20px;
 
-  animation: fadeIn 0.5s;
+  animation: fadeIn 0.8s;
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -266,7 +276,7 @@ const EnvironmentCard = styled(DynamicLink)`
 
 const EventsGrid = styled.div`
   display: grid;
-  grid-row-gap: 15px;
+  grid-row-gap: 20px;
   grid-template-columns: 1;
 `;
 

dashboard/src/main/home/cluster-dashboard/dashboard/preview-environments/components/ConnectNewRepo.tsx

@@ -1,17 +1,105 @@
+import DynamicLink from "components/DynamicLink";
+import Heading from "components/form-components/Heading";
+import Helper from "components/form-components/Helper";
 import SelectRow from "components/form-components/SelectRow";
+import SaveButton from "components/SaveButton";
+import Selector from "components/Selector";
+import TitleSection from "components/TitleSection";
 import React from "react";
+import { useRouteMatch } from "react-router";
+import styled from "styled-components";
+
+const porterYamlDocsLink = "https://docs.porter.run";
 
 const ConnectNewRepo = () => {
+  const { url } = useRouteMatch();
   return (
     <div>
-      <SelectRow
-        label="Select repo"
+      <ControlRow>
+        <BackButton to={`${url}?selected_tab=preview_environments`}>
+          <i className="material-icons">close</i>
+        </BackButton>
+        <Title>Connect a new repo</Title>
+      </ControlRow>
+
+      <Heading>Select repo</Heading>
+      <br />
+      <Selector
+        width="100%"
         options={[]}
-        setActiveValue={(selectedRepo) => console.log(selectedRepo)}
-        value={""}
+        setActiveValue={console.log}
+        activeValue=""
       />
+
+      <Heading>Disclaimer</Heading>
+      <Helper>
+        You will need to add a porter.yaml file to let porter know how to create
+        the preview environment
+      </Helper>
+      <PorterYamlLink to={porterYamlDocsLink} target="_blank">
+        Know more about porter.yaml
+      </PorterYamlLink>
+      <ActionContainer>
+        <SaveButton
+          text="Connect repo"
+          disabled={false}
+          onClick={() => console.log()}
+          makeFlush={true}
+          clearPosition={true}
+          status={""}
+          statusPosition={"left"}
+        ></SaveButton>
+      </ActionContainer>
     </div>
   );
 };
 
 export default ConnectNewRepo;
+
+const ControlRow = styled.div`
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  margin-bottom: 35px;
+  padding-left: 0px;
+`;
+
+const BackButton = styled(DynamicLink)`
+  display: flex;
+  width: 37px;
+  z-index: 1;
+  cursor: pointer;
+  height: 37px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+  color: white;
+  > i {
+    font-size: 20px;
+  }
+
+  :hover {
+    background: #ffffff22;
+    > img {
+      opacity: 1;
+    }
+  }
+`;
+
+const Title = styled(TitleSection)`
+  margin-left: 10px;
+  margin-bottom: 0;
+  font-size: 18px;
+`;
+
+const PorterYamlLink = styled(DynamicLink)`
+  font-size: 14px;
+`;
+
+const ActionContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 50px;
+`;