From da2e0d99f64279b284c6d38beb5c53d2e4449c0c Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Tue, 20 Jul 2021 17:46:18 +0000
Subject: [PATCH] Improve workspaces empty state

---
 components/dashboard/src/images/workspaces-empty.svg | 1 +
 components/dashboard/src/workspaces/Workspaces.tsx   | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 components/dashboard/src/images/workspaces-empty.svg

diff --git a/components/dashboard/src/images/workspaces-empty.svg b/components/dashboard/src/images/workspaces-empty.svg
new file mode 100644
index 00000000000000..e356ccb1152d9d
--- /dev/null
+++ b/components/dashboard/src/images/workspaces-empty.svg
@@ -0,0 +1 @@
+<svg width="352" height="170" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x=".5" y=".5" width="351" height="80" rx="11.5" fill="#FAFAF9" stroke="#F5F5F4"/><rect x="56" y="22" width="168" height="16" rx="8" fill="#D6D3D1"/><rect x="56" y="54" width="80" height="8" rx="4" fill="#E7E5E4"/><rect x="248" y="26" width="80" height="8" rx="4" fill="#E7E5E4"/><rect x="248" y="54" width="48" height="8" rx="4" fill="#E7E5E4"/><rect x=".5" y="89.5" width="351" height="80" rx="11.5" fill="#FAFAF9" stroke="#F5F5F4"/><rect x="248" y="115" width="80" height="8" rx="4" fill="#E7E5E4"/><rect x="248" y="143" width="48" height="8" rx="4" fill="#FFB0AE"/><rect x="56" y="111" width="168" height="16" rx="8" fill="#D6D3D1"/><rect x="56" y="143" width="80" height="8" rx="4" fill="#E7E5E4"/><path d="M36 30a6 6 0 11-12 0 6 6 0 0112 0z" fill="#FFB45B"/><path d="M36 119a6 6 0 11-12 0 6 6 0 0112 0z" fill="#A3E635"/></svg>
\ No newline at end of file
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index be00dc139096cd..2b47a0423b7dc1 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -9,6 +9,7 @@ import { WhitelistedRepository, Workspace, WorkspaceInfo } from "@gitpod/gitpod-
 import Header from "../components/Header";
 import DropDown from "../components/DropDown";
 import exclamation from "../images/exclamation.svg";
+import workspacesEmpty from '../images/workspaces-empty.svg';
 import { WorkspaceModel } from "./workspace-model";
 import { WorkspaceEntry } from "./WorkspaceEntry";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
@@ -134,7 +135,8 @@ export default class Workspaces extends React.Component<WorkspacesProps, Workspa
                     <div className="lg:px-28 px-10 flex flex-col space-y-2">
                         <div className="px-6 py-3 flex justify-between space-x-2 text-gray-400 border-t border-gray-200 dark:border-gray-800 h-96">
                             <div className="flex flex-col items-center w-96 m-auto">
-                                <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Active Workspaces</h3>
+                                <img alt="Workspaces (empty)" className="h-44 mt-24 mx-auto" role="presentation" src={workspacesEmpty} />
+                                <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400 mt-8">No Active Workspaces</h3>
                                 <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or create a new workspace for a recently used project. <a className="text-gray-400 dark:text-gray-600 learn-more hover:text-gray-500 dark:hover:text-gray-500" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></div>
                                 <span>
                                     <button onClick={this.showStartWSModal}>New Workspace</button>