add button-style variant to Link

frontend/src/Router.module.css

@@ -0,0 +1,31 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.link-button {
+    display: inline-block;
+    text-decoration: underline;
+    color: var(--cpd-color-text-primary);
+    font-weight: var(--cpd-font-weight-medium);
+    border-radius: var(--cpd-radius-pill-effect);
+    padding-inline: 0.25rem;
+}
+
+.link-button:hover {
+    background: var(--cpd-color-gray-300);
+}
+
+.link-button:active {
+    color: var(--cpd-color-text-on-solid-primary);
+}

frontend/src/Router.tsx

@@ -16,6 +16,7 @@ import { atom, useAtomValue, useSetAtom } from "jotai";
 import { atomWithLocation } from "jotai-location";
 import { lazy, Suspense, useTransition } from "react";
 
+import styles from "./Router.module.css";
 import Layout from "./components/Layout";
 import LoadingSpinner from "./components/LoadingSpinner";
 
@@ -219,8 +220,10 @@ const shouldHandleClick = (e: React.MouseEvent): boolean =>
 export const Link: React.FC<
   {
     route: Route;
+    // adds button-like styling to link element
+    kind?: "button";
   } & React.HTMLProps<HTMLAnchorElement>
-> = ({ route, children, ...props }) => {
+> = ({ route, children, kind, className, ...props }) => {
   const config = useAtomValue(appConfigAtom);
   const path = routeToPath(route);
   const fullUrl = config.root + path;
@@ -229,6 +232,11 @@ export const Link: React.FC<
   // TODO: we should probably have more user control over this
   const [isPending, startTransition] = useTransition();
 
+  const classNames = [
+    kind === "button" ? styles.linkButton : "",
+    className,
+  ].join("");
+
   return (
     <a
       href={fullUrl}
@@ -243,6 +251,7 @@ export const Link: React.FC<
           setRoute(route);
         });
       }}
+      className={classNames}
       {...props}
     >
       {isPending ? "Loading..." : children}

frontend/src/components/UserEmail/UserEmail.tsx

@@ -149,10 +149,7 @@ const UserEmail: React.FC<{
       {!data.confirmedAt && (
         <div>
           <span className={styles.userEmailUnverified}>Unverified</span> |{" "}
-          <Link
-            className={styles.link}
-            route={{ type: "verify-email", id: data.id }}
-          >
+          <Link kind="button" route={{ type: "verify-email", id: data.id }}>
             Retry verification
           </Link>
         </div>