Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace sx, position, and spacing

Browse Source
This commit is contained in:
jeffvli 2024-01-22 18:06:22 -08:00
parent 699390d420
commit 7cdd244220
74 changed files with 187 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/remote/components/remote-container.tsx
View File

@ -45,7 +45,7 @@ export const RemoteContainer = () => {
<Title order={2}>Album: {song.album}</Title>
<Title order={2}>Artist: {song.artistName}</Title>
</Group>
<Group position="apart">
<Group justify="space-between">
<Title order={3}>Duration: {formatDuration(song.duration)}</Title>
{song.releaseDate && (
<Title order={3}>
@ -58,7 +58,7 @@ export const RemoteContainer = () => {
)}
<Group
grow
spacing={0}
gap={0}
>
<RemoteButton
tooltip="Previous track"
@ -94,7 +94,7 @@ export const RemoteContainer = () => {
</Group>
<Group
grow
spacing={0}
gap={0}
>
<RemoteButton
$active={shuffle || false}
@ -142,7 +142,7 @@ export const RemoteContainer = () => {
openDelay={1000}
>
<Rating
sx={{ margin: 'auto' }}
style={{ margin: 'auto' }}
value={song.userRating ?? 0}
onChange={debouncedSetRating}
onDoubleClick={() => debouncedSetRating(0)}

2
src/renderer/components/button/index.tsx
View File

@ -171,7 +171,7 @@ export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
return (
<Button
sx={{ color: 'var(--danger-color)' }}
style={{ color: 'var(--danger-color)' }}
onClick={startTimeout}
{...props}
>

2
src/renderer/components/card/album-card.tsx
View File

@ -156,7 +156,7 @@ export const AlbumCard = ({
/>
) : (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: `${size}px`,

6
src/renderer/components/card/card-controls.tsx
View File

@ -137,11 +137,11 @@ export const CardControls = ({
<PlayButton onClick={handlePlay}>
<RiPlayFill size={25} />
</PlayButton>
<Group spacing="xs">
<Group gap="xs">
<SecondaryButton
disabled
p={5}
sx={{ svg: { fill: 'white !important' } }}
style={{ svg: { fill: 'white !important' } }}
variant="subtle"
>
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
@ -157,7 +157,7 @@ export const CardControls = ({
</SecondaryButton>
<SecondaryButton
p={5}
sx={{ svg: { fill: 'white !important' } }}
style={{ svg: { fill: 'white !important' } }}
variant="subtle"
onClick={(e) => {
e.preventDefault();

2
src/renderer/components/card/card-rows.tsx
View File

@ -40,7 +40,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
<Text
$noSelect
$secondary
sx={{
style={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}

4
src/renderer/components/card/poster-card.tsx
View File

@ -151,7 +151,7 @@ export const PosterCard = ({
/>
) : (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: '100%',
@ -190,7 +190,7 @@ export const PosterCard = ({
<ImageContainerSkeleton />
</Skeleton>
<DetailContainer>
<Stack spacing="sm">
<Stack gap="sm">
{controls.cardRows.map((row, index) => (
<Skeleton
key={`${index}-${row.arrayProperty}`}

4
src/renderer/components/context-menu/index.tsx
View File

@ -80,8 +80,8 @@ export const ContextMenuButton = forwardRef(
disabled={props.disabled}
onClick={props.onClick}
>
<Group position="apart">
<Group spacing="md">
<Group justify="space-between">
<Group gap="md">
<Box>{leftIcon}</Box>
<Box mr="2rem">{children}</Box>
</Group>

2
src/renderer/components/date-picker/index.tsx
View File

@ -38,7 +38,7 @@ export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
return (
<StyledDatePicker
{...props}
sx={{ maxWidth, width }}
style={{ maxWidth, width }}
/>
);
};

12
src/renderer/components/feature-carousel/index.tsx
View File

@ -164,21 +164,21 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
placeholder="var(--card-default-bg)"
radius="md"
src={data[itemIndex]?.imageUrl}
sx={{ objectFit: 'cover' }}
style={{ objectFit: 'cover' }}
width={225}
/>
</ImageColumn>
<InfoColumn>
<Stack
spacing="md"
sx={{ width: '100%' }}
gap="md"
style={{ width: '100%' }}
>
<TitleWrapper>
<TextTitle
lh="3.5rem"
order={1}
overflow="hidden"
sx={{ fontSize: '3.5rem' }}
style={{ fontSize: '3.5rem' }}
weight={900}
>
{currentItem?.name}
@ -207,7 +207,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
<Badge size="lg">{currentItem?.releaseYear}</Badge>
<Badge size="lg">{currentItem?.songCount} tracks</Badge>
</Group>
<Group position="apart">
<Group justify="space-between">
<Button
size="lg"
style={{ borderRadius: '5rem' }}
@ -228,7 +228,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
>
{t('player.play', { postProcess: 'titleCase' })}
</Button>
<Group spacing="sm">
<Group gap="sm">
<Button
radius="lg"
size="sm"

6
src/renderer/components/grid-carousel/index.tsx
View File

@ -52,7 +52,7 @@ interface TitleProps {
const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
return (
<Group position="apart">
<Group justify="space-between">
{isValidElement(label) ? (
label
) : (
@ -64,7 +64,7 @@ const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
</TextTitle>
)}
<Group spacing="sm">
<Group gap="sm">
<Button
compact
disabled={!pagination.hasPreviousPage}
@ -252,7 +252,7 @@ export const SwiperGridCarousel = ({
return (
<CarouselContainer
className="grid-carousel"
spacing="md"
gap="md"
>
{title ? (
<Title

12
src/renderer/components/input/index.tsx
View File

@ -282,7 +282,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
ref={ref}
spellCheck={false}
{...props}
sx={{ maxWidth, width }}
style={{ maxWidth, width }}
>
{children}
</StyledTextInput>
@ -298,7 +298,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
hideControls
spellCheck={false}
{...props}
sx={{ maxWidth, width }}
style={{ maxWidth, width }}
>
{children}
</StyledNumberInput>
@ -312,7 +312,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
<StyledPasswordInput
ref={ref}
{...props}
sx={{ maxWidth, width }}
style={{ maxWidth, width }}
>
{children}
</StyledPasswordInput>
@ -326,12 +326,12 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
<StyledFileInput
ref={ref}
{...props}
style={{ maxWidth, width }}
styles={{
placeholder: {
color: 'var(--input-placeholder-fg)',
},
}}
sx={{ maxWidth, width }}
>
{children}
</StyledFileInput>
@ -345,7 +345,7 @@ export const JsonInput = forwardRef<HTMLTextAreaElement, JsonInputProps>(
<StyledJsonInput
ref={ref}
{...props}
sx={{ maxWidth, width }}
style={{ maxWidth, width }}
>
{children}
</StyledJsonInput>
@ -359,7 +359,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
<StyledTextarea
ref={ref}
{...props}
sx={{ maxWidth, width }}
style={{ maxWidth, width }}
>
{children}
</StyledTextarea>

4
src/renderer/components/query-builder/index.tsx
View File

@ -96,9 +96,9 @@ export const QueryBuilder = ({
return (
<Stack
ml={`${level * 10}px`}
spacing="sm"
gap="sm"
>
<Group spacing="sm">
<Group gap="sm">
<Select
data={FILTER_GROUP_OPTIONS_DATA}
maxWidth={175}

2
src/renderer/components/query-builder/query-builder-option.tsx
View File

@ -184,7 +184,7 @@ export const QueryBuilderOption = ({
return (
<Group
ml={ml}
spacing="sm"
gap="sm"
>
<Select
searchable

4
src/renderer/components/select/index.tsx
View File

@ -41,6 +41,7 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
return (
<StyledSelect
withinPortal
style={{ maxWidth, width }}
styles={{
dropdown: {
background: 'var(--dropdown-menu-bg)',
@ -68,7 +69,6 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
padding: '.3rem',
},
}}
sx={{ maxWidth, width }}
transitionProps={{ duration: 100, transition: 'fade' }}
{...props}
/>
@ -96,6 +96,7 @@ export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) =>
return (
<StyledMultiSelect
withinPortal
style={{ maxWidth, width }}
styles={{
dropdown: {
background: 'var(--dropdown-menu-bg)',
@ -129,7 +130,6 @@ export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) =>
paddingTop: '1rem',
},
}}
sx={{ maxWidth, width }}
transitionProps={{ duration: 100, transition: 'fade' }}
{...props}
/>

4
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View File

@ -186,7 +186,7 @@ export const DefaultCard = ({
/>
) : (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: '100%',
@ -233,7 +233,7 @@ export const DefaultCard = ({
/>
</ImageContainer>
<DetailContainer>
<Stack spacing="sm">
<Stack gap="sm">
{controls.cardRows.map((row, index) => (
<Skeleton
key={`${index}-${columnIndex}-${row.arrayProperty}`}

4
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View File

@ -173,7 +173,7 @@ export const PosterCard = ({
/>
) : (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: '100%',
@ -218,7 +218,7 @@ export const PosterCard = ({
<ImageContainer />
</Skeleton>
<DetailContainer>
<Stack spacing="sm">
<Stack gap="sm">
{controls.cardRows.map((row, index) => (
<Skeleton
key={`${index}-${columnIndex}-${row.arrayProperty}`}

6
src/renderer/components/virtual-table/cells/combined-title-cell.tsx
View File

@ -89,7 +89,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
/>
) : (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: `${(node.rowHeight || 40) - 10}px`,
@ -127,7 +127,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
component={Link}
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
style={{ width: 'fit-content' }}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
@ -139,7 +139,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
$secondary
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
style={{ width: 'fit-content' }}
>
{artist.name}
</Text>

2
src/renderer/components/virtual-table/cells/favorite-cell.tsx
View File

@ -49,7 +49,7 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
<CellContainer $position="center">
<Button
compact
sx={{
style={{
svg: {
fill: !value
? 'var(--main-fg-secondary) !important'

2
src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx
View File

@ -29,7 +29,7 @@ export const FullWidthDiscCell = ({ node, data, api }: ICellRendererParams) => {
return (
<Container>
<Group
position="apart"
justify="space-between"
w="100%"
>
<Button

6
src/renderer/components/virtual-table/table-pagination.tsx
View File

@ -78,7 +78,7 @@ export const TablePagination = ({
initial={{ y: 50 }}
justify="space-between"
p="1rem"
sx={{ borderTop: '1px solid var(--generic-border-color)' }}
style={{ borderTop: '1px solid var(--generic-border-color)' }}
>
<Text
$secondary
@ -104,7 +104,7 @@ export const TablePagination = ({
<Group
ref={containerQuery.ref}
noWrap
spacing="sm"
gap="sm"
>
<Popover
trapFocus
@ -116,7 +116,7 @@ export const TablePagination = ({
<Button
radius="sm"
size="sm"
sx={{ height: '26px', padding: '0', width: '26px' }}
style={{ height: '26px', padding: '0', width: '26px' }}
tooltip={{
label: t('action.goToPage', { postProcess: 'sentenceCase' }),
}}

4
src/renderer/features/action-required/components/action-required-container.tsx
View File

@ -9,7 +9,7 @@ interface ActionRequiredContainerProps {
}
export const ActionRequiredContainer = ({ title, children }: ActionRequiredContainerProps) => (
<Stack sx={{ cursor: 'default', maxWidth: '700px' }}>
<Stack style={{ cursor: 'default', maxWidth: '700px' }}>
<Group>
<RiAlertFill
color="var(--warning-color)"
@ -17,7 +17,7 @@ export const ActionRequiredContainer = ({ title, children }: ActionRequiredConta
/>
<Text
size="xl"
sx={{ textTransform: 'uppercase' }}
style={{ textTransform: 'uppercase' }}
>
{title}
</Text>

6
src/renderer/features/action-required/components/error-fallback.tsx
View File

@ -14,9 +14,9 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
return (
<Container>
<Center sx={{ height: '100vh' }}>
<Stack sx={{ maxWidth: '50%' }}>
<Group spacing="xs">
<Center style={{ height: '100vh' }}>
<Stack style={{ maxWidth: '50%' }}>
<Group gap="xs">
<RiErrorWarningLine
color="var(--danger-color)"
size={30}

10
src/renderer/features/action-required/components/route-error-boundary.tsx
View File

@ -24,8 +24,8 @@ const RouteErrorBoundary = () => {
return (
<Box bg="var(--main-bg)">
<Center sx={{ height: '100vh' }}>
<Stack sx={{ maxWidth: '50%' }}>
<Center style={{ height: '100vh' }}>
<Stack style={{ maxWidth: '50%' }}>
<Group>
<Button
px={10}
@ -44,12 +44,12 @@ const RouteErrorBoundary = () => {
<Text size="sm">{error?.message}</Text>
<Group
grow
spacing="sm"
gap="sm"
>
<Button
leftIcon={<RiHome4Line />}
size="md"
sx={{ flex: 0.5 }}
style={{ flex: 0.5 }}
variant="default"
onClick={handleHome}
>
@ -60,7 +60,7 @@ const RouteErrorBoundary = () => {
<Button
leftIcon={<RiMenuFill />}
size="md"
sx={{ flex: 0.5 }}
style={{ flex: 0.5 }}
variant="default"
>
Menu

6
src/renderer/features/action-required/routes/action-required-route.tsx
View File

@ -61,10 +61,10 @@ const ActionRequiredRoute = () => {
return (
<AnimatedPage>
<PageHeader />
<Center sx={{ height: '100%', width: '100vw' }}>
<Center style={{ height: '100%', width: '100vw' }}>
<Stack
spacing="xl"
sx={{ maxWidth: '50%' }}
gap="xl"
style={{ maxWidth: '50%' }}
>
<Group noWrap>
{displayedCheck && (

2
src/renderer/features/action-required/routes/invalid-route.tsx
View File

@ -10,7 +10,7 @@ const InvalidRoute = () => {
return (
<AnimatedPage>
<Center sx={{ height: '100%', width: '100%' }}>
<Center style={{ height: '100%', width: '100%' }}>
<Stack>
<Group
noWrap

8
src/renderer/features/albums/components/album-detail-content.tsx
View File

@ -319,9 +319,9 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
<DetailContainer>
<Box component="section">
<Group
position="apart"
justify="space-between"
py="1rem"
spacing="sm"
gap="sm"
>
<Group>
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
@ -376,7 +376,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
component="section"
py="1rem"
>
<Group spacing="sm">
<Group gap="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Button
key={`genre-${genre.id}`}
@ -434,7 +434,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
<Stack
ref={cq.ref}
mt="3rem"
spacing="lg"
gap="lg"
>
{cq.height || cq.width ? (
<>

8
src/renderer/features/albums/components/album-detail-header.tsx
View File

@ -66,8 +66,8 @@ export const AlbumDetailHeader = forwardRef(
item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
title={detailQuery?.data?.name || ''}
>
<Stack spacing="sm">
<Group spacing="sm">
<Stack gap="sm">
<Group gap="sm">
{metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text $noSelect>•</Text>}
@ -90,8 +90,8 @@ export const AlbumDetailHeader = forwardRef(
</Group>
<Group
mah="4rem"
spacing="md"
sx={{
gap="md"
style={{
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
overflow: 'hidden',

12
src/renderer/features/albums/components/album-list-header-filters.tsx
View File

@ -352,7 +352,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
gap="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
@ -393,7 +393,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
compact
fw={600}
size="md"
sx={{
style={{
svg: {
fill: isFolderFilterApplied
? 'var(--primary-color) !important'
@ -424,7 +424,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
<Button
compact
size="md"
sx={{
style={{
svg: {
fill: isFilterApplied ? 'var(--primary-color) !important' : undefined,
},
@ -489,7 +489,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
</Group>
<Group
noWrap
spacing="sm"
gap="sm"
>
<DropdownMenu
position="bottom-end"
@ -567,7 +567,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
style={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
@ -579,7 +579,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Group justify="space-between">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={table.autoFit}

2
src/renderer/features/albums/components/album-list-header.tsx
View File

@ -61,7 +61,7 @@ export const AlbumListHeader = ({ itemCount, gridRef, tableRef, title }: AlbumLi
return (
<Stack
ref={cq.ref}
spacing={0}
gap={0}
>
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex

2
src/renderer/features/albums/components/jellyfin-album-filters.tsx
View File

@ -180,7 +180,7 @@ export const JellyfinAlbumFilters = ({
{toggleFilters.map((filter) => (
<Group
key={`nd-filter-${filter.label}`}
position="apart"
justify="space-between"
>
<Text>{filter.label}</Text>
<Switch

2
src/renderer/features/albums/components/navidrome-album-filters.tsx
View File

@ -214,7 +214,7 @@ export const NavidromeAlbumFilters = ({
{toggleFilters.map((filter) => (
<Group
key={`nd-filter-${filter.label}`}
position="apart"
justify="space-between"
>
<Text>{filter.label}</Text>
<Switch

16
src/renderer/features/artists/components/album-artist-detail-content.tsx
View File

@ -335,10 +335,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
<ContentContainer ref={cq.ref}>
<LibraryBackgroundOverlay $backgroundColor={background} />
<DetailContainer>
<Stack spacing="lg">
<Group spacing="md">
<Stack gap="lg">
<Group gap="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs">
<Group gap="xs">
<Button
compact
loading={
@ -369,7 +369,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
</Button>
</Group>
</Group>
<Group spacing="md">
<Group gap="md">
<Button
compact
uppercase
@ -392,7 +392,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
</Stack>
{showGenres ? (
<Box component="section">
<Group spacing="sm">
<Group gap="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Button
key={`genre-${genre.id}`}
@ -426,7 +426,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
$secondary
component="p"
dangerouslySetInnerHTML={{ __html: detailQuery?.data?.biography || '' }}
sx={{ textAlign: 'justify' }}
style={{ textAlign: 'justify' }}
/>
</Box>
) : null}
@ -434,7 +434,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
<Box component="section">
<Group
noWrap
position="apart"
justify="space-between"
>
<Group
noWrap
@ -483,7 +483,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
</Box>
) : null}
<Box component="section">
<Stack spacing="xl">
<Stack gap="xl">
{carousels
.filter((c) => !c.isHidden)
.map((carousel) => (

6
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
View File

@ -329,7 +329,7 @@ export const AlbumArtistListHeaderFilters = ({
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
gap="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
@ -514,7 +514,7 @@ export const AlbumArtistListHeaderFilters = ({
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
style={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
@ -526,7 +526,7 @@ export const AlbumArtistListHeaderFilters = ({
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Group justify="space-between">
<Text>
{t('table.config.general.autoFitColumns', {
postProcess: 'sentenceCase',

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

@ -58,7 +58,7 @@ export const AlbumArtistListHeader = ({
return (
<Stack
ref={cq.ref}
spacing={0}
gap={0}
>
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex

6
src/renderer/features/context-menu/context-menu-provider.tsx
View File

@ -812,9 +812,9 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
xPos={ctx.xPos}
yPos={ctx.yPos}
>
<Stack spacing={0}>
<Stack gap={0}>
<Stack
spacing={0}
gap={0}
onClick={closeContextMenu}
>
{ctx.menuItems?.map((item) => {
@ -845,7 +845,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
</ContextMenuButton>
</HoverCard.Target>
<HoverCard.Dropdown>
<Stack spacing={0}>
<Stack gap={0}>
{contextMenuItems[
item.id
].children?.map((child) => (

10
src/renderer/features/genres/components/genre-list-header-filters.tsx
View File

@ -212,7 +212,7 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
gap="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
@ -253,7 +253,7 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
compact
fw={600}
size="md"
sx={{
style={{
svg: {
fill: isFolderFilterApplied
? 'var(--primary-color) !important'
@ -313,7 +313,7 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
</Group>
<Group
noWrap
spacing="sm"
gap="sm"
>
<DropdownMenu
position="bottom-end"
@ -392,7 +392,7 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
style={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
@ -404,7 +404,7 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Group justify="space-between">
<Text>
{t('table.config.general.autoFitColumns', {
postProcess: 'titleCase',

2
src/renderer/features/genres/components/genre-list-header.tsx
View File

@ -60,7 +60,7 @@ export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeade
return (
<Stack
ref={cq.ref}
spacing={0}
gap={0}
>
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex

2
src/renderer/features/home/routes/home-route.tsx
View File

@ -229,7 +229,7 @@ const HomeRoute = () => {
mb="5rem"
pt={windowBarStyle === Platform.WEB ? '5rem' : '3rem'}
px="2rem"
spacing="lg"
gap="lg"
>
<FeatureCarousel data={featureItemsWithImage} />
{carousels

8
src/renderer/features/lyrics/components/lyrics-search-form.tsx
View File

@ -48,11 +48,11 @@ const SearchResult = ({ data, onClick }: SearchResultProps) => {
<SearchItem onClick={onClick}>
<Group
noWrap
position="apart"
justify="space-between"
>
<Stack
maw="65%"
spacing={0}
gap={0}
>
<Text
size="md"
@ -63,7 +63,7 @@ const SearchResult = ({ data, onClick }: SearchResultProps) => {
<Text $secondary>{artist}</Text>
<Group
noWrap
spacing="sm"
gap="sm"
>
<Text
$secondary
@ -146,7 +146,7 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
type="auto"
w="100%"
>
<Stack spacing="md">
<Stack gap="md">
{searchResults.map((result) => (
<SearchResult
key={`${result.source}-${result.id}`}

2
src/renderer/features/now-playing/components/drawer-play-queue.tsx
View File

@ -15,7 +15,7 @@ export const DrawerPlayQueue = () => {
>
<Box
bg="var(--main-bg)"
sx={{ borderRadius: '10px' }}
style={{ borderRadius: '10px' }}
>
<PlayQueueListControls
tableRef={queueRef}

6
src/renderer/features/now-playing/components/play-queue-list-controls.tsx
View File

@ -107,13 +107,13 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
return (
<Group
position="apart"
justify="space-between"
px="1rem"
py="1rem"
sx={{ alignItems: 'center' }}
style={{ alignItems: 'center' }}
w="100%"
>
<Group spacing="sm">
<Group gap="sm">
<Button
compact
size="md"

2
src/renderer/features/now-playing/routes/now-playing-route.tsx
View File

@ -15,7 +15,7 @@ const NowPlayingRoute = () => {
<AnimatedPage>
<VirtualGridContainer>
<NowPlayingHeader />
<Paper sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
<Paper style={{ borderTop: '1px solid var(--generic-border-color)' }}>
<PlayQueueListControls
tableRef={queueRef}
type="nowPlaying"

6
src/renderer/features/player/components/full-screen-player-image.tsx
View File

@ -103,7 +103,7 @@ const ImageWithPlaceholder = ({
if (!props.src) {
return (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: '100%',
@ -247,7 +247,7 @@ export const FullScreenPlayerImage = () => {
className="full-screen-player-image-metadata"
maw="100%"
opacity={opacity}
spacing="xs"
gap="xs"
>
<TextTitle
align="center"
@ -292,7 +292,7 @@ export const FullScreenPlayerImage = () => {
>
{index > 0 && (
<Text
sx={{
style={{
display: 'inline-block',
padding: '0 0.5rem',
}}

2
src/renderer/features/player/components/full-screen-player-queue.tsx
View File

@ -102,7 +102,7 @@ export const FullScreenPlayerQueue = () => {
fw="600"
pos="relative"
size="lg"
sx={{
style={{
alignItems: 'center',
color: item.active
? 'var(--main-fg) !important'

4
src/renderer/features/player/components/full-screen-player.tsx
View File

@ -97,8 +97,8 @@ const Controls = () => {
<Group
p="1rem"
pos="absolute"
spacing="sm"
sx={{
gap="sm"
style={{
left: 0,
top: 10,
}}

6
src/renderer/features/player/components/left-controls.tsx
View File

@ -161,7 +161,7 @@ export const LeftControls = () => {
/>
) : (
<Center
sx={{
style={{
background: 'var(--placeholder-bg)',
height: '100%',
}}
@ -180,7 +180,7 @@ export const LeftControls = () => {
opacity={0.8}
radius={50}
size="md"
sx={{
style={{
cursor: 'default',
position: 'absolute',
right: 2,
@ -210,7 +210,7 @@ export const LeftControls = () => {
<Group
noWrap
align="flex-start"
spacing="xs"
gap="xs"
>
<Text
$link

6
src/renderer/features/player/components/right-controls.tsx
View File

@ -215,7 +215,7 @@ export const RightControls = () => {
<Group
noWrap
align="center"
spacing="xs"
gap="xs"
>
<DropdownMenu
withArrow
@ -272,7 +272,7 @@ export const RightControls = () => {
<RiHeartLine size="1.1rem" />
)
}
sx={{
style={{
svg: {
fill: !currentSong?.userFavorite
? undefined
@ -298,7 +298,7 @@ export const RightControls = () => {
) : null}
<Group
noWrap
spacing="xs"
gap="xs"
>
<PlayerButton
icon={

2
src/renderer/features/player/components/shuffle-all-modal.tsx
View File

@ -128,7 +128,7 @@ export const ShuffleAllModal = ({
}, [musicFolders]);
return (
<Stack spacing="md">
<Stack gap="md">
<NumberInput
required
label="How many tracks?"

2
src/renderer/features/playlists/components/playlist-detail-content.tsx
View File

@ -160,7 +160,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
<ContentContainer>
<Group
p="1rem"
position="apart"
justify="space-between"
>
<Group>
<PlayButton onClick={() => handlePlay()} />

2
src/renderer/features/playlists/components/playlist-detail-header.tsx
View File

@ -51,7 +51,7 @@ export const PlaylistDetailHeader = forwardRef(
title={detailQuery?.data?.name || ''}
>
<Stack>
<Group spacing="sm">
<Group gap="sm">
{metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text $noSelect>•</Text>}

6
src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
View File

@ -388,7 +388,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
gap="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
@ -540,7 +540,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
style={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
@ -552,7 +552,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Group justify="space-between">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}

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

@ -43,7 +43,7 @@ export const PlaylistDetailSongListHeader = ({
const isSmartPlaylist = detailQuery?.data?.rules;
return (
<Stack spacing={0}>
<Stack gap={0}>
<PageHeader backgroundColor="var(--titlebar-bg)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />

6
src/renderer/features/playlists/components/playlist-list-header-filters.tsx
View File

@ -288,7 +288,7 @@ export const PlaylistListHeaderFilters = ({
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
gap="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
@ -431,7 +431,7 @@ export const PlaylistListHeaderFilters = ({
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
style={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
@ -443,7 +443,7 @@ export const PlaylistListHeaderFilters = ({
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Group justify="space-between">
<Text>
{t('table.config.general.autoFitColumns', {
postProcess: 'titleCase',

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

@ -67,7 +67,7 @@ export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistLis
return (
<Stack
ref={cq.ref}
spacing={0}
gap={0}
>
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex

6
src/renderer/features/playlists/components/playlist-query-builder.tsx
View File

@ -402,11 +402,11 @@ export const PlaylistQueryBuilder = forwardRef(
noWrap
align="flex-end"
m="1rem"
position="apart"
justify="space-between"
>
<Group
noWrap
spacing="sm"
gap="sm"
w="100%"
>
<Select
@ -443,7 +443,7 @@ export const PlaylistQueryBuilder = forwardRef(
{onSave && onSaveAs && (
<Group
noWrap
spacing="sm"
gap="sm"
>
<Button
loading={isSaving}

6
src/renderer/features/search/components/command-palette.tsx
View File

@ -94,7 +94,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
>
<Group
mb="1rem"
spacing="sm"
gap="sm"
>
{pages.map((page, index) => (
<Fragment key={page}>
@ -261,11 +261,11 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
mt="0.5rem"
p="0.5rem"
>
<Group position="apart">
<Group justify="space-between">
<Command.Loading>
{isHome && isLoading && query !== '' && <Spinner />}
</Command.Loading>
<Group spacing="sm">
<Group gap="sm">
<Kbd size="md">ESC</Kbd>
<Kbd size="md">↑</Kbd>
<Kbd size="md">↓</Kbd>

2
src/renderer/features/search/components/search-header.tsx
View File

@ -36,7 +36,7 @@ export const SearchHeader = ({ tableRef, navigationId }: SearchHeaderProps) => {
return (
<Stack
ref={cq.ref}
spacing={0}
gap={0}
>
<PageHeader>
<Flex

2
src/renderer/features/servers/components/server-list-item.tsx
View File

@ -53,7 +53,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
<Stack>
<ServerSection
title={
<Group position="apart">
<Group justify="space-between">
<Text>Server details</Text>
</Group>
}

4
src/renderer/features/servers/components/server-list.tsx
View File

@ -61,7 +61,7 @@ export const ServerList = () => {
<Group
mb={10}
position="right"
sx={{
style={{
position: 'absolute',
right: 55,
transform: 'translateY(-3.5rem)',
@ -89,7 +89,7 @@ export const ServerList = () => {
value={server.name}
>
<Accordion.Control icon={<RiServerFill size={15} />}>
<Group position="apart">
<Group justify="space-between">
{titleCase(server?.type)} - {server?.name}
</Group>
</Accordion.Control>

2
src/renderer/features/settings/components/general/general-tab.tsx
View File

@ -7,7 +7,7 @@ import { RemoteSettings } from '/@/renderer/features/settings/components/general
export const GeneralTab = () => {
return (
<Stack spacing="md">
<Stack gap="md">
<ApplicationSettings />
<Divider />
<ThemeSettings />

2
src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx
View File

@ -5,7 +5,7 @@ import { HotkeyManagerSettings } from '/@/renderer/features/settings/components/
export const HotkeysTab = () => {
return (
<Stack spacing="md">
<Stack gap="md">
{isElectron() && (
<>
<WindowHotkeySettings />

4
src/renderer/features/settings/components/playback/mpv-settings.tsx
View File

@ -128,7 +128,7 @@ export const MpvSettings = () => {
},
{
control: (
<Stack spacing="xs">
<Stack gap="xs">
<Textarea
autosize
defaultValue={settings.mpvExtraParameters.join('\n')}
@ -145,7 +145,7 @@ export const MpvSettings = () => {
</Stack>
),
description: (
<Stack spacing={0}>
<Stack gap={0}>
<Text
$noSelect
$secondary

2
src/renderer/features/settings/components/playback/playback-tab.tsx
View File

@ -16,7 +16,7 @@ export const PlaybackTab = () => {
return isElectron() || 'AudioContext' in window;
}, []);
return (
<Stack spacing="md">
<Stack gap="md">
<AudioSettings />
<Suspense fallback={<></>}>{hasFancyAudio && <MpvSettings />}</Suspense>
<Divider />

8
src/renderer/features/settings/components/settings-option.tsx
View File

@ -15,12 +15,12 @@ export const SettingsOptions = ({ title, description, control, note }: SettingsO
<>
<Group
noWrap
position="apart"
sx={{ alignItems: 'center' }}
justify="space-between"
style={{ alignItems: 'center' }}
>
<Stack
spacing="xs"
sx={{
gap="xs"
style={{
alignSelf: 'flex-start',
display: 'flex',
maxWidth: '50%',

2
src/renderer/features/settings/components/window/window-tab.tsx
View File

@ -5,7 +5,7 @@ import { DiscordSettings } from '/@/renderer/features/settings/components/window
export const WindowTab = () => {
return (
<Stack spacing="md">
<Stack gap="md">
<WindowSettings />
<Divider />
<DiscordSettings />

4
src/renderer/features/sidebar/components/action-bar.tsx
View File

@ -52,7 +52,7 @@ export const ActionBar = () => {
<Group
grow
noWrap
spacing="sm"
gap="sm"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
@ -91,7 +91,7 @@ export const ActionBar = () => {
<Group
grow
px="1rem"
spacing="sm"
gap="sm"
w="100%"
>
<Button

2
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View File

@ -70,7 +70,7 @@ export const CollapsedSidebar = () => {
{sidebarCollapsedNavigation && (
<Group
grow
spacing={0}
gap={0}
style={{
borderRight: 'var(--sidebar-border)',
}}

8
src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
View File

@ -36,8 +36,8 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
noWrap
className="sidebar-playlist-item"
pos="relative"
position="apart"
sx={{
justify="space-between"
style={{
'&:hover': {
'.sidebar-playlist-controls': {
display: 'flex',
@ -53,7 +53,7 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
component={Link}
overflow="hidden"
size="md"
sx={{
style={{
color: 'var(--sidebar-fg) !important',
cursor: 'default',
width: '100%',
@ -66,9 +66,9 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
noWrap
className="sidebar-playlist-controls"
display="none"
gap="sm"
pos="absolute"
right="0"
spacing="sm"
>
<Button
compact

28
src/renderer/features/sidebar/components/sidebar.tsx
View File

@ -151,24 +151,24 @@ export const Sidebar = () => {
>
<ActionBar />
<Stack
gap={0}
h="100%"
justify="space-between"
spacing={0}
>
<MotionStack
gap={0}
h="100%"
layout="position"
spacing={0}
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
style={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
>
<Stack spacing={0}>
<Stack gap={0}>
{sidebarItemsWithRoute.map((item) => {
return (
<SidebarItem
key={`sidebar-${item.route}`}
to={item.route}
>
<Group spacing="sm">
<Group gap="sm">
<SidebarIcon
active={location.pathname === item.route}
route={item.route}
@ -187,20 +187,20 @@ export const Sidebar = () => {
{sidebarPlaylistList && (
<>
<Group
position="apart"
justify="space-between"
pt="1rem"
px="1.5rem"
>
<Group>
<Box
fw="600"
sx={{ fontSize: '1.2rem' }}
style={{ fontSize: '1.2rem' }}
>
{t('page.sidebar.playlists', { postProcess: 'titleCase' })}
</Box>
{playlistsQuery.isLoading && <Spinner />}
</Group>
<Group spacing="sm">
<Group gap="sm">
<Button
compact
size="md"
@ -265,7 +265,10 @@ export const Sidebar = () => {
/>
) : (
<Center
sx={{ background: 'var(--placeholder-bg)', height: '100%' }}
style={{
background: 'var(--placeholder-bg)',
height: '100%',
}}
>
<RiDiscLine
color="var(--placeholder-fg)"
@ -279,7 +282,12 @@ export const Sidebar = () => {
opacity={0.8}
radius={100}
size="md"
sx={{ cursor: 'default', position: 'absolute', right: 5, top: 5 }}
style={{
cursor: 'default',
position: 'absolute',
right: 5,
top: 5,
}}
tooltip={{
label: t('common.collapse', { postProcess: 'titleCase' }),
openDelay: 500,

2
src/renderer/features/songs/components/jellyfin-song-filters.tsx
View File

@ -139,7 +139,7 @@ export const JellyfinSongFilters = ({
{toggleFilters.map((filter) => (
<Group
key={`nd-filter-${filter.label}`}
position="apart"
justify="space-between"
>
<Text>{filter.label}</Text>
<Switch

2
src/renderer/features/songs/components/navidrome-song-filters.tsx
View File

@ -108,7 +108,7 @@ export const NavidromeSongFilters = ({
{toggleFilters.map((filter) => (
<Group
key={`nd-filter-${filter.label}`}
position="apart"
justify="space-between"
>
<Text>{filter.label}</Text>
<Switch

12
src/renderer/features/songs/components/song-list-header-filters.tsx
View File

@ -435,7 +435,7 @@ export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFilte
<Flex justify="space-between">
<Group
ref={cq.ref}
spacing="sm"
gap="sm"
w="100%"
>
<DropdownMenu position="bottom-start">
@ -476,7 +476,7 @@ export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFilte
compact
fw="600"
size="md"
sx={{
style={{
svg: {
fill: isFolderFilterApplied
? 'var(--primary-color) !important'
@ -507,7 +507,7 @@ export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFilte
<Button
compact
size="md"
sx={{
style={{
svg: {
fill: isFilterApplied ? 'var(--primary-color) !important' : undefined,
},
@ -571,7 +571,7 @@ export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFilte
</Group>
<Group
noWrap
spacing="sm"
gap="sm"
>
<DropdownMenu
position="bottom-end"
@ -655,7 +655,7 @@ export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFilte
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
style={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
@ -665,7 +665,7 @@ export const SongListHeaderFilters = ({ gridRef, tableRef }: SongListHeaderFilte
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Group justify="space-between">
<Text>
{t('table.config.general.autoFitColumns', {
postProcess: 'sentenceCase',

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

@ -62,7 +62,7 @@ export const SongListHeader = ({ gridRef, title, itemCount, tableRef }: SongList
return (
<Stack
ref={cq.ref}
spacing={0}
gap={0}
>
<PageHeader backgroundColor="var(--titlebar-bg)">
<Flex

2
src/renderer/features/titlebar/components/titlebar.tsx
View File

@ -49,7 +49,7 @@ export const Titlebar = ({ children }: TitlebarProps) => {
<TitlebarContainer>
<Right>
{children}
<Group spacing="xs">
<Group gap="xs">
<WindowControls />
</Group>
</Right>