From 55bed66f8f54263fb06dc30ffa909fe81bbc1a3a Mon Sep 17 00:00:00 2001
From: Brian Fleming <brianfleming@users.noreply.github.com>
Date: Tue, 2 Jul 2024 18:26:55 -0400
Subject: [PATCH] List styles more consistent (#1989)

* clean up some inconsistencies between lists and use more shared styles while reviewing epic progress [CV2-4441]

* remove unnecessary toolbar component [CV2-4441]

* remove unnecessary articles specific list styles [CV2-4441]

* clean up some differences between shared feed headers [CV2-4441]

* remove unnecessary import of classnames

* user shared css divider styles instead of material [CV2-4441]

* quiet down browser console error

* remove unnecessary fieldset title, now that claim has been removed

* run tests for this branch
---
 .../components/media/CreateMediaInput.json    |   5 -
 src/app/components/article/ArticleFilters.js  |  14 +-
 src/app/components/article/Articles.js        |  18 +--
 .../components/article/Articles.module.css    | 149 ++++++------------
 .../drawer/Projects/ProjectsListItem.js       |   2 +-
 src/app/components/feed/FeedClusters.js       |  13 +-
 .../components/feed/FeedClusters.module.css   |  41 -----
 src/app/components/feed/FeedFilters.js        |  67 ++++----
 src/app/components/feed/FeedTopBar.js         | 111 ++++++-------
 src/app/components/feed/FeedTopBar.module.css | 130 +++++++--------
 src/app/components/media/CreateMediaInput.js  |   4 -
 .../search/SearchResults.module.css           |  10 +-
 .../SearchResultsCards.module.css             |   8 -
 .../search/SearchResultsCards/index.js        |   4 +-
 src/app/components/search/Toolbar.js          |  37 -----
 15 files changed, 236 insertions(+), 377 deletions(-)
 delete mode 100644 src/app/components/search/SearchResultsCards/SearchResultsCards.module.css
 delete mode 100644 src/app/components/search/Toolbar.js

diff --git a/localization/react-intl/src/app/components/media/CreateMediaInput.json b/localization/react-intl/src/app/components/media/CreateMediaInput.json
index 47058349ce..d912ae291f 100644
--- a/localization/react-intl/src/app/components/media/CreateMediaInput.json
+++ b/localization/react-intl/src/app/components/media/CreateMediaInput.json
@@ -1,9 +1,4 @@
 [
-  {
-    "id": "createMedia.media.media",
-    "description": "Header for the claim media area",
-    "defaultMessage": "Media"
-  },
   {
     "id": "createMedia.mediaInput",
     "description": "Placeholder text for the media URL input",
diff --git a/src/app/components/article/ArticleFilters.js b/src/app/components/article/ArticleFilters.js
index ca724ba304..b63f4c5b18 100644
--- a/src/app/components/article/ArticleFilters.js
+++ b/src/app/components/article/ArticleFilters.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape, defineMessages } from 'react-intl';
 import cx from 'classnames/bind';
-import Divider from '@material-ui/core/Divider';
 import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
 import AddFilterMenu from '../search/AddFilterMenu';
 import MultiSelectFilter from '../search/MultiSelectFilter';
@@ -15,7 +14,6 @@ import HowToRegIcon from '../../icons/person_check.svg';
 import DescriptionIcon from '../../icons/description.svg';
 import LabelIcon from '../../icons/label.svg';
 import ReportIcon from '../../icons/playlist_add_check.svg';
-import styles from '../search/SearchResults.module.css';
 import searchStyles from '../search/search.module.css';
 
 const messages = defineMessages({
@@ -38,7 +36,6 @@ const ArticleFilters = ({
   currentFilters,
   teamSlug,
   statuses,
-  className,
   extra,
   intl,
 }) => {
@@ -92,7 +89,7 @@ const ArticleFilters = ({
   );
 
   return (
-    <div className={cx(styles['search-results-top'], className)}>
+    <>
       { extra ? <div className={searchStyles['filters-wrapper']}>{extra}</div> : null }
       <div className={searchStyles['filters-wrapper']}>
         {Object.keys(filters).map((filter, i) => {
@@ -260,8 +257,7 @@ const ArticleFilters = ({
           onSelect={handleAddFilter}
         />
         { Object.keys(filters).length > 1 && ( // Filter by article type is fixed
-          <>
-            <Divider orientation="vertical" flexItem style={{ margin: '0 8px' }} />
+          <div className={cx(searchStyles['filters-buttons-wrapper'], searchStyles['filters-buttons-wrapper-visible'])}>
             <ButtonMain
               className="int-search-fields__button--apply-articlefilter"
               variant="contained"
@@ -288,17 +284,16 @@ const ArticleFilters = ({
                 id: 'search-fields__clear-button',
               }}
             />
-          </>
+          </div>
         )}
       </div>
-    </div>
+    </>
   );
 };
 
 ArticleFilters.defaultProps = {
   filterOptions: [],
   currentFilters: {},
-  className: '',
   extra: null,
 };
 
@@ -312,7 +307,6 @@ ArticleFilters.propTypes = {
     id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
   }).isRequired).isRequired,
-  className: PropTypes.string,
   extra: PropTypes.node,
   intl: intlShape.isRequired,
 };
diff --git a/src/app/components/article/Articles.js b/src/app/components/article/Articles.js
index d1d00e36a5..db31c0fd53 100644
--- a/src/app/components/article/Articles.js
+++ b/src/app/components/article/Articles.js
@@ -3,18 +3,16 @@ import PropTypes from 'prop-types';
 import Relay from 'react-relay/classic';
 import { QueryRenderer, graphql, commitMutation } from 'react-relay/compat';
 import { FormattedMessage } from 'react-intl';
-import cx from 'classnames/bind';
 import { FlashMessageSetterContext } from '../FlashMessage';
 import ErrorBoundary from '../error/ErrorBoundary';
 import BlankState from '../layout/BlankState';
 import ArticleCard from '../search/SearchResultsCards/ArticleCard';
-import searchResultsStyles from '../search/SearchResults.module.css';
 import Paginator from '../cds/inputs/Paginator';
 import ListSort from '../cds/inputs/ListSort';
 import { getStatus } from '../../helpers';
 import MediasLoading from '../media/MediasLoading';
 import ArticleFilters from './ArticleFilters';
-import styles from './Articles.module.css';
+import searchResultsStyles from '../search/SearchResults.module.css';
 
 const pageSize = 50;
 
@@ -93,8 +91,11 @@ const ArticlesComponent = ({
 
   return (
     <React.Fragment>
-      <div className={cx(searchResultsStyles['search-results-header'], styles.articlesHeader)}>
+      <div className={searchResultsStyles['search-results-header']}>
         <div className={searchResultsStyles.searchResultsTitleWrapper}>
+          <div className={searchResultsStyles.searchHeaderSubtitle}>
+            &nbsp;
+          </div>
           <div className={searchResultsStyles.searchHeaderTitle}>
             <h6>
               {icon}
@@ -103,20 +104,19 @@ const ArticlesComponent = ({
           </div>
         </div>
       </div>
-      <div className={cx(searchResultsStyles['search-results-wrapper'], styles.articlesFilters)}>
+      <div className={searchResultsStyles['search-results-top']}>
         <ArticleFilters
           type={type}
           teamSlug={teamSlug}
           filterOptions={filterOptions}
           currentFilters={{ ...filters, article_type: type }}
           statuses={statuses.statuses}
-          className={styles.articleFilterBar}
           onSubmit={handleChangeFilters}
         />
       </div>
-      <div className={cx(searchResultsStyles['search-results-wrapper'], styles.articles)}>
+      <div className={searchResultsStyles['search-results-wrapper']}>
         { articles.length > 0 ?
-          <div className={styles.articlesToolbar}>
+          <div className={searchResultsStyles['search-results-toolbar']}>
             <ListSort
               sort={sort}
               sortType={sortType}
@@ -145,7 +145,7 @@ const ArticlesComponent = ({
           : null
         }
 
-        <div className={styles.articlesList}>
+        <div className={searchResultsStyles['search-results-scroller']}>
           {articles.map((article) => {
             let currentStatus = null;
             if (article.claim_description?.project_media?.status) {
diff --git a/src/app/components/article/Articles.module.css b/src/app/components/article/Articles.module.css
index 6df9b99154..a832fdbc80 100644
--- a/src/app/components/article/Articles.module.css
+++ b/src/app/components/article/Articles.module.css
@@ -1,111 +1,64 @@
-.articles {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: 0 16px;
-  padding-right: 0;
-}
-
-.articlesHeader {
-  margin-bottom: 24px;
-
-  h6 {
-    align-items: center;
-    display: flex;
-  }
-}
-
-.articlesFilters {
-  border: 0;
-  overflow: visible;
-  padding: 16px;
-}
-
-.articlesToolbar {
-  background: var(--color-white-100);
-  display: flex;
-  justify-content: space-between;
-  padding: 16px 0;
-  position: sticky;
-  top: 0;
-  z-index: 0;
-}
-
-.articlesList {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  overflow: auto;
-  padding-bottom: 16px;
-  padding-right: 16px;
-}
-
-.articleFilterBar {
-  margin: 0;
-  padding: 0;
-}
-
 .articlesSidebar {
   padding: 16px;
-}
 
-.articlesSidebarTopBar {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.articlesSidebarNoArticle {
-  border: 2px dashed var(--color-gray-88);
-  color: var(--color-gray-75);
-  font-style: italic;
-  margin: 16px 0 32px;
-  padding: 16px;
-  text-align: center;
-}
+  .articlesSidebarTopBar {
+    display: flex;
+    justify-content: flex-end;
+  }
 
-.articlesSidebarList {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 8px;
-  max-height: 400px;
-  overflow: auto;
-}
+  .articlesSidebarNoArticle {
+    border: 2px dashed var(--color-gray-88);
+    color: var(--color-gray-75);
+    font-style: italic;
+    margin: 16px 0 32px;
+    padding: 16px;
+    text-align: center;
+  }
 
-.articlesSidebarCard {
-  border: 1px solid var(--color-gray-88);
-  border-radius: 5px;
-  cursor: pointer;
-  display: flex;
-  gap: 3px;
-  padding: 6px;
+  .articlesSidebarList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 8px;
+    max-height: 400px;
+    overflow: auto;
+  }
 
-  &:hover {
-    border-color: var(--color-blue-54);
-    border-width: 2px;
-    padding: 5px;
+  .articlesSidebarCard {
+    border: 1px solid var(--color-gray-88);
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    gap: 3px;
+    padding: 6px;
+
+    &:hover {
+      border-color: var(--color-blue-54);
+      border-width: 2px;
+      padding: 5px;
+    }
   }
-}
 
-.articlesSidebarCardIcon {
-  color: var(--color-gray-37);
-  font-size: var(--font-size-subtitle-1);
-}
+  .articlesSidebarCardIcon {
+    color: var(--color-gray-37);
+    font-size: var(--font-size-subtitle-1);
+  }
 
-.articlesSidebarCardTitle {
-  -webkit-box-orient: vertical;
-  color: var(--color-gray-15);
-  display: -webkit-box; /* stylelint-disable-line */
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .articlesSidebarCardTitle {
+    -webkit-box-orient: vertical;
+    color: var(--color-gray-15);
+    display: -webkit-box; /* stylelint-disable-line */
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-.articlesSidebarCardCaption {
-  align-items: center;
-  display: flex;
+  .articlesSidebarCardCaption {
+    align-items: center;
+    display: flex;
 
-  svg {
-    font-size: var(--font-size-base);
+    svg {
+      font-size: var(--font-size-base);
+    }
   }
 }
diff --git a/src/app/components/drawer/Projects/ProjectsListItem.js b/src/app/components/drawer/Projects/ProjectsListItem.js
index 31830d3f7d..abffb28701 100644
--- a/src/app/components/drawer/Projects/ProjectsListItem.js
+++ b/src/app/components/drawer/Projects/ProjectsListItem.js
@@ -88,7 +88,7 @@ ProjectsListItem.propTypes = {
   onClick: PropTypes.func,
   isActive: PropTypes.bool,
   className: PropTypes.string,
-  tooltip: PropTypes.element,
+  tooltip: PropTypes.node,
 };
 
 export default ProjectsListItem;
diff --git a/src/app/components/feed/FeedClusters.js b/src/app/components/feed/FeedClusters.js
index a6b7fbf9f6..fd87cecf85 100644
--- a/src/app/components/feed/FeedClusters.js
+++ b/src/app/components/feed/FeedClusters.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Relay from 'react-relay/classic';
 import { FormattedMessage } from 'react-intl';
 import { QueryRenderer, graphql } from 'react-relay/compat';
-import cx from 'classnames/bind';
 import ClusterCard from '../search/SearchResultsCards/ClusterCard';
 import searchResultsStyles from '../search/SearchResults.module.css';
 <<<<<<< HEAD
@@ -21,7 +20,7 @@ import FeedLastClusterizedAt from './FeedLastClusterizedAt';
 import FeedTopBar from './FeedTopBar';
 import FeedBlankState from './FeedBlankState';
 import FeedFilters from './FeedFilters';
-import styles from './FeedClusters.module.css';
+import searchStyles from '../search/search.module.css';
 import MediasLoading from '../media/MediasLoading';
 
 const pageSize = 50;
@@ -67,7 +66,7 @@ const FeedClustersComponent = ({
 
   return (
     <React.Fragment>
-      <div className={cx(searchResultsStyles['search-results-header'], styles.feedClustersHeader)}>
+      <div className={searchResultsStyles['search-results-header']}>
         <div className={searchResultsStyles.searchResultsTitleWrapper}>
           <div className={searchResultsStyles.searchHeaderSubtitle}>
             <FormattedMessage id="global.sharedFeed" defaultMessage="Shared Feed" description="Generic Label for the shared feed feature which is a collection of check work spaces contributing content to one place" />
@@ -85,7 +84,7 @@ const FeedClustersComponent = ({
           </div>
         </div>
       </div>
-      <div className={cx(searchResultsStyles['search-results-wrapper'], styles.feedClustersFilters)}>
+      <div className={searchResultsStyles['search-results-top']}>
         <FeedTopBar
           team={team}
           feed={feed}
@@ -101,11 +100,11 @@ const FeedClustersComponent = ({
           filterOptions={['channels', 'range', 'linked_items_count', 'show', 'demand']}
           currentFilters={otherFilters}
           feedTeam={{ id: feedTeam.id }}
-          className={styles.feedClustersFilterBar}
+          className={searchStyles['filters-wrapper']}
           disableSave
         />
       </div>
-      <div className={cx(searchResultsStyles['search-results-wrapper'], styles.feedClusters)}>
+      <div className={searchResultsStyles['search-results-wrapper']}>
         { clusters.length > 0 ?
           <div className={styles.feedClustersToolbar}>
             <div className={styles.feedClustersPagination}>
@@ -153,7 +152,7 @@ const FeedClustersComponent = ({
           : null
         }
 
-        <div className={styles.feedClustersList}>
+        <div className={searchResultsStyles['search-results-scroller']}>
           {clusters.map((cluster) => {
             const { media } = cluster.center;
             const channels = cluster.channels.filter(channel => Object.values(CheckChannels.TIPLINE).includes(channel.toString()));
diff --git a/src/app/components/feed/FeedClusters.module.css b/src/app/components/feed/FeedClusters.module.css
index 644ae2b756..7915debd9b 100644
--- a/src/app/components/feed/FeedClusters.module.css
+++ b/src/app/components/feed/FeedClusters.module.css
@@ -1,44 +1,3 @@
-.feedClusters {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: 0 16px;
-  padding-right: 0;
-}
-
-.feedClustersHeader {
-  margin-bottom: 24px;
-}
-
-.feedClustersFilters {
-  border: 0;
-  overflow: visible;
-  padding: 16px;
-}
-
-.feedClustersToolbar {
-  background: var(--color-white-100);
-  display: flex;
-  justify-content: space-between;
-  padding: 16px 0;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.feedClustersFilterBar {
-  margin: 8px 0 0;
-  padding: 0;
-}
-
-.feedClustersList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: auto;
-  padding: 1px 16px 16px 1px;
-}
-
 /* ine- styles can be removed when deprecating the INE style shared feed */
 .feed-cluster-page-twocolumns {
   display: flex;
diff --git a/src/app/components/feed/FeedFilters.js b/src/app/components/feed/FeedFilters.js
index b815cfbea9..86665f3c50 100644
--- a/src/app/components/feed/FeedFilters.js
+++ b/src/app/components/feed/FeedFilters.js
@@ -4,7 +4,6 @@ import { commitMutation, graphql } from 'react-relay/compat';
 import { Store } from 'react-relay/classic';
 import { FormattedMessage, injectIntl, intlShape, defineMessages } from 'react-intl';
 import cx from 'classnames/bind';
-import Divider from '@material-ui/core/Divider';
 import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
 import ListSort, { sortLabels } from '../cds/inputs/ListSort';
 import CheckFeedDataPoints from '../../CheckFeedDataPoints';
@@ -16,7 +15,6 @@ import DateRangeFilter from '../search/DateRangeFilter';
 import MultiSelectFilter from '../search/MultiSelectFilter';
 import SearchFieldChannel from '../search/SearchFields/SearchFieldChannel';
 import { withSetFlashMessage } from '../FlashMessage';
-import styles from '../search/SearchResults.module.css';
 import searchStyles from '../search/search.module.css';
 
 const messages = defineMessages({
@@ -56,7 +54,6 @@ const FeedFilters = ({
   currentFilters,
   feed,
   feedTeam,
-  className,
   disableSave,
   extra,
   intl,
@@ -174,7 +171,7 @@ const FeedFilters = ({
   }
 
   return (
-    <div className={cx(styles['search-results-top'], className)}>
+    <>
       { extra ? <div className={searchStyles['filters-wrapper']}>{extra}</div> : null }
       <div className={searchStyles['filters-wrapper']}>
         <ListSort
@@ -283,35 +280,37 @@ const FeedFilters = ({
           addedFields={Object.keys(filters)}
           onSelect={handleAddFilter}
         />
-        <Divider orientation="vertical" flexItem style={{ margin: '0 8px' }} />
         { Object.keys(filters).length > 0 ?
-          <ButtonMain
-            className="int-search-fields__button--apply-feedfilter"
-            variant="contained"
-            size="default"
-            theme="lightValidation"
-            onClick={handleSubmit}
-            label={
-              <FormattedMessage id="feedFilters.applyFilters" defaultMessage="Apply" description="Button to perform query with specified filters" />
-            }
-            buttonProps={{
-              id: 'search-fields__submit-button',
-            }}
-          /> : null }
-        <ButtonMain
-          className="int-search-fields__button--reset-feedfilter"
-          variant="contained"
-          size="default"
-          theme="lightText"
-          onClick={handleClear}
-          label={
-            <FormattedMessage id="feedFilters.reset" defaultMessage="Reset" description="Tooltip for button to remove any applied filters" />
-          }
-          buttonProps={{
-            id: 'search-fields__clear-button',
-          }}
-        />
-        { !disableSave ?
+          <div className={cx(searchStyles['filters-buttons-wrapper'], searchStyles['filters-buttons-wrapper-visible'])}>
+            <ButtonMain
+              className="int-search-fields__button--apply-feedfilter"
+              variant="contained"
+              size="default"
+              theme="lightValidation"
+              onClick={handleSubmit}
+              label={
+                <FormattedMessage id="feedFilters.applyFilters" defaultMessage="Apply" description="Button to perform query with specified filters" />
+              }
+              buttonProps={{
+                id: 'search-fields__submit-button',
+              }}
+            />
+            <ButtonMain
+              className="int-search-fields__button--reset-feedfilter"
+              variant="contained"
+              size="default"
+              theme="lightText"
+              onClick={handleClear}
+              label={
+                <FormattedMessage id="feedFilters.reset" defaultMessage="Reset" description="Tooltip for button to remove any applied filters" />
+              }
+              buttonProps={{
+                id: 'search-fields__clear-button',
+              }}
+            />
+          </div>
+          : null }
+        { disableSave ?
           <ButtonMain
             variant="contained"
             size="default"
@@ -330,14 +329,13 @@ const FeedFilters = ({
           />
           : null }
       </div>
-    </div>
+    </>
   );
 };
 
 FeedFilters.defaultProps = {
   filterOptions: [],
   currentFilters: {},
-  className: '',
   disableSave: false,
   extra: null,
 };
@@ -350,7 +348,6 @@ FeedFilters.propTypes = {
     requests_filters: PropTypes.object,
   }).isRequired,
   onSubmit: PropTypes.func.isRequired,
-  className: PropTypes.string,
   disableSave: PropTypes.bool,
   extra: PropTypes.node,
   intl: intlShape.isRequired,
diff --git a/src/app/components/feed/FeedTopBar.js b/src/app/components/feed/FeedTopBar.js
index 514b5c31ee..6b8161f649 100644
--- a/src/app/components/feed/FeedTopBar.js
+++ b/src/app/components/feed/FeedTopBar.js
@@ -12,6 +12,7 @@ import ButtonMain from '../cds/buttons-checkboxes-chips/ButtonMain';
 import TeamAvatar from '../team/TeamAvatar';
 import Can from '../Can';
 import styles from './FeedTopBar.module.css';
+import searchResultsStyles from '../search/SearchResults.module.css';
 
 const FeedTopBar = ({
   team,
@@ -147,61 +148,63 @@ const FeedTopBar = ({
   const teamsWithoutCurrentOrg = feed.teams?.edges.filter(feedTeam => feedTeam.node.slug !== team.slug);
 
   return (
-    <div className={styles.feedTopBarContainer}>
-      <div className={`${styles.feedTopBar} feed-top-bar`}>
-        <OrgFilterButton
-          avatar={currentOrg.avatar}
-          slug={currentOrg.slug}
-          dbid={currentOrg.dbid}
-          enabled={teamFilters.includes(currentOrg.dbid)}
-          name={currentOrg.name}
-          current
-        />
-        { teamsWithoutCurrentOrg.map((feedTeam) => {
-          const {
-            avatar,
-            slug,
-            dbid,
-            name,
-          } = feedTeam.node;
-          return (
-            <OrgFilterButton
-              avatar={avatar}
-              slug={slug}
-              dbid={dbid}
-              enabled={teamFilters.includes(dbid)}
-              name={name}
-            />
-          );
-        // sort the remaining items alphabetically per locale
-        }).sort((a, b) => a.props.name.localeCompare(b.props.name))}
-        <Can permissions={feed.permissions} permission="update Feed">
-          <Tooltip
-            placement="top"
-            title={
-              <FormattedMessage
-                id="feedTopBar.addOrg"
-                defaultMessage="Add a collaborating organization"
-                description="Tooltip message displayed on a button that takes the user toa page where they can add an organization to this shared feed with an expectation to collaborate with the organization."
+    <div className={searchResultsStyles['search-results-top-extra']}>
+      <div className={styles.feedTopBarContainer}>
+        <div className={`${styles.feedTopBarLeft} feed-top-bar`}>
+          <OrgFilterButton
+            avatar={currentOrg.avatar}
+            slug={currentOrg.slug}
+            dbid={currentOrg.dbid}
+            enabled={teamFilters.includes(currentOrg.dbid)}
+            name={currentOrg.name}
+            current
+          />
+          { teamsWithoutCurrentOrg.map((feedTeam) => {
+            const {
+              avatar,
+              slug,
+              dbid,
+              name,
+            } = feedTeam.node;
+            return (
+              <OrgFilterButton
+                avatar={avatar}
+                slug={slug}
+                dbid={dbid}
+                enabled={teamFilters.includes(dbid)}
+                name={name}
               />
-            }
-            arrow
-          >
-            <span>{/* Wrapper span is required for the tooltip to a ref for the mui Tooltip */}
-              <ButtonMain iconCenter={<AddIcon />} label="Center" size="small" theme="lightText" onClick={handleClickAdd} />
-            </span>
-          </Tooltip>
-        </Can>
-      </div>
-      <div className={`${styles.feedTopBarRight} feed-top-bar-right`}>
-        { !hideQuickFilterMenu ?
-          <QuickFilterMenu
-            setTeamFilters={setTeamFilters}
-            currentOrg={currentOrg}
-            teamsWithoutCurrentOrg={teamsWithoutCurrentOrg}
-          /> :
-          null
-        }
+            );
+          // sort the remaining items alphabetically per locale
+          }).sort((a, b) => a.props.name.localeCompare(b.props.name))}
+          <Can permissions={feed.permissions} permission="update Feed">
+            <Tooltip
+              placement="top"
+              title={
+                <FormattedMessage
+                  id="feedTopBar.addOrg"
+                  defaultMessage="Add a collaborating organization"
+                  description="Tooltip message displayed on a button that takes the user toa page where they can add an organization to this shared feed with an expectation to collaborate with the organization."
+                />
+              }
+              arrow
+            >
+              <span>{/* Wrapper span is required for the tooltip to a ref for the mui Tooltip */}
+                <ButtonMain iconCenter={<AddIcon />} label="Center" size="small" theme="lightText" onClick={handleClickAdd} />
+              </span>
+            </Tooltip>
+          </Can>
+        </div>
+        <div className={`${styles.feedTopBarRight} feed-top-bar-right`}>
+          { !hideQuickFilterMenu ?
+            <QuickFilterMenu
+              setTeamFilters={setTeamFilters}
+              currentOrg={currentOrg}
+              teamsWithoutCurrentOrg={teamsWithoutCurrentOrg}
+            /> :
+            null
+          }
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/components/feed/FeedTopBar.module.css b/src/app/components/feed/FeedTopBar.module.css
index 175708e8d8..9acbd3286f 100644
--- a/src/app/components/feed/FeedTopBar.module.css
+++ b/src/app/components/feed/FeedTopBar.module.css
@@ -2,95 +2,95 @@
   align-items: center;
   display: grid;
   grid-template-columns: auto 1fr;
-}
-
-.feedTopBar {
-  align-items: center;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 6px;
 
-  .feedTopBarItem {
+  .feedTopBarLeft {
     align-items: center;
-    border: 2px solid var(--color-blue-54);
-    border-radius: 6px;
     display: inline-flex;
+    flex-wrap: wrap;
     gap: 12px;
     padding: 6px;
-  }
 
-  .feedTopBarButton {
-    background-color: transparent;
-    cursor: pointer;
-
-    &:hover:not(:has(*:hover.feedListIcon)) {
-      background-color: var(--color-blue-98);
+    .feedTopBarItem {
+      align-items: center;
+      border: 2px solid var(--color-blue-54);
+      border-radius: 6px;
+      display: inline-flex;
+      gap: 12px;
+      padding: 6px;
     }
-  }
 
-  .feedTopBarButtonDisabled {
-    background-color: transparent;
-    border: 2px solid var(--color-gray-88);
-    cursor: pointer;
+    .feedTopBarButton {
+      background-color: transparent;
+      cursor: pointer;
 
-    &:hover:not(:has(*:hover.feedListIcon)) {
-      background-color: var(--color-gray-88);
-      border: 2px solid var(--color-gray-75);
+      &:hover:not(:has(*:hover.feedListIcon)) {
+        background-color: var(--color-blue-98);
+      }
     }
 
-    .feedListTitle {
-      opacity: .2;
-    }
+    .feedTopBarButtonDisabled {
+      background-color: transparent;
+      border: 2px solid var(--color-gray-88);
+      cursor: pointer;
 
-    .feedListAvatar {
-      opacity: .2;
-    }
-  }
+      &:hover:not(:has(*:hover.feedListIcon)) {
+        background-color: var(--color-gray-88);
+        border: 2px solid var(--color-gray-75);
+      }
 
-  .feedTopBarButtonHasList {
-    padding: 6px 42px 6px 6px;
-  }
+      .feedListTitle {
+        opacity: .2;
+      }
 
-  .feedTopBarCustomListButton {
-    position: absolute;
-    right: 6px;
-    top: 6px;
-  }
+      .feedListAvatar {
+        opacity: .2;
+      }
+    }
 
-  .feedTopBarList {
-    align-items: center;
-    display: flex;
+    .feedTopBarButtonHasList {
+      padding: 6px 42px 6px 6px;
+    }
 
-    .feedListTitle {
-      @mixin text-truncate inline-block;
-      color: var(--color-gray-15);
-      max-width: 250px;
+    .feedTopBarCustomListButton {
+      position: absolute;
+      right: 6px;
+      top: 6px;
     }
 
-    .feedListIcon {
-      background-color: var(--color-gray-96);
-      border-radius: 8px;
-      color: var(--color-gray-37);
-      /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
-      font-size: 16px;
-      margin-left: 8px;
+    .feedTopBarList {
+      align-items: center;
+      display: flex;
 
-      &:hover {
-        background-color: var(--color-gray-88);
+      .feedListTitle {
+        @mixin text-truncate inline-block;
+        color: var(--color-gray-15);
+        max-width: 250px;
+      }
+
+      .feedListIcon {
+        background-color: var(--color-gray-96);
+        border-radius: 8px;
+        color: var(--color-gray-37);
+        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
+        font-size: 16px;
+        margin-left: 8px;
+
+        &:hover {
+          background-color: var(--color-gray-88);
+        }
       }
     }
-  }
 
-  .feedNoListTitle {
-    color: var(--color-gray-75);
-    font-style: italic;
+    .feedNoListTitle {
+      color: var(--color-gray-75);
+      font-style: italic;
+    }
   }
-}
 
-.feedTopBarRight {
-  display: inline-flex;
-  justify-content: flex-end;
+  .feedTopBarRight {
+    display: inline-flex;
+    justify-content: flex-end;
+  }
 }
 
 .quickFilterHeader {
diff --git a/src/app/components/media/CreateMediaInput.js b/src/app/components/media/CreateMediaInput.js
index b4983ca5df..c26bdd1c15 100644
--- a/src/app/components/media/CreateMediaInput.js
+++ b/src/app/components/media/CreateMediaInput.js
@@ -153,10 +153,6 @@ class CreateMediaInput extends React.Component {
   renderFormInput() {
     return (
       <>
-        <div className={inputStyles['form-fieldset-title']}>
-          <FormattedMessage id="createMedia.media.media" defaultMessage="Media" description="Header for the claim media area" />
-        </div>
-
         {
           this.state.mediaFile === null ? (
             <div className={inputStyles['form-fieldset-field']}>
diff --git a/src/app/components/search/SearchResults.module.css b/src/app/components/search/SearchResults.module.css
index 4ef301998a..51291a3f1b 100644
--- a/src/app/components/search/SearchResults.module.css
+++ b/src/app/components/search/SearchResults.module.css
@@ -116,13 +116,14 @@
   .search-results-toolbar {
     align-items: center;
     display: flex;
+    justify-content: space-between;
     margin: 16px;
     min-height: 38px;
 
     .search-results-add-item {
       display: flex;
       flex: 1 1 100%;
-      justify-content: flex-end;
+      justify-content: center;
     }
   }
 
@@ -132,8 +133,15 @@
     display: flex;
     flex: 1 1 auto;
     gap: 16px;
+    justify-content: space-between;
     text-align: center;
 
+    .search-results-bulk-actions {
+      align-items: center;
+      display: flex;
+      gap: 8px;
+    }
+
     .search-selected {
       color: var(--color-blue-54);
       margin: 0 0 0 8px;
diff --git a/src/app/components/search/SearchResultsCards/SearchResultsCards.module.css b/src/app/components/search/SearchResultsCards/SearchResultsCards.module.css
deleted file mode 100644
index 398403692a..0000000000
--- a/src/app/components/search/SearchResultsCards/SearchResultsCards.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.searchResultsCards {
-  background: var(--color-white-100);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: auto;
-  padding: 1px 16px 16px;
-}
diff --git a/src/app/components/search/SearchResultsCards/index.js b/src/app/components/search/SearchResultsCards/index.js
index 75aefcc25b..32c4416f0a 100644
--- a/src/app/components/search/SearchResultsCards/index.js
+++ b/src/app/components/search/SearchResultsCards/index.js
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames/bind';
 import ArticleCard from './ArticleCard';
-import styles from './SearchResultsCards.module.css';
+import searchResultsStyles from '../SearchResults.module.css';
 
 const SearchResultsCards = ({ projectMedias, team }) => (
-  <div className={cx('search-results-cards', styles.searchResultsCards)}>
+  <div className={cx('search-results-cards', searchResultsStyles['search-results-scroller'])}>
     { projectMedias.map((projectMedia) => {
       const values = projectMedia.feed_columns_values;
       const status = team.verification_statuses.statuses.find(s => s.id === values.status) || {};
diff --git a/src/app/components/search/Toolbar.js b/src/app/components/search/Toolbar.js
deleted file mode 100644
index 6f1d004042..0000000000
--- a/src/app/components/search/Toolbar.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
-import cx from 'classnames/bind';
-import CreateProjectMedia from '../media/CreateMedia';
-import Can from '../Can';
-import styles from './SearchResults.module.css';
-
-const Toolbar = ({
-  title,
-  page,
-  team,
-  search,
-  resultType,
-}) => {
-  const perms = { permissions: team.permissions, permission: 'create ProjectMedia' };
-
-  return (
-    <div className={cx(styles['search-results-toolbar'], 'toolbar', `toolbar__${resultType}`)}>
-      {title}
-      { page === 'all-items' ? (
-        <Can {...perms}>
-          <div className={styles['search-results-add-item']}>
-            <CreateProjectMedia search={search} team={team} />
-          </div>
-        </Can>
-      ) : null}
-    </div>
-  );
-};
-
-Toolbar.propTypes = {
-  page: PropTypes.oneOf(['all-items', 'tipline-inbox', 'imported-fact-checks', 'suggested-matches', 'unmatched-media', 'published', 'list', 'feed', 'spam', 'trash', 'assigned-to-me']).isRequired, // FIXME Define listing types as a global constant
-  // FIXME: Define other PropTypes
-};
-
-export default injectIntl(Toolbar);