From a398f14b2fe9c44e1dda355e5b9b5049866721dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 20 Apr 2022 19:37:40 +0200
Subject: [PATCH] Lists links styling
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/lists/index.tsx          | 12 ++++--
 .../features/ui/components/column_link.js     | 39 -------------------
 2 files changed, 8 insertions(+), 43 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/column_link.js

diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index 5b9a0e936..078fbe180 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
 import { fetchLists } from 'soapbox/actions/lists';
+import Icon from 'soapbox/components/icon';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { Spinner } from 'soapbox/components/ui';
 import { CardHeader, CardTitle } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import Column from '../ui/components/column';
-import ColumnLink from '../ui/components/column_link';
 
 import NewListForm from './components/new_list_form';
 
@@ -66,9 +67,12 @@ const Lists: React.FC = () => {
         scrollKey='lists'
         emptyMessage={emptyMessage}
       >
-        {lists.map((list: any) =>
-          <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
-        )}
+        {lists.map((list: any) => (
+          <Link key={list.get('id')} to={`/list/${list.get('id')}`} className='flex items-center gap-1.5 p-2 my-2 text-black dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg'>
+            <Icon src={require('@tabler/icons/icons/list.svg')} fixedWidth />
+            {list.get('title')}
+          </Link>
+        ))}
       </ScrollableList>
     </Column>
   );
diff --git a/app/soapbox/features/ui/components/column_link.js b/app/soapbox/features/ui/components/column_link.js
deleted file mode 100644
index 9dbdf4c64..000000000
--- a/app/soapbox/features/ui/components/column_link.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import Icon from 'soapbox/components/icon';
-
-const ColumnLink = ({ icon, src, text, to, href, method, badge }) => {
-  const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
-
-  if (href) {
-    return (
-      <a href={href} className='column-link' data-method={method}>
-        <Icon id={icon} src={src} fixedWidth className='column-link__icon' />
-        {text}
-        {badgeElement}
-      </a>
-    );
-  } else {
-    return (
-      <Link to={to} className='column-link'>
-        <Icon id={icon} src={src} fixedWidth className='column-link__icon' />
-        {text}
-        {badgeElement}
-      </Link>
-    );
-  }
-};
-
-ColumnLink.propTypes = {
-  icon: PropTypes.string,
-  src: PropTypes.string,
-  text: PropTypes.string.isRequired,
-  to: PropTypes.string,
-  href: PropTypes.string,
-  method: PropTypes.string,
-  badge: PropTypes.node,
-};
-
-export default ColumnLink;