Not found directory (#136)

packages/DApp/src/components/SearchEmpty.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Colors } from '../constants/styles'
+
+export function SearchEmpty() {
+  return (
+    <SearchEmptyWrap>
+      <p>🔎</p>
+      <span>Vote not found</span>
+    </SearchEmptyWrap>
+  )
+}
+
+export const SearchEmptyWrap = styled.div`
+  padding: 0 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 90px;
+  background: ${Colors.White};
+  font-size: 22px;
+  line-height: 38px;
+  z-index: 99;
+
+  & > p {
+    font-weight: bold;
+    font-size: 64px;
+    line-height: 64%;
+    margin-bottom: 24px;
+  }
+`

packages/DApp/src/components/directory/DirectoryCards.tsx

@@ -14,6 +14,7 @@ import { useDirectoryCommunities } from '../../hooks/useDirectoryCommunities'
 import { useContracts } from '../../hooks/useContracts'
 import { useContractCall } from '@usedapp/core'
 import { votingFromRoom } from '../../helpers/voting'
+import { SearchEmpty } from '../SearchEmpty'
 
 interface DirectoryCardProps {
   community: CommunityDetail
@@ -108,7 +109,7 @@ export function DirectoryCards() {
             return <DirectoryCardSkeleton key={idx} />
           }
         })}
-        {communities.length === 0 && <div>No Communities in Directory</div>}
+        {communities.length === 0 && <SearchEmpty />}
       </Voting>
     </>
   )

packages/DApp/src/components/votes/VotingCards.tsx

@@ -11,6 +11,7 @@ import { VotingSortingOptions } from '../../constants/SortingOptions'
 import { VotingCardSkeleton } from './VotingCardSkeleton'
 import { useVotingCommunities } from '../../hooks/useVotingCommunities'
 import { VotingEmpty } from './VotingEmpty'
+import { SearchEmpty } from '../SearchEmpty'
 
 export function VotingCards() {
   const [sortedBy, setSortedBy] = useState(VotingSortingEnum.EndingSoonest)
@@ -54,12 +55,7 @@ export function VotingCards() {
         }
       })}
       {roomsToShow.length === 0 && empty && <VotingEmpty />}
-      {roomsToShow.length === 0 && !empty && (
-        <SearchEmpty>
-          <p>🔎</p>
-          <span>Vote not found</span>
-        </SearchEmpty>
-      )}
+      {roomsToShow.length === 0 && !empty && <SearchEmpty />}
     </div>
   )
 }
@@ -111,24 +107,3 @@ const VoteType = styled(ButtonPrimary)`
     color: ${Colors.VioletDark};
   }
 `
-
-const SearchEmpty = styled.div`
-  padding: 0 32px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  margin-top: 90px;
-  background: ${Colors.White};
-  font-size: 22px;
-  line-height: 38px;
-  z-index: 99;
-
-  & > p {
-    font-weight: bold;
-    font-size: 64px;
-    line-height: 64%;
-    margin-bottom: 24px;
-  }
-`