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 { Platform, PressableProps, ViewStyle } from "react-native";
import { SvgProps } from "react-native-svg"; import { SvgProps } from "react-native-svg";
import { YoshikiStyle } from "yoshiki"; import { YoshikiStyle } from "yoshiki";
import { px, Theme, useYoshiki } from "yoshiki/native"; import { px, Stylable, Theme, useYoshiki } from "yoshiki/native";
import { PressableFeedback } from "./links"; import { PressableFeedback } from "./links";
import { alpha } from "./themes"; import { alpha } from "./themes";
import { Breakpoint, ts, useBreakpointValue } from "./utils"; 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(); 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/>. * 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 { View } from "react-native";
import Star from "@material-symbols/svg-400/rounded/star-fill.svg"; import Star from "@material-symbols/svg-400/rounded/star-fill.svg";
import { rem, useYoshiki } from "yoshiki/native"; 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(); const { css } = useYoshiki();
return ( return (
<View {...css({ flexDirection: "row", alignItems: "center" })}> <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) })}> <Skeleton {...css({ width: rem(2) })}>
{rating !== undefined && <P>{rating ? rating / 10 : "??"} / 10</P>} {rating !== undefined && <P {...css({ color })}>{rating ? rating / 10 : "??"} / 10</P>}
</Skeleton> </Skeleton>
</View> </View>
); );

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

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