pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust various styles

Browse source
This commit is contained in:
jeffvli 2023-01-30 01:36:36 -08:00
parent 2700774469
commit 5ddd0872ef
22 changed files with 54 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/components/dropdown-menu/index.tsx
View file

@ -41,8 +41,8 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--primary-color); background-color: var(--dropdown-menu-bg-hover);
opacity: 0.2; opacity: 0.5;
z-index: -1; z-index: -1;
} }

17
src/renderer/components/tabs/index.tsx
View file

@ -22,6 +22,7 @@ const StyledTabs = styled(MantineTabs)`
button { button {
padding: 1rem; padding: 1rem;
color: var(--btn-subtle-fg); color: var(--btn-subtle-fg);
border-radius: 0;
&:hover { &:hover {
color: var(--btn-subtle-fg-hover); color: var(--btn-subtle-fg-hover);
@ -33,14 +34,22 @@ const StyledTabs = styled(MantineTabs)`
button[data-active] { button[data-active] {
color: var(--btn-primary-fg); color: var(--btn-primary-fg);
background: var(--primary-color); background: none;
border-color: var(--primary-color); box-shadow: 2px 0 0 var(--primary-color) inset;
&:hover { &:hover {
background: var(--btn-primary-bg-hover); background: none;
border-color: var(--primary-color);
} }
} }
/* button[data-active]::before {
content: '';
border-left: 2px solid var(--primary-color);
position: absolute;
left: 0;
right: 0;
bottom: 0;
} */
`; `;
export const Tabs = ({ children, ...props }: TabsProps) => { export const Tabs = ({ children, ...props }: TabsProps) => {

4
src/renderer/components/text-title/index.tsx
View file

@ -28,10 +28,6 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
color: ${(props) => props.$link && 'var(--main-fg)'}; color: ${(props) => props.$link && 'var(--main-fg)'};
text-decoration: ${(props) => (props.$link ? 'underline' : 'none')}; text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
} }
h1 {
font-size: 4rem;
}
`; `;
const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => { const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {

2
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -127,7 +127,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
More from this artist More from this artist

3
src/renderer/features/albums/components/album-detail-header.tsx
View file

@ -48,7 +48,7 @@ export const AlbumDetailHeader = forwardRef(
title={detailQuery?.data?.name || ''} title={detailQuery?.data?.name || ''}
> >
<Stack spacing="sm"> <Stack spacing="sm">
<Group> <Group spacing="sm">
{metadataItems.map((item, index) => ( {metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}> <Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text $noSelect>•</Text>} {index > 0 && <Text $noSelect>•</Text>}
@ -57,6 +57,7 @@ export const AlbumDetailHeader = forwardRef(
))} ))}
</Group> </Group>
<Group <Group
spacing="sm"
sx={{ sx={{
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2, WebkitLineClamp: 2,

10
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -166,7 +166,7 @@ export const AlbumArtistDetailContent = () => {
title: ( title: (
<> <>
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Recent releases Recent releases
@ -194,7 +194,7 @@ export const AlbumArtistDetailContent = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Appears on Appears on
@ -212,7 +212,7 @@ export const AlbumArtistDetailContent = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Related artists Related artists
@ -381,7 +381,7 @@ export const AlbumArtistDetailContent = () => {
maw="1280px" maw="1280px"
> >
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
About {detailQuery?.data?.name} About {detailQuery?.data?.name}
@ -405,7 +405,7 @@ export const AlbumArtistDetailContent = () => {
align="flex-end" align="flex-end"
> >
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Top Songs Top Songs

2
src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
View file

@ -294,7 +294,7 @@ export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHe
> >
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Tracks Tracks

2
src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
View file

@ -300,7 +300,7 @@ export const AlbumArtistDetailSongListHeader = ({
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
maw="20vw" maw="20vw"
order={3} order={2}
overflow="hidden" overflow="hidden"
weight={700} weight={700}
> >

2
src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
View file

@ -55,7 +55,7 @@ export const AlbumArtistDetailTopSongsListHeader = ({
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
maw="20vw" maw="20vw"
order={3} order={2}
overflow="hidden" overflow="hidden"
weight={700} weight={700}
> >

2
src/renderer/features/artists/components/album-artist-list-header.tsx
View file

@ -317,7 +317,7 @@ export const AlbumArtistListHeader = ({
> >
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Album Artists Album Artists

8
src/renderer/features/home/routes/home-route.tsx
View file

@ -123,7 +123,7 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Explore from your library Explore from your library
@ -142,7 +142,7 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Recently played Recently played
@ -161,7 +161,7 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Newly added releases Newly added releases
@ -180,7 +180,7 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Most played Most played

2
src/renderer/features/now-playing/components/now-playing-header.tsx
View file

@ -9,7 +9,7 @@ export const NowPlayingHeader = () => {
<PageHeader> <PageHeader>
<Group p="1rem"> <Group p="1rem">
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
Queue Queue

26
src/renderer/features/now-playing/components/play-queue-list-controls.tsx
View file

@ -90,51 +90,51 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
sx={{ alignItems: 'center' }} sx={{ alignItems: 'center' }}
w="100%" w="100%"
> >
<Group> <Group spacing="sm">
<Button <Button
compact compact
size="sm" size="md"
tooltip={{ label: 'Shuffle queue' }} tooltip={{ label: 'Shuffle queue' }}
variant="default" variant="default"
onClick={handleShuffleQueue} onClick={handleShuffleQueue}
> >
<RiShuffleLine size={15} /> <RiShuffleLine size="1.1rem" />
</Button> </Button>
<Button <Button
compact compact
size="sm" size="md"
tooltip={{ label: 'Move selected to top' }} tooltip={{ label: 'Move selected to top' }}
variant="default" variant="default"
onClick={handleMoveToTop} onClick={handleMoveToTop}
> >
<RiArrowUpLine size={15} /> <RiArrowUpLine size="1.1rem" />
</Button> </Button>
<Button <Button
compact compact
size="sm" size="md"
tooltip={{ label: 'Move selected to bottom' }} tooltip={{ label: 'Move selected to bottom' }}
variant="default" variant="default"
onClick={handleMoveToBottom} onClick={handleMoveToBottom}
> >
<RiArrowDownLine size={15} /> <RiArrowDownLine size="1.1rem" />
</Button> </Button>
<Button <Button
compact compact
size="sm" size="md"
tooltip={{ label: 'Remove selected' }} tooltip={{ label: 'Remove selected' }}
variant="default" variant="default"
onClick={handleRemoveSelected} onClick={handleRemoveSelected}
> >
<RiEraserLine size={15} /> <RiEraserLine size="1.1rem" />
</Button> </Button>
<Button <Button
compact compact
size="sm" size="md"
tooltip={{ label: 'Clear queue' }} tooltip={{ label: 'Clear queue' }}
variant="default" variant="default"
onClick={handleClearQueue} onClick={handleClearQueue}
> >
<RiDeleteBinLine size={15} /> <RiDeleteBinLine size="1.1rem" />
</Button> </Button>
</Group> </Group>
<Group> <Group>
@ -142,11 +142,11 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
<Popover.Target> <Popover.Target>
<Button <Button
compact compact
size="sm" size="md"
tooltip={{ label: 'Configure' }} tooltip={{ label: 'Configure' }}
variant="default" variant="default"
> >
<RiListSettingsLine size={15} /> <RiListSettingsLine size="1.1rem" />
</Button> </Button>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown>

2
src/renderer/features/player/components/left-controls.tsx
View file

@ -119,7 +119,7 @@ export const LeftControls = () => {
compact compact
opacity={0.8} opacity={0.8}
radius={50} radius={50}
size="xs" size="md"
sx={{ position: 'absolute', right: 2, top: 2 }} sx={{ position: 'absolute', right: 2, top: 2 }}
tooltip={{ label: 'Expand', openDelay: 500 }} tooltip={{ label: 'Expand', openDelay: 500 }}
variant="default" variant="default"

2
src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
View file

@ -262,7 +262,7 @@ export const PlaylistDetailSongListHeader = ({
variant="subtle" variant="subtle"
> >
<TextTitle <TextTitle
order={3} order={2}
weight={700} weight={700}
> >
{detailQuery?.data?.name} {detailQuery?.data?.name}

2
src/renderer/features/playlists/components/playlist-list-header.tsx
View file

@ -214,7 +214,7 @@ export const PlaylistListHeader = ({ tableRef }: PlaylistListHeaderProps) => {
> >
<TextTitle <TextTitle
fw="bold" fw="bold"
order={3} order={2}
> >
Playlists Playlists
</TextTitle> </TextTitle>

2
src/renderer/features/settings/components/settings.tsx
View file

@ -35,7 +35,7 @@ export const Settings = () => {
orientation="vertical" orientation="vertical"
styles={{ styles={{
tab: { tab: {
fontSize: '1.1rem', fontSize: '1rem',
padding: '0.5rem 1rem', padding: '0.5rem 1rem',
}, },
}} }}

2
src/renderer/features/shared/components/library-header-bar.tsx
View file

@ -28,7 +28,7 @@ interface TitleProps {
const Title = ({ children }: TitleProps) => { const Title = ({ children }: TitleProps) => {
return ( return (
<TextTitle <TextTitle
order={2} order={1}
overflow="hidden" overflow="hidden"
weight={700} weight={700}
> >

3
src/renderer/features/shared/components/library-header.tsx
View file

@ -142,8 +142,9 @@ export const LibraryHeader = forwardRef(
</Text> </Text>
</Group> </Group>
<TextTitle <TextTitle
lh="5rem" lh="5.1rem"
lineClamp={2} lineClamp={2}
mb="1rem"
overflow="hidden" overflow="hidden"
sx={{ fontSize: titleSize, overflow: 'hidden' }} sx={{ fontSize: titleSize, overflow: 'hidden' }}
weight={900} weight={900}

2
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -373,7 +373,7 @@ export const Sidebar = () => {
compact compact
opacity={0.8} opacity={0.8}
radius={100} radius={100}
size="sm" size="md"
sx={{ position: 'absolute', right: 5, top: 5 }} sx={{ position: 'absolute', right: 5, top: 5 }}
tooltip={{ label: 'Collapse', openDelay: 500 }} tooltip={{ label: 'Collapse', openDelay: 500 }}
variant="default" variant="default"

2
src/renderer/features/songs/components/song-list-header.tsx
View file

@ -319,7 +319,7 @@ export const SongListHeader = ({
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
maw="20vw" maw="20vw"
order={3} order={2}
overflow="hidden" overflow="hidden"
weight={700} weight={700}
> >

1
src/renderer/features/titlebar/components/app-menu.tsx
View file

@ -67,7 +67,6 @@ export const AppMenu = () => {
withArrow withArrow
withinPortal withinPortal
position="bottom" position="bottom"
width={200}
> >
<DropdownMenu.Target> <DropdownMenu.Target>
<Button <Button