Table fixes
This commit is contained in:
@@ -108,23 +108,6 @@ const SearchHistory = () => {
|
||||
setGlobalFilter={setGlobalFilter}
|
||||
/>
|
||||
</Stack>
|
||||
<Group
|
||||
w={'100%'}
|
||||
style={{
|
||||
backgroundColor: 'var(--mantine-color-primary-0)',
|
||||
}}
|
||||
align='center'
|
||||
justify='center'
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: 'var(--mantine-color-background-0)',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
Results: {searchHistory.length}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
@@ -221,15 +221,15 @@ export function ThemePlaylists() {
|
||||
<ThemePlaylistCard
|
||||
cardPlaylist={{
|
||||
id:
|
||||
themePlaylists?.filter(
|
||||
themePlaylists?.find(
|
||||
(a: ThemePlaylist) => a.name === 'Time of Day',
|
||||
)[0]?.id ?? undefined,
|
||||
)?.id ?? undefined,
|
||||
name: 'Time of Day',
|
||||
default: 1,
|
||||
themeList:
|
||||
themePlaylists?.filter(
|
||||
themePlaylists?.find(
|
||||
(a: ThemePlaylist) => a.name === 'Time of Day',
|
||||
)[0]?.themeList ?? '[]',
|
||||
)?.themeList ?? '[]',
|
||||
}}
|
||||
handleOpen={handleOpen}
|
||||
allThemes={allThemeData}
|
||||
|
||||
@@ -67,7 +67,7 @@ export function ThemePlaylistCard({
|
||||
paddingLeft: '.25rem',
|
||||
backgroundColor: 'var(--mantine-color-border-0)',
|
||||
borderRadius: '4px',
|
||||
color: 'var(--mantine-color-background-0)',
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
@@ -130,44 +130,7 @@ export function ThemePlaylistCard({
|
||||
>
|
||||
{hover && <Overlay opacity={0.5} zIndex={1} />}
|
||||
<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
|
||||
{cardPlaylist.name !== 'Time of Day' ? (
|
||||
<>
|
||||
<Text
|
||||
px={'.5rem'}
|
||||
mt={'.5rem'}
|
||||
mb={'-.5rem'}
|
||||
style={{
|
||||
color: 'var(--mantine-color-background-0)',
|
||||
backgroundColor: 'var(--mantine-color-primary-0)',
|
||||
borderRadius: '4px',
|
||||
zIndex: 160,
|
||||
}}
|
||||
>
|
||||
Count: {themeList.length}
|
||||
</Text>
|
||||
<ScrollArea
|
||||
className={scrollAreaClasses.default}
|
||||
classNames={scrollAreaClasses}
|
||||
h={'255px'}
|
||||
w={'100%'}
|
||||
style={{ zIndex: 2 }}
|
||||
>
|
||||
<Stack gap={4}>
|
||||
{themeList.length > 0 &&
|
||||
themeList
|
||||
.sort((a: number, b: number) => (a > b ? 1 : -1))
|
||||
.map((item: number) => {
|
||||
const miniTheme: any = allThemes.find(
|
||||
(theme: Theme) => theme.id === item,
|
||||
);
|
||||
return (
|
||||
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
{cardPlaylist.name === 'Time of Day' ? (
|
||||
<>
|
||||
<Text
|
||||
px={'.5rem'}
|
||||
@@ -207,6 +170,43 @@ export function ThemePlaylistCard({
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text
|
||||
px={'.5rem'}
|
||||
mt={'.5rem'}
|
||||
mb={'-.5rem'}
|
||||
style={{
|
||||
color: 'var(--mantine-color-background-0)',
|
||||
backgroundColor: 'var(--mantine-color-primary-0)',
|
||||
borderRadius: '4px',
|
||||
zIndex: 160,
|
||||
}}
|
||||
>
|
||||
Count: {themeList.length}
|
||||
</Text>
|
||||
<ScrollArea
|
||||
className={scrollAreaClasses.default}
|
||||
classNames={scrollAreaClasses}
|
||||
h={'255px'}
|
||||
w={'100%'}
|
||||
style={{ zIndex: 2 }}
|
||||
>
|
||||
<Stack gap={4}>
|
||||
{themeList.length > 0 &&
|
||||
themeList
|
||||
.sort((a: number, b: number) => (a > b ? 1 : -1))
|
||||
.map((item: number) => {
|
||||
const miniTheme: any = allThemes.find(
|
||||
(theme: Theme) => theme.id === item,
|
||||
);
|
||||
return (
|
||||
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user