diff --git a/ui/src/app.tsx b/ui/src/app.tsx index 8035d7e..634b2b2 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -6,7 +6,7 @@ import { AppPage, ToastProvider } from './components'; import { ComponentsTest, CreateAP, - Explore, + ExploreView, IndexedNFAView, Mint, } from './views'; @@ -19,7 +19,7 @@ export const App: React.FC = () => { - } /> + } /> } /> } /> } /> diff --git a/ui/src/components/layout/nav-bar/nav-bar.styles.ts b/ui/src/components/layout/nav-bar/nav-bar.styles.ts index f4e7885..8084248 100644 --- a/ui/src/components/layout/nav-bar/nav-bar.styles.ts +++ b/ui/src/components/layout/nav-bar/nav-bar.styles.ts @@ -13,6 +13,7 @@ export abstract class NavBarStyles { backgroundColor: '$black', zIndex: '$sticky', height: '$22', + overflow: 'hidden', // TODO: this must be worked on for responsive layout }); static readonly Content = styled('div', { diff --git a/ui/src/components/layout/page/page.styles.ts b/ui/src/components/layout/page/page.styles.ts index affeb29..55e7f81 100644 --- a/ui/src/components/layout/page/page.styles.ts +++ b/ui/src/components/layout/page/page.styles.ts @@ -9,7 +9,8 @@ export abstract class PageStyles { public static readonly Content = styled('div', { width: '100%', minHeight: '85vh', - maxWidth: '$7xl', + maxWidth: '$6xl', + padding: '0 $6', margin: '0 auto', display: 'grid', }); diff --git a/ui/src/components/nfa-card/nfa-card.styles.ts b/ui/src/components/nfa-card/nfa-card.styles.ts index 920a460..afa733f 100644 --- a/ui/src/components/nfa-card/nfa-card.styles.ts +++ b/ui/src/components/nfa-card/nfa-card.styles.ts @@ -8,7 +8,7 @@ export const NFACardStyles = { Container: styled(Link, { display: 'flex', flexDirection: 'column', - width: '14.6875rem', + minWidth: '12.5rem', padding: 0, overflow: 'hidden', cursor: 'pointer', @@ -60,6 +60,11 @@ export const NFACardStyles = { fontSize: '$xl', fontWeight: '$medium', lineHeight: 1.4, + + maxWidth: 'auto', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', }), Content: styled('span', { all: 'unset', @@ -79,7 +84,7 @@ export const NFACardStyles = { Skeleton: { Preview: styled(Skeleton, { width: '100%', - height: 'calc(14.6875rem - 2px)', + aspectRatio: 1, }), Title: styled(Skeleton, { diff --git a/ui/src/components/nfa-card/nfa-card.tsx b/ui/src/components/nfa-card/nfa-card.tsx index 1f09fbd..3883dd0 100644 --- a/ui/src/components/nfa-card/nfa-card.tsx +++ b/ui/src/components/nfa-card/nfa-card.tsx @@ -60,8 +60,7 @@ export const NFACard: React.FC = forwardStyledRef< alignItems: 'center', }} > - {/* TODO: treat names bigger than space in layout when designs are done */} - {data.name} + {data.name} {/* TODO: set correct value when it gets available on contract side */} 0.5} /> diff --git a/ui/src/views/explore/explore-header.tsx b/ui/src/views/explore/explore-header/explore-header.fragment.tsx similarity index 89% rename from ui/src/views/explore/explore-header.tsx rename to ui/src/views/explore/explore-header/explore-header.fragment.tsx index bd3665a..af30cf9 100644 --- a/ui/src/views/explore/explore-header.tsx +++ b/ui/src/views/explore/explore-header/explore-header.fragment.tsx @@ -4,7 +4,7 @@ import { Button } from '@/components'; import { ExploreHeaderStyles as S } from './explore-header.styles'; -export const ExploreHeader: React.FC = () => ( +export const ExploreHeaderFragment: React.FC = () => ( diff --git a/ui/src/views/explore/explore-header.styles.ts b/ui/src/views/explore/explore-header/explore-header.styles.ts similarity index 100% rename from ui/src/views/explore/explore-header.styles.ts rename to ui/src/views/explore/explore-header/explore-header.styles.ts diff --git a/ui/src/views/explore/explore-header/index.ts b/ui/src/views/explore/explore-header/index.ts new file mode 100644 index 0000000..2348fde --- /dev/null +++ b/ui/src/views/explore/explore-header/index.ts @@ -0,0 +1 @@ +export * from './explore-header.fragment'; diff --git a/ui/src/views/explore/explore-list/explore-list-container.tsx b/ui/src/views/explore/explore-list/explore-list-container.tsx deleted file mode 100644 index da1ea25..0000000 --- a/ui/src/views/explore/explore-list/explore-list-container.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Flex } from '@/components'; - -import { Explore } from '../explore.context'; -import { NFAListFragment } from './nfa-list'; -import { NFASearchFragment } from './nfa-search'; - -export const ExploreListContainer: React.FC = () => { - return ( - - - - - - - ); -}; diff --git a/ui/src/views/explore/explore-list/explore-list.fragment.tsx b/ui/src/views/explore/explore-list/explore-list.fragment.tsx new file mode 100644 index 0000000..a76b0c2 --- /dev/null +++ b/ui/src/views/explore/explore-list/explore-list.fragment.tsx @@ -0,0 +1,12 @@ +import { Explore } from '../explore.context'; +import { NFAListFragment } from './nfa-list.fragment'; +import { NFASearchFragment } from './nfa-search.fragment'; + +export const ExploreListFragment: React.FC = () => { + return ( + + + + + ); +}; diff --git a/ui/src/views/explore/explore-list/index.ts b/ui/src/views/explore/explore-list/index.ts index da6013c..b29f9af 100644 --- a/ui/src/views/explore/explore-list/index.ts +++ b/ui/src/views/explore/explore-list/index.ts @@ -1 +1 @@ -export * from './explore-list-container'; +export * from './explore-list.fragment'; diff --git a/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx b/ui/src/views/explore/explore-list/nfa-list.fragment.tsx similarity index 61% rename from ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx rename to ui/src/views/explore/explore-list/nfa-list.fragment.tsx index 8d29999..22593cf 100644 --- a/ui/src/views/explore/explore-list/nfa-list/nfa-list.tsx +++ b/ui/src/views/explore/explore-list/nfa-list.fragment.tsx @@ -1,11 +1,12 @@ import { useQuery } from '@apollo/client'; import { useEffect } from 'react'; -import { Flex, NFACard, NFACardSkeleton } from '@/components'; +import { NFACard, NFACardSkeleton } from '@/components'; import { lastNFAsPaginatedDocument } from '@/graphclient'; import { useWindowScrollEnd } from '@/hooks'; -import { Explore } from '../../explore.context'; +import { Explore } from '../explore.context'; +import { NFAListFragmentStyles as S } from './nfa-list.styles'; const pageSize = 10; //Set this size to test pagination @@ -15,6 +16,8 @@ const LoadingSkeletons: React.FC = () => ( + + ); @@ -61,29 +64,16 @@ export const NFAListFragment: React.FC = () => { if (queryError) return
Error
; //TODO handle error return ( - - - {tokens.map((token) => ( - - ))} - {isLoading && } - {!isLoading && tokens.length === 0 && ( - // TODO: update this after designs are done -
- Nothing found. -
- )} - - + + {tokens.map((token) => ( + + ))} + + {isLoading && } + + {!isLoading && tokens.length === 0 && ( + Nothing found. + )} + ); }; diff --git a/ui/src/views/explore/explore-list/nfa-list.styles.ts b/ui/src/views/explore/explore-list/nfa-list.styles.ts new file mode 100644 index 0000000..192ebdf --- /dev/null +++ b/ui/src/views/explore/explore-list/nfa-list.styles.ts @@ -0,0 +1,24 @@ +import { styled } from '@/theme'; + +export const NFAListFragmentStyles = { + Container: styled('div', { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(12.5rem, 1fr))', + alignItems: 'flex-start', + flexWrap: 'wrap', + gap: '$6', + my: '$6', + minHeight: '50vh', + marginBottom: '30vh', // TODO: remove this if we add page footer + + '@media (min-width: 1080px)': { + gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))', + }, + }), + EmptyMessage: styled('span', { + padding: '$2 $3 $4 $3', + textAlign: 'center', + color: '$slate11', + width: '100%', + }), +}; diff --git a/ui/src/views/explore/explore-list/nfa-list/index.ts b/ui/src/views/explore/explore-list/nfa-list/index.ts deleted file mode 100644 index 6d5668c..0000000 --- a/ui/src/views/explore/explore-list/nfa-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './nfa-list'; diff --git a/ui/src/views/explore/explore-list/nfa-search.tsx b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx similarity index 77% rename from ui/src/views/explore/explore-list/nfa-search.tsx rename to ui/src/views/explore/explore-list/nfa-search.fragment.tsx index d68fe85..8db2396 100644 --- a/ui/src/views/explore/explore-list/nfa-search.tsx +++ b/ui/src/views/explore/explore-list/nfa-search.fragment.tsx @@ -1,10 +1,10 @@ import { useState } from 'react'; -import { Dropdown, DropdownItem, Flex, Input } from '@/components'; +import { Dropdown, DropdownItem, Input } from '@/components'; import { useDebounce } from '@/hooks'; import { Explore } from '../explore.context'; -import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles'; +import { NFASearchFragmentStyles as S } from './nfa-search.styles'; const orderResults: DropdownItem[] = [ { value: 'newest', label: 'Newest' }, @@ -62,17 +62,18 @@ export const NFASearchFragment: React.FC = () => { }; return ( - - - All NFAs - (3,271) - - + + + All NFAs  + (3,271) + + + { textColor="slate11" optionsWidth="40" /> - - + + ); }; diff --git a/ui/src/views/explore/explore-list/nfa-search.styles.ts b/ui/src/views/explore/explore-list/nfa-search.styles.ts new file mode 100644 index 0000000..2c9d069 --- /dev/null +++ b/ui/src/views/explore/explore-list/nfa-search.styles.ts @@ -0,0 +1,36 @@ +import { Flex } from '@/components'; +import { styled } from '@/theme'; + +export const NFASearchFragmentStyles = { + Container: styled(Flex, { + justifyContent: 'space-between', + flexWrap: 'wrap', + gap: '$3', + }), + + Data: { + Wrapper: styled('div', { + fontSize: '$xl', + fontWeight: '$bold', + display: 'flex', + alignItems: 'center', + }), + + Text: styled('span', { + color: '$slate12', + }), + + Number: styled('span', { + color: '$slate11', + }), + }, + + Input: { + Wrapper: styled(Flex, { + gap: '$3', + width: '100%', + maxWidth: '30rem', + justifySelf: 'center', + }), + }, +}; diff --git a/ui/src/views/explore/explore-list/results.styles.ts b/ui/src/views/explore/explore-list/results.styles.ts deleted file mode 100644 index ef48426..0000000 --- a/ui/src/views/explore/explore-list/results.styles.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from '@/theme'; - -export const ResultsContainer = styled('div', { - fontSize: '$xl', - fontWeight: '$bold', - display: 'flex', - alignItems: 'center', -}); - -export const ResultsText = styled('span', { - color: '$slate12', -}); - -export const ResultsNumber = styled('span', { - color: '$slate11', -}); diff --git a/ui/src/views/explore/explore.styles.ts b/ui/src/views/explore/explore.styles.ts index c2ec010..08714a1 100644 --- a/ui/src/views/explore/explore.styles.ts +++ b/ui/src/views/explore/explore.styles.ts @@ -4,7 +4,5 @@ import { styled } from '@/theme'; export abstract class Explore { static readonly Container = styled(Flex, { flexDirection: 'column', - width: '63.4rem', //TODO replace for max-width - margin: '0 auto', }); } diff --git a/ui/src/views/explore/explore.tsx b/ui/src/views/explore/explore.tsx index 49451a0..d593b1e 100644 --- a/ui/src/views/explore/explore.tsx +++ b/ui/src/views/explore/explore.tsx @@ -1,12 +1,12 @@ import { Explore as ES } from './explore.styles'; -import { ExploreHeader } from './explore-header'; -import { ExploreListContainer } from './explore-list'; +import { ExploreHeaderFragment } from './explore-header'; +import { ExploreListFragment } from './explore-list'; -export const Explore: React.FC = () => { +export const ExploreView: React.FC = () => { return ( - - + + ); };