From 4eb1928b02a68682ae2156fe7b26d0dd6976e7b0 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Thu, 12 Aug 2021 17:09:08 +0200
Subject: [PATCH] Replace dead links with buttons

---
 js/src/forum/components/DiscussionListItem.js | 10 +++--
 js/src/forum/components/LogInModal.js         | 10 ++++-
 js/src/forum/components/PostMeta.js           |  5 ++-
 js/src/forum/components/PostStreamScrubber.js |  9 +++--
 js/src/forum/components/SignUpModal.js        | 10 +++--
 less/common/Button.less                       | 40 +++++++++++++------
 less/forum/Scrubber.less                      | 18 +++++++--
 7 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js
index 52c095811..3bc680582 100644
--- a/js/src/forum/components/DiscussionListItem.js
+++ b/js/src/forum/components/DiscussionListItem.js
@@ -106,9 +106,13 @@ export default class DiscussionListItem extends Component {
             text={app.translator.trans('core.forum.discussion_list.started_text', { user, ago: humanTime(discussion.createdAt()) })}
             position="right"
           >
-            <Link className="DiscussionListItem-author" href={user ? app.route.user(user) : '#'}>
-              {avatar(user, { title: '' })}
-            </Link>
+            {user ? (
+              <Link className="DiscussionListItem-author" href={app.route.user(user)}>
+                {avatar(user, { title: '' })}
+              </Link>
+            ) : (
+              <span className="DiscussionListItem-author">{avatar(user, { title: '' })}</span>
+            )}
           </Tooltip>
 
           <ul className="DiscussionListItem-badges badges">{listItems(discussion.badges().toArray())}</ul>
diff --git a/js/src/forum/components/LogInModal.js b/js/src/forum/components/LogInModal.js
index 973619340..eb2e8bbb9 100644
--- a/js/src/forum/components/LogInModal.js
+++ b/js/src/forum/components/LogInModal.js
@@ -124,11 +124,17 @@ export default class LogInModal extends Modal {
   footer() {
     return [
       <p className="LogInModal-forgotPassword">
-        <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
+        <Button class="Button Button--reset" onclick={this.forgotPassword.bind(this)}>
+          {app.translator.trans('core.forum.log_in.forgot_password_link')}
+        </Button>
       </p>,
 
       app.forum.attribute('allowSignUp') ? (
-        <p className="LogInModal-signUp">{app.translator.trans('core.forum.log_in.sign_up_text', { a: <a onclick={this.signUp.bind(this)} /> })}</p>
+        <p className="LogInModal-signUp">
+          {app.translator.trans('core.forum.log_in.sign_up_text', {
+            a: <Button class="Button Button--reset" onclick={this.signUp.bind(this)} />,
+          })}
+        </p>
       ) : (
         ''
       ),
diff --git a/js/src/forum/components/PostMeta.js b/js/src/forum/components/PostMeta.js
index ed5e2958d..2f49fd041 100644
--- a/js/src/forum/components/PostMeta.js
+++ b/js/src/forum/components/PostMeta.js
@@ -1,6 +1,7 @@
 import Component from '../../common/Component';
 import humanTime from '../../common/helpers/humanTime';
 import fullTime from '../../common/helpers/fullTime';
+import Button from '../../common/components/Button';
 
 /**
  * The `PostMeta` component displays the time of a post, and when clicked, shows
@@ -28,9 +29,9 @@ export default class PostMeta extends Component {
 
     return (
       <div className="Dropdown PostMeta">
-        <a className="Dropdown-toggle" onclick={selectPermalink} data-toggle="dropdown">
+        <Button className="Button Button--reset Dropdown-toggle" onclick={selectPermalink} data-toggle="dropdown">
           {humanTime(time)}
-        </a>
+        </Button>
 
         <div className="Dropdown-menu dropdown-menu">
           <span className="PostMeta-number">{app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })}</span>{' '}
diff --git a/js/src/forum/components/PostStreamScrubber.js b/js/src/forum/components/PostStreamScrubber.js
index ed29547ff..a3d42bf56 100644
--- a/js/src/forum/components/PostStreamScrubber.js
+++ b/js/src/forum/components/PostStreamScrubber.js
@@ -1,4 +1,5 @@
 import Component from '../../common/Component';
+import Button from '../../common/components/Button';
 import icon from '../../common/helpers/icon';
 import formatNumber from '../../common/utils/formatNumber';
 import ScrollListener from '../../common/utils/ScrollListener';
@@ -61,9 +62,9 @@ export default class PostStreamScrubber extends Component {
 
         <div className="Dropdown-menu dropdown-menu">
           <div className="Scrubber">
-            <a className="Scrubber-first" onclick={this.goToFirst.bind(this)}>
+            <Button className="Button Button--reset Scrubber-first" onclick={this.goToFirst.bind(this)}>
               {icon('fas fa-angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
-            </a>
+            </Button>
 
             <div className="Scrubber-scrollbar">
               <div className="Scrubber-before" />
@@ -81,9 +82,9 @@ export default class PostStreamScrubber extends Component {
               </div>
             </div>
 
-            <a className="Scrubber-last" onclick={this.goToLast.bind(this)}>
+            <Button className="Button Button--reset Scrubber-last" onclick={this.goToLast.bind(this)}>
               {icon('fas fa-angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
-            </a>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/js/src/forum/components/SignUpModal.js b/js/src/forum/components/SignUpModal.js
index a0cc6d209..51744ba3d 100644
--- a/js/src/forum/components/SignUpModal.js
+++ b/js/src/forum/components/SignUpModal.js
@@ -23,21 +23,21 @@ export default class SignUpModal extends Modal {
     /**
      * The value of the username input.
      *
-     * @type {Function}
+     * @type {Stream<string>}
      */
     this.username = Stream(this.attrs.username || '');
 
     /**
      * The value of the email input.
      *
-     * @type {Function}
+     * @type {Stream<string>}
      */
     this.email = Stream(this.attrs.email || '');
 
     /**
      * The value of the password input.
      *
-     * @type {Function}
+     * @type {Stream<string>}
      */
     this.password = Stream(this.attrs.password || '');
   }
@@ -127,7 +127,9 @@ export default class SignUpModal extends Modal {
 
   footer() {
     return [
-      <p className="SignUpModal-logIn">{app.translator.trans('core.forum.sign_up.log_in_text', { a: <a onclick={this.logIn.bind(this)} /> })}</p>,
+      <p className="SignUpModal-logIn">
+        {app.translator.trans('core.forum.sign_up.log_in_text', { a: <Button class="Button Button--reset" onclick={this.logIn.bind(this)} /> })}
+      </p>,
     ];
   }
 
diff --git a/less/common/Button.less b/less/common/Button.less
index 852d18ff8..f0fea6f22 100644
--- a/less/common/Button.less
+++ b/less/common/Button.less
@@ -121,7 +121,6 @@
   }
 }
 
-
 .Button--square {
   padding-left: 9px;
   padding-right: 9px;
@@ -134,20 +133,37 @@
   border-radius: 18px;
 }
 .Button--link {
-  background: transparent !important;
+  color: @control-color;
+  background: none;
 
-  &:hover {
-    background: transparent !important;
-    color: @link-color;
-  }
   &:active,
-  &.active,
-  &:focus,
-  &.focus,
-  .open > &.Dropdown-toggle {
-    background: transparent !important;
-    .box-shadow(none);
+  &:hover,
+  &:focus {
     color: @link-color;
+    box-shadow: none;
+    background: none;
+  }
+}
+.Button--reset {
+  padding: 0;
+  margin: 0;
+  display: inline;
+  text-align: unset;
+  color: @link-color;
+  background: none;
+  vertical-align: unset;
+  white-space: unset;
+  line-height: unset;
+  .user-select(auto);
+  width: auto !important;
+
+  &:active,
+  &:hover,
+  &:focus,
+  .open > &.Dropdown-toggle {
+    color: @link-color;
+    box-shadow: none;
+    background: none;
   }
 }
 .Button--text {
diff --git a/less/forum/Scrubber.less b/less/forum/Scrubber.less
index 50cd880f1..63830df59 100644
--- a/less/forum/Scrubber.less
+++ b/less/forum/Scrubber.less
@@ -7,11 +7,17 @@
       font-size: 14px;
       margin-right: 2px;
     }
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       text-decoration: none;
       color: @link-color;
     }
   }
+
+  &-first,
+  &-last {
+    color: @control-color;
+  }
 }
 .Scrubber-scrollbar {
   margin: 8px 0 8px 3px;
@@ -21,14 +27,20 @@
   cursor: pointer;
   .user-select(none);
 }
-.Scrubber-before, .Scrubber-after {
+.Scrubber-before,
+.Scrubber-after {
   border-left: 1px solid @control-bg;
 }
 .Scrubber-unread {
   position: absolute;
   border-left: 1px solid lighten(@muted-color, 10%);
   width: 100%;
-  background-image: linear-gradient(to right, @control-bg, fade(@control-bg, 0) 10px, fade(@control-bg, 0));
+  background-image: linear-gradient(
+    to right,
+    @control-bg,
+    fade(@control-bg, 0) 10px,
+    fade(@control-bg, 0)
+  );
   display: flex;
   align-items: center;
   color: @muted-color;