Merge branch 'fix-footer-links' into 'develop'

Fix link UX issue on linkfooter

See merge request soapbox-pub/soapbox-fe!1579

app/soapbox/features/ui/components/link_footer.tsx

@@ -18,7 +18,9 @@ interface IFooterLink {
 
 const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
   return (
-    <Link className={classNames('text-gray-400 hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
+    <div>
+      <Link className={classNames('text-gray-400 hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
+    </div>
   );
 };
 
@@ -36,7 +38,7 @@ const LinkFooter: React.FC = (): JSX.Element => {
 
   return (
     <div className='space-y-2'>
-      <div className='flex flex-wrap items-center divide-x-dot'>
+      <div className='flex flex-wrap items-center divide-x-dot text-gray-400'>
         {account && <>
           {features.profileDirectory && (
             <FooterLink to='/directory'><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></FooterLink>