[dashboard] add button.gp-link CSS class

To be used for anchor tags that should've been buttons because
they don't really bring the user to any new location.

Author: trumbitta

components/dashboard/src/index.css

@@ -9,7 +9,8 @@
 @tailwind utilities;
 
 @layer base {
-    html, body {
+    html,
+    body {
         @apply h-full;
     }
     body {
@@ -61,30 +62,42 @@
         @apply cursor-default opacity-50 pointer-events-none;
     }
 
-    a.gp-link {
-        @apply text-blue-500 hover:text-blue-600  dark:text-blue-400 dark:hover:text-blue-500;
+    button.gp-link {
+        @apply bg-transparent hover:bg-transparent p-0 rounded-none;
+    }
+
+    a.gp-link,
+    button.gp-link {
+        @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500;
     }
 
-    input[type=text], input[type=search], input[type=password], select {
+    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;
     }
-    input[type=text]::placeholder, input[type=search]::placeholder, input[type=password]::placeholder {
+    input[type="text"]::placeholder,
+    input[type="search"]::placeholder,
+    input[type="password"]::placeholder {
         @apply text-gray-400 dark:text-gray-500;
     }
-    input[type=text].error, input[type=password].error, select.error {
+    input[type="text"].error,
+    input[type="password"].error,
+    select.error {
         @apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
     }
     input[disabled] {
         @apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;
     }
-    input[type=radio] {
+    input[type="radio"] {
         @apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
     }
-    input[type=search] {
+    input[type="search"] {
         @apply border-0 dark:bg-transparent;
     }
-    input[type=checkbox] {
-        @apply disabled:opacity-50
+    input[type="checkbox"] {
+        @apply disabled:opacity-50;
     }
 
     progress {
@@ -99,4 +112,4 @@
     progress::-moz-progress-bar {
         @apply rounded-md bg-green-500;
     }
-}
+}

components/dashboard/src/projects/NewProject.tsx

@@ -368,9 +368,9 @@ export default function NewProject() {
                 <p className="text-gray-500 text-center text-base mt-12">
                     {loaded && noReposAvailable ? "Select account on " : "Select a Git repository on "}
                     <b>{selectedProviderHost}</b> (
-                    <a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
+                    <button className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>
                         change
-                    </a>
+                    </button>
                     )
                 </p>
                 <div className={`mt-2 flex-col ${noReposAvailable && isGitHub() ? "w-96" : ""}`}>
@@ -493,13 +493,12 @@ export default function NewProject() {
                     <div>
                         <div className="text-gray-500 text-center w-96 mx-8">
                             Repository not found?{" "}
-                            <a
-                                href="javascript:void(0)"
+                            <button
                                 onClick={(e) => reconfigure()}
-                                className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600"
+                                className="gp-link text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600"
                             >
                                 Reconfigure
-                            </a>
+                            </button>
                         </div>
                     </div>
                 )}