Apply suggestions

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/ui/card/card.tsx

@@ -35,7 +35,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant, size
     className={classNames({
       'space-y-4': true,
       'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset overflow-hidden': variant === 'rounded',
-      [sizes[size]]: true,
+      [sizes[size]]: variant === 'rounded',
     }, className)}
   >
     {children}

app/soapbox/components/ui/column/column.tsx

@@ -40,25 +40,19 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
     }
   };
 
-  const renderChildren = () => {
-    if (transparent) {
-      return <div className={classNames('text-black dark:text-white', className)}>{children}</div>;
-    }
-
-    return (
-      <Card variant='rounded' className={className}>
-        {withHeader ? (
-          <CardHeader onBackClick={handleBackClick}>
-            <CardTitle title={label} />
-          </CardHeader>
-        ) : null}
+  const renderChildren = () => (
+    <Card variant={transparent ? undefined : 'rounded'} className={className}>
+      {withHeader ? (
+        <CardHeader onBackClick={handleBackClick}>
+          <CardTitle title={label} />
+        </CardHeader>
+      ) : null}
 
-        <CardBody>
-          {children}
-        </CardBody>
-      </Card>
-    );
-  };
+      <CardBody>
+        {children}
+      </CardBody>
+    </Card>
+  );
 
   return (
     <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>

app/soapbox/features/bookmarks/index.tsx

@@ -35,7 +35,7 @@ const Bookmarks: React.FC = () => {
   const emptyMessage = <FormattedMessage id='empty_column.bookmarks' defaultMessage="You don't have any bookmarks yet. When you add one, it will show up here." />;
 
   return (
-    <Column transparent>
+    <Column transparent withHeader={false}>
       <div className='px-4 pt-4 sm:p-0'>
         <SubNavigation message={intl.formatMessage(messages.heading)} />
       </div>

app/soapbox/features/community_timeline/index.tsx

@@ -42,7 +42,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
       <Timeline
         scrollKey={`${timelineId}_timeline`}

app/soapbox/features/direct_timeline/index.tsx

@@ -40,7 +40,7 @@ const DirectTimeline = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <ColumnHeader
         icon='envelope'
         active={hasUnread}

app/soapbox/features/followers/index.js

@@ -118,7 +118,7 @@ class Followers extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}

app/soapbox/features/following/index.js

@@ -118,7 +118,7 @@ class Following extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}

app/soapbox/features/hashtag_timeline/index.js

@@ -112,7 +112,7 @@ class HashtagTimeline extends React.PureComponent {
     const { id } = this.props.params;
 
     return (
-      <Column label={`#${id}`} transparent>
+      <Column label={`#${id}`} transparent withHeader={false}>
         <ColumnHeader active={hasUnread} title={this.title()} />
         <Timeline
           scrollKey='hashtag_timeline'

app/soapbox/features/home_timeline/index.tsx

@@ -58,7 +58,7 @@ const HomeTimeline: React.FC = () => {
   }, [isPartial]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <Timeline
         scrollKey='home_timeline'
         onLoadMore={handleLoadMore}

app/soapbox/features/list_timeline/index.tsx

@@ -85,7 +85,7 @@ const ListTimeline: React.FC = () => {
   );
 
   return (
-    <Column label={title} heading={title} transparent>
+    <Column label={title} heading={title} transparent withHeader={false}>
       {/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
         <div className='column-header__links'>
           <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleEditClick}>

app/soapbox/features/pinned_statuses/index.js

@@ -52,7 +52,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
         <StatusList
           statusIds={statusIds}
           scrollKey='pinned_statuses'

app/soapbox/features/public_timeline/index.tsx

@@ -63,7 +63,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
       <PinnedHostsPicker />
       {showExplanationBox && <div className='mb-4'>

app/soapbox/features/remote_timeline/index.tsx

@@ -65,7 +65,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
+    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
       {instance && <PinnedHostsPicker host={instance} />}
       {!pinned && <HStack className='mb-4 px-2' space={2}>
         <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />

app/soapbox/features/status/index.tsx

@@ -791,7 +791,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     }
 
     return (
-      <Column label={intl.formatMessage(titleMessage, { username })} transparent>
+      <Column label={intl.formatMessage(titleMessage, { username })} transparent withHeader={false}>
         <div className='px-4 pt-4 sm:p-0'>
           <SubNavigation message={intl.formatMessage(titleMessage, { username })} />
         </div>

app/soapbox/features/test_timeline/index.tsx

@@ -38,7 +38,7 @@ const TestTimeline: React.FC = () => {
   }, []);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <SubNavigation message={intl.formatMessage(messages.title)} />
       <Timeline
         scrollKey={`${timelineId}_timeline`}