From b3066db08b2c71b882f03228fd280a236c19eeef Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Thu, 19 Mar 2020 20:56:21 -0400
Subject: [PATCH 1/6] Adding score spacing, hiding user tags on thin screen.

---
 ui/src/components/comment-node.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 8809c5b7..d5d872f5 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -166,17 +166,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 </Link>
               </li>
               {this.isMod && (
-                <li className="list-inline-item badge badge-light">
+                <li className="list-inline-item badge badge-light d-none d-sm-inline">
                   {i18n.t('mod')}
                 </li>
               )}
               {this.isAdmin && (
-                <li className="list-inline-item badge badge-light">
+                <li className="list-inline-item badge badge-light d-none d-sm-inline">
                   {i18n.t('admin')}
                 </li>
               )}
               {this.isPostCreator && (
-                <li className="list-inline-item badge badge-light">
+                <li className="list-inline-item badge badge-light d-none d-sm-inline">
                   {i18n.t('creator')}
                 </li>
               )}
@@ -209,8 +209,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </Link>
                 </li>
               )}
-              <li className="list-inline-item">•</li>
-              <li className="list-inline-item">
+              <li className="ml-3 list-inline-item">
                 <span
                   className={`unselectable pointer ${this.scoreColor}`}
                   onClick={linkEvent(node, this.handleCommentUpvote)}

From 522649d9d3c21c15cb00740fb8c86a51a64468a4 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 20 Mar 2020 16:13:54 -0400
Subject: [PATCH 2/6] Notification improvements.

- Adding a navbar notification icon for mobile.
- Adding an in-app notification toast. To be improved later.
- Fixes #607
---
 docs/src/about_goals.md      |  2 ++
 ui/.eslintrc.json            |  1 +
 ui/src/components/navbar.tsx | 48 +++++++++++++++++++++++++++++-------
 ui/src/utils.ts              | 24 +++++++++++++++++-
 4 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/docs/src/about_goals.md b/docs/src/about_goals.md
index 1463eeb0..0d666f4f 100644
--- a/docs/src/about_goals.md
+++ b/docs/src/about_goals.md
@@ -47,3 +47,5 @@
 - https://docs.rs/activitypub/0.1.4/activitypub/
 - [Activitypub vocab.](https://www.w3.org/TR/activitystreams-vocabulary/)
 - [Activitypub main](https://www.w3.org/TR/activitypub/)
+- [Federation.md](https://github.com/dariusk/gathio/blob/7fc93dbe9d4d99457a0e85c6c532112f415b7af2/FEDERATION.md)
+- [Activitypub implementers guide](https://socialhub.activitypub.rocks/t/draft-guide-for-new-activitypub-implementers/479)
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
index bee9e538..a4aecfa0 100644
--- a/ui/.eslintrc.json
+++ b/ui/.eslintrc.json
@@ -38,6 +38,7 @@
     "inferno/no-direct-mutation-state": 0,
     "inferno/no-unknown-property": 0,
     "max-statements": 0,
+    "max-params": 0,
     "new-cap": 0,
     "no-console": 0,
     "no-duplicate-imports": 0,
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index ef3f8430..76930e3b 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -26,6 +26,8 @@ import {
   fetchLimit,
   isCommentType,
   toast,
+  messageToastify,
+  md,
 } from '../utils';
 import { version } from '../version';
 import { i18n } from '../i18next';
@@ -100,6 +102,22 @@ export class Navbar extends Component<any, NavbarState> {
         <Link title={version} class="navbar-brand" to="/">
           {this.state.siteName}
         </Link>
+        {this.state.isLoggedIn && (
+          <Link
+            class="ml-auto navbar-toggler nav-link"
+            to="/inbox"
+            title={i18n.t('inbox')}
+          >
+            <svg class="icon">
+              <use xlinkHref="#icon-bell"></use>
+            </svg>
+            {this.state.unreadCount > 0 && (
+              <span class="ml-1 badge badge-light">
+                {this.state.unreadCount}
+              </span>
+            )}
+          </Link>
+        )}
         <button
           class="navbar-toggler"
           type="button"
@@ -350,21 +368,33 @@ export class Navbar extends Component<any, NavbarState> {
   }
 
   notify(reply: Comment | PrivateMessage) {
+    let creator_name = reply.creator_name;
+    let creator_avatar = reply.creator_avatar
+      ? reply.creator_avatar
+      : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`;
+    let link = isCommentType(reply)
+      ? `/post/${reply.post_id}/comment/${reply.id}`
+      : `/inbox`;
+    let body = md.render(reply.content);
+
+    messageToastify(
+      creator_name,
+      creator_avatar,
+      body,
+      link,
+      this.context.router
+    );
+
     if (Notification.permission !== 'granted') Notification.requestPermission();
     else {
       var notification = new Notification(reply.creator_name, {
-        icon: reply.creator_avatar
-          ? reply.creator_avatar
-          : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`,
-        body: `${reply.content}`,
+        icon: creator_avatar,
+        body: body,
       });
 
       notification.onclick = () => {
-        this.context.router.history.push(
-          isCommentType(reply)
-            ? `/post/${reply.post_id}/comment/${reply.id}`
-            : `/inbox`
-        );
+        event.preventDefault();
+        this.context.router.history.push(link);
       };
     }
   }
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 89fbe51c..cab1fd5b 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -218,7 +218,7 @@ export function validURL(str: string) {
 }
 
 export function validEmail(email: string) {
-  let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  let re = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
   return re.test(String(email).toLowerCase());
 }
 
@@ -436,6 +436,28 @@ export function toast(text: string, background: string = 'success') {
   }).showToast();
 }
 
+export function messageToastify(
+  creator: string,
+  avatar: string,
+  body: string,
+  link: string,
+  router: any
+) {
+  let backgroundColor = `var(--light)`;
+  Toastify({
+    text: `${body}<br />${creator}`,
+    avatar: avatar,
+    backgroundColor: backgroundColor,
+    close: true,
+    gravity: 'top',
+    position: 'right',
+    duration: 0,
+    onClick: () => {
+      router.history.push(link);
+    },
+  }).showToast();
+}
+
 export function setupTribute(): Tribute {
   return new Tribute({
     collection: [

From f76c3af557c88b382fba14c8ab19f64664dcda38 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 20 Mar 2020 16:53:54 -0400
Subject: [PATCH 3/6] Adding clearer goto context.

- Adding context props.
- Making link / context the first selectable on user and inbox page.
- Making icons a little bigger.
- #609
---
 ui/src/components/comment-node.tsx  | 31 ++++++++++++++++-------------
 ui/src/components/comment-nodes.tsx |  2 ++
 ui/src/components/inbox.tsx         | 30 +++++++++++++++-------------
 ui/src/components/post-listing.tsx  | 16 +++++++--------
 ui/src/components/symbols.tsx       | 12 +++++------
 ui/src/components/user.tsx          |  2 ++
 ui/translations/en.json             |  1 +
 7 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index d5d872f5..c1dceed2 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -66,6 +66,7 @@ interface CommentNodeProps {
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
+  showContext?: boolean;
   moderators: Array<CommunityUser>;
   admins: Array<UserView>;
   // TODO is this necessary, can't I get it from the node itself?
@@ -249,10 +250,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   />
                 )}
                 <ul class="list-inline mb-0 text-muted font-weight-bold small">
+                  {this.props.showContext && this.linkBtn}
                   {this.props.markable && (
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-sm btn-animate text-muted"
+                        class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
                         data-tippy-content={
                           node.comment.read
@@ -277,7 +279,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <>
                       <li className="list-inline-item">
                         <button
-                          className={`btn btn-link btn-sm btn-animate ${
+                          className={`btn btn-link btn-animate ${
                             this.state.my_vote == 1 ? 'text-info' : 'text-muted'
                           }`}
                           onClick={linkEvent(node, this.handleCommentUpvote)}
@@ -294,7 +296,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {WebSocketService.Instance.site.enable_downvotes && (
                         <li className="list-inline-item">
                           <button
-                            className={`btn btn-link btn-sm btn-animate ${
+                            className={`btn btn-link btn-animate ${
                               this.state.my_vote == -1
                                 ? 'text-danger'
                                 : 'text-muted'
@@ -316,7 +318,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       )}
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-sm btn-animate text-muted"
+                          class="btn btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleSaveCommentClick)}
                           data-tippy-content={
                             node.comment.saved
@@ -338,7 +340,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </li>
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-sm btn-animate text-muted"
+                          class="btn btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleReplyClick)}
                           data-tippy-content={i18n.t('reply')}
                         >
@@ -347,11 +349,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           </svg>
                         </button>
                       </li>
-                      {this.props.markable && this.linkBtn}
                       {!this.state.showAdvanced ? (
                         <li className="list-inline-item">
                           <button
-                            className="btn btn-link btn-sm btn-animate text-muted"
+                            className="btn btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleShowAdvanced)}
                             data-tippy-content={i18n.t('more')}
                           >
@@ -365,7 +366,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           {!this.myComment && (
                             <li className="list-inline-item">
                               <Link
-                                class="btn btn-link btn-sm btn-animate text-muted"
+                                class="btn btn-link btn-animate text-muted"
                                 to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
                                 title={i18n.t('message').toLowerCase()}
                               >
@@ -375,10 +376,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               </Link>
                             </li>
                           )}
-                          {!this.props.markable && this.linkBtn}
+                          {!this.props.showContext && this.linkBtn}
                           <li className="list-inline-item">
                             <button
-                              className="btn btn-link btn-sm btn-animate text-muted"
+                              className="btn btn-link btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -395,7 +396,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               <li className="list-inline-item">•</li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-sm btn-animate text-muted"
+                                  class="btn btn-link btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleEditClick
@@ -409,7 +410,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               </li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-sm btn-animate text-muted"
+                                  class="btn btn-link btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleDeleteClick
@@ -762,9 +763,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <li className="list-inline-item">
         <Link
-          className="btn btn-link btn-sm btn-animate text-muted"
+          className="btn btn-link btn-animate text-muted"
           to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
-          title={i18n.t('link')}
+          title={
+            this.props.showContext ? i18n.t('show_context') : i18n.t('link')
+          }
         >
           <svg class="icon icon-inline">
             <use xlinkHref="#icon-link"></use>
diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx
index ebbef8fa..875db1f2 100644
--- a/ui/src/components/comment-nodes.tsx
+++ b/ui/src/components/comment-nodes.tsx
@@ -20,6 +20,7 @@ interface CommentNodesProps {
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
+  showContext?: boolean;
   showCommunity?: boolean;
   sort?: CommentSortType;
   sortType?: SortType;
@@ -47,6 +48,7 @@ export class CommentNodes extends Component<
             admins={this.props.admins}
             postCreatorId={this.props.postCreatorId}
             markable={this.props.markable}
+            showContext={this.props.showContext}
             showCommunity={this.props.showCommunity}
             sort={this.props.sort}
             sortType={this.props.sortType}
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index afd9bf95..fa6bd397 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -1,5 +1,4 @@
 import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -34,7 +33,6 @@ import { CommentNodes } from './comment-nodes';
 import { PrivateMessage } from './private-message';
 import { SortSelect } from './sort-select';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 enum UnreadOrAll {
   Unread,
@@ -100,26 +98,19 @@ export class Inbox extends Component<any, InboxState> {
   }
 
   render() {
-    let user = UserService.Instance.user;
     return (
       <div class="container">
         <div class="row">
           <div class="col-12">
-            <h5 class="mb-0">
-              <T
-                class="d-inline"
-                i18nKey="inbox_for"
-                interpolation={{ user: user.username }}
-              >
-                #<Link to={`/u/${user.username}`}>#</Link>
-              </T>
+            <h5 class="mb-1">
+              {i18n.t('inbox')}
               <small>
                 <a
                   href={`/feeds/inbox/${UserService.Instance.auth}.xml`}
                   target="_blank"
                   title="RSS"
                 >
-                  <svg class="icon mx-2 text-muted small">
+                  <svg class="icon ml-2 text-muted small">
                     <use xlinkHref="#icon-rss">#</use>
                   </svg>
                 </a>
@@ -196,7 +187,12 @@ export class Inbox extends Component<any, InboxState> {
       <div>
         {combined.map(i =>
           isCommentType(i) ? (
-            <CommentNodes nodes={[{ comment: i }]} noIndent markable />
+            <CommentNodes
+              nodes={[{ comment: i }]}
+              noIndent
+              markable
+              showContext
+            />
           ) : (
             <PrivateMessage privateMessage={i} />
           )
@@ -212,6 +208,7 @@ export class Inbox extends Component<any, InboxState> {
           nodes={commentsToFlatNodes(this.state.replies)}
           noIndent
           markable
+          showContext
         />
       </div>
     );
@@ -221,7 +218,12 @@ export class Inbox extends Component<any, InboxState> {
     return (
       <div>
         {this.state.mentions.map(mention => (
-          <CommentNodes nodes={[{ comment: mention }]} noIndent markable />
+          <CommentNodes
+            nodes={[{ comment: mention }]}
+            noIndent
+            markable
+            showContext
+          />
         ))}
       </div>
     );
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 628ec027..a5ec4799 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -524,7 +524,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate btn-sm text-muted"
+                            class="btn btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleSavePostClick)}
                             data-tippy-content={
                               post.saved ? i18n.t('unsave') : i18n.t('save')
@@ -540,7 +540,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </li>
                         <li className="list-inline-item">
                           <Link
-                            class="btn btn-link btn-animate btn-sm text-muted"
+                            class="btn btn-link btn-animate text-muted"
                             to={`/create_post${this.crossPostParams}`}
                             title={i18n.t('cross_post')}
                           >
@@ -555,7 +555,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate btn-sm text-muted"
+                            class="btn btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleEditClick)}
                             data-tippy-content={i18n.t('edit')}
                           >
@@ -566,7 +566,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </li>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate btn-sm text-muted"
+                            class="btn btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleDeleteClick)}
                             data-tippy-content={
                               !post.deleted
@@ -588,7 +588,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     {!this.state.showAdvanced && this.props.showBody ? (
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate btn-sm text-muted"
+                          class="btn btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleShowAdvanced)}
                           data-tippy-content={i18n.t('more')}
                         >
@@ -602,7 +602,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         {this.props.showBody && post.body && (
                           <li className="list-inline-item">
                             <button
-                              class="btn btn-link btn-animate btn-sm text-muted"
+                              class="btn btn-link btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -619,7 +619,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           <>
                             <li className="list-inline-item">
                               <button
-                                class="btn btn-link btn-animate btn-sm text-muted"
+                                class="btn btn-link btn-animate text-muted"
                                 onClick={linkEvent(this, this.handleModLock)}
                                 data-tippy-content={
                                   post.locked
@@ -637,7 +637,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             </li>
                             <li className="list-inline-item">
                               <button
-                                class="btn btn-link btn-animate btn-sm text-muted"
+                                class="btn btn-link btn-animate text-muted"
                                 onClick={linkEvent(this, this.handleModSticky)}
                                 data-tippy-content={
                                   post.stickied
diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx
index e7760269..1220413c 100644
--- a/ui/src/components/symbols.tsx
+++ b/ui/src/components/symbols.tsx
@@ -88,14 +88,14 @@ export class Symbols extends Component<any, any> {
             <path d="M17 19h-12c-0.553 0-1-0.447-1-1s0.447-1 1-1h12c0.553 0 1 0.447 1 1s-0.447 1-1 1z"></path>
             <path d="M17.5 5h-12.5v9c0 1.1 0.9 2 2 2h8c1.1 0 2-0.9 2-2v-2h0.5c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5zM15 14h-8v-7h8v7zM17.5 10h-1.5v-3h1.5c0.827 0 1.5 0.673 1.5 1.5s-0.673 1.5-1.5 1.5z"></path>
           </symbol>
-          <symbol id="icon-rss" viewBox="0 0 32 32">
-            <path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path>
+          <symbol id="icon-rss" viewBox="0 0 24 24">
+            <path d="M4 12c2.209 0 4.208 0.894 5.657 2.343s2.343 3.448 2.343 5.657c0 0.552 0.448 1 1 1s1-0.448 1-1c0-2.761-1.12-5.263-2.929-7.071s-4.31-2.929-7.071-2.929c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4 5c4.142 0 7.891 1.678 10.607 4.393s4.393 6.465 4.393 10.607c0 0.552 0.448 1 1 1s1-0.448 1-1c0-4.694-1.904-8.946-4.979-12.021s-7.327-4.979-12.021-4.979c-0.552 0-1 0.448-1 1s0.448 1 1 1zM7 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z"></path>
           </symbol>
-          <symbol id="icon-arrow-down" viewBox="0 0 26 28">
-            <path d="M25.172 13c0 0.531-0.219 1.047-0.578 1.406l-10.172 10.187c-0.375 0.359-0.891 0.578-1.422 0.578s-1.047-0.219-1.406-0.578l-10.172-10.187c-0.375-0.359-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l1.156-1.172c0.375-0.359 0.891-0.578 1.422-0.578s1.047 0.219 1.406 0.578l4.594 4.594v-11c0-1.094 0.906-2 2-2h2c1.094 0 2 0.906 2 2v11l4.594-4.594c0.359-0.359 0.875-0.578 1.406-0.578s1.047 0.219 1.422 0.578l1.172 1.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+          <symbol id="icon-arrow-down" viewBox="0 0 24 24">
+            <path d="M18.293 11.293l-5.293 5.293v-11.586c0-0.552-0.448-1-1-1s-1 0.448-1 1v11.586l-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l7 7c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l7-7c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"></path>
           </symbol>
-          <symbol id="icon-arrow-up" viewBox="0 0 26 28">
-            <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
+          <symbol id="icon-arrow-up" viewBox="0 0 24 24">
+            <path d="M5.707 12.707l5.293-5.293v11.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-11.586l5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-7-7c-0.092-0.092-0.202-0.166-0.324-0.217s-0.253-0.076-0.383-0.076c-0.256 0-0.512 0.098-0.707 0.293l-7 7c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
           </symbol>
           <symbol id="icon-mail" viewBox="0 0 24 24">
             <path d="M3 7.921l8.427 5.899c0.34 0.235 0.795 0.246 1.147 0l8.426-5.899v10.079c0 0.272-0.11 0.521-0.295 0.705s-0.433 0.295-0.705 0.295h-16c-0.272 0-0.521-0.11-0.705-0.295s-0.295-0.433-0.295-0.705zM1 5.983c0 0.010 0 0.020 0 0.030v11.987c0 0.828 0.34 1.579 0.88 2.12s1.292 0.88 2.12 0.88h16c0.828 0 1.579-0.34 2.12-0.88s0.88-1.292 0.88-2.12v-11.988c0-0.010 0-0.020 0-0.030-0.005-0.821-0.343-1.565-0.88-2.102-0.541-0.54-1.292-0.88-2.12-0.88h-16c-0.828 0-1.579 0.34-2.12 0.88-0.537 0.537-0.875 1.281-0.88 2.103zM20.894 5.554l-8.894 6.225-8.894-6.225c0.048-0.096 0.112-0.183 0.188-0.259 0.185-0.185 0.434-0.295 0.706-0.295h16c0.272 0 0.521 0.11 0.705 0.295 0.076 0.076 0.14 0.164 0.188 0.259z"></path>
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 0b0d1135..3e5df1b0 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -312,6 +312,7 @@ export class User extends Component<any, UserState> {
                 nodes={[{ comment: i.data as Comment }]}
                 admins={this.state.admins}
                 noIndent
+                showContext
               />
             )}
           </div>
@@ -327,6 +328,7 @@ export class User extends Component<any, UserState> {
           nodes={commentsToFlatNodes(this.state.comments)}
           admins={this.state.admins}
           noIndent
+          showContext
         />
       </div>
     );
diff --git a/ui/translations/en.json b/ui/translations/en.json
index e9df20ba..0281aaf4 100644
--- a/ui/translations/en.json
+++ b/ui/translations/en.json
@@ -39,6 +39,7 @@
     "avatar": "Avatar",
     "upload_avatar": "Upload Avatar",
     "show_avatars": "Show Avatars",
+    "show_context": "Show context",
     "formatting_help": "formatting help",
     "sorting_help": "sorting help",
     "view_source": "view source",

From 4949ab973b4c9a951fa43341972fdb53d712fd56 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 20 Mar 2020 17:20:59 -0400
Subject: [PATCH 4/6] Fixing navbar bell padding.

---
 ui/src/components/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 76930e3b..ea9b619b 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -104,7 +104,7 @@ export class Navbar extends Component<any, NavbarState> {
         </Link>
         {this.state.isLoggedIn && (
           <Link
-            class="ml-auto navbar-toggler nav-link"
+            class="ml-auto p-0 navbar-toggler nav-link"
             to="/inbox"
             title={i18n.t('inbox')}
           >

From 0050ae74a44c88a9a2be3a1a864423b0da627639 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 20 Mar 2020 18:35:33 -0400
Subject: [PATCH 5/6] Switch to radios for user and inbox pages for clarity.
 Fixes #608

---
 ui/src/components/comment-node.tsx |  22 ++---
 ui/src/components/inbox.tsx        | 132 ++++++++++++++++++++++-------
 ui/src/components/post-listing.tsx |  16 ++--
 ui/src/components/user.tsx         |  83 ++++++++++++++----
 4 files changed, 187 insertions(+), 66 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index c1dceed2..b2d04150 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -254,7 +254,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   {this.props.markable && (
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-animate text-muted"
+                        class="btn btn-link btn-sm btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
                         data-tippy-content={
                           node.comment.read
@@ -279,7 +279,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <>
                       <li className="list-inline-item">
                         <button
-                          className={`btn btn-link btn-animate ${
+                          className={`btn btn-link btn-sm btn-animate ${
                             this.state.my_vote == 1 ? 'text-info' : 'text-muted'
                           }`}
                           onClick={linkEvent(node, this.handleCommentUpvote)}
@@ -296,7 +296,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {WebSocketService.Instance.site.enable_downvotes && (
                         <li className="list-inline-item">
                           <button
-                            className={`btn btn-link btn-animate ${
+                            className={`btn btn-link btn-sm btn-animate ${
                               this.state.my_vote == -1
                                 ? 'text-danger'
                                 : 'text-muted'
@@ -318,7 +318,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       )}
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate text-muted"
+                          class="btn btn-link btn-sm btn-animate text-muted"
                           onClick={linkEvent(this, this.handleSaveCommentClick)}
                           data-tippy-content={
                             node.comment.saved
@@ -340,7 +340,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </li>
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate text-muted"
+                          class="btn btn-link btn-sm btn-animate text-muted"
                           onClick={linkEvent(this, this.handleReplyClick)}
                           data-tippy-content={i18n.t('reply')}
                         >
@@ -352,7 +352,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {!this.state.showAdvanced ? (
                         <li className="list-inline-item">
                           <button
-                            className="btn btn-link btn-animate text-muted"
+                            className="btn btn-link btn-sm btn-animate text-muted"
                             onClick={linkEvent(this, this.handleShowAdvanced)}
                             data-tippy-content={i18n.t('more')}
                           >
@@ -366,7 +366,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           {!this.myComment && (
                             <li className="list-inline-item">
                               <Link
-                                class="btn btn-link btn-animate text-muted"
+                                class="btn btn-link btn-sm btn-animate text-muted"
                                 to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
                                 title={i18n.t('message').toLowerCase()}
                               >
@@ -379,7 +379,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           {!this.props.showContext && this.linkBtn}
                           <li className="list-inline-item">
                             <button
-                              className="btn btn-link btn-animate text-muted"
+                              className="btn btn-link btn-sm btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -396,7 +396,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               <li className="list-inline-item">•</li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-animate text-muted"
+                                  class="btn btn-link btn-sm btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleEditClick
@@ -410,7 +410,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               </li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-animate text-muted"
+                                  class="btn btn-link btn-sm btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleDeleteClick
@@ -763,7 +763,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <li className="list-inline-item">
         <Link
-          className="btn btn-link btn-animate text-muted"
+          className="btn btn-link btn-sm btn-animate text-muted"
           to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
           title={
             this.props.showContext ? i18n.t('show_context') : i18n.t('link')
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index fa6bd397..63004c26 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -39,7 +39,7 @@ enum UnreadOrAll {
   All,
 }
 
-enum UnreadType {
+enum MessageType {
   All,
   Replies,
   Mentions,
@@ -50,7 +50,7 @@ type ReplyType = Comment | PrivateMessageI;
 
 interface InboxState {
   unreadOrAll: UnreadOrAll;
-  unreadType: UnreadType;
+  messageType: MessageType;
   replies: Array<Comment>;
   mentions: Array<Comment>;
   messages: Array<PrivateMessageI>;
@@ -62,7 +62,7 @@ export class Inbox extends Component<any, InboxState> {
   private subscription: Subscription;
   private emptyState: InboxState = {
     unreadOrAll: UnreadOrAll.Unread,
-    unreadType: UnreadType.All,
+    messageType: MessageType.All,
     replies: [],
     mentions: [],
     messages: [],
@@ -130,10 +130,10 @@ export class Inbox extends Component<any, InboxState> {
                 </ul>
               )}
             {this.selects()}
-            {this.state.unreadType == UnreadType.All && this.all()}
-            {this.state.unreadType == UnreadType.Replies && this.replies()}
-            {this.state.unreadType == UnreadType.Mentions && this.mentions()}
-            {this.state.unreadType == UnreadType.Messages && this.messages()}
+            {this.state.messageType == MessageType.All && this.all()}
+            {this.state.messageType == MessageType.Replies && this.replies()}
+            {this.state.messageType == MessageType.Mentions && this.mentions()}
+            {this.state.messageType == MessageType.Messages && this.messages()}
             {this.paginator()}
           </div>
         </div>
@@ -141,29 +141,103 @@ export class Inbox extends Component<any, InboxState> {
     );
   }
 
+  unreadOrAllRadios() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary pointer
+            ${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={UnreadOrAll.Unread}
+            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
+            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+          />
+          {i18n.t('unread')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer
+            ${this.state.unreadOrAll == UnreadOrAll.All && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={UnreadOrAll.All}
+            checked={this.state.unreadOrAll == UnreadOrAll.All}
+            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+          />
+          {i18n.t('all')}
+        </label>
+      </div>
+    );
+  }
+
+  messageTypeRadios() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary pointer
+            ${this.state.messageType == MessageType.All && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={MessageType.All}
+            checked={this.state.messageType == MessageType.All}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('all')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.messageType == MessageType.Replies && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={MessageType.Replies}
+            checked={this.state.messageType == MessageType.Replies}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('replies')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.messageType == MessageType.Mentions && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={MessageType.Mentions}
+            checked={this.state.messageType == MessageType.Mentions}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('mentions')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.messageType == MessageType.Messages && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={MessageType.Messages}
+            checked={this.state.messageType == MessageType.Messages}
+            onChange={linkEvent(this, this.handleMessageTypeChange)}
+          />
+          {i18n.t('messages')}
+        </label>
+      </div>
+    );
+  }
+
   selects() {
     return (
       <div className="mb-2">
-        <select
-          value={this.state.unreadOrAll}
-          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          class="custom-select custom-select-sm w-auto mr-2"
-        >
-          <option disabled>{i18n.t('type')}</option>
-          <option value={UnreadOrAll.Unread}>{i18n.t('unread')}</option>
-          <option value={UnreadOrAll.All}>{i18n.t('all')}</option>
-        </select>
-        <select
-          value={this.state.unreadType}
-          onChange={linkEvent(this, this.handleUnreadTypeChange)}
-          class="custom-select custom-select-sm w-auto mr-2"
-        >
-          <option disabled>{i18n.t('type')}</option>
-          <option value={UnreadType.All}>{i18n.t('all')}</option>
-          <option value={UnreadType.Replies}>{i18n.t('replies')}</option>
-          <option value={UnreadType.Mentions}>{i18n.t('mentions')}</option>
-          <option value={UnreadType.Messages}>{i18n.t('messages')}</option>
-        </select>
+        <span class="mr-3">{this.unreadOrAllRadios()}</span>
+        <span class="mr-3">{this.messageTypeRadios()}</span>
         <SortSelect
           sort={this.state.sort}
           onChange={this.handleSortChange}
@@ -279,8 +353,8 @@ export class Inbox extends Component<any, InboxState> {
     i.refetch();
   }
 
-  handleUnreadTypeChange(i: Inbox, event: any) {
-    i.state.unreadType = Number(event.target.value);
+  handleMessageTypeChange(i: Inbox, event: any) {
+    i.state.messageType = Number(event.target.value);
     i.state.page = 1;
     i.setState(i.state);
     i.refetch();
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index a5ec4799..c5afe9ce 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -524,7 +524,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleSavePostClick)}
                             data-tippy-content={
                               post.saved ? i18n.t('unsave') : i18n.t('save')
@@ -540,7 +540,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </li>
                         <li className="list-inline-item">
                           <Link
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             to={`/create_post${this.crossPostParams}`}
                             title={i18n.t('cross_post')}
                           >
@@ -555,7 +555,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleEditClick)}
                             data-tippy-content={i18n.t('edit')}
                           >
@@ -566,7 +566,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         </li>
                         <li className="list-inline-item">
                           <button
-                            class="btn btn-link btn-animate text-muted"
+                            class="btn btn-sm btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleDeleteClick)}
                             data-tippy-content={
                               !post.deleted
@@ -588,7 +588,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     {!this.state.showAdvanced && this.props.showBody ? (
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-animate text-muted"
+                          class="btn btn-sm btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleShowAdvanced)}
                           data-tippy-content={i18n.t('more')}
                         >
@@ -602,7 +602,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         {this.props.showBody && post.body && (
                           <li className="list-inline-item">
                             <button
-                              class="btn btn-link btn-animate text-muted"
+                              class="btn btn-sm btn-link btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -619,7 +619,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           <>
                             <li className="list-inline-item">
                               <button
-                                class="btn btn-link btn-animate text-muted"
+                                class="btn btn-sm btn-link btn-animate text-muted"
                                 onClick={linkEvent(this, this.handleModLock)}
                                 data-tippy-content={
                                   post.locked
@@ -637,7 +637,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             </li>
                             <li className="list-inline-item">
                               <button
-                                class="btn btn-link btn-animate text-muted"
+                                class="btn btn-sm btn-link btn-animate text-muted"
                                 onClick={linkEvent(this, this.handleModSticky)}
                                 data-tippy-content={
                                   post.stickied
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 3e5df1b0..245df42f 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -242,27 +242,74 @@ export class User extends Component<any, UserState> {
     );
   }
 
+  viewRadios() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Overview && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Overview}
+            checked={this.state.view == View.Overview}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('overview')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Comments && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Comments}
+            checked={this.state.view == View.Comments}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('comments')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Posts && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Posts}
+            checked={this.state.view == View.Posts}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('posts')}
+        </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer border-right border-light
+            ${this.state.view == View.Saved && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={View.Saved}
+            checked={this.state.view == View.Saved}
+            onChange={linkEvent(this, this.handleViewChange)}
+          />
+          {i18n.t('saved')}
+        </label>
+      </div>
+    );
+  }
+
   selects() {
     return (
       <div className="mb-2">
-        <select
-          value={this.state.view}
-          onChange={linkEvent(this, this.handleViewChange)}
-          class="custom-select custom-select-sm w-auto"
-        >
-          <option disabled>{i18n.t('view')}</option>
-          <option value={View.Overview}>{i18n.t('overview')}</option>
-          <option value={View.Comments}>{i18n.t('comments')}</option>
-          <option value={View.Posts}>{i18n.t('posts')}</option>
-          <option value={View.Saved}>{i18n.t('saved')}</option>
-        </select>
-        <span class="ml-2">
-          <SortSelect
-            sort={this.state.sort}
-            onChange={this.handleSortChange}
-            hideHot
-          />
-        </span>
+        <span class="mr-3">{this.viewRadios()}</span>
+        <SortSelect
+          sort={this.state.sort}
+          onChange={this.handleSortChange}
+          hideHot
+        />
         <a
           href={`/feeds/u/${this.state.username}.xml?sort=${
             SortType[this.state.sort]

From bde422ab301557c25f9b7502642bfca8e0af9550 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 20 Mar 2020 18:52:45 -0400
Subject: [PATCH 6/6] Changing to btn-outline-light

---
 ui/src/components/inbox.tsx | 8 ++++----
 ui/src/components/user.tsx  | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 63004c26..4fa1498a 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -178,7 +178,7 @@ export class Inbox extends Component<any, InboxState> {
     return (
       <div class="btn-group btn-group-toggle">
         <label
-          className={`btn btn-sm btn-secondary pointer
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.All && 'active'}
           `}
         >
@@ -191,7 +191,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t('all')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.Replies && 'active'}
           `}
         >
@@ -204,7 +204,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t('replies')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.Mentions && 'active'}
           `}
         >
@@ -217,7 +217,7 @@ export class Inbox extends Component<any, InboxState> {
           {i18n.t('mentions')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.messageType == MessageType.Messages && 'active'}
           `}
         >
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 245df42f..bf67a5fd 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -246,7 +246,7 @@ export class User extends Component<any, UserState> {
     return (
       <div class="btn-group btn-group-toggle">
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Overview && 'active'}
           `}
         >
@@ -259,7 +259,7 @@ export class User extends Component<any, UserState> {
           {i18n.t('overview')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Comments && 'active'}
           `}
         >
@@ -272,7 +272,7 @@ export class User extends Component<any, UserState> {
           {i18n.t('comments')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Posts && 'active'}
           `}
         >
@@ -285,7 +285,7 @@ export class User extends Component<any, UserState> {
           {i18n.t('posts')}
         </label>
         <label
-          className={`btn btn-sm btn-secondary pointer border-right border-light
+          className={`btn btn-sm btn-secondary pointer btn-outline-light
             ${this.state.view == View.Saved && 'active'}
           `}
         >