Merge branch 'main' into fix/change-c2dorders-order

package.json

@@ -25,7 +25,7 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.1.3",
+    "@oceanprotocol/lib": "^1.1.5",
     "@oceanprotocol/typographies": "^0.1.0",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^0.2.5",
@@ -48,10 +48,10 @@
     "myetherwallet-blockies": "^0.1.1",
     "next": "^12.1.6",
     "query-string": "^7.1.1",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "react-chartjs-2": "^4.2.0",
     "react-clipboard.js": "^2.0.16",
-    "react-data-table-component": "^6.11.7",
+    "react-data-table-component": "^7.5.2",
     "react-dom": "^18.1.0",
     "react-dotdotdot": "^1.3.1",
     "react-modal": "^3.15.1",
@@ -67,14 +67,14 @@
     "swr": "^1.3.0",
     "urql": "^2.2.1",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.7.3",
-    "web3modal": "^1.9.7",
+    "web3": "^1.7.4",
+    "web3modal": "^1.9.8",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-storyshots": "^6.5.7",
-    "@storybook/builder-webpack5": "^6.5.7",
+    "@storybook/addon-storyshots": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.7",
     "@storybook/react": "^6.5.7",
     "@storybook/testing-library": "^0.0.11",
@@ -88,7 +88,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.omit": "^4.5.7",
     "@types/node": "^17.0.41",
-    "@types/react": "^18.0.12",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-modal": "^3.13.1",
     "@types/react-paginate": "^7.1.1",
@@ -109,8 +109,8 @@
     "file-loader": "^6.2.0",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",

src/components/@shared/PoolTransactions/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import Time from '@shared/atoms/Time'
-import Table from '@shared/atoms/Table'
+import Table, { TableOceanColumn } from '@shared/atoms/Table'
 import AssetTitle from '@shared/AssetList/AssetListTitle'
 import { useUserPreferences } from '@context/UserPreferences'
 import { gql } from 'urql'
@@ -84,38 +84,30 @@ export interface PoolTransaction extends TransactionHistoryPoolTransactions {
   asset: Asset
 }
 
-const columns = [
+const columns: TableOceanColumn<PoolTransaction>[] = [
   {
     name: 'Title',
-    selector: function getTitleRow(row: PoolTransaction) {
-      return <Title row={row} />
-    }
+    selector: (row) => <Title row={row} />
   },
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: PoolTransaction) {
-      return <AssetTitle asset={row.asset} />
-    }
+    selector: (row) => <AssetTitle asset={row.asset} />
   },
   {
     name: 'Network',
-    selector: function getNetwork(row: PoolTransaction) {
-      return <NetworkName networkId={row.networkId} />
-    },
+    selector: (row) => <NetworkName networkId={row.networkId} />,
     maxWidth: '12rem'
   },
   {
     name: 'Time',
-    selector: function getTimeRow(row: PoolTransaction) {
-      return (
-        <Time
-          className={styles.time}
-          date={row.timestamp.toString()}
-          relative
-          isUnix
-        />
-      )
-    },
+    selector: (row) => (
+      <Time
+        className={styles.time}
+        date={row.timestamp.toString()}
+        relative
+        isUnix
+      />
+    ),
     maxWidth: '10rem'
   }
 ]

src/components/@shared/atoms/Table/Empty.module.css

@@ -0,0 +1,7 @@
+.empty {
+  width: 100%;
+  text-align: left;
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  font-style: italic;
+}

src/components/@shared/atoms/Table/Empty.tsx

@@ -0,0 +1,6 @@
+import React, { ReactElement } from 'react'
+import styles from './Empty.module.css'
+
+export default function Empty({ message }: { message?: string }): ReactElement {
+  return <div className={styles.empty}>{message || 'No results found'}</div>
+}

src/components/@shared/atoms/Table/_styles.ts

@@ -0,0 +1,57 @@
+import { createTheme, TableStyles, Theme } from 'react-data-table-component'
+
+// https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/themes.ts
+const theme: Partial<Theme> = {
+  text: {
+    primary: 'var(--font-color-text)',
+    secondary: 'var(--color-secondary)',
+    disabled: 'var(--color-secondary)'
+  },
+  background: {
+    default: 'transparent'
+  },
+  divider: {
+    default: 'var(--border-color)'
+  },
+  button: {
+    default: 'var(--font-color-text)',
+    focus: 'var(--color-primary)',
+    hover: 'var(--color-primary)',
+    disabled: 'var(--color-secondary)'
+  }
+}
+
+createTheme('ocean', theme)
+
+// https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts
+export const customStyles: TableStyles = {
+  table: {
+    style: {
+      scrollbarWidth: 'thin'
+    }
+  },
+  head: {
+    style: {
+      fontSize: 'var(--font-size-small)',
+      fontWeight: 'var(--font-weight-base)'
+    }
+  },
+  headCells: {
+    style: {
+      textTransform: 'uppercase',
+      color: 'var(--color-secondary)',
+      fontSize: 'var(--font-size-small)'
+    }
+  },
+  cells: {
+    style: {
+      minWidth: '0 !important'
+    }
+  },
+  rows: {
+    style: {
+      fontSize: 'var(--font-size-small)',
+      fontWeight: 'var(--font-weight-base)'
+    }
+  }
+}

src/components/@shared/atoms/Table/index.module.css

@@ -1,82 +0,0 @@
-.table div {
-  background-color: transparent !important;
-}
-
-.table [role='table'],
-.table [role='row'] {
-  color: var(--font-color-text);
-  font-size: var(--font-size-small);
-  min-width: 0;
-}
-
-.table [class~='rdt_TableCol'] {
-  border-bottom: 1px solid var(--border-color);
-}
-
-.table [role='columnheader'] {
-  text-transform: uppercase;
-  font-size: var(--font-size-small);
-}
-
-.table [role='columnheader'] > span,
-.table [role='columnheader'] > div {
-  color: var(--color-secondary);
-}
-
-.table [role='gridcell'] {
-  min-width: 0;
-}
-
-.table [role='row'] {
-  border-bottom: 1px solid var(--border-color) !important;
-}
-
-.table + div [class*='rdt_Pagination'] {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-secondary);
-  background: none;
-  min-height: 0;
-  padding-top: calc(var(--spacer) / 2);
-}
-
-.table + div [class*='rdt_Pagination'] svg {
-  fill: var(--color-secondary);
-}
-
-.table + div [class*='rdt_Pagination'] [disabled] svg {
-  fill: var(--background-highlight);
-}
-
-.table + div [class*='rdt_Pagination'] button:hover:not(:disabled) {
-  background: none;
-}
-
-.table + div [class*='rdt_Pagination'] button:hover:not(:disabled) svg {
-  fill: var(--brand-pink);
-}
-
-.table + div [class*='rdt_Pagination'] button[aria-label='First Page'],
-.table + div [class*='rdt_Pagination'] button[aria-label='Last Page'] {
-  display: none;
-}
-
-.table [class*='Table-module'] {
-  scrollbar-width: thin;
-}
-
-.empty {
-  width: 100%;
-  text-align: left;
-  color: var(--color-secondary);
-  font-size: var(--font-size-small);
-  font-style: italic;
-}
-
-.arrow {
-  composes: arrow from '@shared/Pagination/index.module.css';
-}
-
-.previous {
-  composes: previous from '@shared/Pagination/index.module.css';
-}

src/components/@shared/atoms/Table/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import Table, { TableProps } from '@shared/atoms/Table'
+import Table, { TableOceanProps } from '@shared/atoms/Table'
 
 export default {
   title: 'Component/@shared/atoms/Table',
@@ -10,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />
 
 interface Props {
-  args: TableProps
+  args: TableOceanProps<any>
 }
 
 const columns = [

src/components/@shared/atoms/Table/index.tsx

@@ -1,10 +1,19 @@
-import React, { ReactElement, ReactNode } from 'react'
-import DataTable, { IDataTableProps } from 'react-data-table-component'
+import React, { ReactElement } from 'react'
+import DataTable, { TableProps, TableColumn } from 'react-data-table-component'
 import Loader from '../Loader'
 import Pagination from '@shared/Pagination'
-import styles from './index.module.css'
+import { PaginationComponent } from 'react-data-table-component/dist/src/DataTable/types'
+import Empty from './Empty'
+import { customStyles } from './_styles'
 
-export interface TableProps extends IDataTableProps {
+// Hack in support for returning components for each row, as this works,
+// but is not supported by the typings.
+export interface TableOceanColumn<T> extends TableColumn<T> {
+  selector?: (row: T) => any
+}
+
+export interface TableOceanProps<T> extends TableProps<T> {
+  columns: TableOceanColumn<T>[]
   isLoading?: boolean
   emptyMessage?: string
   sortField?: string
@@ -12,10 +21,6 @@ export interface TableProps extends IDataTableProps {
   className?: string
 }
 
-function Empty({ message }: { message?: string }): ReactElement {
-  return <div className={styles.empty}>{message || 'No results found'}</div>
-}
-
 export default function Table({
   data,
   columns,
@@ -27,22 +32,24 @@ export default function Table({
   sortAsc,
   className,
   ...props
-}: TableProps): ReactElement {
+}: TableOceanProps<any>): ReactElement {
   return (
-    <DataTable
-      columns={columns}
-      data={data}
-      className={className ? styles.table + ` ${className}` : styles.table}
-      noHeader
-      pagination={pagination || data?.length >= 9}
-      paginationPerPage={paginationPerPage || 10}
-      noDataComponent={<Empty message={emptyMessage} />}
-      progressPending={isLoading}
-      progressComponent={<Loader />}
-      paginationComponent={Pagination as unknown as ReactNode}
-      defaultSortField={sortField}
-      defaultSortAsc={sortAsc}
-      {...props}
-    />
+    <div className={className}>
+      <DataTable
+        columns={columns}
+        data={data}
+        pagination={pagination || data?.length >= 9}
+        paginationPerPage={paginationPerPage || 10}
+        noDataComponent={<Empty message={emptyMessage} />}
+        progressPending={isLoading}
+        progressComponent={<Loader />}
+        paginationComponent={Pagination as unknown as PaginationComponent}
+        defaultSortFieldId={sortField}
+        defaultSortAsc={sortAsc}
+        theme="ocean"
+        customStyles={customStyles}
+        {...props}
+      />
+    </div>
   )
 }

src/components/@shared/atoms/Tabs/index.module.css

@@ -10,6 +10,7 @@
   padding: calc(var(--spacer) / 2);
   display: flex;
   overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .tab {

src/components/@shared/atoms/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
 import styles from './index.module.css'
 import InputRadio from '@shared/FormInput/InputRadio'

src/components/Asset/AssetActions/AssetStats/index.module.css

@@ -0,0 +1,26 @@
+.stats {
+  border-top: 1px solid var(--border-color);
+  margin: calc(var(--spacer) / 2) calc(var(--spacer) / -2)
+    calc(var(--spacer) / -5) calc(var(--spacer) / -2);
+  margin-top: calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 3);
+  padding-bottom: 0;
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  text-align: center;
+}
+
+@media (min-width: 40rem) {
+  .stats {
+    margin-bottom: calc(var(--spacer) / -1.5);
+    margin-left: calc(var(--spacer) / -1);
+    margin-right: calc(var(--spacer) / -1);
+    padding-left: var(--spacer);
+    padding-right: var(--spacer);
+  }
+}
+
+.number {
+  font-weight: var(--font-weight-bold);
+  color: var(--font-color-heading);
+}

src/components/Asset/AssetActions/AssetStats/index.tsx

@@ -0,0 +1,20 @@
+import { useAsset } from '@context/Asset'
+import React from 'react'
+import styles from './index.module.css'
+
+export default function AssetStats() {
+  const { asset } = useAsset()
+
+  return (
+    <footer className={styles.stats}>
+      {!asset || !asset?.stats || asset?.stats?.orders === 0 ? (
+        'No sales yet'
+      ) : (
+        <>
+          <span className={styles.number}>{asset.stats.orders}</span> sale
+          {asset.stats.orders === 1 ? '' : 's'}
+        </>
+      )}
+    </footer>
+  )
+}

src/components/Asset/AssetActions/Pool/Add/index.tsx

@@ -17,6 +17,7 @@ import { calcMaxExactIn, LoggerInstance, Pool } from '@oceanprotocol/lib'
 import { usePool } from '@context/Pool'
 import { MAX_DECIMALS } from '@utils/constants'
 import { getMaxDecimalsValidation } from '@utils/numbers'
+import Decimal from 'decimal.js'
 
 export interface FormAddLiquidity {
   amount: number
@@ -81,11 +82,11 @@ export default function Add({
         )
 
         const amountMaxPool = calcMaxExactIn(poolReserve)
-        const amountMax =
-          Number(balance.ocean) > Number(amountMaxPool)
-            ? amountMaxPool
-            : balance.ocean
-        setAmountMax(Number(amountMax).toFixed(3))
+        const oceanDecimal = new Decimal(balance.ocean)
+        const amountMax = oceanDecimal.greaterThan(amountMaxPool)
+          ? amountMaxPool
+          : oceanDecimal
+        setAmountMax(amountMax.toFixed(3, Decimal.ROUND_DOWN))
       } catch (error) {
         LoggerInstance.error(error.message)
       }

src/components/Asset/AssetActions/index.tsx

@@ -18,6 +18,7 @@ import { useFormikContext } from 'formik'
 import { FormPublishData } from 'src/components/Publish/_types'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import PoolProvider from '@context/Pool'
+import AssetStats from './AssetStats'
 
 export default function AssetActions({
   asset
@@ -111,21 +112,26 @@ export default function AssetActions({
     }
   }, [balance, accountId, asset?.accessDetails, dtBalance])
 
-  const UseContent = isCompute ? (
-    <Compute
-      asset={asset}
-      dtBalance={dtBalance}
-      file={fileMetadata}
-      fileIsLoading={fileIsLoading}
-    />
-  ) : (
-    <Consume
-      asset={asset}
-      dtBalance={dtBalance}
-      isBalanceSufficient={isBalanceSufficient}
-      file={fileMetadata}
-      fileIsLoading={fileIsLoading}
-    />
+  const UseContent = (
+    <>
+      {isCompute ? (
+        <Compute
+          asset={asset}
+          dtBalance={dtBalance}
+          file={fileMetadata}
+          fileIsLoading={fileIsLoading}
+        />
+      ) : (
+        <Consume
+          asset={asset}
+          dtBalance={dtBalance}
+          isBalanceSufficient={isBalanceSufficient}
+          file={fileMetadata}
+          fileIsLoading={fileIsLoading}
+        />
+      )}
+      <AssetStats />
+    </>
   )
 
   const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]

src/components/Home/Bookmarks.tsx

@@ -1,6 +1,6 @@
 import { useUserPreferences } from '@context/UserPreferences'
 import React, { ReactElement, useEffect, useState } from 'react'
-import Table from '@shared/atoms/Table'
+import Table, { TableOceanColumn } from '@shared/atoms/Table'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import Price from '@shared/Price'
 import Tooltip from '@shared/atoms/Tooltip'
@@ -12,10 +12,10 @@ import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
 import { useWeb3 } from '@context/Web3'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
-const columns = [
+const columns: TableOceanColumn<AssetExtended>[] = [
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: AssetExtended) {
+    selector: (row) => {
       const { metadata } = row
       return <AssetTitle title={metadata.name} asset={row} />
     },
@@ -24,20 +24,16 @@ const columns = [
   },
   {
     name: 'Datatoken Symbol',
-    selector: function getAssetRow(row: AssetExtended) {
-      return (
-        <Tooltip content={row.datatokens[0].name}>
-          <>{row.datatokens[0].symbol}</>
-        </Tooltip>
-      )
-    },
+    selector: (row) => (
+      <Tooltip content={row.datatokens[0].name}>
+        <>{row.datatokens[0].symbol}</>
+      </Tooltip>
+    ),
     maxWidth: '10rem'
   },
   {
     name: 'Price',
-    selector: function getAssetRow(row: AssetExtended) {
-      return <Price accessDetails={row.accessDetails} size="small" />
-    },
+    selector: (row) => <Price accessDetails={row.accessDetails} size="small" />,
     right: true
   }
 ]

src/components/Profile/History/ComputeJobs/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState, useCallback } from 'react'
 import Time from '@shared/atoms/Time'
 import { LoggerInstance } from '@oceanprotocol/lib'
-import Table from '@shared/atoms/Table'
+import Table, { TableOceanColumn } from '@shared/atoms/Table'
 import Button from '@shared/atoms/Button'
 import { useWeb3 } from '@context/Web3'
 import Details from './Details'
@@ -19,46 +19,33 @@ export function Status({ children }: { children: string }): ReactElement {
   return <div className={styles.status}>{children}</div>
 }
 
-const columns = [
+const columns: TableOceanColumn<ComputeJobMetaData>[] = [
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: ComputeJobMetaData) {
-      return <AssetListTitle did={row.inputDID[0]} title={row.assetName} />
-    }
+    selector: (row) => (
+      <AssetListTitle did={row.inputDID[0]} title={row.assetName} />
+    )
   },
   {
     name: 'Network',
-    selector: function getNetwork(row: ComputeJobMetaData) {
-      return <NetworkName networkId={row.networkId} />
-    }
+    selector: (row) => <NetworkName networkId={row.networkId} />
   },
   {
     name: 'Created',
-    selector: function getTimeRow(row: ComputeJobMetaData) {
-      return <Time date={row.dateCreated} isUnix relative />
-    }
+    selector: (row) => <Time date={row.dateCreated} isUnix relative />
   },
   {
     name: 'Finished',
-    selector: function getTimeRow(row: ComputeJobMetaData) {
-      return row.dateFinished ? (
-        <Time date={row.dateFinished} isUnix relative />
-      ) : (
-        ''
-      )
-    }
+    selector: (row) =>
+      row.dateFinished ? <Time date={row.dateFinished} isUnix relative /> : ''
   },
   {
     name: 'Status',
-    selector: function getStatus(row: ComputeJobMetaData) {
-      return <Status>{row.statusText}</Status>
-    }
+    selector: (row) => <Status>{row.statusText}</Status>
   },
   {
     name: 'Actions',
-    selector: function getActions(row: ComputeJobMetaData) {
-      return <Details job={row} />
-    }
+    selector: (row) => <Details job={row} />
   }
 ]
 
@@ -125,7 +112,7 @@ export default function ComputeJobs({
         columns={minimal ? columnsMinimal : columns}
         data={jobs}
         isLoading={isLoading}
-        defaultSortField="row.dateCreated"
+        defaultSortFieldId="row.dateCreated"
         defaultSortAsc={false}
         emptyMessage={chainIds.length === 0 ? 'No network selected' : null}
       />

src/components/Profile/History/Downloads.tsx

@@ -1,34 +1,27 @@
 import React, { ReactElement } from 'react'
-import Table from '@shared/atoms/Table'
+import Table, { TableOceanColumn } from '@shared/atoms/Table'
 import Time from '@shared/atoms/Time'
 import AssetTitle from '@shared/AssetList/AssetListTitle'
 import NetworkName from '@shared/NetworkName'
 import { useProfile } from '@context/Profile'
 import { useUserPreferences } from '@context/UserPreferences'
-const columns = [
+
+const columns: TableOceanColumn<DownloadedAsset>[] = [
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: DownloadedAsset) {
-      return <AssetTitle asset={row.asset} />
-    }
+    selector: (row) => <AssetTitle asset={row.asset} />
   },
   {
     name: 'Network',
-    selector: function getNetwork(row: DownloadedAsset) {
-      return <NetworkName networkId={row.networkId} />
-    }
+    selector: (row) => <NetworkName networkId={row.networkId} />
   },
   {
     name: 'Datatoken',
-    selector: function getTitleRow(row: DownloadedAsset) {
-      return row.dtSymbol
-    }
+    selector: (row) => row.dtSymbol
   },
   {
     name: 'Time',
-    selector: function getTimeRow(row: DownloadedAsset) {
-      return <Time date={row.timestamp.toString()} relative isUnix />
-    }
+    selector: (row) => <Time date={row.timestamp.toString()} relative isUnix />
   }
 ]
 

src/components/Profile/History/PoolShares/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
-import Table from '@shared/atoms/Table'
+import Table, { TableOceanColumn } from '@shared/atoms/Table'
 import styles from './index.module.css'
 import AssetTitle from '@shared/AssetList/AssetListTitle'
 import { PoolShares_poolShares as PoolShare } from '../../../../@types/subgraph/PoolShares'
@@ -23,32 +23,24 @@ export interface AssetPoolShare {
   asset: Asset
 }
 
-const columns = [
+const columns: TableOceanColumn<AssetPoolShare>[] = [
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: AssetPoolShare) {
-      return <AssetTitle asset={row.asset} />
-    },
+    selector: (row) => <AssetTitle asset={row.asset} />,
     grow: 2
   },
   {
     name: 'Network',
-    selector: function getNetwork(row: AssetPoolShare) {
-      return <NetworkName networkId={row.networkId} />
-    }
+    selector: (row) => <NetworkName networkId={row.networkId} />
   },
   {
     name: 'Your liquidity',
-    selector: function getAssetRow(row: AssetPoolShare) {
-      return <Liquidity row={row} type="user" />
-    },
+    selector: (row) => <Liquidity row={row} type="user" />,
     right: true
   },
   {
     name: 'Total Value Locked',
-    selector: function getAssetRow(row: AssetPoolShare) {
-      return <Liquidity row={row} type="pool" />
-    },
+    selector: (row) => <Liquidity row={row} type="pool" />,
     right: true
   }
 ]

src/components/Profile/History/index.module.css

@@ -34,6 +34,7 @@
 
 .tabs div[class*='tabContent'] {
   border: 1px solid var(--border-color);
+  border-top: 0;
   padding-bottom: 0;
 }