From 9e96ca7cea870eaaa0b594e04a5b1c9acdddcda4 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Wed, 4 Aug 2021 09:03:25 +0000
Subject: [PATCH] Update authorization step layout in onboarding flow

---
 components/dashboard/src/icons/NoAccess.svg   |  1 +
 .../dashboard/src/projects/NewProject.tsx     | 23 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)
 create mode 100644 components/dashboard/src/icons/NoAccess.svg

diff --git a/components/dashboard/src/icons/NoAccess.svg b/components/dashboard/src/icons/NoAccess.svg
new file mode 100644
index 00000000000000..7e34d7af7c4e15
--- /dev/null
+++ b/components/dashboard/src/icons/NoAccess.svg
@@ -0,0 +1 @@
+<svg width="52" height="49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26 .4a3.2 3.2 0 00-3.2 3.2v3.2a3.2 3.2 0 006.4 0V3.6A3.2 3.2 0 0026 .4z" fill="#D6D3D1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.8 6.8h9.6a9.6 9.6 0 0019.2 0h9.6a6.4 6.4 0 016.4 6.4V42a6.4 6.4 0 01-6.4 6.4H6.8A6.4 6.4 0 01.4 42V13.2a6.4 6.4 0 016.4-6.4zm8 22.4a4.8 4.8 0 100-9.6 4.8 4.8 0 000 9.6zM22.642 42a8 8 0 10-15.68 0h15.68zM32.4 22.8a3.2 3.2 0 000 6.4H42a3.2 3.2 0 000-6.4h-9.6zm-3.2 12.8a3.2 3.2 0 013.2-3.2h6.4a3.2 3.2 0 010 6.4h-6.4a3.2 3.2 0 01-3.2-3.2z" fill="#D6D3D1"/></svg>
\ No newline at end of file
diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
index 93feae206811b1..d4e718398170ae 100644
--- a/components/dashboard/src/projects/NewProject.tsx
+++ b/components/dashboard/src/projects/NewProject.tsx
@@ -14,6 +14,7 @@ import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
 import CaretDown from "../icons/CaretDown.svg";
 import Plus from "../icons/Plus.svg";
 import Switch from "../icons/Switch.svg";
+import NoAccess from "../icons/NoAccess.svg";
 import search from "../icons/search.svg";
 import moment from "moment";
 import { UserContext } from "../user-context";
@@ -250,16 +251,18 @@ export default function NewProject() {
             <div className="h-3 border rounded-b-xl border-gray-100 bg-gray-100"></div>
         </div>);
 
-        const renderEmptyState = () => (<div className="mt-8 border rounded-xl border-gray-100 flex-col">
-            <div className="p-10">
-                <div className="p-6 text-center text-gray-500 bg-gray-100 rounded-xl">
-                    <h3 className="mb-6">
-                        Continue on GitHub
+        const renderEmptyState = () => (<div className="mt-8 border rounded-xl border-gray-100 dark:border-gray-700 flex-col">
+            <div>
+                <div className="px-12 py-16 text-center text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-xl">
+                    <img src={NoAccess} title="No Access" className="m-auto mb-4" />
+                    <h3 className="mb-2 text-gray-600 dark:text-gray-400">
+                        No Access
                     </h3>
-                    <span className="">
-                        Install the GitHub app on selected Repositories to continue.
+                    <span className="dark:text-gray-500">
+                        Authorize GitHub (github.com) or select a different account.
                     </span>
-                    <button className="mt-6" onClick={() => reconfigure()}>Configure</button>
+                    <br/>
+                    <button className="mt-6" onClick={() => reconfigure()}>Authorize Provider</button>
                 </div>
             </div>
         </div>)
@@ -272,8 +275,6 @@ export default function NewProject() {
         }
 
         return (<>
-            <h3 className="pb-2 mt-8">Select Repository</h3>
-
             {(loaded && empty) ? renderEmptyState() : (showGitProviders ? (<GitProviders onHostSelected={onGitProviderSeleted} />) : renderRepos())}
         </>)
     };
@@ -321,7 +322,7 @@ export default function NewProject() {
 
     return (<div className="flex flex-col w-96 mt-24 mx-auto items-center">
         <h1>New Project</h1>
-        <p className="text-gray-500 text-center text-base">Projects allow you to set up and acess Prebuilds.</p>
+        <p className="text-gray-500 text-center text-base">Select a git repository.</p>
 
         {!selectedRepo && renderSelectRepository()}