diff --git a/apps/web/src/components/auth-container/index.jsx b/apps/web/src/components/auth-container/index.jsx index 66b70380b..baf3a0199 100644 --- a/apps/web/src/components/auth-container/index.jsx +++ b/apps/web/src/components/auth-container/index.jsx @@ -18,7 +18,7 @@ along with this program. If not, see . */ import { useMemo } from "react"; -import { Box, Button, Flex, Image, Link, Text } from "@theme-ui/components"; +import { Button, Flex, Image, Text } from "@theme-ui/components"; import { getRandom, usePromise } from "@notesnook/common"; import Holenstein from "../../assets/testimonials/holenstein.jpg"; import Jason from "../../assets/testimonials/jason.jpg"; @@ -26,6 +26,7 @@ import Cameron from "../../assets/testimonials/cameron.jpg"; import { hosts } from "@notesnook/core"; import { SettingsDialog } from "../../dialogs/settings"; import { strings } from "@notesnook/intl"; +import { FixedColorSchemeThemeProvider } from "../theme-provider"; const testimonials = [ { @@ -80,62 +81,18 @@ function AuthContainer(props) { bg: "background" }} > - - - - - - - - - - - - - - - - - {testimonial.text} —{" "} - - source - + {testimonial.text} - + {testimonial.name} - @{testimonial.username} + + @{testimonial.username} + @@ -218,52 +169,18 @@ function AuthContainer(props) { - - + - - - - - - - {props.children} - + ); } diff --git a/apps/web/src/components/theme-provider/index.tsx b/apps/web/src/components/theme-provider/index.tsx index fa06a8c62..d238f704b 100644 --- a/apps/web/src/components/theme-provider/index.tsx +++ b/apps/web/src/components/theme-provider/index.tsx @@ -19,6 +19,7 @@ along with this program. If not, see . import { EmotionThemeProvider, + FixedThemeProvider, ThemeScopes, themeToCSS, useThemeEngineStore @@ -94,4 +95,25 @@ export function BaseThemeProvider( ); } +export function FixedColorSchemeThemeProvider( + props: PropsWithChildren< + { + injectCssVars?: boolean; + scope?: keyof ThemeScopes; + colorScheme: "light" | "dark"; + } & Omit + > +) { + const { children, scope = "base", ...restProps } = props; + const theme = useThemeStore((store) => + props.colorScheme === "dark" ? store.darkTheme : store.lightTheme + ); + + return ( + + {children} + + ); +} + export { EmotionThemeProvider as ScopedThemeProvider }; diff --git a/apps/web/src/views/auth.tsx b/apps/web/src/views/auth.tsx index 473f25959..0183c2ad1 100644 --- a/apps/web/src/views/auth.tsx +++ b/apps/web/src/views/auth.tsx @@ -389,7 +389,7 @@ function Signup(props: BaseAuthComponentProps<"signup">) { {strings.signupAgreement[0]()}{" "} (props: AuthFormProps) { const formRef = useRef(null); const [form, setForm] = useState(); - if (isSubmitting) - return ; - return ( (props: AuthFormProps) { } }} sx={{ - flex: 1, flexDirection: "column", + size: "100%", alignItems: "center", - justifyContent: "center", - width: ["95%", "95%", "45%"], - alignSelf: "center" + justifyContent: "center" }} > - - {title} - - - {subtitle} - - {typeof children === "function" ? children(form) : children} - {canSkip && ( - - )} + {subtitle} + + {canSkip && ( + + )} + {isSubmitting ? ( + + ) : typeof children === "function" ? ( + children(form) + ) : ( + children + )} - + + ); } @@ -948,8 +962,7 @@ function SubtitleWithAction(props: SubtitleWithActionProps) { sx={{ textDecoration: "underline", fontWeight: "bold", - fontSize: "subtitle", - color: "paragraph", + fontSize: "title", cursor: "pointer" }} onClick={props.action.onClick} @@ -969,7 +982,11 @@ export function AuthField(props: FieldProps) { data-test-id={props["data-test-id"] || props.id} sx={{ mt: 2, width: "100%" }} styles={{ - // label: { fontWeight: "normal" }, + label: { fontWeight: "normal", fontSize: "subtitle" }, + helpText: { + fontSize: "body", + my: "2px" + }, input: { p: "12px", borderRadius: "default", @@ -992,21 +1009,20 @@ type SubmitButtonProps = { text: string; disabled?: boolean; loading?: boolean; + sx?: Record; }; export function SubmitButton(props: SubmitButtonProps) { return ( - + - + )} @@ -539,31 +539,41 @@ export function RecoveryForm( } }} sx={{ - flex: 1, flexDirection: "column", + size: "100%", alignItems: "center", - justifyContent: "center", - width: ["95%", 420], - alignSelf: "center" + justifyContent: "center" }} > - - {title} - - - {subtitle} - - {typeof children === "function" ? children(form) : children} - + + {title} + + + {subtitle} + + {typeof children === "function" ? children(form) : children} + + ); } diff --git a/packages/theme/src/emotion/theme-provider.tsx b/packages/theme/src/emotion/theme-provider.tsx index 49e22bd4b..889eaf1a2 100644 --- a/packages/theme/src/emotion/theme-provider.tsx +++ b/packages/theme/src/emotion/theme-provider.tsx @@ -21,13 +21,15 @@ import { ThemeProvider } from "@theme-ui/core"; import React, { ForwardedRef, PropsWithChildren, useMemo } from "react"; import { Box, BoxProps } from "@theme-ui/components"; import { useTheme } from "@emotion/react"; -import { ThemeScopes } from "../theme-engine/types.js"; +import { ThemeDefinition, ThemeScopes } from "../theme-engine/types.js"; import { Theme, ThemeFactory } from "../theme/index.js"; import { + getThemeScope, ScopedThemeProvider, useThemeColors, useThemeEngineStore } from "../theme-engine/index.js"; +import { colorsToCSSVariables } from "../theme-engine/utils.js"; export type EmotionThemeProviderProps = { scope?: keyof ThemeScopes; @@ -90,6 +92,65 @@ function _EmotionThemeProvider( ); } +type FixedThemeProviderProps = { + scope: keyof ThemeScopes; + injectCssVars?: boolean; + theme: ThemeDefinition; +} & Omit; + +function _FixedThemeProvider( + props: PropsWithChildren, + forwardedRef: ForwardedRef +) { + const { + children, + scope = "base", + injectCssVars = true, + theme, + ...restProps + } = props; + + const themeScope = getThemeScope(scope, theme); + const { colors } = themeScope; + + const themeProperties = useMemo( + () => + ThemeFactory.construct({ + scope: colors, + colorScheme: theme.colorScheme + }), + [colors, theme.colorScheme] + ); + + return ( + + + {injectCssVars ? ( + + {children} + + ) : ( + children + )} + + + ); +} + +export const FixedThemeProvider = React.forwardRef< + HTMLDivElement, + FixedThemeProviderProps +>(_FixedThemeProvider); + export const EmotionThemeProvider = React.forwardRef< HTMLDivElement, EmotionThemeProviderProps diff --git a/packages/theme/src/theme-engine/index.ts b/packages/theme/src/theme-engine/index.ts index 4e8892847..0878b24e4 100644 --- a/packages/theme/src/theme-engine/index.ts +++ b/packages/theme/src/theme-engine/index.ts @@ -69,6 +69,19 @@ export function useThemeColors(scope?: keyof ThemeScopes): ThemeScope { return currentTheme; } +export function getThemeScope( + scope: keyof ThemeScopes, + theme: ThemeDefinition +): ThemeScope { + const themeScope = theme.scopes[scope] || theme.scopes.base; + const currentTheme = { + colors: buildVariants(scope, theme, themeScope), + isDark: theme.colorScheme === "dark", + scope + }; + return currentTheme; +} + export const useCurrentThemeScope = () => useContext(ThemeScopeContext); export const ScopedThemeProvider = ThemeScopeContext.Provider; export const THEME_COMPATIBILITY_VERSION: ThemeCompatibilityVersion = 1;