Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use an svg blob for the login page

Browse Source
This commit is contained in:
Zoe Roux 2023-01-29 03:43:57 +09:00 committed by Zoe Roux
parent 304951e463
commit e7b4c01f93
2 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/packages/primitives/src/input.tsx
View File

@ -20,7 +20,7 @@
import { forwardRef, ReactNode } from "react";
import { Platform, TextInput, TextInputProps, View } from "react-native";
import { px, useYoshiki } from "yoshiki/native";
import { px, Theme, useYoshiki } from "yoshiki/native";
import { ts } from "./utils";
const focusReset: object = Platform.OS === "web" ? { focus: { self: { boxShadow: "none" } } } : {};
@ -29,7 +29,6 @@ export const Input = forwardRef<
TextInput,
{
variant?: "small" | "big";
style;
right?: ReactNode;
} & TextInputProps
>(function _Input({ style, placeholderTextColor, variant = "small", right, ...props }, ref) {
@ -45,6 +44,8 @@ export const Input = forwardRef<
borderWidth: px(1),
padding: ts(0.5),
flexDirection: "row",
alignContent: "center",
alignItems: "center"
},
variant === "big" && {
borderRadius: ts(4),
@ -57,7 +58,7 @@ export const Input = forwardRef<
<TextInput
ref={ref}
placeholderTextColor={placeholderTextColor ?? theme.overlay1}
{...css({ flexGrow: 1, color: (theme) => theme.paragraph, ...focusReset }, props)}
{...css({ flexGrow: 1, color: (theme: Theme) => theme.paragraph, ...focusReset }, props)}
/>
{right}
</View>

87
front/packages/ui/src/login/index.tsx
View File

@ -24,15 +24,30 @@ import { ComponentProps, useState } from "react";
import { useTranslation } from "react-i18next";
import { ImageBackground, ImageProps, Platform, View } from "react-native";
import { Trans } from "react-i18next";
import { max, min, percent, px, useYoshiki, vh, vw } from "yoshiki/native";
import { min, percent, px, useYoshiki, vh, vw } from "yoshiki/native";
import Visibility from "@material-symbols/svg-400/rounded/visibility-fill.svg";
import VisibilityOff from "@material-symbols/svg-400/rounded/visibility_off-fill.svg";
import { DefaultLayout } from "../layout";
import Svg, { SvgProps, Path } from "react-native-svg";
const SvgBlob = (props: SvgProps) => {
const { css, theme } = useYoshiki();
return (
<View {...css({ width: percent(100), aspectRatio: 5 / 6 }, props)}>
<Svg width="100%" height="100%" viewBox="0 0 500 600">
<Path
d="M459.7 0c-20.2 43.3-40.3 86.6-51.7 132.6-11.3 45.9-13.9 94.6-36.1 137.6-22.2 43-64.1 80.3-111.5 88.2s-100.2-13.7-144.5-1.8C71.6 368.6 35.8 414.2 0 459.7V0h459.7z"
fill={theme.background}
/>
</Svg>
</View>
);
};
const PasswordInput = (props: ComponentProps<typeof Input>) => {
const { css } = useYoshiki();
const [show, setVisibility] = useState(false);
console.log(show);
return (
<Input
@ -55,6 +70,7 @@ export const LoginPage: QueryPage = () => {
const { css } = useYoshiki();
// TODO: Replace the hardcoded 1 to a random show/movie thumbnail.
// TODO: Use a dynamic path for RN
const src = `/api/shows/1/thumbnail`;
const nativeProps = Platform.select<ImageProps>({
web: {
@ -63,8 +79,6 @@ export const LoginPage: QueryPage = () => {
default: {},
});
// TODO: Replace the borderRadius 99999 with an svg shape
return (
<ImageBackground
source={{ uri: src }}
@ -77,46 +91,39 @@ export const LoginPage: QueryPage = () => {
>
<View
{...css({
width: min(vh(175), px(2400)),
height: min(vh(175), px(2400)),
transform: [{ translateX: percent(-50) }, { translateY: percent(-50) }],
bg: (theme) => theme.background,
paddingHorizontal: ts(1),
borderRadius: 99999999999999999999999999999,
justifyContent: "flex-end",
alignItems: "flex-end",
width: min(vh(90), px(1200)),
height: min(vh(90), px(1200)),
})}
>
<View {...css({ width: percent(50), height: percent(50), justifyContent: "center" })}>
<View
<SvgBlob {...css({ position: "absolute", top: 0, left: 0 })} />
<View
{...css({
width: percent(75),
maxWidth: vw(100),
paddingHorizontal: ts(3),
marginTop: ts(6),
})}
>
<H1>{t("login.login")}</H1>
<P {...css({ paddingLeft: ts(1) })}>{t("login.email")}</P>
<Input autoComplete="email" variant="big" />
<P {...css({ paddingLeft: ts(1) })}>{t("login.password")}</P>
<PasswordInput autoComplete="password" variant="big" />
<Button
text={t("login.login")}
{...css({
width: percent(75),
maxWidth: vw(100),
paddingHorizontal: ts(3),
marginBottom: ts(16),
m: ts(1),
width: px(250),
maxWidth: percent(100),
alignSelf: "center",
mY: ts(3),
})}
>
<H1>{t("login.login")}</H1>
<P {...css({ paddingLeft: ts(1) })}>{t("login.email")}</P>
<Input autoComplete="email" variant="big" />
<P {...css({ paddingLeft: ts(1) })}>{t("login.password")}</P>
<PasswordInput autoComplete="password" variant="big" />
<Button
text={t("login.login")}
{...css({
m: ts(1),
width: px(250),
maxWidth: percent(100),
alignSelf: "center",
mY: ts(3),
})}
/>
<P>
<Trans i18nKey="login.or-register">
Don’t have an account? <A href="/register">Register</A>.
</Trans>
</P>
</View>
/>
<P>
<Trans i18nKey="login.or-register">
Don’t have an account? <A href="/register">Register</A>.
</Trans>
</P>
</View>
</View>
</ImageBackground>