diff --git a/front/app.config.ts b/front/app.config.ts index 0a073ba8..9c42ee2e 100644 --- a/front/app.config.ts +++ b/front/app.config.ts @@ -5,7 +5,7 @@ import { supportedLanguages } from "./src/providers/translations.compile.ts"; const IS_DEV = process.env.APP_VARIANT === "development"; export const expo: ExpoConfig = { - name: IS_DEV ? "Kyoo Development" : "Kyoo", + name: IS_DEV ? "Kyoo Dev" : "Kyoo", slug: "kyoo", scheme: "kyoo", version: "1.0.0", diff --git a/front/public/splash-screen.png b/front/public/splash-screen.png index 499addfd..d1427ed4 100644 Binary files a/front/public/splash-screen.png and b/front/public/splash-screen.png differ diff --git a/front/src/app/(app)/_layout.tsx b/front/src/app/(app)/_layout.tsx index 0e216f00..5cc12ce5 100644 --- a/front/src/app/(app)/_layout.tsx +++ b/front/src/app/(app)/_layout.tsx @@ -1,13 +1,14 @@ import { getFocusedRouteNameFromRoute } from "@react-navigation/native"; import { Stack } from "expo-router"; import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { useCSSVariable } from "uniwind"; +import { useCSSVariable, useResolveClassNames } from "uniwind"; import { ErrorConsumer } from "~/providers/error-consumer"; import { NavbarRight, NavbarTitle } from "~/ui/navbar"; export default function Layout() { const insets = useSafeAreaInsets(); const accent = useCSSVariable("--color-accent"); + const { color } = useResolveClassNames("text-slate-200"); return ( @@ -22,6 +23,7 @@ export default function Layout() { headerStyle: { backgroundColor: accent as string, }, + headerTintColor: color as string, }} > ( - { - children, - text, - icon, - licon, - disabled, - as, - ...props - }: { - children?: ReactElement | ReactElement[] | Falsy; - text?: string; - licon?: ReactElement | Falsy; - icon?: ReactElement | Falsy; - disabled?: boolean; - as?: ComponentType; - } & AsProps, - ref: ForwardedRef, -) { - const { css } = useYoshiki("button"); +export const Button = ({ + text, + icon, + ricon, + disabled, + as, + ref, + className, + ...props +}: { + disabled?: boolean; + text?: string; + icon?: ComponentProps["icon"] | Falsy; + ricon?: ComponentProps["icon"] | Falsy; + ref?: Ref; + className?: string; + as?: ComponentType; +} & AsProps) => { const Container = as ?? PressableFeedback; return ( theme.accent, - borderWidth: ts(0.5), - fover: { - self: { bg: (theme: Theme) => theme.accent }, - text: { color: (theme: Theme) => theme.colors.white }, - }, - }, - disabled && { - child: { - self: { - borderColor: (theme) => theme.overlay1, - }, - text: { - color: (theme) => theme.overlay1, - }, - }, - }, - ], - props as any, - ) as AsProps)} - > - {(licon || text || icon) != null && ( - - {licon} - {text &&

{text}

} - {icon} - + className={cn( + "flex-row items-center justify-center overflow-hidden", + "rounded-4xl border-3 border-accent p-1", + disabled && "border-slate-600", + "group focus-within:bg-accent hover:bg-accent", + className, )} - {children} + {...(props as AsProps)} + > + + {icon && ( + + )} + {text && ( +

+ {text} +

+ )} + {ricon && ( + + )} + ); -}); +}; diff --git a/front/src/primitives/menu.tsx b/front/src/primitives/menu.tsx index 4c591d22..f638471c 100644 --- a/front/src/primitives/menu.tsx +++ b/front/src/primitives/menu.tsx @@ -122,7 +122,7 @@ const MenuItem = ({ @@ -136,7 +136,7 @@ const MenuItem = ({ if (href) router.push(href); }} disabled={disabled} - className="h-10 w-full flex-row items-center px-4" + className="h-15 w-full flex-row items-center px-4" {...props} > {left && left} diff --git a/front/src/primitives/menu.web.tsx b/front/src/primitives/menu.web.tsx index ab30f238..dcf58c09 100644 --- a/front/src/primitives/menu.web.tsx +++ b/front/src/primitives/menu.web.tsx @@ -54,7 +54,7 @@ const Menu = ({ }} > - + string; }) => { - const { css: wCss } = useYoshiki(); - const { css } = useNativeYoshiki(); - return ( theme.accent, - borderWidth: ts(0.5), - fover: { - self: { bg: (theme: Theme) => theme.accent }, - text: { color: (theme: Theme) => theme.colors.white }, - }, - })} + className={cn( + "group flex-row items-center justify-center overflow-hidden rounded-4xl", + "border-2 border-accent p-1 outline-0 focus-within:bg-accent hover:bg-accent", + )} > - -

{}

- - + +

+ {} +

+ + - - - - {({ css }) => ( - - theme.background, - overflow: "auto", - minWidth: "220px", - borderRadius: "8px", - boxShadow: - "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)", - zIndex: 2, - maxHeight: - "calc(var(--radix-dropdown-menu-content-available-height) * 0.8)", - })} - > - - - - - {values.map((x) => ( - - ))} - - - - - - - )} - - - + + + + + + + {values.map((x) => ( + + ))} + + + + + + ); }; const Item = forwardRef( function Item({ label, value, ...props }, ref) { - const { css, theme } = useYoshiki(); - const { css: nCss } = useNativeYoshiki(); return ( - <> - {/* */} - theme.paragraph, - borderRadius: "4px", - position: "relative", - userSelect: "none", - ...focusReset, - }, - props as any, - )} - > - theme.paragraph })}> - {label} - - - - - - + + {label} + + + + ); }, ); diff --git a/front/src/primitives/text.tsx b/front/src/primitives/text.tsx index e1e5a149..576c496b 100644 --- a/front/src/primitives/text.tsx +++ b/front/src/primitives/text.tsx @@ -25,7 +25,6 @@ const styleText = ( ) => { const Wrapped = ({ className, - style, ...props }: { ref?: Ref } & TextProps) => { return ( @@ -128,7 +127,8 @@ export const CroppedText = ({ (acc, line) => acc + line.text, "", ); - setNeedExpand(visible !== children); + if (!expended) + setNeedExpand(visible !== children && visible?.length > 0); }} {...props} > diff --git a/front/src/ui/navbar/icon.tsx b/front/src/ui/navbar/icon.tsx index cd060cad..9b6d9820 100644 --- a/front/src/ui/navbar/icon.tsx +++ b/front/src/ui/navbar/icon.tsx @@ -5,10 +5,16 @@ import { Svg } from "~/primitives"; export const KyooLongLogo = (props: ComponentProps) => { return ( - + - - + + ); diff --git a/front/src/ui/navbar/index.tsx b/front/src/ui/navbar/index.tsx index c3ac78e4..6a1f6c79 100644 --- a/front/src/ui/navbar/index.tsx +++ b/front/src/ui/navbar/index.tsx @@ -46,7 +46,7 @@ export const NavbarTitle = ({ @@ -172,7 +172,7 @@ export const NavbarRight = () => { icon={Search} as={Link} href={"/browse"} - className="fill-slate-200 dark:fill-slate-200" + iconClassName="fill-slate-200 dark:fill-slate-200" {...tooltip(t("navbar.search"))} /> )} @@ -181,7 +181,7 @@ export const NavbarRight = () => { icon={Admin} as={Link} href={"/admin"} - className="fill-slate-200 dark:fill-slate-200" + iconClassName="fill-slate-200 dark:fill-slate-200" {...tooltip(t("navbar.admin"))} /> )} diff --git a/front/src/ui/settings/account.tsx b/front/src/ui/settings/account.tsx index db06f661..ddbd5161 100644 --- a/front/src/ui/settings/account.tsx +++ b/front/src/ui/settings/account.tsx @@ -26,6 +26,7 @@ import { useMutation } from "~/query"; import { deleteAccount, logout } from "../login/logic"; import { PasswordInput } from "../login/password-input"; import { Preference, SettingsContainer } from "./base"; +import { useUniwind } from "uniwind"; // function dataURItoBlob(dataURI: string) { // const byteString = atob(dataURI.split(",")[1]); @@ -39,7 +40,7 @@ import { Preference, SettingsContainer } from "./base"; export const AccountSettings = () => { const account = useAccount()!; - const { css, theme } = useYoshiki(); + const { theme } = useUniwind(); const [setPopup, close] = usePopup(); const { t } = useTranslation(); @@ -68,15 +69,15 @@ export const AccountSettings = () => { +