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
meedan · Jul 22, 2024 · 55bed66 · 55bed66
1 parent d8f4370
commit 55bed66
Show file tree

Hide file tree

Showing 15 changed files with 236 additions and 377 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()));