GitHub button (#2800)

* install github app button

* fallback to ecr icon

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

@@ -10,6 +10,7 @@ import Loading from "../Loading";
 import SearchBar from "../SearchBar";
 import DynamicLink from "components/DynamicLink";
 import { useOutsideAlerter } from "shared/hooks/useOutsideAlerter";
+import Text from "components/porter/Text";
 
 type Props = {
   actionConfig: ActionConfigType | null;
@@ -302,34 +303,19 @@ const RepoList: React.FC<Props> = ({
   };
 
   if (!hasProviders) {
+    const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+    const encoded_redirect_uri = encodeURIComponent(url);
+
     return (
       <>
-        <RepoListWrapper>
-          <ExpandedWrapper>
-            <LoadingWrapper>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <div>A connected Git provider wasn't found.</div>
-                <div>
-                  You can
-                  <A
-                    to={`${window.location.origin}/api/integrations/github-app/install`}
-                  >
-                    connect a GitHub repo
-                  </A>
-                  or
-                  <A to={"/integrations"}>add a GitLab instance</A>
-                </div>
-              </div>
-            </LoadingWrapper>
-          </ExpandedWrapper>
-        </RepoListWrapper>
+                <Text size={16} weight={500}>
+                  No connected repositories were found.
+                </Text>
+                <ConnectToGithubButton
+                  href={`/api/integrations/github-app/install?redirect_uri=${encoded_redirect_uri}`}
+                >
+                  <GitHubIcon src={github} /> Connect to GitHub
+                </ConnectToGithubButton>
       </>
     );
   }
@@ -339,6 +325,61 @@ const RepoList: React.FC<Props> = ({
 
 export default RepoList;
 
+const GitHubIcon = styled.img`
+  width: 20px;
+  filter: brightness(150%);
+  margin-right: 10px;
+`;
+
+const ConnectToGithubButton = styled.a`
+  width: 180px;
+  justify-content: center;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: "Work Sans", sans-serif;
+  color: white;
+  font-weight: 500;
+  padding: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-top: 25px;
+  border: 1px solid #494b4f;
+  text-overflow: ellipsis;
+  cursor: ${(props: { disabled?: boolean }) =>
+    props.disabled ? "not-allowed" : "pointer"};
+
+  background: ${(props: { disabled?: boolean }) =>
+    props.disabled ? "#aaaabbee" : "#2E3338"};
+  :hover {
+    background: ${(props: { disabled?: boolean }) =>
+      props.disabled ? "" : "#353a3e"};
+  }
+
+  > i {
+    color: white;
+    width: 18px;
+    height: 18px;
+    font-weight: 600;
+    font-size: 12px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+    justify-content: center;
+  }
+`;
+
+const Flex = styled.div`
+  padding: 20px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const ProviderSelector = (props: {
   values: any[];
   currentValue: any;

dashboard/src/main/home/integrations/IntegrationRow.tsx

@@ -55,7 +55,7 @@ export default class IntegrationRow extends Component<PropsType, StateType> {
       <Integration disabled={false}>
         <MainRow onClick={this.props.toggleCollapse} disabled={false}>
           <Flex>
-            <Icon src={icon && icon} />
+            <Icon src={icon ? icon : "https://avatars2.githubusercontent.com/u/52505464?s=400&u=da920f994c67665c7ad6c606a5286557d4f8555f&v=4"} />
             <Description>
               <Label>{this.props.label}</Label>
               <Subtitle>{subtitle}</Subtitle>

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

@@ -103,7 +103,7 @@ class SourcePage extends Component<PropsType, StateType> {
               setImageTag("");
             }}
           >
-            <CloseButtonImg src={close} />
+            <i className="material-icons">close</i>
           </CloseButton>
           <Subtitle>
             Specify the container image you would like to connect to this
@@ -164,7 +164,7 @@ class SourcePage extends Component<PropsType, StateType> {
             setProcfileProcess("");
           }}
         >
-          <CloseButtonImg src={close} />
+          <i className="material-icons">close</i>
         </CloseButton>
         <Subtitle>
           Provide a repo folder to use as source.
@@ -352,16 +352,22 @@ const CloseButton = styled.div`
   display: block;
   width: 40px;
   height: 40px;
-  padding: 13px 0 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1;
-  text-align: center;
   border-radius: 50%;
-  right: 15px;
-  top: 12px;
+  right: 12px;
+  top: 10px;
   cursor: pointer;
   :hover {
     background-color: #ffffff11;
   }
+
+  > i {
+    font-size: 20px;
+    color: #aaaabb;
+  }
 `;
 
 const CloseButtonImg = styled.img`

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

@@ -128,7 +128,7 @@ const User = styled.div`
 
 const ListWrapper = styled.div`
   width: 100%;
-  height: 250px;
+  height: 240px;
   background: #ffffff11;
   display: flex;
   align-items: center;