Convert buttons to links.

components/common/Button.js

@@ -38,7 +38,7 @@ export default function Button({
       {...props}
     >
       {icon && <Icon className={styles.icon} icon={icon} size={size} />}
-      {children && <div>{children}</div>}
+      {children && <div className={styles.label}>{children}</div>}
       {tooltip && <ReactTooltip id={tooltipId}>{tooltip}</ReactTooltip>}
     </button>
   );

components/common/Button.module.css

@@ -10,7 +10,6 @@
   border: 0;
   outline: none;
   cursor: pointer;
-  white-space: nowrap;
   position: relative;
 }
 
@@ -22,12 +21,15 @@
   color: var(--gray900);
 }
 
-.large {
-  font-size: var(--font-size-large);
+.label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 300px;
 }
 
-.medium {
-  font-size: var(--font-size-normal);
+.large {
+  font-size: var(--font-size-large);
 }
 
 .small {
@@ -65,7 +67,7 @@
   background: inherit;
 }
 
-.button .icon + div {
+.button .icon + * {
   margin-left: 10px;
 }
 
@@ -74,7 +76,7 @@
   margin-left: 10px;
 }
 
-.button.iconRight .icon + div {
+.button.iconRight .icon + * {
   margin: 0;
 }
 

components/common/Link.js

@@ -1,12 +1,23 @@
 import React from 'react';
 import classNames from 'classnames';
 import NextLink from 'next/link';
+import Icon from './Icon';
 import styles from './Link.module.css';
 
-export default function Link({ className, children, ...props }) {
+export default function Link({ className, icon, children, size, iconRight, ...props }) {
   return (
     <NextLink {...props}>
-      <a className={classNames(styles.link, className)}>{children}</a>
+      <a
+        className={classNames(styles.link, className, {
+          [styles.large]: size === 'large',
+          [styles.small]: size === 'small',
+          [styles.xsmall]: size === 'xsmall',
+          [styles.iconRight]: iconRight,
+        })}
+      >
+        {icon && <Icon className={styles.icon} icon={icon} size={size} />}
+        {children}
+      </a>
     </NextLink>
   );
 }

components/common/Link.module.css

@@ -4,6 +4,8 @@ a.link:visited {
   position: relative;
   color: var(--gray900);
   text-decoration: none;
+  display: inline-flex;
+  align-items: center;
 }
 
 a.link:before {
@@ -21,3 +23,28 @@ a.link:hover:before {
   width: 100%;
   transition: width 100ms;
 }
+
+a.link.large {
+  font-size: var(--font-size-large);
+}
+
+a.link.small {
+  font-size: var(--font-size-small);
+}
+
+a.link.xsmall {
+  font-size: var(--font-size-xsmall);
+}
+
+a.link .icon + * {
+  margin-left: 10px;
+}
+
+a.link.iconRight .icon {
+  order: 1;
+  margin-left: 10px;
+}
+
+a.link.iconRight .icon + * {
+  margin: 0;
+}