From cfe5f5cf89a236e4d2396270e9a717c79b8a4a19 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Wed, 23 Nov 2022 11:07:36 +0000
Subject: [PATCH] [pat] List view UI

---
 .../src/settings/PersonalAccessTokens.tsx     | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/components/dashboard/src/settings/PersonalAccessTokens.tsx b/components/dashboard/src/settings/PersonalAccessTokens.tsx
index 101c92ac5ef521..06dc0e8c422800 100644
--- a/components/dashboard/src/settings/PersonalAccessTokens.tsx
+++ b/components/dashboard/src/settings/PersonalAccessTokens.tsx
@@ -38,17 +38,32 @@ function ListAccessTokensView() {
     }, []);
 
     return (
-        <div>
-            <ul>
-                {tokens.map((t: PersonalAccessToken) => {
-                    return (
-                        <li>
-                            {t.id} - {t.name} - {t.value}
-                        </li>
-                    );
-                })}
-            </ul>
-        </div>
+        <>
+            <div className="flex items-start sm:justify-between mb-2">
+                <div>
+                    <h3>Personal Access Tokens</h3>
+                    <h2 className="text-gray-500">Create or regenerate active personal access tokens.</h2>
+                </div>
+            </div>
+            <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full py-28 flex flex-col items-center">
+                <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Personal Access Tokens (PAT)</h3>
+                <p className="text-center pb-6 text-gray-500 text-base w-96">
+                    Generate a personal access token (PAT) for applications that need access to the Gitpod API.{" "}
+                </p>
+                <button>New Personal Access Token</button>
+            </div>
+            {tokens.length > 0 && (
+                <ul>
+                    {tokens.map((t: PersonalAccessToken) => {
+                        return (
+                            <li>
+                                {t.id} - {t.name} - {t.value}
+                            </li>
+                        );
+                    })}
+                </ul>
+            )}
+        </>
     );
 }