feat: improve main menu and sign in UIs. Add QR code so you can login…

… to MS account on mobile

src/react/MainMenu.tsx

@@ -71,7 +71,7 @@ export default ({
         </ButtonWithTooltip>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <ButtonWithTooltip
-            style={{ width: 170 }}
+            style={{ width: 150 }}
             onClick={singleplayerAction}
             data-test-id='singleplayer-button'
             initialTooltip={{
@@ -83,6 +83,14 @@ export default ({
             Singleplayer
           </ButtonWithTooltip>
 
+          <ButtonWithTooltip
+            disabled={!mapsProvider}
+            // className={styles['maps-provider']}
+            icon={pixelartIcons.map}
+            initialTooltip={{ content: 'Explore maps to play from provider!', placement: 'top-start' }}
+            onClick={() => mapsProvider && openURL(httpsRegex.test(mapsProvider) ? mapsProvider : 'https://' + mapsProvider, false)}
+          />
+
           <ButtonWithTooltip
             data-test-id='select-file-folder'
             icon={pixelartIcons.folder}
@@ -145,14 +153,6 @@ export default ({
           <span>A Minecraft client in the browser!</span>
         </span>
       </div>
-
-      {mapsProvider &&
-        <ButtonWithTooltip
-          className={styles['maps-provider']}
-          icon={pixelartIcons.map}
-          initialTooltip={{ content: 'Explore maps to play from provider!', placement: 'right' }}
-          onClick={() => openURL(httpsRegex.test(mapsProvider) ? mapsProvider : 'https://' + mapsProvider, false)}
-        />}
     </div>
   )
 }

src/react/Screen.tsx

@@ -5,14 +5,15 @@ interface Props {
   style?: React.CSSProperties
   className?: string
   titleSelectable?: boolean
+  titleMarginTop?: number
 }
 
-export default ({ title, children, backdrop = true, style, className, titleSelectable }: Props) => {
+export default ({ title, children, backdrop = true, style, className = '', titleSelectable, titleMarginTop }: Props) => {
   return (
     <>
       {backdrop === 'dirt' ? <div className='dirt-bg' /> : backdrop ? <div className="backdrop" /> : null}
       <div className={`fullscreen ${className}`} style={{ overflow: 'auto', ...style }}>
-        <div className="screen-content">
+        <div className="screen-content" style={titleMarginTop === undefined ? {} : { marginTop: titleMarginTop }}>
           <div className={`screen-title ${titleSelectable ? 'text-select' : ''}`}>{title}</div>
           {children}
         </div>

src/react/SignInMessage.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react'
 import { useUtilsEffect } from '@zardoy/react-util'
-import PixelartIcon from './PixelartIcon'
+import { QRCodeSVG } from 'qrcode.react'
+import PixelartIcon, { pixelartIcons } from './PixelartIcon'
 import Screen from './Screen'
 import Button from './Button'
 
 export default ({
   code = 'ABCD-EFGH-IJKL-MNOP',
   loginLink = 'https://aka.ms/devicelogin',
   connectingServer = 'mc.example.comsdlfjsklfjsfjdskfjsj',
-  warningText = true,
   expiresEnd = Date.now() + 1000 * 60 * 5,
   setSaveToken = (() => { }) as ((state: boolean) => void) | undefined,
   defaultSaveToken = true,
@@ -28,7 +28,7 @@ export default ({
     })
   }, [])
 
-  return <Screen title='Microsoft Account Authentication'>
+  return <Screen title='Microsoft Account Authentication' titleMarginTop={5}>
     <div style={{
       background: 'white',
       padding: '20px 18px',
@@ -83,19 +83,25 @@ export default ({
             fontWeight: 600,
           }}
           target='_blank'
-        >{loginLink}
+        >{loginLink.replace(/(https?:\/\/)?(www\.)?/, '')}
         </a>
         {' '}
         and enter the code above.
       </div>
-      {warningText && <div style={{
-        fontSize: 12,
+      <div style={{
+        fontSize: 11,
         marginTop: 5,
-        color: 'gray'
+        color: 'gray',
+        display: 'flex',
+        gap: 2
       }}
       >
-        <PixelartIcon iconName='alert' /> Join only <b>vanilla servers</b>! This client is detectable and may result in a ban by anti-cheat plugins.
-      </div>}
+        <div>
+          <PixelartIcon iconName={pixelartIcons.alert} styles={{ display: 'inline-block', }} />
+          Join only <b>vanilla servers</b>! This client is detectable and may result in a ban by anti-cheat plugins.
+        </div>
+        <QRCodeSVG size={40} value={directLink} style={{ display: 'block', flexShrink: 0 }} color='gray' />
+      </div>
       {setSaveToken && <label style={{
         fontSize: 12,
         display: 'flex',

src/react/SignInMessageProvider.tsx

@@ -1,6 +1,7 @@
 import { proxy, ref, useSnapshot } from 'valtio'
 import SignInMessage from './SignInMessage'
 import { lastConnectOptions } from './AppStatusProvider'
+import { useIsModalActive } from './utilsApp'
 
 export const signInMessageState = proxy({
   code: '',
@@ -12,8 +13,9 @@ export const signInMessageState = proxy({
 
 export default () => {
   const { code, expiresOn, link, shouldSaveToken } = useSnapshot(signInMessageState)
+  const signInTestModal = useIsModalActive('sign-in-test')
 
-  if (!code) return null
+  if (!code && !signInTestModal) return null
 
   return <SignInMessage
     code={code}

src/react/mainMenu.module.css

@@ -100,10 +100,10 @@
     color: white;
     text-shadow: 1px 1px #222;
     font-size: 10px;
+    padding-left: calc(env(safe-area-inset-left) / 2);
 }
 
 .product-info {
-    padding-left: calc(env(safe-area-inset-left) / 2);
 }
 
 .product-description {

src/react/mainMenu.module.css.d.ts

@@ -14,10 +14,8 @@ interface CssExports {
   minec: string;
   minecraft: string;
   'product-description': string;
-  'product-info': string;
   'product-link': string;
   productDescription: string;
-  productInfo: string;
   productLink: string;
   raft: string;
   root: string;

src/screens.css

@@ -37,6 +37,8 @@
     /* todo I'm not sure about it */
     /* margin-top: calc(100% / 6 - 16px); */
     align-items: center;
+    /* apply safe area padding */
+    padding: 0 calc(env(safe-area-inset-left) / 2) 0 calc(env(safe-area-inset-right) / 2);
 
     gap: 10px;
 }