✨ Fix links

frontend/src/components/Link.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {Anchor} from "@steffo/bluelib-react";
+import {navigate} from "@reach/router";
+import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor";
+
+
+interface LinkProps extends AnchorProps {
+
+}
+
+
+export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Element {
+
+    const onClickWrapped = React.useCallback(
+        event => {
+            event.preventDefault()
+            if(onClick) {
+                onClick(event)
+            }
+            if(href) {
+                // noinspection JSIgnoredPromiseFromCall
+                navigate(href)
+            }
+        },
+        [href]
+    )
+
+    return (
+        <Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
+    )
+}

frontend/src/components/ResearchGroupPanel.module.css

@@ -13,11 +13,6 @@
 .Name {
     font-size: larger;
     font-weight: 600;
-    color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
-}
-
-.Name * {
-    color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
 }
 
 .Owner {

frontend/src/components/ResearchGroupPanel.tsx

@@ -4,22 +4,22 @@ import Style from "./ResearchGroupPanel.module.css"
 import {Panel, BringAttention as B, Button, Variable} from "@steffo/bluelib-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faEnvelope, faEye, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
-import {Link} from "@reach/router";
 import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
 import {ResearchGroup} from "../types";
 import {UserLink} from "./UserLink";
+import {Link} from "./Link";
 
 
 export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
-    let accessIcon: IconDefinition
+    let accessIcon: JSX.Element
     if(access === "OPEN") {
-        accessIcon = faGlobe
+        accessIcon = <FontAwesomeIcon icon={faGlobe} title={"Open"}/>
     }
     else if(access === "MANUAL") {
-        accessIcon = faEnvelope
+        accessIcon = <FontAwesomeIcon icon={faEnvelope} title={"Invite-only"}/>
     }
     else {
-        accessIcon = faQuestion
+        accessIcon = <FontAwesomeIcon icon={faQuestion} title={"Unknown"}/>
     }
 
     // FIXME: use proper bluelib Anchors
@@ -27,10 +27,10 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup):
     return (
         <Panel className={Style.Panel}>
             <div className={Style.Access}>
-                <FontAwesomeIcon icon={accessIcon}/>
+                {accessIcon}
             </div>
             <div className={Style.Name} title={slug}>
-                <Link to={`/g/${slug}/`}>{name}</Link>
+                <Link href={`/g/${slug}/`}>{name}</Link>
             </div>
             <div className={Style.Owner}>
                 Created by <UserLink id={owner}/>

frontend/src/components/UserLink.tsx

@@ -5,7 +5,7 @@ import {Anchor} from "@steffo/bluelib-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faSpinner, faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
 import {useDRFViewSet} from "../hooks/useDRF";
-import {Link} from "@reach/router";
+import {Link} from "./Link";
 
 
 interface UserLinkProps {
@@ -34,17 +34,17 @@ export function UserLink({id}: UserLinkProps): JSX.Element {
     // FIXME: use proper bluelib Anchors
 
     if(error) return (
-        <Link to={`/u/${id}`}>
+        <Link href={`/u/${id}`} title={id.toString()}>
             <FontAwesomeIcon icon={faTimesCircle}/> {id}
         </Link>
     )
     else if(!user) return (
-        <Link to={`/u/${id}`}>
+        <Link href={`/u/${id}`} title={id.toString()}>
             <FontAwesomeIcon icon={faSpinner} pulse={true}/> {id}
         </Link>
     )
     return (
-        <Link to={`/u/${id}`}>
+        <Link href={`/u/${id}`} title={id.toString()}>
             <FontAwesomeIcon icon={faUser}/> {user.username}
         </Link>
     )