style usage warning modal

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

@@ -425,7 +425,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
             <p>
               <b>{this.state.autoBuildpack.name}</b> buildpack was{" "}
               <a
-                href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
+                href="https://docs.porter.run/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
                 target="_blank"
               >
                 detected automatically
@@ -440,7 +440,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
           <FlexWrapper>
             <UseButton onClick={this.handleContinue}>Continue</UseButton>
             <StatusWrapper
-              href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
+              href="https://docs.porter.run/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks"
               target="_blank"
             >
               <i className="material-icons">help_outline</i>

dashboard/src/main/home/Home.tsx

@@ -498,6 +498,7 @@ class Home extends Component<PropsType, StateType> {
             onRequestClose={() => setCurrentModal(null, null)}
             width="760px"
             height="650px"
+            title="Connecting to an Existing Cluster"
           >
             <ClusterInstructionsModal />
           </Modal>
@@ -510,6 +511,7 @@ class Home extends Component<PropsType, StateType> {
               onRequestClose={() => setCurrentModal(null, null)}
               width="565px"
               height="275px"
+              title="Cluster Settings"
             >
               <UpdateClusterModal
                 setRefreshClusters={(x: boolean) =>
@@ -522,7 +524,8 @@ class Home extends Component<PropsType, StateType> {
           <Modal
             onRequestClose={() => setCurrentModal(null, null)}
             width="760px"
-            height="725px"
+            height="380px"
+            title="Add a New Integration"
           >
             <IntegrationsModal />
           </Modal>
@@ -532,6 +535,7 @@ class Home extends Component<PropsType, StateType> {
             onRequestClose={() => setCurrentModal(null, null)}
             width="760px"
             height="650px"
+            title="Connecting to an Image Registry"
           >
             <IntegrationsInstructionsModal />
           </Modal>
@@ -542,6 +546,7 @@ class Home extends Component<PropsType, StateType> {
               onRequestClose={() => setCurrentModal(null, null)}
               width="600px"
               height="220px"
+              title="Add Namespace"
             >
               <NamespaceModal />
             </Modal>
@@ -552,6 +557,7 @@ class Home extends Component<PropsType, StateType> {
               onRequestClose={() => setCurrentModal(null, null)}
               width="700px"
               height="280px"
+              title="Delete Namespace"
             >
               <DeleteNamespaceModal />
             </Modal>
@@ -571,6 +577,7 @@ class Home extends Component<PropsType, StateType> {
             onRequestClose={() => setCurrentModal(null, null)}
             width="760px"
             height="440px"
+            title="Account Settings"
           >
             <AccountSettingsModal />
           </Modal>
@@ -580,7 +587,8 @@ class Home extends Component<PropsType, StateType> {
           <Modal
             onRequestClose={() => setCurrentModal(null, null)}
             width="760px"
-            height="440px"
+            height="420px"
+            title="Usage Warning"
           >
             <UsageWarningModal />
           </Modal>

dashboard/src/main/home/launch/Launch.tsx

@@ -325,7 +325,7 @@ class Templates extends Component<PropsType, StateType> {
         <TemplatesWrapper>
           <TitleSection>
             Launch
-            <a href="https://docs.getporter.dev/docs/add-ons" target="_blank">
+            <a href="https://docs.porter.run/docs/addons" target="_blank">
               <i className="material-icons">help_outline</i>
             </a>
           </TitleSection>

dashboard/src/main/home/launch/launch-flow/SourcePage.tsx

@@ -275,7 +275,7 @@ class SourcePage extends Component<PropsType, StateType> {
         <Helper>
           Learn more about
           <Highlight
-            href="https://docs.getporter.dev/docs/add-ons"
+            href="https://docs.porter.run/docs/addons"
             target="_blank"
           >
             deploying services to Porter

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

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 
-import close from "assets/close.png";
 import github from "assets/github.png";
 
 import { Context } from "../../../shared/Context";
@@ -42,15 +41,6 @@ const AccountSettingsModal = () => {
 
   return (
     <>
-      <CloseButton
-        onClick={() => {
-          setCurrentModal(null, null);
-        }}
-      >
-        <CloseButtonImg src={close} />
-      </CloseButton>
-      <ModalTitle>Account Settings</ModalTitle>
-
       <TabSelector
         options={tabOptions}
         currentTab={currentTab}
@@ -181,68 +171,6 @@ const GitIcon = styled.img`
   margin-left: 1px;
 `;
 
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  > i {
-    background: none;
-    border-radius: 3px;
-    display: flex;
-    font-size: 18px;
-    margin-top: 1px;
-    margin-right: 10px;
-    padding: 1px;
-    align-items: center;
-    justify-content: center;
-    color: #ffffffaa;
-    border: 0;
-  }
-`;
-
-const Subtitle = styled.div`
-  margin-top: 23px;
-  font-family: "Work Sans", sans-serif;
-  font-size: 13px;
-  color: #aaaabb;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-bottom: -10px;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
 const A = styled.a`
   color: #8590ff;
   text-decoration: underline;

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

@@ -96,17 +96,7 @@ export default class ClusterInstructionsModal extends Component<
   render() {
     let { currentPage, currentTab } = this.state;
     return (
-      <StyledClusterInstructionsModal>
-        <CloseButton
-          onClick={() => {
-            this.context.setCurrentModal(null, null);
-          }}
-        >
-          <CloseButtonImg src={close} />
-        </CloseButton>
-
-        <ModalTitle>Connecting to an Existing Cluster</ModalTitle>
-
+      <>
         <TabSelector
           options={tabOptions}
           currentTab={currentTab}
@@ -139,7 +129,7 @@ export default class ClusterInstructionsModal extends Component<
             arrow_forward
           </i>
         </PageSection>
-      </StyledClusterInstructionsModal>
+      </>
     );
   }
 }
@@ -207,64 +197,4 @@ const Placeholder = styled.div`
 const Bold = styled.div`
   font-weight: 600;
   margin-bottom: 7px;
-`;
-
-const Subtitle = styled.div`
-  padding: 17px 0px 25px;
-  font-family: "Work Sans", sans-serif;
-  font-size: 13px;
-  color: #aaaabb;
-  margin-top: 3px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledClusterInstructionsModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 32px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
+`;

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

@@ -20,7 +20,7 @@ const DeleteNamespaceModal = () => {
   const [status, setStatus] = useState<string>(null as string);
   const deleteNamespace = () => {
     if (namespaceNameForDelition !== currentModalData.metadata.name) {
-      setStatus("Please insert the name of the namespace to confirm deletion");
+      setStatus("Please enter the name of this namespace to confirm deletion");
       return;
     }
 
@@ -47,16 +47,7 @@ const DeleteNamespaceModal = () => {
   };
 
   return (
-    <StyledUpdateProjectModal>
-      <CloseButton
-        onClick={() => {
-          setCurrentModal(null, null);
-        }}
-      >
-        <CloseButtonImg src={close} />
-      </CloseButton>
-
-      <ModalTitle>Delete Namespace</ModalTitle>
+    <>
       <Subtitle>
         Please insert the name of the namespace to delete it:
         <DangerText>{" " + currentModalData.metadata.name}</DangerText>
@@ -84,7 +75,7 @@ const DeleteNamespaceModal = () => {
         onClick={() => deleteNamespace()}
         status={status}
       />
-    </StyledUpdateProjectModal>
+    </>
   );
 };
 
@@ -133,55 +124,6 @@ const Subtitle = styled.div`
   margin-bottom: -10px;
 `;
 
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledUpdateProjectModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 30px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
-
 const Warning = styled.div`
   font-size: 13px;
   display: flex;

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

@@ -80,15 +80,7 @@ const EditCollaboratorModal = () => {
   };
 
   return (
-    <StyledUpdateProjectModal>
-      <CloseButton
-        onClick={() => {
-          setCurrentModal(null, null);
-        }}
-      >
-        <CloseButtonImg src={close} />
-      </CloseButton>
-
+    <>
       <ModalTitle>
         Update {isInvite ? "Invite for" : "Collaborator"} {user?.email}
       </ModalTitle>
@@ -107,7 +99,7 @@ const EditCollaboratorModal = () => {
         onClick={() => handleUpdate()}
         status={status}
       />
-    </StyledUpdateProjectModal>
+    </>
   );
 };
 
@@ -130,50 +122,11 @@ const Subtitle = styled.div`
 `;
 
 const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: "Work Sans", sans-serif;
   font-size: 18px;
-  color: #ffffff;
+  font-weight: 500;
+  margin-bottom: 10px;
   user-select: none;
-  font-weight: 700;
-  align-items: center;
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledUpdateProjectModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 30px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
+`;

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

@@ -47,17 +47,7 @@ export default class ClusterInstructionsModal extends Component<
   render() {
     let { currentPage, currentTab } = this.state;
     return (
-      <StyledClusterInstructionsModal>
-        <CloseButton
-          onClick={() => {
-            this.context.setCurrentModal(null, null);
-          }}
-        >
-          <CloseButtonImg src={close} />
-        </CloseButton>
-
-        <ModalTitle>Connecting to an Image Registry</ModalTitle>
-
+      <>
         <TabSelector
           options={tabOptions}
           currentTab={currentTab}
@@ -67,42 +57,13 @@ export default class ClusterInstructionsModal extends Component<
         />
 
         {this.renderPage()}
-      </StyledClusterInstructionsModal>
+      </>
     );
   }
 }
 
 ClusterInstructionsModal.contextType = Context;
 
-const PageCount = styled.div`
-  margin-right: 9px;
-  user-select: none;
-  letter-spacing: 2px;
-`;
-
-const PageSection = styled.div`
-  position: absolute;
-  bottom: 22px;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  color: #ffffff;
-  justify-content: flex-end;
-  user-select: none;
-
-  > i {
-    font-size: 18px;
-    margin-left: 2px;
-    cursor: pointer;
-    border-radius: 20px;
-    padding: 5px;
-    :hover {
-      background: #ffffff11;
-    }
-  }
-`;
-
 const Code = styled.div`
   background: #181b21;
   padding: 10px 15px;
@@ -116,13 +77,6 @@ const Code = styled.div`
   font-family: monospace;
 `;
 
-const A = styled.a`
-  color: #ffffff;
-  text-decoration: underline;
-  cursor: ${(props: { disabled?: boolean }) =>
-    props.disabled ? "not-allowed" : "pointer"};
-`;
-
 const Placeholder = styled.div`
   color: #aaaabb;
   font-size: 13px;
@@ -135,64 +89,4 @@ const Placeholder = styled.div`
 const Bold = styled.div`
   font-weight: 600;
   margin-bottom: 7px;
-`;
-
-const Subtitle = styled.div`
-  padding: 10px 0px 20px;
-  font-family: "Work Sans", sans-serif;
-  font-size: 13px;
-  color: #aaaabb;
-  margin-top: 3px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledClusterInstructionsModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 32px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
+`;

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

@@ -46,7 +46,9 @@ export default class IntegrationsModal extends Component<PropsType, StateType> {
           integrationList[integration.service].icon;
         let disabled =
           integration.service === "kube" || integration.service === "dockerhub";
-        return (
+
+        if (!disabled) {
+          return (
           <IntegrationOption
             key={i}
             disabled={disabled}
@@ -61,28 +63,19 @@ export default class IntegrationsModal extends Component<PropsType, StateType> {
             <Label>{integrationList[integration.service].label}</Label>
           </IntegrationOption>
         );
+        }
       });
     }
   };
 
   render() {
     return (
-      <StyledIntegrationsModal>
-        <CloseButton
-          onClick={() => {
-            this.context.setCurrentModal(null, null);
-          }}
-        >
-          <CloseButtonImg src={close} />
-        </CloseButton>
-
-        <ModalTitle>Add a New Integration</ModalTitle>
+      <>
         <Subtitle>Select the service you would like to connect to.</Subtitle>
-
         <IntegrationsCatalog>
           {this.renderIntegrationsCatalog()}
         </IntegrationsCatalog>
-      </StyledIntegrationsModal>
+      </>
     );
   }
 }
@@ -134,53 +127,4 @@ const Subtitle = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-`;
-
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledIntegrationsModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 32px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
+`;

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

@@ -5,6 +5,7 @@ type PropsType = {
   onRequestClose: () => void;
   width?: string;
   height?: string;
+  title?: string;
 };
 
 type StateType = {};
@@ -38,6 +39,14 @@ export default class Modal extends Component<PropsType, StateType> {
     return (
       <Overlay>
         <StyledModal ref={this.wrapperRef} width={width} height={height}>
+          <CloseButton onClick={this.props.onRequestClose}>
+            <i className="material-icons">close</i>
+          </CloseButton>
+          { 
+            this.props.title && (
+              <ModalTitle>{this.props.title}</ModalTitle>
+            )
+          }
           {this.props.children}
         </StyledModal>
       </Overlay>
@@ -45,6 +54,36 @@ export default class Modal extends Component<PropsType, StateType> {
   }
 }
 
+const ModalTitle = styled.div`
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  user-select: none;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border-radius: 50%;
+  right: 15px;
+  top: 12px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+
+  > i {
+    font-size: 20px;
+    color: #aaaabb;
+  }
+`;
+
 const Overlay = styled.div`
   position: fixed;
   margin: 0;
@@ -67,11 +106,13 @@ const StyledModal = styled.div`
   max-width: 80vw;
   height: ${(props: { width?: string; height?: string }) =>
     props.height ? props.height : "425px"};
-  border-radius: 7px;
-  border: 0;
-  background-color: #202227;
   overflow: visible;
   padding: 25px 32px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #202227;
+  border: 1px solid #ffffff55;
+  color: #ffffff;
   animation: floatInModal 0.5s 0s;
   @keyframes floatInModal {
     from {

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

@@ -80,16 +80,7 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <StyledUpdateProjectModal>
-        <CloseButton
-          onClick={() => {
-            this.context.setCurrentModal(null, null);
-          }}
-        >
-          <CloseButtonImg src={close} />
-        </CloseButton>
-
-        <ModalTitle>Add Namespace</ModalTitle>
+      <>
         <Subtitle>Name</Subtitle>
 
         <InputWrapper>
@@ -113,7 +104,7 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
           onClick={() => this.createNamespace()}
           status={this.state.status}
         />
-      </StyledUpdateProjectModal>
+      </>
     );
   }
 }
@@ -156,53 +147,4 @@ const Subtitle = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-bottom: -10px;
-`;
-
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledUpdateProjectModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 30px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
+`;

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

@@ -102,16 +102,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <StyledUpdateProjectModal>
-        <CloseButton
-          onClick={() => {
-            this.context.setCurrentModal(null, null);
-          }}
-        >
-          <CloseButtonImg src={close} />
-        </CloseButton>
-
-        <ModalTitle>Cluster Settings</ModalTitle>
+      <>
         <Subtitle>Cluster name</Subtitle>
 
         <InputWrapper>
@@ -150,7 +141,7 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
           onYes={this.handleDelete}
           onNo={() => this.setState({ showDeleteOverlay: false })}
         />
-      </StyledUpdateProjectModal>
+      </>
     );
   }
 }
@@ -232,53 +223,4 @@ const Subtitle = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-bottom: -10px;
-`;
-
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 18px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledUpdateProjectModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 30px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-`;
+`;

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

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
-import close from "assets/close.png";
+
+import Banner from "components/Banner";
 
 import { Context } from "shared/Context";
 import { UsageData } from "shared/types";
@@ -57,36 +58,38 @@ const UpgradeChartModal: React.FC<{}> = () => {
   }
   console.log({ usage, filteredUsage });
   return (
-    <StyledUpgradeChartModal>
-      <CloseButton onClick={() => setCurrentModal(null, null)}>
-        <CloseButtonImg src={close} />
-      </CloseButton>
-      <ModalTitle>Usage warning</ModalTitle>
-      You're current project is currently exceeding its usage limits. Your usage
-      limits are:
+    <>
+      <Br />
+        <Banner type="warning">
+          Your project is currently exceeding its resource usage limit.
+        </Banner>
+      <Br />
       <DescriptionSection>
-        {filteredUsage !== null &&
-          Object.entries(filteredUsage.limit).map(([key, value]) => {
-            return (
-              <div key={key}>
-                <b>{ReadableNameMap[key]}:</b> {value}
+        {
+          filteredUsage !== null && (
+            <>
+              <div>
+                <Label>CPU Usage: </Label>
+                <Stat isRed={filteredUsage.current["resource_cpu"] > filteredUsage.limit["resource_cpu"]}>
+                  {filteredUsage.current["resource_cpu"]} / {filteredUsage.limit["resource_cpu"]} vCPU
+                </Stat>
               </div>
-            );
-          })}
-      </DescriptionSection>
-      Your project is currently using:
-      <DescriptionSection>
-        {filteredUsage !== null &&
-          Object.entries(filteredUsage.current).map(([key, value]) => {
-            return (
-              <div key={key}>
-                <b>{ReadableNameMap[key]}:</b> {value}
+              <div>
+                <Label>RAM Usage: </Label> 
+                <Stat isRed={filteredUsage.current["resource_memory"] > filteredUsage.limit["resource_memory"]}>
+                  {filteredUsage.current["resource_memory"]/1000} / {filteredUsage.limit["resource_memory"]/1000} GB
+                </Stat>
               </div>
-            );
-          })}
+            </>
+          )
+        }
       </DescriptionSection>
-      You have currently <b>7 days</b> to resolve this issue before you loose
-      access to the Porter dashboard.
+      <Helper>
+        You have <b>7 days</b> to resolve this issue before your access to the dashboard is restricted.
+      </Helper>
+      <Helper>
+        Have a question about billing? Email us at <a target="_blank" href="mailto:contact@porter.run">contact@porter.run</a>.
+      </Helper>
       <Button
         as={Link}
         to={{
@@ -97,12 +100,33 @@ const UpgradeChartModal: React.FC<{}> = () => {
       >
         Take me to billing
       </Button>
-    </StyledUpgradeChartModal>
+    </>
   );
 };
 
 export default UpgradeChartModal;
 
+const Helper = styled.div`
+  color: #aaaabb;
+  margin-top: 12px;
+`;
+
+const Label = styled.div`
+  margin-bottom: 10px;
+  font-weight: 500;
+`;
+
+const Stat = styled.div<{ isRed: boolean }>`
+  font-size: 20px;
+  margin-bottom: 25px;
+  color: ${props => props.isRed ? "#ff385d" : "#ffffff"};
+`;
+
+const Br = styled.div`
+  width: 100%;
+  height: 5px;
+`;
+
 const Button = styled.button`
   height: 35px;
   background: #616feecc;
@@ -129,57 +153,5 @@ const Button = styled.button`
 
 const DescriptionSection = styled.div`
   margin-top: 10px;
-  margin-bottom: 10px;
-`;
-
-const ModalTitle = styled.div`
-  margin: 0px 0px 13px;
-  display: flex;
-  flex: 1;
-  font-family: Work Sans, sans-serif;
-  font-size: 24px;
-  color: #ffffff;
-  user-select: none;
-  font-weight: 700;
-  align-items: center;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 40px;
-  padding: 13px 0 12px 0;
-  z-index: 1;
-  text-align: center;
-  border-radius: 50%;
-  right: 15px;
-  top: 12px;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonImg = styled.img`
-  width: 14px;
-  margin: 0 auto;
-`;
-
-const StyledUpgradeChartModal = styled.div`
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  padding: 25px 30px;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #202227;
-  font-size: 13px;
-  line-height: 1.8em;
-  font-family: Work Sans, sans-serif;
-`;
+  margin-bottom: 35px;
+`;

docs/guides/using-env-groups.md

@@ -20,7 +20,7 @@ You will be redirected to the list of environment groups, and your new environme
 
 ![Load env group](https://files.readme.io/c909d6a-env-groups-4.png "env-groups-4.png")
 
-You can then select your environment group and click "Load Selected Env Group", which will automatically populate the environment group variables that you previously set. You can modify these environment variables in this tab, for example if you'd like to add environment variables that aren't currently in the environment group. To view all deployment options, head over to our [application deployment docs](https://docs.getporter.dev/docs/add-ons). 
+You can then select your environment group and click "Load Selected Env Group", which will automatically populate the environment group variables that you previously set. You can modify these environment variables in this tab, for example if you'd like to add environment variables that aren't currently in the environment group. To view all deployment options, head over to our [application deployment docs](https://docs.porter.run/docs/addons). 
 
 # 🔒 Creating secret environment variables