Update projects empty state

components/dashboard/src/FromReferrer.tsx

@@ -26,7 +26,7 @@ export default function FromReferrer() {
                     <p>
                         It looks like you are trying to open a workspace, but the referrer URL is empty or has an incomplete path.
                         This happens when the git hoster or browser doesn't send the referrer header.
-                        <br/> Please prefix the repository URL with <pre>https://gitpod.io/#</pre> in order to start a workspace. <a className="text-gray-400 learn-more hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn more</a>
+                        <br/> Please prefix the repository URL with <pre>https://gitpod.io/#</pre> in order to start a workspace. <a className="gp-link" href="https://www.gitpod.io/docs/getting-started/">Learn more</a>
                     </p>
                 </div>
                 <span>

components/dashboard/src/Login.tsx

@@ -163,7 +163,7 @@ export function Login() {
                 </div>
                 <div className="flex-none mx-auto h-20 text-center">
                     <span className="text-gray-400">
-                        By signing in, you agree to our <a className="learn-more hover:text-gray-600" target="gitpod-terms" href="https://www.gitpod.io/terms/">terms of service</a>.
+                        By signing in, you agree to our <a className="gp-link hover:text-gray-600" target="gitpod-terms" href="https://www.gitpod.io/terms/">terms of service</a>.
                     </span>
                 </div>
             </div>

components/dashboard/src/Setup.tsx

@@ -45,7 +45,7 @@ export default function Setup() {
 
                     <div className="flex">
                         <span className="text-gray-500">
-                            By using Gitpod, you agree to our <a className="learn-more hover:text-gray-600" target="gitpod-terms" href="https://www.gitpod.io/self-hosted-terms/">terms</a>.
+                            By using Gitpod, you agree to our <a className="gp-link" target="gitpod-terms" href="https://www.gitpod.io/self-hosted-terms/">terms</a>.
                         </span>
                     </div>
                 </div>

components/dashboard/src/index.css

@@ -58,8 +58,8 @@
         @apply cursor-default opacity-50 pointer-events-none;
     }
 
-    a.learn-more {
-        @apply underline underline-thickness-thin underline-offset-small;
+    a.gp-link {
+        @apply underline underline-thickness-thin underline-offset-small text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-500;
     }
 
     input[type=text], input[type=search], input[type=password], select {

components/dashboard/src/projects/ConfigureProject.tsx

@@ -78,7 +78,7 @@ export default function () {
         const configString = await getGitpodService().server.fetchProjectRepositoryConfiguration(project.id);
         if (configString) {
           // TODO(janx): Link to .gitpod.yml directly instead of just the cloneUrl.
-          setEditorError(<span>A Gitpod configuration already exists in the project's <a className="learn-more" href={project.cloneUrl}>repository</a>.<br/>Please <a className="learn-more" href={`/#${project.cloneUrl}`}>edit it in Gitpod</a> instead.</span>);
+          setEditorError(<span>A Gitpod configuration already exists in the project's <a className="gp-link" href={project.cloneUrl}>repository</a>.<br/>Please <a className="gp-link" href={`/#${project.cloneUrl}`}>edit it in Gitpod</a> instead.</span>);
           setGitpodYml(configString);
         } else {
           setIsEditorDisabled(false);
@@ -113,7 +113,7 @@ export default function () {
 
   return <div className="flex flex-col mt-24 mx-auto items-center">
     <h1>Configure Project</h1>
-    <p className="text-gray-500 text-center text-base">Fully-automate your project's dev setup. <a className="learn-more" href="https://www.gitpod.io/docs/references/gitpod-yml">Learn more</a></p>
+    <p className="text-gray-500 text-center text-base">Fully-automate your project's dev setup. <a className="gp-link" href="https://www.gitpod.io/docs/references/gitpod-yml">Learn more</a></p>
     <div className="mt-4 w-full flex">
       <div className="flex-1 m-8">
         {editorError && <AlertBox className="mb-2">{editorError}</AlertBox>}

components/dashboard/src/projects/Projects.tsx

@@ -75,7 +75,7 @@ export default function () {
             <div>
                 <img alt="Projects (empty)" className="h-44 mt-24 mx-auto" role="presentation" src={isDark ? projectsEmptyDark : projectsEmpty} />
                 <h3 className="text-center text-gray-500 mt-8">No Recent Projects</h3>
-                <p className="text-center text-base text-gray-500 mt-4">Add projects to enable and manage Prebuilds.<br /><a className="learn-more" href="https://www.gitpod.io/docs/prebuilds/">Learn more about Prebuilds</a></p>
+                <p className="text-center text-base text-gray-500 mt-4">Add projects to enable and manage Prebuilds.<br /><a className="gp-link" href="https://www.gitpod.io/docs/prebuilds/">Learn more about Prebuilds</a></p>
                 <div className="flex space-x-2 justify-center mt-7">
                     <Link to={newProjectUrl}><button>New Project</button></Link>
                     {team && <Link to="./members"><button className="secondary">Invite Members</button></Link>}

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -208,7 +208,7 @@ export default function EnvVars() {
             ? <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full h-96">
                 <div className="pt-28 flex flex-col items-center w-96 m-auto">
                     <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Environment Variables</h3>
-                    <div className="text-center pb-6 text-gray-500">In addition to user-specific environment variables you can also pass variables through a workspace creation URL. <a className="text-gray-400 learn-more hover:text-gray-600" href="https://www.gitpod.io/docs/environment-variables/#using-the-account-settings">Learn more</a></div>
+                    <div className="text-center pb-6 text-gray-500">In addition to user-specific environment variables you can also pass variables through a workspace creation URL. <a className="gp-link" href="https://www.gitpod.io/docs/environment-variables/#using-the-account-settings">Learn more</a></div>
                     <button onClick={add}>New Variable</button>
                 </div>
             </div>

components/dashboard/src/settings/Integrations.tsx

@@ -601,8 +601,8 @@ export function GitIntegrationModal(props: ({
 
         return (<span>
             Use this redirect URL to update the OAuth application.
-            Go to <a href={`https://${settingsUrl}`} target="_blank" rel="noopener" className="text-gray-400 learn-more hover:text-gray-600">developer settings</a> and setup the OAuth application.&nbsp;
-            <a href={docsUrl} target="_blank" rel="noopener" className="text-gray-400 learn-more hover:text-gray-600">Learn more</a>.
+            Go to <a href={`https://${settingsUrl}`} target="_blank" rel="noopener" className="gp-link">developer settings</a> and setup the OAuth application.&nbsp;
+            <a href={docsUrl} target="_blank" rel="noopener" className="gp-link">Learn more</a>.
         </span>);
     }
 

components/dashboard/src/settings/Teams.tsx

@@ -460,7 +460,7 @@ function AllTeams() {
             <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-900">
                 <div className="m-auto text-center">
                     <h3 className="self-center text-gray-500 dark:text-gray-400 mb-4">No Active Teams</h3>
-                    <div className="text-gray-500 mb-6">Get started by creating a team<br /> and adding team members. <a href="https://www.gitpod.io/docs/teams/" target="_blank" rel="noopener" className="text-gray-400 learn-more hover:text-gray-600">Learn more</a></div>
+                    <div className="text-gray-500 mb-6">Get started by creating a team<br /> and adding team members. <a href="https://www.gitpod.io/docs/teams/" target="_blank" rel="noopener" className="gp-link">Learn more</a></div>
                     <button className="self-center" onClick={() => showCreateTeamModal()}>Create Team</button>
                 </div>
             </div>

components/dashboard/src/teams/NewTeam.tsx

@@ -32,7 +32,7 @@ export default function () {
 
     return <div className="flex flex-col w-96 mt-24 mx-auto items-center">
         <h1>New Team</h1>
-        <p className="text-gray-500 text-center text-base">Teams allow you to <strong>group multiple projects</strong>, <strong>collaborate with others</strong>, <strong>manage subscriptions</strong> with one centralized billing, and more. <a className="learn-more" href="https://www.gitpod.io/docs/teams/">Learn more</a></p>
+        <p className="text-gray-500 text-center text-base">Teams allow you to <strong>group multiple projects</strong>, <strong>collaborate with others</strong>, <strong>manage subscriptions</strong> with one centralized billing, and more. <a className="gp-link" href="https://www.gitpod.io/docs/teams/">Learn more</a></p>
         <form className="mt-16 w-full" onSubmit={createTeam}>
             <div className="border rounded-xl p-6 border-gray-100 dark:border-gray-800">
                 <h3 className="text-center text-xl mb-6">What's your team's name?</h3>

components/dashboard/src/workspaces/Workspaces.tsx

@@ -119,7 +119,7 @@ export default class Workspaces extends React.Component<WorkspacesProps, Workspa
                                     </ItemFieldIcon>
                                     <ItemField className=" flex flex-col">
                                         <div className="text-gitpod-red font-semibold">Garbage Collection</div>
-                                        <p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-600 learn-more hover:text-gray-800 hover:dark:text-gray-100" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>
+                                        <p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="gp-link" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>
                                     </ItemField>
                                 </Item>
                         }
@@ -134,7 +134,7 @@ export default class Workspaces extends React.Component<WorkspacesProps, Workspa
                         <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>
-                                <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>
+                                <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="gp-link" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></div>
                                 <span>
                                     <button onClick={this.showStartWSModal}>New Workspace</button>
                                     {wsModel.getAllFetchedWorkspaces().size > 0 ? <button className="secondary ml-2" onClick={onAll}>View All Workspaces</button>:null}