From 1e182e0d75f9b81172981f7335efc833ae5623df Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Fri, 6 Jan 2023 18:16:46 +0900 Subject: [PATCH] Install poppins as a font --- front/apps/mobile/app/_layout.tsx | 40 +- front/apps/mobile/package.json | 2 + front/apps/web/next.config.js | 3 +- front/apps/web/package.json | 2 +- front/apps/web/src/pages/_app.tsx | 23 +- front/packages/primitives/src/links.tsx | 3 +- front/packages/primitives/src/text.tsx | 15 +- .../primitives/src/themes/catppuccin.ts | 4 - .../packages/primitives/src/themes/theme.tsx | 36 +- front/packages/primitives/src/tooltip.tsx | 1 - front/packages/ui/src/navbar/index.tsx | 6 +- front/yarn.lock | 602 ++++++++++-------- 12 files changed, 412 insertions(+), 325 deletions(-) diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx index fd5de140..33ec96bf 100644 --- a/front/apps/mobile/app/_layout.tsx +++ b/front/apps/mobile/app/_layout.tsx @@ -26,7 +26,15 @@ import { QueryClientProvider } from "@tanstack/react-query"; import i18next from "i18next"; import { Stack } from "expo-router"; import { getLocales } from "expo-localization"; -import { useState } from "react"; +import * as SplashScreen from "expo-splash-screen"; +import { + useFonts, + Poppins_300Light, + Poppins_400Regular, + Poppins_900Black, +} from "@expo-google-fonts/poppins"; +import { useCallback, useState } from "react"; +import { useColorScheme } from "react-native"; import { initReactI18next, useTranslation } from "react-i18next"; import { useTheme } from "yoshiki/native"; import "intl-pluralrules"; @@ -47,34 +55,50 @@ i18next.use(initReactI18next).init({ }, }); -const ThemedStack = () => { +const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => { const theme = useTheme(); return ( , + headerTitle: () => , headerRight: () => , headerStyle: { backgroundColor: theme.appbar, }, headerTintColor: theme.colors.white, - headerTitleStyle: { - fontWeight: "bold", - }, }} /> ); }; +SplashScreen.preventAutoHideAsync(); + export default function Root() { const [queryClient] = useState(() => createQueryClient()); + const theme = useColorScheme(); + const [fontsLoaded] = useFonts({ Poppins_300Light, Poppins_400Regular, Poppins_900Black }); + const onLayout = useCallback(async () => { + if (fontsLoaded) { + await SplashScreen.hideAsync(); + } + }, [fontsLoaded]); + + if (!fontsLoaded) return null; return ( - + - + diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json index b3fe8687..145bd691 100644 --- a/front/apps/mobile/package.json +++ b/front/apps/mobile/package.json @@ -11,6 +11,7 @@ "build:dev": "eas build --profile development --platform android" }, "dependencies": { + "@expo-google-fonts/poppins": "^0.2.2", "@gorhom/portal": "^1.0.14", "@kyoo/ui": "workspace:^", "@material-symbols/svg-400": "^0.4.2", @@ -21,6 +22,7 @@ "expo-build-properties": "~0.4.1", "expo-constants": "~14.0.2", "expo-dev-client": "~2.0.1", + "expo-font": "~11.0.1", "expo-linear-gradient": "~12.0.1", "expo-linking": "~3.3.0", "expo-localization": "~14.0.0", diff --git a/front/apps/web/next.config.js b/front/apps/web/next.config.js index e60bb5c8..14591000 100755 --- a/front/apps/web/next.config.js +++ b/front/apps/web/next.config.js @@ -21,7 +21,6 @@ const path = require("path"); const CopyPlugin = require("copy-webpack-plugin"); const DefinePlugin = require("webpack").DefinePlugin; -const withFont = require("next-fonts"); const suboctopus = path.dirname(require.resolve("libass-wasm")); @@ -131,4 +130,4 @@ if (process.env.NODE_ENV !== "production") { ]; } -module.exports = withFont(nextConfig); +module.exports = nextConfig; diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 944dc679..d2e28f07 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -15,6 +15,7 @@ "@kyoo/primitives": "workspace:^", "@kyoo/ui": "workspace:^", "@material-symbols/svg-400": "^0.4.2", + "@next/font": "13.0.5", "@radix-ui/react-dropdown-menu": "^2.0.1", "@tanstack/react-query": "^4.19.1", "expo-linear-gradient": "^12.0.1", @@ -24,7 +25,6 @@ "libass-wasm": "^4.1.0", "moti": "^0.21.0", "next": "13.0.5", - "next-fonts": "^1.5.1", "next-translate": "^1.6.0", "raf": "^3.4.1", "react": "18.2.0", diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx index 9ee59a6e..b39d274f 100755 --- a/front/apps/web/src/pages/_app.tsx +++ b/front/apps/web/src/pages/_app.tsx @@ -21,29 +21,20 @@ import "../polyfill"; import { Hydrate, QueryClientProvider } from "@tanstack/react-query"; -import { ReactNode, useState } from "react"; -import NextApp, { AppContext, type AppProps } from "next/app"; -import { - HiddenIfNoJs, - SkeletonCss, - ThemeSelector as KThemeSelector, - WebTooltip, -} from "@kyoo/primitives"; +import { HiddenIfNoJs, SkeletonCss, ThemeSelector, WebTooltip } from "@kyoo/primitives"; import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models"; +import { useState } from "react"; +import NextApp, { AppContext, type AppProps } from "next/app"; +import { Poppins } from "@next/font/google"; import { useTheme, useMobileHover } from "yoshiki/web"; import superjson from "superjson"; import Head from "next/head"; import { withTranslations } from "../i18n"; -const ThemeSelector = ({ children }: { children?: ReactNode | ReactNode[] }) => { - // TODO: Handle user selected mode (light, dark, auto) - // TODO: Hande theme change. - return {children}; -}; +const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" }); const GlobalCssTheme = () => { const theme = useTheme(); - return ( <>