some styling polish (#4287)

Co-authored-by: sunguroku <trevor@porter.run>
Co-authored-by: Porter Support <93286801+portersupport@users.noreply.github.com>

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroups.tsx

@@ -106,7 +106,7 @@ const EnvGroups: React.FC<Props> = ({
     }
   };
 
-  return (
+  return !currentProject?.sandbox_enabled && (
     <>
       <Text size={16}>Synced environment groups</Text>
       <Spacer y={0.5} />
@@ -131,17 +131,15 @@ const EnvGroups: React.FC<Props> = ({
           <Spacer y={1} />
         </>
       )}
-      {!currentProject?.sandbox_enabled ? (
-        <Button
-          alt
-          onClick={() => {
-            setShowEnvModal(true);
-          }}
-        >
-          <I className="material-icons">add</I>
-          Sync an env group
-        </Button>
-      ) : null }
+      <Button
+        alt
+        onClick={() => {
+          setShowEnvModal(true);
+        }}
+      >
+        <I className="material-icons">add</I>
+        Sync an env group
+      </Button>
       {showEnvModal ? (
         <EnvGroupModal
           setOpen={setShowEnvModal}

dashboard/src/main/home/new-project/NewProject.tsx

@@ -181,11 +181,11 @@ export const NewProjectFC = () => {
             text="Create project"
             disabled={false}
             onClick={createProject}
-            status={buttonStatus}
+            status={buttonStatus === "loading"}
             makeFlush={true}
             clearPosition={true}
             statusPosition="right"
-            saveText="Creating project..."
+            saveText="Creating project... This may take a minute."
             successText="Project created successfully!"
           />
         </SlideWrapper>

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -323,29 +323,28 @@ class Sidebar extends Component<PropsType, StateType> {
               path="/addons"
               active={window.location.pathname.startsWith("/addons")}
             >
-              <Img src={addOns} />
-              Add-ons
-              {currentProject.sandbox_enabled && (
+              <Container row spaced style={{ width: "100%" }}>
                 <Container row>
-                  <Spacer inline width="15px" />
-                  <Image size={15} src={lock} />
+                  <Img src={addOns} />
+                  Add-ons
                 </Container>
-              )}
+                {currentProject.sandbox_enabled && <Image size={15} src={lock} />}
+              </Container>
             </NavButton>
+
             <NavButton
               path="/environment-groups"
               active={window.location.pathname.startsWith(
                 "/environment-groups"
               )}
             >
-              <Img src={sliders} />
-              Env groups
-              {currentProject.sandbox_enabled && (
+              <Container row spaced style={{ width: "100%" }}>
                 <Container row>
-                  <Spacer inline width="15px" />
-                  <Image size={15} src={lock} />
+                  <Img src={sliders} />
+                  Env groups
                 </Container>
-              )}
+                {currentProject.sandbox_enabled && <Image size={15} src={lock} />}
+              </Container>
             </NavButton>
             <NavButton
               path={
@@ -363,14 +362,13 @@ class Sidebar extends Component<PropsType, StateType> {
                   : "/cluster-dashboard"
               )}
             >
-              <Img src={infra} />
-              Infrastructure
-              {currentProject.sandbox_enabled && (
-                <Container row>
-                  <Spacer inline width="15px" />
-                  <Image size={15} src={lock} />
-                </Container>
-              )}
+              <Container row spaced style={{ width: "100%" }}>
+                  <Container row>
+                    <Img src={infra} />
+                    Infrastructure
+                  </Container>
+                  {currentProject.sandbox_enabled && <Image size={15} src={lock} />}
+              </Container>
             </NavButton>
             <NavButton path="/preview-environments">
               <Container row spaced style={{ width: "100%" }}>