antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to mantine v6 (#15)

Browse source 
* Add letter spacing to cell text

* Set window control height in px

* Add temp unused routes

* Migrate text title font weights

* Bump mantine to v6 alpha

* Migrate modals / notifications

* Increase header bar to 65px

* Adjust play button props

* Migrate various components

* Migrate various pages and root styles

* Adjust default badge padding

* Fix sidebar spacing

* Fix list header badges

* Adjust default theme
This commit is contained in:
Jeff 2023-01-28 20:46:07 -08:00 • committed by GitHub
parent 768269f074
commit 44a4b88809
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 1301 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/renderer/components/feature-carousel/index.tsx
View file

@ -27,8 +27,7 @@ const Grid = styled.div`
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: 225px 1fr;
gap: 0.5rem;
grid-template-columns: 200px 1fr;
width: 100%;
max-width: 100%;
height: 100%;
@ -152,16 +151,27 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
/>
</ImageColumn>
<InfoColumn>
<Stack sx={{ width: '100%' }}>
<Stack
spacing="md"
sx={{ width: '100%' }}
>
<TitleWrapper>
<TextTitle fw="bold">{currentItem?.name}</TextTitle>
<TextTitle
lh="4rem"
lineClamp={2}
order={1}
sx={{ fontSize: '4rem' }}
weight={900}
>
{currentItem?.name}
</TextTitle>
</TitleWrapper>
<TitleWrapper>
{currentItem?.albumArtists.map((artist) => (
<TextTitle
key={`carousel-artist-${artist.id}`}
fw="600"
order={3}
order={2}
weight={600}
>
{artist.name}
</TextTitle>
@ -169,10 +179,15 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
</TitleWrapper>
<Group>
{currentItem?.genres?.map((genre) => (
<Badge key={`carousel-genre-${genre.id}`}>{genre.name}</Badge>
<Badge
key={`carousel-genre-${genre.id}`}
size="lg"
>
{genre.name}
</Badge>
))}
<Badge>{currentItem?.releaseYear}</Badge>
<Badge>{currentItem?.songCount} tracks</Badge>
<Badge size="lg">{currentItem?.releaseYear}</Badge>
<Badge size="lg">{currentItem?.songCount} tracks</Badge>
</Group>
</Stack>
</InfoColumn>
@ -187,25 +202,25 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
</AnimatePresence>
<Group
spacing="xs"
sx={{ bottom: 0, position: 'absolute', right: 0, zIndex: 20 }}
sx={{ bottom: '1rem', position: 'absolute', right: 0, zIndex: 20 }}
>
<Button
disabled={itemIndex === 0}
px="lg"
radius={100}
variant="subtle"
size="md"
variant="default"
onClick={handlePrevious}
>
<RiArrowLeftSLine size={15} />
<RiArrowLeftSLine size="2rem" />
</Button>
<Button
disabled={itemIndex === (data?.length || 1) - 1}
px="lg"
radius={100}
variant="subtle"
size="md"
variant="default"
onClick={handleNext}
>
<RiArrowRightSLine size={15} />
<RiArrowRightSLine size="2rem" />
</Button>
</Group>
</Wrapper>