published spacing tweaks, search filters renaming

src/components/atoms/Copy.module.css

@@ -29,7 +29,7 @@
   content: 'Copied!';
   position: absolute;
   top: -150%;
-  left: -100%;
+  left: -140%;
   font-size: var(--font-size-mini);
   color: var(--brand-alert-green);
 }

src/components/pages/Profile/History/PublishedList.module.css

@@ -0,0 +1,7 @@
+.filters {
+  margin-top: -1rem;
+}
+
+.assets {
+  margin-top: calc(var(--spacer) / 3);
+}

src/components/pages/Profile/History/PublishedList.tsx

@@ -7,9 +7,10 @@ import {
   queryMetadata,
   transformChainIdsListToQuery
 } from '../../../../utils/aquarius'
-import ServiceFilter from '../../../templates/Search/filterService'
+import Filters from '../../../templates/Search/Filters'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
+import styles from './PublishedList.module.css'
 
 export default function PublishedList({
   accountId
@@ -57,11 +58,12 @@ export default function PublishedList({
   }, [accountId, page, appConfig.metadataCacheUri, chainIds, service])
 
   return accountId ? (
-    <div>
-      <ServiceFilter
+    <>
+      <Filters
         serviceType={service}
         setServiceType={setServiceType}
         isSearch={false}
+        className={styles.filters}
       />
       <AssetList
         assets={queryResult?.results}
@@ -72,8 +74,9 @@ export default function PublishedList({
         onPageChange={(newPage) => {
           setPage(newPage)
         }}
+        className={styles.assets}
       />
-    </div>
+    </>
   ) : (
     <div>Please connect your Web3 wallet.</div>
   )

src/components/templates/Search/Filters.module.css

@@ -43,10 +43,6 @@ button.filter,
   color: var(--background-body);
 }
 
-.filterList:first-of-type {
-  margin-bottom: calc(var(--spacer) / 6);
-}
-
 .showClear:hover {
   display: inline-flex;
   color: var(--color-primary);

src/components/templates/Search/Filters.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement, useState } from 'react'
 import { useNavigate } from '@reach/router'
-import styles from './filterService.module.css'
 import classNames from 'classnames/bind'
 import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
 import Button from '../../atoms/Button'
+import styles from './Filters.module.css'
 
 const cx = classNames.bind(styles)
 
@@ -14,14 +14,16 @@ const serviceFilterItems = [
   { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
-export default function FilterPrice({
+export default function Filters({
   serviceType,
   setServiceType,
-  isSearch
+  isSearch,
+  className
 }: {
   serviceType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
   isSearch: boolean
+  className?: string
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
@@ -72,11 +74,17 @@ export default function FilterPrice({
     }
   }
 
+  const styleClasses = cx({
+    filterList: true,
+    [className]: className
+  })
+
   return (
-    <div className={styles.filterList}>
+    <div className={styleClasses}>
       {serviceFilterItems.map((e, index) => {
         const isServiceSelected =
           e.value === serviceType || serviceSelections.includes(e.value)
+
         const selectFilter = cx({
           [styles.selected]: isServiceSelected,
           [styles.filter]: true

src/components/templates/Search/index.tsx

@@ -2,15 +2,15 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import Permission from '../../organisms/Permission'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import AssetList from '../../organisms/AssetList'
-import styles from './index.module.css'
 import queryString from 'query-string'
-import ServiceFilter from './filterService'
+import Filters from './Filters'
 import Sort from './sort'
 import { getResults } from './utils'
 import { navigate } from 'gatsby'
 import { updateQueryStringParameter } from '../../../utils'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import styles from './index.module.css'
 
 export default function SearchPage({
   location,
@@ -72,7 +72,7 @@ export default function SearchPage({
       <>
         <div className={styles.search}>
           <div className={styles.row}>
-            <ServiceFilter
+            <Filters
               serviceType={service}
               setServiceType={setServiceType}
               isSearch