Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix ratings and durations colors

Browse Source
This commit is contained in:
Zoe Roux 2023-11-05 12:23:18 +01:00
parent 9bfd1a78bd
commit 972007f9e5
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/packages/primitives/src/icons.tsx
View File

@ -22,7 +22,7 @@ import React, { ComponentProps, ComponentType, ForwardedRef, forwardRef } from "
import { Platform, PressableProps, ViewStyle } from "react-native";
import { SvgProps } from "react-native-svg";
import { YoshikiStyle } from "yoshiki";
import { px, Theme, useYoshiki } from "yoshiki/native";
import { px, Stylable, Theme, useYoshiki } from "yoshiki/native";
import { PressableFeedback } from "./links";
import { alpha } from "./themes";
import { Breakpoint, ts, useBreakpointValue } from "./utils";
@ -126,7 +126,7 @@ export const IconFab = <AsProps = PressableProps,>(
);
};
export const DottedSeparator = () => {
export const DottedSeparator = (props: Stylable) => {
const { css } = useYoshiki();
return <P {...css({ mX: ts(1) })}>{String.fromCharCode(0x2022)}</P>;
return <P {...css({ mX: ts(1) }, props)}>{String.fromCharCode(0x2022)}</P>;
};

8
front/packages/ui/src/components/rating.tsx
View File

@ -18,19 +18,19 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { Icon, P, Skeleton, ts } from "@kyoo/primitives";
import { Breakpoint, Icon, P, Skeleton, ts } from "@kyoo/primitives";
import { View } from "react-native";
import Star from "@material-symbols/svg-400/rounded/star-fill.svg";
import { rem, useYoshiki } from "yoshiki/native";
export const Rating = ({ rating }: { rating?: number }) => {
export const Rating = ({ rating, color }: { rating?: number, color: Breakpoint<string> }) => {
const { css } = useYoshiki();
return (
<View {...css({ flexDirection: "row", alignItems: "center" })}>
<Icon icon={Star} {...css({ marginRight: ts(0.5) })} />
<Icon icon={Star} color={color} {...css({ marginRight: ts(0.5) })} />
<Skeleton {...css({ width: rem(2) })}>
{rating !== undefined && <P>{rating ? rating / 10 : "??"} / 10</P>}
{rating !== undefined && <P {...css({ color })}>{rating ? rating / 10 : "??"} / 10</P>}
</Skeleton>
</View>
);

17
front/packages/ui/src/details/header.tsx
View File

@ -225,14 +225,23 @@ export const TitleLine = ({
)}
{rating !== null && (
<>
<DottedSeparator />
<Rating rating={rating} />
<DottedSeparator
{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
/>
<Rating
rating={rating}
color={{ xs: theme.user.contrast, md: theme.colors.white }}
/>
</>
)}
{runtime && (
<>
<DottedSeparator />
<P>{displayRuntime(runtime)}</P>
<DottedSeparator
{...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}
/>
<P {...css({ color: { xs: theme.user.contrast, md: theme.colors.white } })}>
{displayRuntime(runtime)}
</P>
</>
)}
</View>