From adf20327bdf7ba14cf86b6ef18af552a1b6f1fa6 Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Tue, 27 Jun 2023 19:05:38 +0200
Subject: [PATCH] fix broken welcome page mobile layout

---
 commafeed-client/src/pages/WelcomePage.tsx | 39 +++++++++++++---------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/commafeed-client/src/pages/WelcomePage.tsx b/commafeed-client/src/pages/WelcomePage.tsx
index 0e824bab..82be253e 100644
--- a/commafeed-client/src/pages/WelcomePage.tsx
+++ b/commafeed-client/src/pages/WelcomePage.tsx
@@ -13,9 +13,20 @@ import { SiGithub, SiTwitter } from "react-icons/si"
 import { TbClock, TbKey, TbMoon, TbSettings, TbSun, TbUserPlus } from "react-icons/tb"
 import { PageTitle } from "./PageTitle"
 
+const iconSize = 18
+
 export function WelcomePage() {
+    const serverInfos = useAppSelector(state => state.server.serverInfos)
     const { colorScheme } = useMantineColorScheme()
+    const dispatch = useAppDispatch()
     const image = colorScheme === "light" ? welcome_page_light : welcome_page_dark
+
+    const login = useAsyncCallback(client.user.login, {
+        onSuccess: () => {
+            dispatch(redirectToRootCategory())
+        },
+    })
+
     return (
         <Container>
             <Header />
@@ -24,6 +35,18 @@ export function WelcomePage() {
                 <Title order={3}>Bloat-free feed reader</Title>
             </Center>
 
+            {serverInfos?.demoAccountEnabled && (
+                <Center>
+                    <ActionButton
+                        label={<Trans>Try the demo!</Trans>}
+                        icon={<TbClock size={iconSize} />}
+                        variant="outline"
+                        onClick={() => login.execute({ name: "demo", password: "demo" })}
+                        showLabelOnMobile
+                    />
+                </Center>
+            )}
+
             <Divider my="xl" />
 
             <Image src={image} />
@@ -58,30 +81,14 @@ function Header() {
 }
 
 function Buttons() {
-    const iconSize = 18
     const serverInfos = useAppSelector(state => state.server.serverInfos)
     const { colorScheme, toggleColorScheme } = useMantineColorScheme()
     const { isBrowserExtensionPopup, openSettingsPage } = useBrowserExtension()
     const dispatch = useAppDispatch()
     const dark = colorScheme === "dark"
 
-    const login = useAsyncCallback(client.user.login, {
-        onSuccess: () => {
-            dispatch(redirectToRootCategory())
-        },
-    })
-
     return (
         <Group spacing={14}>
-            {serverInfos?.demoAccountEnabled && (
-                <ActionButton
-                    label={<Trans>Try the demo!</Trans>}
-                    icon={<TbClock size={iconSize} />}
-                    variant="outline"
-                    onClick={() => login.execute({ name: "demo", password: "demo" })}
-                    showLabelOnMobile
-                />
-            )}
             <ActionButton
                 label={<Trans>Log in</Trans>}
                 icon={<TbKey size={iconSize} />}