Update Button.less

js/src/forum/components/DiscussionListItem.js

@@ -107,9 +107,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>

js/src/forum/components/LogInModal.js

@@ -125,11 +125,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>
       ) : (
         ''
       ),

js/src/forum/components/PostMeta.js

@@ -2,6 +2,7 @@ import app from '../../forum/app';
 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
@@ -29,9 +30,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>{' '}

js/src/forum/components/PostStreamScrubber.js

@@ -1,5 +1,6 @@
 import app from '../../forum/app';
 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';
@@ -62,9 +63,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" />
@@ -82,9 +83,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>

js/src/forum/components/SignUpModal.js

@@ -24,21 +24,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 || '');
   }
@@ -128,7 +128,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>,
     ];
   }
 

less/common/Button.less

@@ -63,7 +63,8 @@
   &:active,
   &.active,
   .open > &.Dropdown-toggle {
-    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    outline: none;
   }
 
   &.disabled,
@@ -117,35 +118,57 @@
   }
 }
 
-
 .Button--square {
   padding-left: 9px;
   padding-right: 9px;
 }
+
 .Button--rounded {
   border-radius: 18px;
 }
+
 .Button--flat {
   background: transparent;
   border-radius: 18px;
 }
-.Button--link {
-  background: transparent !important;
 
-  &:hover {
-    background: transparent !important;
-    color: @link-color;
-  }
+.Button--link {
+  color: @control-color;
+  background: unset !important;
+
   &:active,
-  &.active,
+  &:hover,
   &:focus,
-  &.focus,
   .open > &.Dropdown-toggle {
-    background: transparent !important;
-    box-shadow: none;
     color: @link-color;
+    box-shadow: none;
+    background: unset !important;
   }
 }
+
+.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;
+    background: unset !important;
+    box-shadow: none;
+  }
+}
+
 .Button--text {
   background: transparent !important;
   padding: 0;
@@ -161,6 +184,7 @@
     box-shadow: none;
   }
 }
+
 .Button--primary {
   .Button--color(@body-bg, @primary-color, 'button-primary');
   font-weight: bold;
@@ -171,9 +195,11 @@
     display: none;
   }
 }
+
 .Button--danger {
   .Button--color(@control-danger-color, @control-danger-bg, 'control-danger');
 }
+
 .Button--more {
   padding: 2px 4px;
   line-height: 1;
@@ -182,6 +208,7 @@
     margin: 0;
   }
 }
+
 .Button--block {
   display: block;
   width: 100%;
@@ -193,6 +220,7 @@
     margin-top: 5px;
   }
 }
+
 // Little round icon buttons
 .Button--icon {
   width: 36px;
@@ -208,6 +236,7 @@
     margin: 0;
   }
 }
+
 .SessionDropdown .Dropdown-toggle {
   border-radius: 18px;
 
@@ -216,16 +245,20 @@
     .Avatar--size(24px);
   }
 }
+
 .Button-icon {
   margin-right: 7px;
 }
+
 .Button-icon,
 .Button-caret {
   font-size: 14px;
 }
+
 .Button-caret {
   margin-left: 7px;
 }
+
 .Button-badge {
   font-size: 12px;
   font-weight: bold;

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;