step 1 onboarding styling fixes

dashboard/src/main/home/onboarding/steps/ConnectSource.tsx

@@ -90,24 +90,32 @@ const ConnectSource: React.FC<{
       )}
       {!isLoading && accountData?.accounts.length && (
         <>
+          <Helper>Porter currently has access to:</Helper>
           <List>
-            {accountData?.accounts.map((name, i) => {
-              return (
-                <Row
-                  key={i}
-                  isLastItem={i === accountData.accounts.length - 1}
-                >
-                  <i className="material-icons">bookmark</i>
-                  {name}
-                </Row>
-              );
-            })}
+            {
+              accountData?.accounts.length > 0 ? (
+                accountData?.accounts.map((name, i) => {
+                  return (
+                    <Row
+                      key={i}
+                      isLastItem={i === accountData.accounts.length - 1}
+                    >
+                      <i className="material-icons">bookmark</i>
+                      {name}
+                    </Row>
+                  );
+                })
+              ) : (
+                <Placeholder>No repositories found.</Placeholder>
+              )
+            }
           </List>
-          <br />
-          Don't see the right repos?{" "}
-          <A href={"/api/integrations/github-app/install"}>
-            Install Porter in more repositories
-          </A>
+          <Helper>
+            Don't see the right repos?{" "}
+            <A href={"/api/integrations/github-app/install"}>
+              Install Porter in more repositories
+            </A>.
+          </Helper>
           <NextStep
             text="Continue"
             disabled={false}
@@ -127,6 +135,16 @@ const ConnectSource: React.FC<{
 
 export default ConnectSource;
 
+const Placeholder = styled.div`
+  width: 100%;
+  height: 80px;
+  color: #aaaabb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+`;
+
 const FadeWrapper = styled.div<{ delay?: string }>`
   opacity: 0;
   animation: fadeIn 0.5s ${(props) => props.delay || "0.2s"};
@@ -181,7 +199,7 @@ const List = styled.div`
   background: #ffffff11;
   border-radius: 5px;
   margin-top: 20px;
-  border: 1px solid #ffffff44;
+  border: 1px solid #aaaabb;
   max-height: 200px;
   overflow-y: auto;
 `;
@@ -190,6 +208,7 @@ const Row = styled.div<{ isLastItem?: boolean }>`
   width: 100%;
   height: 35px;
   color: #ffffff55;
+  font-size: 13px;
   display: flex;
   align-items: center;
   border-bottom: ${(props) => (props.isLastItem ? "" : "1px solid #ffffff44")};