From a7412150c3d8cf5c98792a3e806a1e5bcc5edf8c Mon Sep 17 00:00:00 2001
From: cgoodwin90 <chris_2190@hotmail.com>
Date: Wed, 4 Oct 2023 14:14:03 +1100
Subject: [PATCH] Appended new environment btn to environments

---
 src/components/Environments/index.js          |  4 +-
 .../NewEnvironment/StyledNewEnvironment.tsx   | 38 +++++++++++++++++++
 src/components/NewEnvironment/index.js        |  8 ++--
 src/pages/project.js                          |  3 +-
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/components/Environments/index.js b/src/components/Environments/index.js
index 64fc9109..7df4853a 100644
--- a/src/components/Environments/index.js
+++ b/src/components/Environments/index.js
@@ -6,6 +6,7 @@ import { makeSafe } from 'lib/util';
 import * as R from 'ramda';
 
 import { StyledEnvironments } from './StyledEnvironments';
+import NewEnvironment from "../NewEnvironment";
 
 const bgImages = {
   branch: {
@@ -22,7 +23,7 @@ const bgImages = {
   },
 };
 
-const Environments = ({ environments = [], project }) => {
+const Environments = ({ environments = [], project, refresh, environmentCount }) => {
   if (environments.length === 0) {
     return null;
   }
@@ -94,6 +95,7 @@ const Environments = ({ environments = [], project }) => {
           </div>
         );
       })}
+      <NewEnvironment refresh={refresh} inputProjectName={project.name} productionEnvironment={project.productionEnvironment} environmentCount={environmentCount}/>
     </StyledEnvironments>
   );
 };
diff --git a/src/components/NewEnvironment/StyledNewEnvironment.tsx b/src/components/NewEnvironment/StyledNewEnvironment.tsx
index bf4cfd23..5b7a9f1b 100644
--- a/src/components/NewEnvironment/StyledNewEnvironment.tsx
+++ b/src/components/NewEnvironment/StyledNewEnvironment.tsx
@@ -1,6 +1,44 @@
 import { bp, color, fontSize } from 'lib/variables';
 import styled from 'styled-components';
 
+export const StyledEnvironmentWrapper = styled.div`
+    width: 100%;
+    align-self: center;
+    margin-bottom: 35px;
+    @media ${bp.xs_smallUp} {
+      margin-left: 48px;
+      min-width: calc(50% - 24px);
+      width: calc(50% - 24px);
+    }
+    @media ${bp.xs_small} {
+      &:nth-child(2n + 1) {
+        margin-left: 0;
+      }
+    }
+    @media ${bp.tabletUp} {
+      margin-left: 0;
+      min-width: 100%;
+      width: 100%;
+    }
+    @media ${bp.desktopUp} {
+      margin-left: 48px;
+      min-width: calc(50% - 24px);
+      width: calc(50% - 24px);
+    }
+    @media ${bp.desktop_extrawide} {
+      &:nth-child(2n + 1) {
+        margin-left: 0;
+      }
+    }
+    @media ${bp.extraWideUp} {
+      min-width: calc((100% / 3) - 32px);
+      width: calc((100% / 3) - 32px);
+      &:nth-child(3n + 1) {
+        margin-left: 0;
+      }
+    }
+`;
+
 export const StyledNewEnvironment = styled.div`
 .copy-field {
   display: flex;
diff --git a/src/components/NewEnvironment/index.js b/src/components/NewEnvironment/index.js
index aa85059b..77308ac0 100644
--- a/src/components/NewEnvironment/index.js
+++ b/src/components/NewEnvironment/index.js
@@ -8,10 +8,10 @@ import Image from "next/image";
 import show from "../../static/images/show.svg";
 import hide from "../../static/images/hide.svg";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import {StyledNewEnvironment} from './StyledNewEnvironment';
+import {StyledNewEnvironment, StyledEnvironmentWrapper} from './StyledNewEnvironment';
 import {useQuery} from "@apollo/react-hooks";
 import ProjectByNameWithDeployKeyQuery from "../../lib/query/ProjectByNameWithDeployKey";
-import { Footer, StyledNotificationWrapper } from '../Organizations/SharedStyles';
+import { Footer } from '../Organizations/SharedStyles';
 import getConfig from "next/config";
 const { WEBHOOK_URL } = getConfig().publicRuntimeConfig;
 
@@ -78,7 +78,7 @@ const NewEnvironment = ({
   }
 
   return (
-      <StyledNotificationWrapper>
+      <StyledEnvironmentWrapper>
         <div className="margins">
           <Button action={openModal}>
           <span style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', padding: '0.25em' }}>
@@ -244,7 +244,7 @@ const NewEnvironment = ({
             </Mutation>
           </React.Fragment>
         </Modal>
-      </StyledNotificationWrapper>
+      </StyledEnvironmentWrapper>
   );
 };
 
diff --git a/src/pages/project.js b/src/pages/project.js
index ffb14193..8d84d45b 100644
--- a/src/pages/project.js
+++ b/src/pages/project.js
@@ -102,9 +102,8 @@ export const PageProject = ({ router }) => {
               <ProjectDetailsSidebar project={project} />
             </div>
             <div className="environments-wrapper">
-              <NewEnvironment refresh={handleRefetch} inputProjectName={project.name} productionEnvironment={project.productionEnvironment} environmentCount={environmentCount}/>
               <div className="environments-all">
-                <Environments environments={environments} project={project} />
+                <Environments environments={environments} project={project} refresh={handleRefetch} environmentCount={environmentCount}/>
               </div>
             </div>
           </ProjectDetailsWrapper>