added links to basic ci docs

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

@@ -137,6 +137,12 @@ export default class ActionDetails extends Component<PropsType, StateType> {
           />
         )}
         {this.renderRegistrySection()}
+        <SubtitleAlt>
+          <Bold>Note:</Bold> To auto-deploy each time you push changes, Porter will write Github Secrets and a GitHub Actions file to your repo.
+            <Highlight href="https://docs.getporter.dev/docs/auto-deploy-requirements#cicd-with-github-actions" target="_blank">
+              Learn More
+            </Highlight>
+        </SubtitleAlt>
         <Br />
 
         <Flex>
@@ -152,12 +158,12 @@ export default class ActionDetails extends Component<PropsType, StateType> {
           </BackButton>
           {this.props.selectedRegistry ? (
             <StatusWrapper successful={true}>
-              <i className="material-icons">done</i> Source selected.
+              <i className="material-icons">done</i> Source selected
             </StatusWrapper>
           ) : (
             <StatusWrapper>
-              <i className="material-icons">error_outline</i> A connected
-              container registry is required
+              <i className="material-icons">error_outline</i> 
+              A connected container registry is required
             </StatusWrapper>
           )}
         </Flex>
@@ -168,6 +174,19 @@ export default class ActionDetails extends Component<PropsType, StateType> {
 
 ActionDetails.contextType = Context;
 
+const Highlight = styled.a`
+  color: #949eff;
+  text-decoration: none;
+  margin-left: 5px;
+  cursor: pointer;
+`;
+
+const Bold = styled.div`
+  font-weight: 800;
+  color: #ffffff;
+  margin-right: 5px;
+`;
+
 const Required = styled.div`
   margin-left: 8px;
   color: #fc4976;
@@ -178,6 +197,20 @@ const Subtitle = styled.div`
   margin-top: 21px;
 `;
 
+const SubtitleAlt = styled.div`
+  padding: 11px 0px 16px;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #aaaabb;
+  line-height: 1.6em;
+  display: flex;
+  align-items: center;
+  margin-top: -3px;
+  margin-bottom: -7px;
+  font-weight: 400;
+`;
+
+
 const RegistryItem = styled.div`
   display: flex;
   width: 100%;

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

@@ -232,7 +232,13 @@ export default class ContentsList extends Component<PropsType, StateType> {
       <>
         {this.renderJumpToParent()}
         {this.renderContentList()}
-        <UseButton onClick={this.handleContinue}>Continue</UseButton>
+        <FlexWrapper>
+          <UseButton onClick={this.handleContinue}>Continue</UseButton>
+          <StatusWrapper href="https://docs.getporter.dev/docs/auto-deploy-requirements#auto-build-with-cloud-native-buildpacks" target="_blank">
+            <i className="material-icons">help_outline</i> 
+            <div>Auto build requirements</div>
+          </StatusWrapper>
+        </FlexWrapper>
         {this.renderOverlay()}
       </>
     );
@@ -241,6 +247,31 @@ export default class ContentsList extends Component<PropsType, StateType> {
 
 ContentsList.contextType = Context;
 
+const FlexWrapper = styled.div`
+  position: absolute;
+  bottom: 28px;
+  left: 185px;
+  display: flex;
+  align-items: center;
+`;
+
+const StatusWrapper = styled.a<{ successful?: boolean }>`
+  display: flex;
+  align-items: center;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #949eff;;
+  margin-right: 25px;
+  margin-left: 20px;
+  cursor: pointer;
+  text-decoration: none;
+
+  > i {
+    font-size: 18px;
+    margin-right: 8px;
+  }
+`;
+
 const BgOverlay = styled.div`
   position: absolute;
   width: 100%;
@@ -362,9 +393,6 @@ const Overlay = styled.div`
 `;
 
 const UseButton = styled.div`
-  position: absolute;
-  bottom: 28px;
-  left: 185px;
   height: 35px;
   display: flex;
   align-items: center;

dashboard/src/main/home/launch/expanded-template/LaunchTemplate.tsx

@@ -719,6 +719,12 @@ class LaunchTemplate extends Component<PropsType, StateType> {
 LaunchTemplate.contextType = Context;
 export default withRouter(LaunchTemplate);
 
+const Bold = styled.div`
+  font-weight: bold;
+  color: white;
+  margin-right: 5px;
+`;
+
 const CloseButton = styled.div`
   position: absolute;
   display: block;