Replace @emotion/styled with styled-components

This commit is contained in:
jeffvli
2022-11-06 01:53:31 -08:00
parent de91f75203
commit 6ac949bf88
38 changed files with 519 additions and 418 deletions
@@ -117,14 +117,14 @@ const DetailSection = styled.div`
flex-direction: column;
`;
const Row = styled.div<{ secondary?: boolean }>`
const Row = styled.div<{ $secondary?: boolean }>`
width: 100%;
max-width: 100%;
height: 25px;
padding: 0 0.2rem;
overflow: hidden;
color: ${({ secondary }) =>
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
color: ${({ $secondary }) =>
$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
white-space: nowrap;
text-overflow: ellipsis;
`;
@@ -216,7 +216,7 @@ export const DefaultCard = ({
return (
<Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
$secondary={index > 0}
>
{data[row.property].map(
(item: any, itemIndex: number) => (
@@ -345,7 +345,7 @@ export const DefaultCard = ({
return (
<Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
$secondary={index > 0}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
@@ -1,5 +1,4 @@
import React, { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { Group, UnstyledButtonProps } from '@mantine/core';
import { motion } from 'framer-motion';
import {
@@ -8,6 +7,7 @@ import {
RiHeartFill,
RiHeartLine,
} from 'react-icons/ri';
import styled from 'styled-components';
import { Button } from '@/renderer/components/button';
import { DropdownMenu } from '@/renderer/components/dropdown-menu';
import { Play } from '@/renderer/types';
@@ -112,14 +112,14 @@ const DetailSection = styled.div`
flex-direction: column;
`;
const Row = styled.div<{ secondary?: boolean }>`
const Row = styled.div<{ $secondary?: boolean }>`
width: 100%;
max-width: 100%;
height: 25px;
padding: 0 0.2rem;
overflow: hidden;
color: ${({ secondary }) =>
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
color: ${({ $secondary }) =>
$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
white-space: nowrap;
text-overflow: ellipsis;
`;
@@ -235,7 +235,7 @@ export const PosterCard = ({
return (
<Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
$secondary={index > 0}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>