[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.
gitpod-io · Apr 29, 2022 · 2ff90df · 2ff90df
1 parent 1f3919e
commit 2ff90df
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
@@ -61,8 +61,13 @@
         @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 {

diff --git a/components/dashboard/src/projects/NewProject.tsx b/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>
                 )}