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

Lint files based on updated rules

Browse source
This commit is contained in:
jeffvli 2023-09-15 20:42:38 -07:00
parent d45b01625b
commit ec457d5125
57 changed files with 153 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,8 +27,8 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
svg {
transition: fill 0.2s ease-in-out;
fill: ${(props) => `var(--btn-${props.variant}-fg)`};
transition: fill 0.2s ease-in-out;
}
&:disabled {

12
src/renderer/components/card/album-card.tsx
View file

@ -14,9 +14,9 @@ const CardWrapper = styled.div<{
link?: boolean;
}>`
padding: 1rem;
cursor: ${({ link }) => link && 'pointer'};
background: var(--card-default-bg);
border-radius: var(--card-default-radius);
cursor: ${({ link }) => link && 'pointer'};
transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
&:hover {
@ -61,17 +61,17 @@ const ImageSection = styled.div`
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
content: '';
user-select: none;
background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
}
`;
const Image = styled(SimpleImg)`
border-radius: var(--card-default-radius);
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%);
box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 20%);
`;
const ControlsContainer = styled.div`
@ -95,8 +95,8 @@ const Row = styled.div<{ $secondary?: boolean }>`
padding: 0 0.2rem;
overflow: hidden;
color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
`;

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

@ -23,7 +23,7 @@ const PlayButton = styled.button<PlayButtonType>`
justify-content: center;
width: 50px;
height: 50px;
background-color: rgb(255, 255, 255);
background-color: rgb(255 255 255);
border: none;
border-radius: 50%;
opacity: 0.8;
@ -41,8 +41,8 @@ const PlayButton = styled.button<PlayButtonType>`
}
svg {
fill: rgb(0, 0, 0);
stroke: rgb(0, 0, 0);
fill: rgb(0 0 0);
stroke: rgb(0 0 0);
}
`;

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

@ -14,8 +14,8 @@ const Row = styled.div<{ $secondary?: boolean }>`
padding: 0 0.2rem;
overflow: hidden;
color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
`;

8
src/renderer/components/card/poster-card.tsx
View file

@ -33,8 +33,8 @@ const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
width: 100%;
height: 100%;
overflow: hidden;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
pointer-events: auto;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
.card-controls {
opacity: 0;
@ -57,11 +57,11 @@ const ImageContainerStyles = css`
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
content: '';
user-select: none;
background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
}
&:hover {

12
src/renderer/components/context-menu/index.tsx
View file

@ -1,4 +1,4 @@
import { forwardRef, ReactNode, Ref } from 'react';
import { ComponentPropsWithoutRef, forwardRef, ReactNode, Ref } from 'react';
import { Box, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
import { motion, Variants } from 'framer-motion';
import styled from 'styled-components';
@ -20,7 +20,7 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
max-width: ${({ maxWidth }) => maxWidth}px;
background: var(--dropdown-menu-bg);
border-radius: var(--dropdown-menu-border-radius);
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
button:first-child {
border-top-left-radius: var(--dropdown-menu-border-radius);
@ -35,13 +35,13 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
export const StyledContextMenuButton = styled(UnstyledButton)`
padding: var(--dropdown-menu-item-padding);
color: var(--dropdown-menu-fg);
font-weight: 500;
font-family: var(--content-font-family);
font-weight: 500;
color: var(--dropdown-menu-fg);
text-align: left;
cursor: default;
background: var(--dropdown-menu-bg);
border: none;
cursor: default;
& .mantine-Button-inner {
justify-content: flex-start;
@ -65,7 +65,7 @@ export const ContextMenuButton = forwardRef(
leftIcon,
...props
}: UnstyledButtonProps &
React.ComponentPropsWithoutRef<'button'> & {
ComponentPropsWithoutRef<'button'> & {
leftIcon?: ReactNode;
rightIcon?: ReactNode;
},

2
src/renderer/components/dialog/index.tsx
View file

@ -5,7 +5,7 @@ import styled from 'styled-components';
const StyledDialog = styled(MantineDialog)`
&.mantine-Dialog-root {
background-color: var(--modal-bg);
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
}
`;

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

@ -30,8 +30,10 @@ const StyledMenuLabel = styled(MantineMenu.Label)<MenuLabelProps>`
const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
position: relative;
padding: var(--dropdown-menu-item-padding);
font-size: var(--dropdown-menu-item-font-size);
font-family: var(--content-font-family);
font-size: var(--dropdown-menu-item-font-size);
cursor: default;
&:disabled {
opacity: 0.6;
@ -50,17 +52,15 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
& .mantine-Menu-itemRightSection {
display: flex;
}
cursor: default;
`;
const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
margin: 0;
padding: 0;
margin: 0;
background: var(--dropdown-menu-bg);
filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
border: var(--dropdown-menu-border);
border-radius: var(--dropdown-menu-border-radius);
filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
/* *:first-child {
border-top-left-radius: var(--dropdown-menu-border-radius);
@ -74,8 +74,8 @@ const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
`;
const StyledMenuDivider = styled(MantineMenu.Divider)`
margin: 0;
padding: 0;
margin: 0;
`;
export const DropdownMenu = ({ children, ...props }: MenuProps) => {

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

@ -20,16 +20,16 @@ const Carousel = styled(motion.div)`
min-height: 250px;
padding: 2rem;
overflow: hidden;
background: linear-gradient(180deg, var(--main-bg), rgba(25, 26, 28, 60%));
background: linear-gradient(180deg, var(--main-bg), rgb(25 26 28 / 60%));
border-radius: 1rem;
`;
const Grid = styled.div`
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: 200px minmax(0, 1fr);
grid-auto-columns: 1fr;
width: 100%;
max-width: 100%;
height: 100%;
@ -59,10 +59,10 @@ const BackgroundImage = styled.img`
z-index: 0;
width: 150%;
height: 150%;
user-select: none;
filter: blur(24px);
object-fit: cover;
object-position: 0 30%;
filter: blur(24px);
user-select: none;
`;
const BackgroundImageOverlay = styled.div`
@ -72,7 +72,7 @@ const BackgroundImageOverlay = styled.div`
z-index: 10;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(25, 26, 28, 30%), var(--main-bg));
background: linear-gradient(180deg, rgb(25 26 28 / 30%), var(--main-bg));
`;
const Wrapper = styled(Link)`

8
src/renderer/components/page-header/index.tsx
View file

@ -1,6 +1,6 @@
import { Flex, FlexProps } from '@mantine/core';
import { AnimatePresence, motion, Variants } from 'framer-motion';
import { useRef } from 'react';
import { ReactNode, useRef } from 'react';
import styled from 'styled-components';
import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
import { useWindowSettings } from '/@/renderer/store/settings.store';
@ -27,8 +27,8 @@ const Header = styled(motion.div)<{
width: 100%;
height: 100%;
margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
-webkit-app-region: ${(props) => props.$isDraggable && 'drag'};
button {
@ -66,7 +66,7 @@ export interface PageHeaderProps
extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
animated?: boolean;
backgroundColor?: string;
children?: React.ReactNode;
children?: ReactNode;
height?: string;
isHidden?: boolean;
position?: string;
@ -131,7 +131,7 @@ export const PageHeader = ({
{backgroundColor && (
<>
<BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
<BackgroundImageOverlay theme={theme} />
<BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
</>
)}
</Container>

3
src/renderer/components/paper/index.tsx
View file

@ -1,9 +1,10 @@
import { ReactNode } from 'react';
import type { PaperProps as MantinePaperProps } from '@mantine/core';
import { Paper as MantinePaper } from '@mantine/core';
import styled from 'styled-components';
export interface PaperProps extends MantinePaperProps {
children: React.ReactNode;
children: ReactNode;
}
const StyledPaper = styled(MantinePaper)<PaperProps>`

2
src/renderer/components/popover/index.tsx
View file

@ -12,8 +12,8 @@ const StyledPopover = styled(MantinePopover)``;
const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
padding: 0.5rem;
font-size: 0.9em;
font-family: var(--content-font-family);
font-size: 0.9em;
background-color: var(--dropdown-menu-bg);
border: var(--dropdown-menu-border);
`;

2
src/renderer/components/segmented-control/index.tsx
View file

@ -7,8 +7,8 @@ type SegmentedControlProps = MantineSegmentedControlProps;
const StyledSegmentedControl = styled(MantineSegmentedControl)<MantineSegmentedControlProps>`
& .mantine-SegmentedControl-label {
color: var(--input-fg);
font-family: var(--content-font-family);
color: var(--input-fg);
}
background-color: var(--input-bg);

2
src/renderer/components/slider/index.tsx
View file

@ -23,8 +23,8 @@ const StyledSlider = styled(MantineSlider)`
& .mantine-Slider-label {
padding: 0 1rem;
color: var(--tooltip-fg);
font-size: 1em;
color: var(--tooltip-fg);
background: var(--tooltip-bg);
}
`;

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

@ -13,8 +13,8 @@ const StyledTabs = styled(MantineTabs)`
&.mantine-Tabs-tab {
padding: 0.5rem 1rem;
font-weight: 600;
font-size: 1rem;
font-weight: 600;
background-color: var(--main-bg);
}

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

@ -20,8 +20,8 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
overflow: ${(props) => props.overflow};
color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
cursor: ${(props) => props.$link && 'cursor'};
transition: color 0.2s ease-in-out;
user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
transition: color 0.2s ease-in-out;
${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
&:hover {
@ -49,7 +49,6 @@ _TextTitle.defaultProps = {
$link: false,
$noSelect: false,
$secondary: false,
font: undefined,
overflow: 'visible',
to: '',
weight: 400,

2
src/renderer/components/text/index.tsx
View file

@ -20,8 +20,8 @@ interface TextProps extends MantineTextDivProps {
const StyledText = styled(MantineText)<TextProps>`
overflow: ${(props) => props.overflow};
color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
font-family: ${(props) => props.font};
color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
cursor: ${(props) => props.$link && 'cursor'};
user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}

10
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View file

@ -38,11 +38,11 @@ const DefaultCardContainer = styled.div<{ $isHidden?: boolean; $itemGap: number
height: calc(100% - 2rem);
margin: ${({ $itemGap }) => $itemGap}px;
overflow: hidden;
pointer-events: auto;
cursor: pointer;
background: var(--card-default-bg);
border-radius: var(--card-default-radius);
cursor: pointer;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
pointer-events: auto;
&:hover {
background: var(--card-default-bg-hover);
@ -89,11 +89,11 @@ const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
content: '';
user-select: none;
background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
}
${(props) =>
props.$isFavorite &&

14
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
View file

@ -23,7 +23,7 @@ const PlayButton = styled.button<PlayButtonType>`
justify-content: center;
width: 50px;
height: 50px;
background-color: rgb(255, 255, 255);
background-color: rgb(255 255 255);
border: none;
border-radius: 50%;
opacity: 0.8;
@ -41,8 +41,8 @@ const PlayButton = styled.button<PlayButtonType>`
}
svg {
fill: rgb(0, 0, 0);
stroke: rgb(0, 0, 0);
fill: rgb(0 0 0);
stroke: rgb(0 0 0);
}
`;
@ -79,11 +79,11 @@ const FavoriteBanner = styled.div`
left: -50px;
width: 80px;
height: 80px;
background-color: var(--primary-color);
box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
transform: rotate(-45deg);
content: '';
pointer-events: none;
content: '';
background-color: var(--primary-color);
box-shadow: 0 0 10px 8px rgb(0 0 0 / 80%);
transform: rotate(-45deg);
`;
const ControlsRow = styled.div`

8
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View file

@ -38,8 +38,8 @@ const PosterCardContainer = styled.div<{ $isHidden?: boolean; $itemGap: number }
height: 100%;
margin: ${({ $itemGap }) => $itemGap}px;
overflow: hidden;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
pointer-events: auto;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
.card-controls {
opacity: 0;
@ -66,11 +66,11 @@ const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
content: '';
user-select: none;
background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
opacity: 0;
transition: all 0.2s ease-in-out;
}
${(props) =>

2
src/renderer/components/virtual-table/cells/combined-title-cell.tsx
View file

@ -15,10 +15,10 @@ import { Skeleton } from '/@/renderer/components/skeleton';
const CellContainer = styled(motion.div)<{ height: number }>`
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
grid-auto-columns: 1fr;
gap: 0.5rem;
width: 100%;
max-width: 100%;

2
src/renderer/components/virtual-table/headers/generic-table-header.tsx
View file

@ -30,9 +30,9 @@ export const HeaderWrapper = styled.div<{ position: Options['position'] }>`
const HeaderText = styled(_Text)<{ position: Options['position'] }>`
width: 100%;
height: 100%;
color: var(--ag-header-foreground-color);
font-weight: 500;
line-height: inherit;
color: var(--ag-header-foreground-color);
text-align: ${(props) =>
props.position === 'right'
? 'flex-end'

2
src/renderer/components/virtual-table/index.tsx
View file

@ -53,7 +53,7 @@ const TableWrapper = styled.div`
const DummyHeader = styled.div<{ height?: number }>`
position: absolute;
height: ${({ height }) => height || 36}px};
height: ${({ height }) => height || 36}px;
`;
dayjs.extend(relativeTime);