Use an svg blob for the login page

front/packages/primitives/src/input.tsx

@@ -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>

front/packages/ui/src/login/index.tsx

@@ -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)),
+					width: min(vh(90), px(1200)),
-					height: min(vh(175), px(2400)),
+					height: min(vh(90), px(1200)),
-					transform: [{ translateX: percent(-50) }, { translateY: percent(-50) }],
-					bg: (theme) => theme.background,
-					paddingHorizontal: ts(1),
-					borderRadius: 99999999999999999999999999999,
-					justifyContent: "flex-end",
-					alignItems: "flex-end",
 				})}
 			>
-				<View {...css({ width: percent(50), height: percent(50), justifyContent: "center" })}>
+				<SvgBlob {...css({ position: "absolute", top: 0, left: 0 })} />
-					<View
+				<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),
+							m: ts(1),
-							maxWidth: vw(100),
+							width: px(250),
-							paddingHorizontal: ts(3),
+							maxWidth: percent(100),
-							marginBottom: ts(16),
+							alignSelf: "center",
+							mY: ts(3),
 						})}
-					>
+					/>
-						<H1>{t("login.login")}</H1>
+					<P>
-						<P {...css({ paddingLeft: ts(1) })}>{t("login.email")}</P>
+						<Trans i18nKey="login.or-register">
-						<Input autoComplete="email" variant="big" />
+							Don’t have an account? <A href="/register">Register</A>.
-						<P {...css({ paddingLeft: ts(1) })}>{t("login.password")}</P>
+						</Trans>
-						<PasswordInput autoComplete="password" variant="big" />
+					</P>
-						<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>
 				</View>
 			</View>
 		</ImageBackground>