Update mobile app sign in page (#4264)

# What this PR does

Changed the text of the deep link sign in button and reorders the
sections so that the qr code is on top in mobile mode

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall-mobile-app/issues/605

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.
This commit is contained in:
Salvatore Giordano 2024-04-24 10:10:22 +02:00 committed by GitHub
parent 9afbcfc063
commit 5188a8d7b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 79 additions and 79 deletions

View file

@ -203,10 +203,10 @@ export const MobileAppConnection = observer(({ userPk }: Props) => {
</Block>
)}
<Block shadowed bordered withBackground className={cx('container__box')}>
<DownloadIcons />
{content}
</Block>
<Block shadowed bordered withBackground className={cx('container__box')}>
{content}
<DownloadIcons />
</Block>
</div>
{mobileAppIsCurrentlyConnected && isCurrentUser && !disconnectingMobileApp && (

View file

@ -15,6 +15,25 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
<div
class="container"
>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<div
class="css-1yjvs5a"
>
Loading...
<div
class="css-1tqtz24"
data-testid="Spinner"
>
<i
aria-label="loading spinner"
class="fa fa-spinner fa-spin fa-spin"
/>
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
@ -101,25 +120,6 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<div
class="css-1yjvs5a"
>
Loading...
<div
class="css-1tqtz24"
data-testid="Spinner"
>
<i
aria-label="loading spinner"
class="fa fa-spinner fa-spin fa-spin"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -141,6 +141,25 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
<div
class="container"
>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<div
class="css-1yjvs5a"
>
Loading...
<div
class="css-1tqtz24"
data-testid="Spinner"
>
<i
aria-label="loading spinner"
class="fa fa-spinner fa-spin fa-spin"
/>
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
@ -227,25 +246,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<div
class="css-1yjvs5a"
>
Loading...
<div
class="css-1tqtz24"
data-testid="Spinner"
>
<i
aria-label="loading spinner"
class="fa fa-spinner fa-spin fa-spin"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -267,6 +267,25 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
<div
class="container"
>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<div
class="css-1yjvs5a"
>
Loading...
<div
class="css-1tqtz24"
data-testid="Spinner"
>
<i
aria-label="loading spinner"
class="fa fa-spinner fa-spin fa-spin"
/>
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
@ -353,25 +372,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<div
class="css-1yjvs5a"
>
Loading...
<div
class="css-1tqtz24"
data-testid="Spinner"
>
<i
aria-label="loading spinner"
class="fa fa-spinner fa-spin fa-spin"
/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -434,6 +434,15 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
<div
class="container"
>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<span
class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
>
There was an error disconnecting your mobile app. Please try again.
</span>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
@ -520,15 +529,6 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<span
class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
>
There was an error disconnecting your mobile app. Please try again.
</span>
</div>
</div>
</div>
</div>
@ -550,6 +550,15 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
<div
class="container"
>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<span
class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
>
There was an error fetching your QR code. Please try again.
</span>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
@ -636,15 +645,6 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
</div>
</div>
</div>
<div
class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
>
<span
class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
>
There was an error fetching your QR code. Please try again.
</span>
</div>
</div>
</div>
</div>

View file

@ -25,7 +25,7 @@ export const LinkLoginButton: FC<Props> = (props: Props) => {
window.open(mobileDeepLink, '_blank');
}}
>
Sign in
Connect Mobile App
</Button>
</VerticalGroup>
);

View file

@ -34,7 +34,7 @@ exports[`LinkLoginButton it renders properly 1`] = `
<span
class="css-1riaxdn"
>
Sign in
Connect Mobile App
</span>
</button>
</div>