[WV-192] replace SearchBar to SearchBar2024 accross webapp

src/js/components/Friends/AskFriendsModal.jsx

@@ -10,7 +10,7 @@ import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import FriendList from './FriendList';
 import FriendActions from '../../actions/FriendActions';
 import apiCalming from '../../common/utils/apiCalming';
@@ -22,6 +22,7 @@ import { ModalTitleType1 } from '../Style/ModalType1Styles';
 import BallotStore from '../../stores/BallotStore';
 import FriendStore from '../../stores/FriendStore';
 import sortFriendListByMutualFriends from '../../utils/friendFunctions';
+import NoSearchResult from '../Search/NoSearchResult';
 
 const MessageToFriendInputField = React.lazy(() => import(/* webpackChunkName: 'MessageToFriendInputField' */ './MessageToFriendInputField'));
 const SuggestedContacts = React.lazy(() => import(/* webpackChunkName: 'SuggestedContacts' */ './SuggestedContacts'));
@@ -226,7 +227,7 @@ class AskFriendsModal extends Component {
           <div className="full-width">
             {totalCurrentFriendListCount > 10 && (
               <>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   searchButton
                   placeholder="Search by name"
@@ -239,11 +240,10 @@ class AskFriendsModal extends Component {
             )}
             <FriendListExternalWrapper>
               { (searchFilterOn && currentFriendList.length === 0) && (
-                <p>
-                  &quot;
-                  {searchTerm}
-                  &quot; not found
-                </p>
+              <NoSearchResult
+                title="No results found."
+                subtitle="Please double check and try again."
+              />
               )}
               <FriendList
                 electionDateInFutureFormatted={electionDateInFutureFormatted}

src/js/components/Friends/SuggestedContactListWithController.jsx

@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import SuggestedContactList from './SuggestedContactList';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import VoterActions from '../../actions/VoterActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { renderLog } from '../../common/utils/logging';
@@ -269,7 +269,7 @@ class SuggestedContactListWithController extends React.Component {
             )}
             {voterContactEmailListCount > 10 && (
               <>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   searchButton
                   placeholder="Search by name, email, city or state code"

src/js/components/Organization/OrganizationList.jsx

@@ -4,10 +4,10 @@ import React, { Component, Suspense } from 'react';
 import { renderLog } from '../../common/utils/logging';
 import EndorsementCard from '../Widgets/EndorsementCard';
 import OrganizationDisplayForList from './OrganizationDisplayForList';
+import NoSearchResult from '../Search/NoSearchResult';
 
 const ShowMoreItems = React.lazy(() => import(/* webpackChunkName: 'ShowMoreItems' */ '../Widgets/ShowMoreItems'));
 
-
 class OrganizationList extends Component {
   constructor (props) {
     super(props);
@@ -21,7 +21,6 @@ class OrganizationList extends Component {
   }
 
   componentDidMount () {
-    // console.log('OrganizationList componentDidMount');
     this.onOrganizationListChange();
     window.addEventListener('scroll', this.onScroll);
   }
@@ -44,6 +43,7 @@ class OrganizationList extends Component {
   onOrganizationListChange = () => {
     const { incomingOrganizationList } = this.props;
     const organizationListToDisplay = this.sortOrganizations(incomingOrganizationList);
+
     let organizationListToDisplayCount = 0;
     if (organizationListToDisplay) {
       organizationListToDisplayCount = organizationListToDisplay.length;
@@ -116,24 +116,23 @@ class OrganizationList extends Component {
       return null;
     }
 
-    // console.log('OrganizationList organizationListToDisplay: ', organizationListToDisplayCount, organizationListToDisplayCount, loadingMoreItems);
     let numberOfItemsDisplayed = 0;
-    if (!organizationListToDisplay) {
+
+    if (!(organizationListToDisplayCount)) {
       return (
-        <div className="guidelist">
-          <div className="u-flex u-flex-column u-items-center">
-            <div className="u-margin-top--sm u-stack--sm u-no-break">
-              No results found.
-            </div>
-            <EndorsementCard
+        <NoSearchResultWrapper>
+          <NoSearchResult
+            title="No results found."
+            subtitle="Don't see an organization you want to follow?"
+          />
+          <EndorsementCard
               className="btn endorsement-btn btn-sm"
               bsPrefix="u-margin-top--sm u-stack--xs"
               variant="primary"
-              buttonText="Organization Missing?"
-              text="Don't see an organization you want to follow?"
-            />
-          </div>
-        </div>
+              buttonText="Endorse organization"
+              text=""
+          />
+        </NoSearchResultWrapper>
       );
     }
     return (
@@ -147,7 +146,6 @@ class OrganizationList extends Component {
                 }
                 numberOfItemsDisplayed += 1;
               }
-              // console.log('OrganizationList render organization:', organization);
               return (
                 <OrganizationDisplayForList
                   key={organization.organization_we_vote_id}
@@ -177,6 +175,7 @@ class OrganizationList extends Component {
     );
   }
 }
+
 OrganizationList.propTypes = {
   hideShowMoreItems: PropTypes.bool,
   incomingOrganizationList: PropTypes.array,
@@ -187,4 +186,10 @@ OrganizationList.propTypes = {
 const ShowMoreItemsWrapper = styled('div')`
 `;
 
+const NoSearchResultWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 export default (OrganizationList);

src/js/components/Search/NoSearchResult.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../common/components/Style/Colors';
+
+class NoSearchResult extends React.Component {
+  render () {
+    return (
+      <NoSearchResultWrapper>
+        {this.props.title}
+        <p>
+          {this.props.subtitle}
+        </p>
+      </NoSearchResultWrapper>
+    );
+  }
+}
+
+const NoSearchResultWrapper = styled.div`
+  margin-top: 70px;
+  color: ${colors.darkGrey};
+  text-align: center;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: normal;
+
+p{
+  margin-top: 10px;
+  color: ${colors.darkGrey};
+  text-align: center;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+}
+`;
+
+NoSearchResult.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+};
+
+export default NoSearchResult;

src/js/components/Search/SearchGuidesToFollowBox.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import VoterGuideActions from '../../actions/VoterGuideActions';
 import VoterStore from '../../stores/VoterStore';
 import { renderLog } from '../../common/utils/logging';
-import SearchBar from './SearchBar';
+import SearchBar2024 from './SearchBar2024';
 
 export default class SearchGuidesToFollowBox extends Component {
   constructor (props) {
@@ -37,7 +37,7 @@ export default class SearchGuidesToFollowBox extends Component {
   render () {
     renderLog('SearchGuidesToFollowBox');  // Set LOG_RENDER_EVENTS to log all renders
     return (
-      <SearchBar
+      <SearchBar2024
         clearButton
         searchButton
         placeholder="Search by name or Twitter handle"

src/js/components/Settings/VoterGuideListSearchResults.jsx

@@ -7,7 +7,7 @@ import { SearchTitle } from '../../common/components/Style/FilterStyles';
 import { renderLog } from '../../common/utils/logging';
 import BallotStore from '../../stores/BallotStore';
 import voterGuideSearchPriority from '../../utils/voterGuideSearchPriority';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import BallotItemForAddPositions from './BallotItemForAddPositions';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../../common/components/Widgets/DelayedLoad'));
@@ -164,7 +164,7 @@ class VoterGuideListSearchResults extends Component {
       <div className="ballot_search">
         <div>
           <div className="u-padding-bottom--sm">
-            <SearchBar
+            <SearchBar2024
               clearButton
               clearFunction={this.clearFunction}
               clearSearchTextNow={clearSearchTextNow}

src/js/components/VoterGuide/VoterGuideFollowers.jsx

@@ -10,7 +10,7 @@ import VoterGuideStore from '../../stores/VoterGuideStore';
 import VoterStore from '../../stores/VoterStore';
 import { renderLog } from '../../common/utils/logging';
 import LoadingWheel from '../../common/components/Widgets/LoadingWheel';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import { PageContentContainer } from '../Style/pageLayoutStyles';
 import GuideList from './GuideList';
 
@@ -199,11 +199,9 @@ class VoterGuideFollowers extends Component {
                     </DelayedLoad>
                   </Suspense>
                 )}
-              {/* ********** */}
-              {/* Search Box */}
               {voterGuideFollowersList && voterGuideFollowersList.length > 0 && (
                 <SearchInputWrapper>
-                  <SearchBar
+                  <SearchBar2024
                     clearButton
                     clearFunction={this.clearSearchBarFunction}
                     placeholder="Search these followers"
@@ -213,8 +211,6 @@ class VoterGuideFollowers extends Component {
                   />
                 </SearchInputWrapper>
               )}
-              {/* ***************** */}
-              {/* Results Not Found */}
               {(searchTerm && (voterGuideFollowersListFilteredBySearch && voterGuideFollowersListFilteredBySearch.length === 0)) && (
                 <SearchResultsWrapper>
                   &quot;

src/js/components/VoterGuide/VoterGuideFollowing.jsx

@@ -12,7 +12,7 @@ import { renderLog } from '../../common/utils/logging';
 import OrganizationStore from '../../stores/OrganizationStore';
 import VoterGuideStore from '../../stores/VoterGuideStore';
 import VoterStore from '../../stores/VoterStore';
-import SearchBar from '../Search/SearchBar';
+import SearchBar2024 from '../Search/SearchBar2024';
 import GuideList from './GuideList';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../../common/components/Widgets/DelayedLoad'));
@@ -239,7 +239,7 @@ class VoterGuideFollowing extends Component {
             {/* Search Box */}
             {voterGuideFollowedList && voterGuideFollowedList.length > 0 && (
               <SearchInputWrapper>
-                <SearchBar
+                <SearchBar2024
                   clearButton
                   clearFunction={this.clearSearchBarFunction}
                   placeholder="Search these voter guides"

src/js/components/VoterGuide/VoterGuidePositionList.jsx

@@ -12,10 +12,10 @@ import apiCalming from '../../common/utils/apiCalming';
 import arrayContains from '../../common/utils/arrayContains';
 import { getTodayAsInteger } from '../../common/utils/dateFormat';
 import { renderLog } from '../../common/utils/logging';
-import SearchBar from '../Search/SearchBar';
 import FriendStore from '../../stores/FriendStore';
 import OrganizationStore from '../../stores/OrganizationStore';
 import NumberOfItemsFound from '../Widgets/NumberOfItemsFound';
+import SearchBar2024 from '../Search/SearchBar2024';
 
 const ShowMoreItems = React.lazy(() => import(/* webpackChunkName: 'ShowMoreItems' */ '../Widgets/ShowMoreItems'));
 const VoterGuidePositionItem = React.lazy(() => import(/* webpackChunkName: 'VoterGuidePositionItem' */ './VoterGuidePositionItem'));
@@ -466,7 +466,7 @@ class VoterGuidePositionList extends Component {
           )}
           {((positionList && (positionList.length > 10)) || isSearching) && (
             <SearchBarWrapper>
-              <SearchBar
+              <SearchBar2024
                 clearButton
                 searchButton
                 placeholder="Search by name, office or state"