diff --git a/src/components/DeleteVariable/index.js b/src/components/DeleteVariable/index.js
index 1b58fd1e..9204d4f8 100644
--- a/src/components/DeleteVariable/index.js
+++ b/src/components/DeleteVariable/index.js
@@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { Mutation } from 'react-apollo';
 import ButtonBootstrap from 'react-bootstrap/Button';
 
+import { LoadingOutlined } from '@ant-design/icons';
 import withLogic from 'components/AddVariable/logic';
 import Button from 'components/Button';
 import Modal from 'components/Modal';
 
 import DeleteEnvVariableMutation from '../../lib/mutation/deleteEnvVariableByName';
 import { DeleteVariableButton, DeleteVariableModal } from './StyledDeleteVariable';
-import {LoadingOutlined} from "@ant-design/icons";
 
 /**
  * Deletes a Variable.
@@ -45,16 +45,13 @@ export const DeleteVariable = ({
   return (
     <React.Fragment>
       <DeleteVariableButton>
-        {
-          loading && valueState ? (
-            <Button variant="red" action={openModal}>
-              <LoadingOutlined />
-            </Button>
-          ) : (
-            <Button variant="red" icon={icon} action={handlePermissionCheck}>
-            </Button>
-          )
-        }
+        {loading && valueState ? (
+          <Button variant="red" action={openModal}>
+            <LoadingOutlined />
+          </Button>
+        ) : (
+          <Button variant="red" icon={icon} action={handlePermissionCheck}></Button>
+        )}
       </DeleteVariableButton>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} variant={'large'}>
         <DeleteVariableModal>
diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
index 3b5b6fc0..72ba05d2 100644
--- a/src/components/EnvironmentVariables/index.js
+++ b/src/components/EnvironmentVariables/index.js
@@ -137,7 +137,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
     getEnvVarValues();
     setOpenEnvVars(false);
     setAction(action);
-    if (action === "delete") {
+    if (action === 'delete') {
       valuesShow(index);
     }
   };
@@ -284,61 +284,62 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                 <div className="scope">
                   <label>Scope</label>
                 </div>
-                {!envLoading &&(
-                    <Collapse in={openEnvVars}>
-                      <div className="value">
-                        <label>Value</label>
-                      </div>
-                    </Collapse>
+                {!envLoading && (
+                  <Collapse in={openEnvVars}>
+                    <div className="value">
+                      <label>Value</label>
+                    </div>
+                  </Collapse>
                 )}
               </div>
               <div className="data-table" data-cy="environment-table">
                 {displayVars.map((envVar, index) => {
                   return (
                     <Fragment key={index}>
-                      <div className={!envLoading && openEnvVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
+                      <div
+                        className={!envLoading && openEnvVars ? 'values-present data-row' : 'data-row'}
+                        data-cy="environment-row"
+                      >
                         <div className="varName">{envVar.name}</div>
                         <div className="varScope">{envVar.scope}</div>
                         {renderEnvValues(envVar, index)}
                         <div className="varActions">
                           <VariableActions>
-                            { !envLoading && (
-                            <Collapse in={openEnvVars}>
-                              <div className="varUpdate">
-                                <Tooltip overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
-                                  <Button
-                                    onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
-                                    style={{ all: 'unset' }}
+                            {!envLoading && (
+                              <Collapse in={openEnvVars}>
+                                <div className="varUpdate">
+                                  <Tooltip
+                                    overlayClassName="componentTooltip"
+                                    title="Update Variable"
+                                    placement="bottom"
                                   >
-                                    <AddVariable
-                                      varProject={environment.project.name}
-                                      varEnvironment={environment.name}
-                                      varValues={displayVars}
-                                      varTarget="Environment"
-                                      varName={updateVarName}
-                                      varValue={updateVarValue}
-                                      varScope={updateVarScope}
-                                      refresh={onVariableAdded}
-                                      icon="edit"
-                                      action="edit"
-                                    />
-                                  </Button>
-                                </Tooltip>
-                              </div>
-                            </Collapse>
+                                    <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"
+                                        action="edit"
+                                      />
+                                    </Button>
+                                  </Tooltip>
+                                </div>
+                              </Collapse>
                             )}
                             <div className="varDelete">
                               <Tooltip overlayClassName="componentTooltip" title="Delete Variable" placement="bottom">
                                 <Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
                                   {environmentErrorAlert ? (
                                     <DeleteVariableButton>
-                                      <Btn
-                                        index={index}
-                                        variant="red"
-                                        icon="bin"
-                                        className="delete-btn"
-                                      >
-                                      </Btn>
+                                      <Btn index={index} variant="red" icon="bin" className="delete-btn"></Btn>
                                     </DeleteVariableButton>
                                   ) : (
                                     <DeleteVariable
@@ -430,7 +431,10 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                 {displayProjectVars.map((projEnvVar, index) => {
                   return (
                     <Fragment key={index}>
-                      <div className={!prjLoading && openPrjVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
+                      <div
+                        className={!prjLoading && openPrjVars ? 'values-present data-row' : 'data-row'}
+                        data-cy="environment-row"
+                      >
                         <div className="varName">{projEnvVar.name}</div>
                         <div className="varScope">{projEnvVar.scope}</div>
                         {renderPrjValues(projEnvVar, index)}
diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
index 8e97254e..b2db80ed 100644
--- a/src/components/ProjectVariables/index.js
+++ b/src/components/ProjectVariables/index.js
@@ -93,7 +93,7 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
     getPrjEnvVarValues();
     setOpenPrjVars(false);
     setAction(action);
-    if (action === "delete") {
+    if (action === 'delete') {
       valuesShow(index);
     }
   };
@@ -213,18 +213,27 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
                 {displayVars.map((projEnvVar, index) => {
                   return (
                     <Fragment key={index}>
-                      <div className={!prjLoading && openPrjVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
+                      <div
+                        className={!prjLoading && openPrjVars ? 'values-present data-row' : 'data-row'}
+                        data-cy="environment-row"
+                      >
                         <div className="varName">{projEnvVar.name}</div>
                         <div className="varScope">{projEnvVar.scope}</div>
                         {renderValues(projEnvVar, index)}
                         <div className="varActions">
                           <VariableActions>
-                            { !prjLoading && (
+                            {!prjLoading && (
                               <Collapse in={openPrjVars}>
                                 <div className="varUpdate">
-                                  <Tooltip overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
+                                  <Tooltip
+                                    overlayClassName="componentTooltip"
+                                    title="Update Variable"
+                                    placement="bottom"
+                                  >
                                     <Button
-                                      onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
+                                      onClick={() =>
+                                        setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)
+                                      }
                                       style={{ all: 'unset' }}
                                     >
                                       <AddVariable
@@ -248,13 +257,7 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
                                 <Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
                                   {projectErrorAlert ? (
                                     <DeleteVariableButton>
-                                      <Btn
-                                        index={index}
-                                        variant="red"
-                                        icon="bin"
-                                        className="delete-btn"
-                                      >
-                                      </Btn>
+                                      <Btn index={index} variant="red" icon="bin" className="delete-btn"></Btn>
                                     </DeleteVariableButton>
                                   ) : (
                                     <DeleteVariable