From d315d2f9fe7d5429d40b3dc04e7dc4fc37c728c1 Mon Sep 17 00:00:00 2001
From: cgoodwin90 <chris_2190@hotmail.com>
Date: Fri, 8 Sep 2023 18:41:47 +1000
Subject: [PATCH 1/2] Updated styling to prevent styles bleeding over

---
 .../AddVariable/StyledAddVariable.tsx         |  3 +++
 .../DeleteVariable/StyledDeleteVariable.tsx   |  6 +++++
 src/components/DeleteVariable/index.js        | 24 ++++++++++---------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/AddVariable/StyledAddVariable.tsx b/src/components/AddVariable/StyledAddVariable.tsx
index f8d31536..01ca06c7 100644
--- a/src/components/AddVariable/StyledAddVariable.tsx
+++ b/src/components/AddVariable/StyledAddVariable.tsx
@@ -17,6 +17,9 @@ export const NewVariable = styled.div`
   .add-var-btn {
     margin-top: 16px;
   }
+  button.icon {
+    padding: 0 10px;
+  }
 `;
 
 export const NewVariableModal = styled.div`
diff --git a/src/components/DeleteVariable/StyledDeleteVariable.tsx b/src/components/DeleteVariable/StyledDeleteVariable.tsx
index 2178a53c..6cec41fe 100644
--- a/src/components/DeleteVariable/StyledDeleteVariable.tsx
+++ b/src/components/DeleteVariable/StyledDeleteVariable.tsx
@@ -22,4 +22,10 @@ export const DeleteVariableModal = styled.div`
   .deleteConfirmImg span {
     cursor: pointer;
 }
+`;
+
+export const DeleteVariableButton = styled.div`
+  button.icon {
+    padding: 0 10px;
+  }
 `;
\ No newline at end of file
diff --git a/src/components/DeleteVariable/index.js b/src/components/DeleteVariable/index.js
index bb25123d..04cb8639 100644
--- a/src/components/DeleteVariable/index.js
+++ b/src/components/DeleteVariable/index.js
@@ -4,7 +4,7 @@ import ButtonBootstrap from "react-bootstrap/Button";
 import Button from 'components/Button'
 import { Mutation } from "react-apollo";
 import withLogic from "components/AddVariable/logic";
-import {DeleteVariableModal} from "./StyledDeleteVariable";
+import {DeleteVariableModal, DeleteVariableButton} from "./StyledDeleteVariable";
 import DeleteEnvVariableMutation from "../../lib/mutation/deleteEnvVariableByName";
 
 /**
@@ -27,16 +27,18 @@ export const DeleteVariable = ({
 }) => {
   return (
       <React.Fragment>
-      {
-        icon ?
-          <Button variant='red' icon={icon} action={openModal}>
-            Delete
-          </Button>
-          :
-          <Button variant='red' action={openModal}>
-            Delete
-          </Button>
-      }
+        <DeleteVariableButton>
+          {
+            icon ?
+              <Button variant='red' icon={icon} action={openModal}>
+                Delete
+              </Button>
+              :
+              <Button variant='red' action={openModal}>
+                Delete
+              </Button>
+          }
+        </DeleteVariableButton>
       <Modal
         isOpen={open}
         onRequestClose={closeModal}

From 25d2735dfe0eefc708341593aebce32af6baab1f Mon Sep 17 00:00:00 2001
From: cgoodwin90 <chris_2190@hotmail.com>
Date: Mon, 11 Sep 2023 12:05:55 +1000
Subject: [PATCH 2/2] Fixed button spacing

---
 .../DeleteVariable/StyledDeleteVariable.tsx   |  2 +-
 .../StyledEnvironmentVariables.tsx            | 50 ++++++++++++---
 src/components/EnvironmentVariables/index.js  | 63 ++++++++++---------
 .../StyledProjectVariables.tsx                | 38 +++++++++--
 src/components/ProjectVariables/index.js      | 53 +++++++++-------
 5 files changed, 141 insertions(+), 65 deletions(-)

diff --git a/src/components/DeleteVariable/StyledDeleteVariable.tsx b/src/components/DeleteVariable/StyledDeleteVariable.tsx
index 6cec41fe..4744b371 100644
--- a/src/components/DeleteVariable/StyledDeleteVariable.tsx
+++ b/src/components/DeleteVariable/StyledDeleteVariable.tsx
@@ -21,7 +21,7 @@ export const DeleteVariableModal = styled.div`
   }
   .deleteConfirmImg span {
     cursor: pointer;
-}
+  }
 `;
 
 export const DeleteVariableButton = styled.div`
diff --git a/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx b/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
index e61be4bb..30d48693 100644
--- a/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
+++ b/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
@@ -1,6 +1,17 @@
 import styled from "styled-components";
 import { bp, color } from "lib/variables";
 
+export const VariableActions = styled.div`
+  display: flex;
+  gap: 10px;
+  justify-content: space-evenly;
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
 export const StyledEnvironmentVariableDetails = styled.div`
   padding: 32px calc((100vw / 16) * 1);
   width: 100%;
@@ -267,10 +278,20 @@ export const StyledVariableTable = styled.div`
     & .varUpdate {
         display: flex;
         padding: 0;
-        width: 10%;
+
+        button {
+          background-color: #fff;
+        }
     }
-    & .varDelete {
-      width: 10%;
+    & .varActions {
+      width: 20%;
+      display: flex;
+      align-items: center;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
     }
   }
 
@@ -308,8 +329,17 @@ export const StyledVariableTable = styled.div`
     & .varScope {
       width: 30%;
     }
-    & .varDelete {
+    & .varActions {
       width: 10%;
+      display: flex;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
+    }
+    & .varDelete {
+      padding-right: 10px;
     }
 
     &.skeleton {
@@ -500,8 +530,14 @@ export const StyledProjectVariableTable = styled.div`
     & .varName {
       padding-left: 20px;
     }
-    & .varDelete {
-      width: 5%;
+    & .varActions {
+      width: 10%;
+      display: flex;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
     }
 
     &.skeleton {
@@ -526,4 +562,4 @@ export const StyledProjectVariableTable = styled.div`
     display: none;
     transition: unset;
   }
-`;
+`;
\ No newline at end of file
diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
index ce5b5041..0ebf909d 100644
--- a/src/components/EnvironmentVariables/index.js
+++ b/src/components/EnvironmentVariables/index.js
@@ -13,6 +13,7 @@ import {
   StyledEnvironmentVariableDetails,
   StyledProjectVariableTable,
   StyledVariableTable,
+  VariableActions,
 } from "./StyledEnvironmentVariables";
 import Image from "next/image";
 import show from "../../static/images/show.svg";
@@ -267,35 +268,39 @@ const EnvironmentVariables = ({ environment, onVariableAdded, closeModal }) => {
                             </div>
                           </Collapse>
                         )}
-                        <Collapse in={openEnvVars}>
-                        <div className="varUpdate">
-                          <Button
-                            onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
-                            style={{ all: 'unset'}}
-                          >
-                            <AddVariable
-                                varProject={environment.project.name}
-                                varEnvironment={environment.name}
-                                varValues={displayVars}
-                                varTarget="Environment"
-                                varName={updateVarName}
-                                varValue={updateVarValue}
-                                varScope={updateVarScope}
-                                refresh={onVariableAdded}
-                                icon="edit"
-                            />
-                          </Button>
-                        </div>
-                        </Collapse>
-                        <div className="varDelete">
-                          <DeleteVariable
-                              deleteType="Environment variable"
-                              deleteName={envVar.name}
-                              varProject={environment.project.name}
-                              varEnvironment={environment.name}
-                              icon="bin"
-                              refresh={onVariableAdded}
-                          />
+                        <div className="varActions">
+                          <VariableActions>
+                            <Collapse in={openEnvVars}>
+                              <div className="varUpdate">
+                                <Button
+                                  onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
+                                  style={{ all: 'unset'}}
+                                >
+                                  <AddVariable
+                                      varProject={environment.project.name}
+                                      varEnvironment={environment.name}
+                                      varValues={displayVars}
+                                      varTarget="Environment"
+                                      varName={updateVarName}
+                                      varValue={updateVarValue}
+                                      varScope={updateVarScope}
+                                      refresh={onVariableAdded}
+                                      icon="edit"
+                                  />
+                                </Button>
+                              </div>
+                            </Collapse>
+                            <div className="varDelete">
+                              <DeleteVariable
+                                  deleteType="Environment variable"
+                                  deleteName={envVar.name}
+                                  varProject={environment.project.name}
+                                  varEnvironment={environment.name}
+                                  icon="bin"
+                                  refresh={onVariableAdded}
+                              />
+                            </div>
+                          </VariableActions>
                         </div>
                       </div>
                     </Fragment>
diff --git a/src/components/ProjectVariables/StyledProjectVariables.tsx b/src/components/ProjectVariables/StyledProjectVariables.tsx
index 7a36e841..8387f325 100644
--- a/src/components/ProjectVariables/StyledProjectVariables.tsx
+++ b/src/components/ProjectVariables/StyledProjectVariables.tsx
@@ -1,6 +1,17 @@
 import styled from "styled-components";
 import { bp, color } from "lib/variables";
 
+export const VariableActions = styled.div`
+  display: flex;
+  gap: 10px;
+  justify-content: space-evenly;
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
 export const StyledProjectVariablesDetails = styled.div`
   padding: 32px calc((100vw / 16) * 1);
   width: 100%;
@@ -261,10 +272,20 @@ export const StyledProjectVariableTable = styled.div`
     & .varUpdate {
         display: flex;
         padding: 0;
-        width: 10%;
+
+        button {
+          background-color: #fff;
+        }
     }
-    & .varDelete {
-      width: 10%;
+    & .varActions {
+      width: 20%;
+      display: flex;
+      align-items: center;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
     }
   }
 
@@ -302,8 +323,17 @@ export const StyledProjectVariableTable = styled.div`
     & .varScope {
       width: 30%;
     }
-    & .varDelete {
+    & .varActions {
       width: 10%;
+      display: flex;
+
+      &:last-child {
+        justify-content: flex-end;
+        -webkit-box-pack: end;
+      }
+    }
+    & .varDelete {
+      padding-right: 10px;
     }
 
     &.skeleton {
diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
index 31fd03b5..ea598908 100644
--- a/src/components/ProjectVariables/index.js
+++ b/src/components/ProjectVariables/index.js
@@ -13,6 +13,7 @@ import hide from "../../static/images/hide.svg";
 import {
   StyledProjectVariablesDetails,
   StyledProjectVariableTable,
+  VariableActions,
 } from "./StyledProjectVariables";
 import DeleteVariable from "components/DeleteVariable";
 
@@ -233,33 +234,37 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
                             </div>
                           </Collapse>
                         )}
-                        <Collapse in={openPrjVars}>
-                          <div className="varUpdate">
-                            <Button
-                                onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
-                                style={{ all: 'unset'}}
-                            >
-                              <AddVariable
+                        <div className="varActions">
+                          <VariableActions>
+                            <Collapse in={openPrjVars}>
+                              <div className="varUpdate">
+                                <Button
+                                    onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
+                                    style={{ all: 'unset'}}
+                                >
+                                  <AddVariable
+                                      varProject={project.name}
+                                      varValues={displayVars}
+                                      varTarget="Project"
+                                      varName={updateVarName}
+                                      varValue={updateVarValue}
+                                      varScope={updateVarScope}
+                                      refresh={onVariableAdded}
+                                      icon="edit"
+                                  />
+                                </Button>
+                              </div>
+                            </Collapse>
+                            <div className="varDelete">
+                              <DeleteVariable
+                                  deleteType="Project variable"
+                                  deleteName={projEnvVar.name}
                                   varProject={project.name}
-                                  varValues={displayVars}
-                                  varTarget="Project"
-                                  varName={updateVarName}
-                                  varValue={updateVarValue}
-                                  varScope={updateVarScope}
+                                  icon="bin"
                                   refresh={onVariableAdded}
-                                  icon="edit"
                               />
-                            </Button>
-                          </div>
-                        </Collapse>
-                        <div className="varDelete">
-                          <DeleteVariable
-                              deleteType="Project variable"
-                              deleteName={projEnvVar.name}
-                              varProject={project.name}
-                              icon="bin"
-                              refresh={onVariableAdded}
-                          />
+                            </div>
+                          </VariableActions>
                         </div>
                       </div>
                     </Fragment>