[dashboard] Unify 'Learn more' link style with a 'learn-more' CSS class name

Author: jankeromnes

components/dashboard/src/FromReferrer.tsx

@@ -22,7 +22,7 @@ export default function FromReferrer() {
                 <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Referrer Found</h3>
                 <div className="text-center pb-6 text-gray-500">
                     <p>It looks like you are trying to open a workspace, but the referrer URL is empty. This happens when the git hoster 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 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></p>
+                    <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></p>
                 </div>
                 <span>
                     <Link to="/"><button className="secondary">Go to Dashboard</button></Link>

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="underline underline-thickness-thin underline-offset-small 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="learn-more 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="underline underline-thickness-thin underline-offset-small 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="learn-more hover:text-gray-600" target="gitpod-terms" href="https://www.gitpod.io/self-hosted-terms/">terms</a>.
                         </span>
                     </div>
                 </div>

components/dashboard/src/index.css

@@ -58,6 +58,10 @@
         @apply cursor-default opacity-50 pointer-events-none;
     }
 
+    a.learn-more {
+        @apply underline underline-thickness-thin underline-offset-small;
+    }
+
     input[type=text], input[type=search], input[type=password], select {
         @apply block w-56 text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
     }

components/dashboard/src/projects/Projects.tsx

@@ -14,7 +14,7 @@ export default function() {
         <div>
             <img alt="Projects (empty)" className="h-44 mt-24 mx-auto" role="presentation" src={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="underline" 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="learn-more" href="https://www.gitpod.io/docs/prebuilds/">Learn more about Prebuilds</a></p>
             <div className="flex space-x-2 justify-center mt-7">
                 <button>New Project</button>
                 <Link to="./members"><button className="secondary">Invite Members</button></Link>

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -207,7 +207,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 underline underline-thickness-thin underline-offset-small 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="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>
                     <button onClick={add}>New Variable</button>
                 </div>
             </div>

components/dashboard/src/settings/Integrations.tsx

@@ -592,8 +592,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 underline underline-thickness-thin underline-offset-small hover:text-gray-600">developer settings</a> and setup the OAuth application.&nbsp;
-            <a href={docsUrl} target="_blank" rel="noopener" className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600">Learn more</a>.
+            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>.
         </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 underline underline-thickness-thin underline-offset-small 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="text-gray-400 learn-more hover:text-gray-600">Learn more</a></div>
                     <button className="self-center" onClick={() => showCreateTeamModal()}>Create Team</button>
                 </div>
             </div>

components/dashboard/src/teams/NewTeam.tsx

@@ -29,7 +29,7 @@ export default function () {
     }
     return <div className="flex flex-col w-96 mt-16 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 href="">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="learn-more" 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

@@ -122,7 +122,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 underline underline-thickness-thin underline-offset-small 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="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>
                                     </ItemField>
                                 </Item>
                         }
@@ -137,7 +137,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 underline underline-thickness-thin underline-offset-small 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="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>
                                     {wsModel.getAllFetchedWorkspaces().size > 0 ? <button className="secondary ml-2" onClick={onAll}>View All Workspaces</button>:null}