From 3783378b79dd5d5cd61655a4678a96f8b4878fe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Aug 2021 23:03:42 +0200
Subject: [PATCH] Use Link, check if authenticated
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/groups/timeline/index.js | 8 ++++----
 app/soapbox/pages/home_page.js                | 8 ++++----
 app/styles/ui.scss                            | 1 +
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/groups/timeline/index.js b/app/soapbox/features/groups/timeline/index.js
index 0576e99c6..c9f7d08cd 100644
--- a/app/soapbox/features/groups/timeline/index.js
+++ b/app/soapbox/features/groups/timeline/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusListContainer from '../../ui/containers/status_list_container';
@@ -81,15 +81,15 @@ class GroupTimeline extends React.PureComponent {
       );
     }
 
-    const acct = account.get('acct');
+    const acct = account ? account.get('acct') : '';
 
     return (
       <div>
         {relationships.get('member') && (
           <div className='timeline-compose-block'>
-            <NavLink className='timeline-compose-block__avatar' to={`/@${acct}`}>
+            <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
               <Avatar account={account} size={46} />
-            </NavLink>
+            </Link>
             <ComposeFormContainer group={group} shouldCondense autoFocus={false} />
           </div>
         )}
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index e7f3b4c3d..fc630d658 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ComposeFormContainer from '../features/compose/containers/compose_form_container';
 import Avatar from '../components/avatar';
@@ -47,7 +47,7 @@ class HomePage extends ImmutablePureComponent {
   render() {
     const { me, children, account, showFundingPanel, showCryptoDonatePanel, cryptoLimit, showTrendsPanel, showWhoToFollowPanel } = this.props;
 
-    const acct = account.get('acct');
+    const acct = account ? account.get('acct') : '';
 
     return (
       <div className='page'>
@@ -65,9 +65,9 @@ class HomePage extends ImmutablePureComponent {
             <div className='columns-area__panels__main'>
               <div className='columns-area columns-area--mobile'>
                 {me && <div className='timeline-compose-block' ref={this.composeBlock}>
-                  <NavLink className='timeline-compose-block__avatar' to={`/@${acct}`}>
+                  <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
                     <Avatar account={account} size={46} />
-                  </NavLink>
+                  </Link>
                   <ComposeFormContainer
                     shouldCondense
                     autoFocus={false}
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 6f29db19a..d710bc180 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -180,6 +180,7 @@
 
   &__avatar {
     display: block;
+    border-radius: 50%;
     @media (max-width: 405px) { display: none; }
   }
 }