modal update

dashboard/src/components/repo-selector/RepoList.tsx

@@ -364,7 +364,6 @@ const ProviderSelector = (props: {
     <>
       <ProviderSelectorStyles.Wrapper ref={wrapperRef} isOpen={isOpen}>
         <ProviderSelectorStyles.Icon className={icon} />
-
         <ProviderSelectorStyles.Button
           onClick={() => setIsOpen((prev) => !prev)}
         >
@@ -453,7 +452,8 @@ const ProviderSelectorStyles = {
     }
   `,
   Icon: styled.span`
-    font-size: 24px;
+    font-size: 20px;
+    filter: invert(1);
     margin-left: 9px;
     margin-right: -29px;
     color: white;

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupArray.tsx

@@ -88,11 +88,12 @@ const EnvGroupArray = ({
               return (
                 <InputWrapper key={i}>
                   <Input
-                    placeholder="ex: koy"
+                    placeholder="ex: key"
                     width="270px"
                     value={entry.key}
                     onChange={(e: any) => {
                       let _values = values;
+                      console.log("tested")
                       _values[i].key = e.target.value;
                       setValues(_values);
                     }}

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -389,9 +389,10 @@ export const ExpandedEnvGroupFC = ({
       case "variables-editor":
         return (
           <EnvGroupVariablesEditor
-            onChange={(x) =>
+            onChange={(x) => {
+              console.log("got here", x)
               setCurrentEnvGroup((prev) => ({ ...prev, variables: x }))
-            }
+            }}
             handleUpdateValues={handleUpdateValues}
             variables={variables}
             buttonStatus={buttonStatus}
@@ -487,6 +488,7 @@ const EnvGroupVariablesEditor = ({
         <EnvGroupArray
           values={variables}
           setValues={(x: any) => {
+            console.log("wohaaa", x)
             onChange(x);
           }}
           fileUpload={true}

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/ConnectToJobInstructionsModal.tsx

@@ -18,8 +18,8 @@ const ConnectToJobInstructionsModal: React.FC<{
     <Modal
       onRequestClose={() => onClose()}
       width="700px"
-      height="300px"
-      title="Shell Access Instructions"
+      height="350px"
+      title="Shell access instructions"
     >
       To get shell access to this job run, make sure you have the Porter CLI
       installed (installation instructions&nbsp;

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

@@ -222,81 +222,6 @@ const ConnectNewRepo: React.FC = () => {
         />
       </HelperContainer>
 
-      <Heading>Automatic pull request deployments</Heading>
-      <Helper>
-        If you enable this option, the new pull requests will be automatically
-        deployed.
-      </Helper>
-      <CheckboxWrapper>
-        <CheckboxRow
-          label="Enable automatic deploys"
-          checked={enableAutomaticDeployments}
-          toggle={() =>
-            setEnableAutomaticDeployments(!enableAutomaticDeployments)
-          }
-          wrapperStyles={{
-            disableMargin: true,
-          }}
-        />
-      </CheckboxWrapper>
-
-      <Heading>Disable new comments for new deployments</Heading>
-      <Helper>
-        When enabled new comments will not be created for new deployments.
-        Instead the last comment will be updated.
-      </Helper>
-      <CheckboxWrapper>
-        <CheckboxRow
-          label="Disable new comments for deployments"
-          checked={isNewCommentsDisabled}
-          toggle={() => setIsNewCommentsDisabled(!isNewCommentsDisabled)}
-          wrapperStyles={{
-            disableMargin: true,
-          }}
-        />
-      </CheckboxWrapper>
-
-      <Heading>Deploy from branches</Heading>
-      <Helper>
-        Choose the list of branches that you want to deploy changes from.
-      </Helper>
-      <BranchFilterSelector
-        onChange={setDeployBranches}
-        options={availableBranches}
-        value={deployBranches}
-        showLoading={isLoadingBranches}
-      />
-
-      <Heading>Select allowed branches</Heading>
-      <Helper>
-        If the pull request has a base branch included in this list, it will be
-        allowed to be deployed.
-        <br />
-        (Leave empty to allow all branches)
-      </Helper>
-      <BranchFilterSelector
-        onChange={setBaseBranches}
-        options={availableBranches}
-        value={baseBranches}
-        showLoading={isLoadingBranches}
-      />
-
-      <Heading>Namespace labels</Heading>
-      <Helper>
-        Custom labels to be injected into the Kubernetes namespace created for
-        each deployment.
-      </Helper>
-      <NamespaceLabels
-        values={namespaceLabels}
-        setValues={(x: KeyValueType[]) => {
-          let labels: KeyValueType[] = [];
-          x.forEach((entry) => {
-            labels.push({ key: entry.key, value: entry.value });
-          });
-          setNamespaceLabels(labels);
-        }}
-      />
-
       <ActionContainer>
         <SaveButton
           text="Add repository"

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentCard.tsx

@@ -402,6 +402,9 @@ const DeploymentCardWrapper = styled(DynamicLink)`
   border-radius: 5px;
   background: #26292e;
   border: 1px solid #494b4f;
+  :hover {
+    border: 1px solid #7a7b80;
+  }
 
   animation: fadeIn 0.5s;
   @keyframes fadeIn {

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentDetail.tsx

@@ -263,9 +263,6 @@ const DeploymentDetail = () => {
                 {prDeployment.subdomain}
               </PRLink>
             )}
-            <TagWrapper>
-              Namespace <NamespaceTag>{prDeployment.namespace}</NamespaceTag>
-            </TagWrapper>
           </InfoWrapper>
           <Flex>
             <Status>
@@ -288,11 +285,17 @@ const DeploymentDetail = () => {
               {showRepoTooltip && <Tooltip>{repository}</Tooltip>}
             </DeploymentImageContainer>
             <Dot>•</Dot>
+            <TagWrapper>
+              Namespace <NamespaceTag>{prDeployment.namespace}</NamespaceTag>
+            </TagWrapper>
             {prDeployment.last_workflow_run_url ? (
-              <GHALink to={prDeployment.last_workflow_run_url} target="_blank">
-                <img src={github} /> View last workflow run
-                <i className="material-icons">open_in_new</i>
-              </GHALink>
+              <>
+                <Dot>•</Dot>
+                <GHALink to={prDeployment.last_workflow_run_url} target="_blank">
+                  <img src={github} /> View last workflow run
+                  <i className="material-icons">open_in_new</i>
+                </GHALink>
+              </>
             ) : null}
           </Flex>
           <LinkToActionsWrapper></LinkToActionsWrapper>
@@ -407,7 +410,6 @@ const Wrap = styled.div`
 const Flex = styled.div`
   display: flex;
   align-items: center;
-  margin-top: 20px;
 `;
 
 const GHALink = styled(DynamicLink)`
@@ -512,7 +514,7 @@ const TagWrapper = styled.div`
   height: 20px;
   font-size: 12px;
   display: flex;
-  margin-left: 20px;
+  margin-left: 13px;
   margin-bottom: -3px;
   align-items: center;
   font-weight: 400;
@@ -614,6 +616,7 @@ const ChartListWrapper = styled.div`
   width: 100%;
   margin: auto;
   padding-bottom: 125px;
+  margin-top: -7px;
 `;
 
 const LinkToActionsWrapper = styled.div`

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentList.tsx

@@ -300,7 +300,7 @@ const DeploymentList = () => {
             <DynamicLink
               to={`/preview-environments/deployments/${environment_id}/${repo_owner}/${repo_name}/settings`}
             >
-              <I className="material-icons">more_vert</I>
+              <I className="material-icons">settings</I>
             </DynamicLink>
           </Flex>
         }

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

@@ -177,10 +177,12 @@ const CreateBranchEnvironment = ({ environmentID }: Props) => {
 
   return (
     <>
+      <Br height="7px" />
       <Helper>
         Select a branch to preview. Branches must contain a{" "}
         <Code>porter.yaml</Code> file.
       </Helper>
+      <DarkMatter />
       <FlexRow>
         <Flex>
           <SearchRowWrapper>
@@ -213,7 +215,6 @@ const CreateBranchEnvironment = ({ environmentID }: Props) => {
           />
         </Flex>
       </FlexRow>
-      <Br height="10px" />
       <BranchList>
       {
         (filteredBranches ?? []).map((branch, i) => (
@@ -289,6 +290,12 @@ const CreateBranchEnvironment = ({ environmentID }: Props) => {
 
 export default CreateBranchEnvironment;
 
+const DarkMatter = styled.div`
+  height: 0px;
+  width: 100%;
+  margin-top: -10px;
+`;
+
 const BranchList = styled.div`
   border: 1px solid #494b4f;
   border-radius: 5px;
@@ -299,6 +306,7 @@ const BranchList = styled.div`
 const BranchRow = styled.div<{ isLast?: boolean; isSelected?: boolean }>`
   width: 100%;
   padding: 15px;
+  padding-bottom: 8px;
   cursor: pointer;
   background: ${(props) => (props.isSelected ? "#ffffff11" : "#26292e")};
   border-bottom: ${(props) => (props.isLast ? "" : "1px solid #494b4f")};

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

@@ -9,7 +9,7 @@ import TabSelector from "components/TabSelector";
 import CreateBranchEnvironment from "./CreateBranchEnvironment";
 
 const TAB_OPTIONS = [
-  { label: "Pull Requests", value: "pull_requests" },
+  { label: "Pull requests", value: "pull_requests" },
   { label: "Branches", value: "branches" },
 ];
 
@@ -45,7 +45,6 @@ const CreateEnvironment: React.FC = () => {
         disableLineBreak
         capitalize={false}
       />
-      <DarkMatter />
       <TabSelector
         options={TAB_OPTIONS}
         currentTab={currentTab.value}

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

@@ -148,10 +148,12 @@ const CreatePREnvironment = ({ environmentID }: Props) => {
 
   return (
     <>
+      <Br height="7px" />
       <Helper>
         Select an open pull request to preview. Pull requests must contain a{" "}
         <Code>porter.yaml</Code> file.
       </Helper>
+      <DarkMatter />
       <FlexRow>
         <Flex>
           <SearchRowWrapper>
@@ -187,7 +189,6 @@ const CreatePREnvironment = ({ environmentID }: Props) => {
           />
         </Flex>
       </FlexRow>
-      <Br height="10px" />
       {filteredPullRequests?.length ? (
         <PullRequestList>
           {(filteredPullRequests ?? []).map(
@@ -301,6 +302,12 @@ const CreatePREnvironment = ({ environmentID }: Props) => {
 
 export default CreatePREnvironment;
 
+const DarkMatter = styled.div`
+  height: 0px;
+  width: 100%;
+  margin-top: -10px;
+`;
+
 const PullRequestList = styled.div`
   border: 1px solid #494b4f;
   border-radius: 5px;

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

@@ -274,17 +274,6 @@ const EnvironmentSettings = () => {
           }
         />
         <Br />
-        <Heading>Deploy from branches</Heading>
-        <Helper>
-          Choose the list of branches that you want to deploy changes from.
-        </Helper>
-        <BranchFilterSelector
-          onChange={setDeployBranches}
-          options={availableBranches}
-          value={deployBranches}
-          showLoading={isLoadingBranches}
-        />
-        <Br />
         <Heading>Select allowed branches</Heading>
         <Helper>
           If the pull request has a base branch included in this list, it will
@@ -357,7 +346,7 @@ const DeletePreviewEnvironmentModal = (
   return (
     <Modal
       height="fit-content"
-      title={`Remove Preview Envs for ${props.repoOwner}/${props.repoName}`}
+      title={`Remove preview envs for ${props.repoOwner}/${props.repoName}`}
       onRequestClose={props.onClose}
     >
       <DeletePreviewEnvironmentModalContentsWrapper>
@@ -373,14 +362,12 @@ const DeletePreviewEnvironmentModal = (
           setValue={(x: string) => props.setPrompt(x)}
           width={"500px"}
         />
-        <Flex justifyContent="center" alignItems="center">
-          <DeleteButton
-            onClick={() => props.onDelete()}
-            disabled={props.disabled}
-          >
-            Delete
-          </DeleteButton>
-        </Flex>
+        <DeleteButton
+          onClick={() => props.onDelete()}
+          disabled={props.disabled}
+        >
+          Delete preview environment
+        </DeleteButton>
       </DeletePreviewEnvironmentModalContentsWrapper>
     </Modal>
   );

dashboard/src/main/home/modals/EnvEditorModal.tsx

@@ -165,5 +165,6 @@ const StyledLoadEnvGroupModal = styled.div`
   padding: 25px 30px;
   overflow: hidden;
   border-radius: 6px;
-  background: #202227;
+  background: #20222744;
+  backdrop-filter: saturate(180%) blur(10px);
 `;

dashboard/src/main/home/modals/LoadEnvGroupModal.tsx

@@ -522,7 +522,8 @@ const StyledLoadEnvGroupModal = styled.div`
   height: 100%;
   padding: 25px 30px;
   border-radius: 8px;
-  background: #202227;
+  background: #20222744;
+  backdrop-filter: saturate(180%) blur(10px);
 `;
 
 const Flex = styled.div`

dashboard/src/main/home/modals/Modal.tsx

@@ -144,7 +144,8 @@ const StyledModal = styled.div`
   z-index: 999;
   font-size: 13px;
   border-radius: 10px;
-  background: #202227;
+  background: #20222744;
+  backdrop-filter: saturate(180%) blur(10px);
   border: 1px solid #ffffff55;
   overflow: auto;
   color: #ffffff;