optimize for mobile

packages/app/src/pages/login/index.jsx

@@ -47,7 +47,7 @@ export default (props) => {
         </div>
 
         <div className="wrapper">
-            <img src={config.logo.full} className="logo" />
+            <img src={window.isMobile ? config.logo.alt : config.logo.full} className="logo" />
 
             <div className="content">
                 <div className="title">

packages/app/src/pages/login/index.mobile.jsx

@@ -0,0 +1,44 @@
+import React from "react"
+
+import "./index.less"
+
+export default (props) => {
+    const [wallpaperData, setWallpaperData] = React.useState(null)
+
+    const setRandomWallpaper = async () => {
+        const featuredWallpapers = await app.api.request("main", "get", "featuredWallpapers").catch((err) => {
+            console.error(err)
+            return []
+        })
+
+        // get random wallpaper from array
+        const randomWallpaper = featuredWallpapers[Math.floor(Math.random() * featuredWallpapers.length)]
+
+        setWallpaperData(randomWallpaper)
+    }
+
+    React.useEffect(() => {
+        if (app.userData) {
+            return app.goMain()
+        }
+
+        setRandomWallpaper()
+
+        app.eventBus.emit("app.createLogin", {
+            defaultLocked: true,
+        })
+    }, [])
+
+    return <div className="loginPage">
+        <div
+            style={{
+                backgroundImage: `url(${wallpaperData?.url})`,
+            }}
+            className="wallpaper"
+        >
+            <p>
+                {wallpaperData?.author ? wallpaperData.author : null}
+            </p>
+        </div>
+    </div>
+}