Merge pull request #169 from uselagoon/reposition_env_btn

Repositioned Create Environment button
uselagoon · Oct 4, 2023 · 6e26439 · 6e26439
2 parents 0be2150 + 7e4aa41
commit 6e26439
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -102,9 +102,13 @@ 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}/>
+                {
+                  environmentCount === 0 && (
+                    <NewEnvironment inputProjectName={project.name} productionEnvironment={project.productionEnvironment} refresh={handleRefetch} environmentCount={environmentCount} />
+                  )
+                }
               </div>
             </div>
           </ProjectDetailsWrapper>