feat: rework signin page

mbret · Feb 23, 2024 · f3e163d · f3e163d
1 parent 6230126
commit f3e163d
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 130 deletions.
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -1,6 +1,12 @@
 import { FC, Suspense, useEffect, useState } from "react"
 import { AppNavigator } from "./navigation/AppNavigator"
-import { ThemeProvider, Theme, StyledEngineProvider } from "@mui/material"
+import {
+  ThemeProvider,
+  Theme,
+  StyledEngineProvider,
+  Fade,
+  Box
+} from "@mui/material"
 import { theme } from "./theme"
 import { BlockingBackdrop } from "./common/BlockingBackdrop"
 import { TourProvider } from "./app-tour/TourProvider"
@@ -11,7 +17,7 @@ import { UpdateAvailableDialog } from "./UpdateAvailableDialog"
 import { RxDbProvider } from "./rxdb"
 import { useObservers } from "./rxdb/sync/useObservers"
 import { PreloadQueries } from "./PreloadQueries"
-import { AppLoading } from "./AppLoading"
+import { SplashScreen } from "./SplashScreen"
 import { FirstTimeExperienceTours } from "./firstTimeExperience/FirstTimeExperienceTours"
 import { DialogProvider } from "./dialog"
 import { BlurContainer } from "./books/BlurContainer"
@@ -25,8 +31,7 @@ import {
   usePersistSignals,
   QueryClientProvider,
   createLocalforageAdapter,
-  createSharedStoreAdapter,
-  QueryClient
+  createSharedStoreAdapter
 } from "reactjrx"
 import localforage from "localforage"
 import { signalEntriesToPersist } from "./storage"
@@ -67,8 +72,8 @@ export function App() {
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
           <QueryClientProvider client={queryClient}>
-            <Suspense fallback={<AppLoading />}>
-              {!isAppReady && <AppLoading />}
+            <Suspense fallback={<SplashScreen show />}>
+              {/* <SplashScreen show={!isAppReady} /> */}
               <RxDbProvider>
                 {isHydrated && (
                   <>
@@ -79,24 +84,29 @@ export function App() {
                         }
                         return Comp
                       },
-                        <DialogProvider>
-                          <TourProvider>
-                            <AppNavigator />
-                            <FirstTimeExperienceTours />
-                            <ManageBookCollectionsDialog />
-                            <ManageBookTagsDialog />
-                            <ManageTagBooksDialog />
-                          </TourProvider>
-                          <UpdateAvailableDialog
-                            serviceWorker={newServiceWorker}
-                          />
-                          <ReplicateRemoteDb />
-                          <BlockingBackdrop />
-                          <Effects />
-                        </DialogProvider>
+                      <Fade in={isAppReady}>
+                        <Box height="100%">
+                          <DialogProvider>
+                            <TourProvider>
+                              <AppNavigator />
+                              <FirstTimeExperienceTours />
+                              <ManageBookCollectionsDialog />
+                              <ManageBookTagsDialog />
+                              <ManageTagBooksDialog />
+                            </TourProvider>
+                            <UpdateAvailableDialog
+                              serviceWorker={newServiceWorker}
+                            />
+                            <ReplicateRemoteDb />
+                            <BlockingBackdrop />
+                            <Effects />
+                          </DialogProvider>
+                        </Box>
+                      </Fade>
                     )}
                   </>
                 )}
+
                 <PreloadQueries
                   onReady={() => {
                     setLoading((state) => ({

diff --git a/packages/web/src/AppLoading.tsx b/packages/web/src/AppLoading.tsx
diff --git a/packages/web/src/SplashScreen.tsx b/packages/web/src/SplashScreen.tsx
@@ -0,0 +1,30 @@
+import { Box, Fade } from "@mui/material"
+import { memo, useState } from "react"
+import { Logo } from "./common/Logo"
+
+export const SplashScreen = memo(({ show }: { show: boolean }) => {
+  const [hidden, setHidden] = useState(false)
+
+  if (hidden) return null
+
+  return (
+    <Fade
+      in={show}
+      exit
+      onTransitionEnd={() => {
+        setHidden(true)
+      }}
+      timeout={500}
+    >
+      <Box
+        height="100%"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        alignContent="center"
+      >
+        <Logo />
+      </Box>
+    </Fade>
+  )
+})
diff --git a/packages/web/src/auth/Header.tsx b/packages/web/src/auth/Header.tsx
diff --git a/packages/web/src/auth/LoginScreen.tsx b/packages/web/src/auth/LoginScreen.tsx
@@ -1,14 +1,13 @@
-import { useTheme, Button, Box, Link, Typography } from "@mui/material"
+import { useTheme, Button, Box, Link, Typography, Stack } from "@mui/material"
 import { Alert } from "@mui/material"
-import { Header } from "./Header"
-import { CenteredBox } from "../common/CenteredBox"
 import { useTranslation } from "react-i18next"
 import { Google } from "@mui/icons-material"
 import { useSignIn } from "./useSignIn"
 import { ErrorMessage, isCancelError } from "../errors"
 import { OrDivider } from "../common/OrDivider"
 import { links } from "@oboku/shared"
 import { useMutation } from "reactjrx"
+import { Logo } from "../common/Logo"
 
 export const LoginScreen = () => {
   const { signIn } = useSignIn()
@@ -20,49 +19,57 @@ export const LoginScreen = () => {
   const { t } = useTranslation()
 
   return (
-    <CenteredBox
-      style={{
-        flexShrink: 0,
-        paddingTop: theme.spacing(4),
-        paddingBottom: theme.spacing(4),
-        overflow: "scroll",
-        display: "flex",
-        flexDirection: "column"
-      }}
+    <Stack
+      flex={1}
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      gap={3}
+      px={2}
     >
-      <Header />
-      {error && !isCancelError(error) ? (
-        <Box mb={2}>
-          <Alert severity="warning">
-            <ErrorMessage error={error} />
-          </Alert>
-        </Box>
-      ) : null}
-      <Button
-        onClick={() => mutate()}
-        size="large"
-        fullWidth
-        startIcon={<Google />}
-        disabled={isPending}
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          flexFlow: "row",
+          paddingBottom: theme.spacing(4)
+        }}
       >
-        {t("authScreen.sign.google")}
-      </Button>
-      <Box mt={2}>
-        <Alert severity="info" variant="outlined">
-          Want more choices? Please let us know on{" "}
-          <Link href={links.discord} underline="hover">
-            discord
-          </Link>
-        </Alert>
+        <Logo />
       </Box>
-      <OrDivider title="MORE" />
-      <Typography textAlign="center">
-        Visit{" "}
-        <Link href={links.site} underline="hover">
-          oboku
-        </Link>{" "}
-        for more information or help
-      </Typography>
-    </CenteredBox>
+      <Stack maxWidth={400}>
+        {error && !isCancelError(error) ? (
+          <Box mb={2}>
+            <Alert severity="warning">
+              <ErrorMessage error={error} />
+            </Alert>
+          </Box>
+        ) : null}
+        <Button
+          onClick={() => mutate()}
+          size="large"
+          startIcon={<Google />}
+          disabled={isPending}
+        >
+          {t("authScreen.sign.google")}
+        </Button>
+        <Box mt={2}>
+          <Alert severity="info" variant="outlined">
+            Want more choices? Please let us know on{" "}
+            <Link href={links.discord} underline="hover">
+              discord
+            </Link>
+          </Alert>
+        </Box>
+        <OrDivider title="more" />
+        <Typography textAlign="center">
+          Visit{" "}
+          <Link href={links.site} underline="hover">
+            oboku
+          </Link>{" "}
+          for more information or help
+        </Typography>
+      </Stack>
+    </Stack>
   )
 }
diff --git a/packages/web/src/common/CenteredBox.tsx b/packages/web/src/common/CenteredBox.tsx
diff --git a/packages/web/src/common/OrDivider.tsx b/packages/web/src/common/OrDivider.tsx
@@ -20,7 +20,7 @@ export const OrDivider: FC<{ title?: string; style?: React.CSSProperties }> = ({
     >
       <div
         style={{
-          borderBottom: "1px solid black",
+          borderBottom: `1px solid ${theme.palette.grey[600]}`,
           height: 1,
           width: "100%"
         }}
@@ -31,11 +31,13 @@ export const OrDivider: FC<{ title?: string; style?: React.CSSProperties }> = ({
           marginRight: theme.spacing(2)
         }}
       >
-        <Typography>{title}</Typography>
+        <Typography textTransform="uppercase" variant="body2">
+          {title}
+        </Typography>
       </div>
       <div
         style={{
-          borderBottom: "1px solid black",
+          borderBottom: `1px solid ${theme.palette.grey[600]}`,
           width: "100%"
         }}
       ></div>

diff --git a/packages/web/src/theme.tsx b/packages/web/src/theme.tsx
@@ -22,7 +22,7 @@ declare module "@mui/material/styles" {
 export const theme = createTheme({
   transitions: {
     // So we have `transition: none;` everywhere
-    create: () => "none"
+    // create: () => "none"
   },
   palette: {
     mode: `light`,