feat: [ListV2] Dropdown and Modal Polish (#5990)

* update market dropdown border and shadow

* duration modal polish

* update twitter button text color

* reduce height of durection switcher

* NFT-1074 update approval modal text styling

---------
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/graphql/data/__generated__/types-and-hooks.ts

@@ -41,7 +41,6 @@ export enum ActivityType {
   Send = 'SEND',
   Stake = 'STAKE',
   Swap = 'SWAP',
-  Swapx = 'SWAPX',
   Staking = 'Staking',
   Unknown = 'UNKNOWN',
   Unstake = 'UNSTAKE',
@@ -83,8 +82,7 @@ export enum Chain {
   Ethereum = 'ETHEREUM',
   EthereumGoerli = 'ETHEREUM_GOERLI',
   Optimism = 'OPTIMISM',
-  Polygon = 'POLYGON',
-  UnknownChain = 'UNKNOWN_CHAIN'
+  Polygon = 'POLYGON'
 }
 
 export type ContractInput = {
@@ -633,12 +631,9 @@ export type QueryNftBalancesArgs = {
   after?: InputMaybe<Scalars['String']>;
   before?: InputMaybe<Scalars['String']>;
   chain?: InputMaybe<Chain>;
-  cursor?: InputMaybe<Scalars['String']>;
-  datasource?: InputMaybe<DatasourceProvider>;
   filter?: InputMaybe<NftBalancesFilterInput>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
-  limit?: InputMaybe<Scalars['Int']>;
   ownerAddress: Scalars['String'];
 };
 

src/nft/components/profile/list/Modal/ListModalSection.tsx

@@ -74,6 +74,14 @@ export const ListModalSection = ({ sectionType, active, content, toggleSection }
   const removeAssetMarketplace = useSellAsset((state) => state.removeAssetMarketplace)
   const allContentApproved = useMemo(() => !content.some((row) => row.status !== ListingStatus.APPROVED), [content])
   const isCollectionApprovalSection = sectionType === Section.APPROVE
+  const uniqueCollections = useMemo(() => {
+    if (isCollectionApprovalSection) {
+      const collections = content.map((collection) => (collection as CollectionRow).collectionAddress)
+      const uniqueCollections = [...new Set(collections)]
+      return uniqueCollections.length
+    }
+    return undefined
+  }, [content, isCollectionApprovalSection])
   const removeRow = (row: AssetRow) => {
     // collections
     if (isCollectionApprovalSection) {
@@ -100,13 +108,13 @@ export const ListModalSection = ({ sectionType, active, content, toggleSection }
           <SectionTitle active={active} marginLeft="12px" approved={allContentApproved}>
             {isCollectionApprovalSection ? (
               <>
-                <Trans>Approve</Trans>&nbsp;{content.length}&nbsp;
-                <Plural value={content.length} _1="Collection" other="Collections" />
+                <Trans>Approve</Trans>&nbsp;
+                <Plural value={uniqueCollections} _1="collection" other="collections" />
               </>
             ) : (
               <>
                 <Trans>Sign</Trans> &nbsp;{content.length}&nbsp;{' '}
-                <Plural value={content.length} _1="Listing" other="Listings" />
+                <Plural value={content.length} _1="listing" other="listings" />
               </>
             )}
           </SectionTitle>

src/nft/components/profile/list/Modal/SuccessScreen.tsx

@@ -63,7 +63,7 @@ const ReturnButton = styled.button`
 
 const TweetButton = styled.a`
   background-color: ${({ theme }) => theme.accentAction};
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.accentTextLightPrimary};
   text-decoration: none;
   ${buttonStyle}
 `
@@ -119,7 +119,7 @@ export const SuccessScreen = ({ overlayClick }: { overlayClick: () => void }) =>
         </ReturnButton>
         <TweetButton href={generateTweetForList(sellAssets)} target="_blank" rel="noreferrer">
           <TweetRow>
-            <Twitter height={20} width={20} color={theme.textPrimary} fill={theme.textPrimary} />
+            <Twitter height={20} width={20} color={theme.accentTextLightPrimary} fill={theme.accentTextLightPrimary} />
             <Trans>Share on Twitter</Trans>
           </TweetRow>
         </TweetButton>

src/nft/components/profile/list/SelectMarketplacesDropdown.tsx

@@ -132,6 +132,8 @@ const DropdownWrapper = styled(Column)<{ isOpen: boolean }>`
   border-radius: 12px;
   gap: 12px;
   z-index: ${Z_INDEX.modalBackdrop};
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  border: 0.5px solid ${({ theme }) => theme.backgroundOutline};
 `
 
 export const SelectMarketplacesDropdown = ({

src/nft/components/profile/list/SetDurationModal.tsx

@@ -3,7 +3,7 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import ms from 'ms.macro'
 import { Column, Row } from 'nft/components/Flex'
 import { NumericInput } from 'nft/components/layout/Input'
-import { bodySmall, caption } from 'nft/css/common.css'
+import { body, caption } from 'nft/css/common.css'
 import { useSellAsset } from 'nft/hooks'
 import { DropDownOption } from 'nft/types'
 import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
@@ -19,12 +19,14 @@ const ModalWrapper = styled(Column)`
 `
 
 const InputWrapper = styled(Row)<{ isInvalid: boolean }>`
-  padding: 12px 8px 12px 12px;
+  padding: 6px 6px 6px 12px;
   border: 1px solid;
   position: relative;
   height: 44px;
   border-radius: 8px;
   border-color: ${({ isInvalid, theme }) => (isInvalid ? theme.accentCritical : theme.backgroundOutline)};
+  width: 160px;
+  justify-content: space-between;
 `
 
 const DropdownPrompt = styled(Row)`
@@ -32,11 +34,10 @@ const DropdownPrompt = styled(Row)`
   background-color: ${({ theme }) => theme.backgroundInteractive};
   cursor: pointer;
   font-weight: 600;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 16px;
   border-radius: 8px;
   padding: 6px 4px 6px 8px;
-  width: min-content;
   white-space: nowrap;
   color: ${({ theme }) => theme.textPrimary};
 
@@ -46,8 +47,8 @@ const DropdownPrompt = styled(Row)`
 `
 
 const DropdownChevron = styled(ChevronDown)<{ isOpen: boolean }>`
-  height: 16px;
-  width: 16px;
+  height: 20px;
+  width: 20px;
   color: ${({ theme }) => theme.textSecondary};
   transform: ${({ isOpen }) => isOpen && 'rotate(180deg)'};
   transition: ${({
@@ -176,10 +177,10 @@ export const SetDurationModal = () => {
           type="number"
           pattern="[0-9]"
           borderStyle="none"
-          className={bodySmall}
+          className={body}
           color={{ placeholder: 'textSecondary', default: 'textPrimary' }}
           value={amount}
-          width="32"
+          width="40"
           marginRight="4"
           backgroundColor="none"
           onChange={setCustomExpiration}