♻️ Mobile | Improve text readability on scanner (#675)

* Add Rounded background to Scanner text for visibility * Add background to scanner label --------- Co-authored-by: Tylah Kapa <[email protected]>
SSWConsulting · Feb 14, 2024 · 2fc0e6f · 2fc0e6f
1 parent 4d26596
commit 2fc0e6f
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/src/MobileUI/Pages/ScanPage.xaml b/src/MobileUI/Pages/ScanPage.xaml
@@ -3,21 +3,36 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:zx="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
              xmlns:viewModels="clr-namespace:SSW.Rewards.Mobile.ViewModels"
+             xmlns:system="clr-namespace:System;assembly=System.Runtime"
              BackgroundColor="{StaticResource MainBackground}"
              x:Class="SSW.Rewards.Mobile.Pages.ScanPage"
              x:DataType="viewModels:ScanResultViewModel">
     <Grid>
         <zx:CameraBarcodeReaderView x:Name="scannerView"
                                     BarcodesDetected="Handle_OnScanResult"
                                     IsDetecting="True"/>
-        <StackLayout Padding="0,0,0,200">
-            <Label Text="Scan a QR Code"
+        <Border 
+            BackgroundColor="{StaticResource Background}"
+            VerticalOptions="Start"
+            HeightRequest="80"
+            Margin="20">
+            <Border.StrokeShape>
+                <RoundRectangle CornerRadius="20"/>
+            </Border.StrokeShape>
+            <Label FontSize="Medium"
+                   FontAutoScalingEnabled="False"
                    HorizontalTextAlignment="Center"
-                   TextColor="White"/>
-            <Label Text="from an SSW Employee or Presentation"
-                   HorizontalTextAlignment="Center"
-                   TextColor="White"/>
-        </StackLayout>
+                   VerticalOptions="Center"
+                   TextColor="White">
+                <Label.FormattedText>
+                    <FormattedString>
+                        <Span Text="Scan a QR Code" />
+                        <Span Text="{x:Static system:Environment.NewLine}"/>
+                        <Span Text="from an SSW Employee or Presentation" />
+                    </FormattedString>
+                </Label.FormattedText>
+            </Label>
+        </Border>
         <Image Source="qr_reticle"/>
     </Grid>
 </ContentPage>