From cbb2e1922d330b8645f088f048155f27b21fb552 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 26 May 2022 13:17:07 +0300
Subject: [PATCH] Add LinkButton component

---
 app/components/Button.tsx       | 43 ++++++++++++++++++++++++---------
 app/routes/plus/suggestions.tsx | 11 ++++++---
 app/styles/global.css           | 28 ++++++++++-----------
 3 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 31f543903..47a0f9fdf 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -1,3 +1,5 @@
+import { Link } from "@remix-run/react";
+import type { RemixLinkProps } from "@remix-run/react/components";
 import clsx from "clsx";
 import * as React from "react";
 
@@ -32,18 +34,15 @@ export function Button(props: ButtonProps) {
   } = props;
   return (
     <button
-      className={clsx(className, {
-        success: variant === "success",
-        outlined: variant === "outlined",
-        "outlined-success": variant === "outlined-success",
-        destructive: variant === "destructive",
-        minimal: variant === "minimal",
-        "minimal-success": variant === "minimal-success",
-        "minimal-destructive": variant === "minimal-destructive",
-        "disabled-opaque": props.disabled,
-        loading,
-        tiny,
-      })}
+      className={clsx(
+        variant,
+        {
+          "disabled-opaque": props.disabled,
+          loading,
+          tiny,
+        },
+        className
+      )}
       disabled={props.disabled || loading}
       type={type}
       {...rest}
@@ -53,3 +52,23 @@ export function Button(props: ButtonProps) {
     </button>
   );
 }
+
+type LinkButtonProps = Pick<
+  ButtonProps,
+  "variant" | "children" | "className" | "tiny"
+> &
+  Pick<RemixLinkProps, "to">;
+
+export function LinkButton({
+  variant,
+  children,
+  tiny,
+  className,
+  to,
+}: LinkButtonProps) {
+  return (
+    <Link className={clsx("button", variant, { tiny }, className)} to={to}>
+      {children}
+    </Link>
+  );
+}
diff --git a/app/routes/plus/suggestions.tsx b/app/routes/plus/suggestions.tsx
index a6fc58f9f..97350dab2 100644
--- a/app/routes/plus/suggestions.tsx
+++ b/app/routes/plus/suggestions.tsx
@@ -8,7 +8,7 @@ import { Outlet, useLoaderData } from "@remix-run/react";
 import * as React from "react";
 import invariant from "tiny-invariant";
 import { Avatar } from "~/components/Avatar";
-import { Button } from "~/components/Button";
+import { LinkButton } from "~/components/Button";
 import { Catcher } from "~/components/Catcher";
 import { upcomingVoting } from "~/core/plus";
 import { db } from "~/db";
@@ -143,9 +143,14 @@ function SuggestedUser({
           size="md"
         />
         <h2>{user.info.discordName}</h2>
-        <Button className="plus__comment-button" tiny variant="outlined">
+        <LinkButton
+          className="plus__comment-button"
+          tiny
+          variant="outlined"
+          to="comment"
+        >
           Comment
-        </Button>
+        </LinkButton>
       </div>
       <details>
         <summary className="plus__view-comments-action">
diff --git a/app/styles/global.css b/app/styles/global.css
index 1ae7f7b88..cab9b4a21 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -100,7 +100,7 @@ a {
   text-decoration: none;
 }
 
-button {
+:is(button, .button) {
   display: flex;
   width: auto;
   align-items: center;
@@ -120,59 +120,59 @@ button {
   user-select: none;
 }
 
-button:focus-visible {
+:is(button, .button):focus-visible {
   outline: 2px solid var(--theme);
 }
 
-button:active {
+:is(button, .button):active {
   transform: translateY(1px);
 }
 
-button.outlined {
+:is(button, .button).outlined {
   background-color: transparent;
   color: var(--theme);
 }
 
-button.outlined-success {
+:is(button, .button).outlined-success {
   border-color: var(--theme-success);
   background-color: transparent;
   color: var(--theme-success);
 }
 
-button.tiny {
+:is(button, .button).tiny {
   font-size: var(--fonts-xs);
   padding-block: var(--s-1);
   padding-inline: var(--s-2);
 }
 
-button.minimal {
+:is(button, .button).minimal {
   padding: 0;
   border: none;
   background-color: transparent;
   color: var(--theme);
 }
 
-button.minimal-success {
+:is(button, .button).minimal-success {
   padding: 0;
   border: none;
   background-color: transparent;
   color: var(--theme-success);
 }
 
-button.success {
+:is(button, .button).success {
   border-color: var(--theme-success);
   background-color: var(--theme-success);
   outline-color: var(--theme-success);
 }
 
-button.destructive {
+:is(button, .button).destructive {
   border-color: var(--theme-error);
   background-color: transparent;
   color: var(--theme-error);
   outline-color: var(--theme-error);
 }
 
-button.minimal-destructive {
+:is(button, .button).minimal-destructive {
   padding: 0;
   border: none;
   background-color: transparent;
@@ -180,17 +180,17 @@ button.minimal-destructive {
   outline-color: var(--theme-error);
 }
 
-button.loading {
+:is(button, .button).loading {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-button > .button-icon {
+:is(button, .button) > .button-icon {
   width: 1.25rem;
   margin-inline-end: var(--s-1-5);
 }
 
-button.tiny > .button-icon {
+:is(button, .button).tiny > .button-icon {
   width: 1rem;
   margin-inline-end: var(--s-1);
 }