🐛 Mobile | Fix multi-line buttons on iOS (#897)

* Create MultiLineButton to fix issues with buttons with multiple lines on iOS

* Allow setting colors for MultiLineButton

* Set consistent placeholder color on search field

* Dim button text on tap

src/MobileUI/Controls/MultiLineButton.xaml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+             x:Class="SSW.Rewards.Mobile.Controls.MultiLineButton"
+             x:Name="this">
+    <Border BackgroundColor="{Binding BackgroundColor, Source={x:Reference this}}"
+            StrokeThickness="0"
+            StrokeShape="RoundRectangle 10"
+            MinimumWidthRequest="44"
+            MinimumHeightRequest="44"
+            Padding="14,10">
+        <Border.GestureRecognizers>
+            <TapGestureRecognizer Command="{Binding Command, Source={x:Reference this}}" />
+        </Border.GestureRecognizers>
+        <Label Text="{Binding Text, Source={x:Reference this}}"
+               TextColor="{Binding TextColor, Source={x:Reference this}}"
+               FontSize="{Binding FontSize, Source={x:Reference this}}"
+               HorizontalOptions="Center"
+               VerticalOptions="Center"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               LineBreakMode="WordWrap">
+            <Label.Behaviors>
+                <toolkit:TouchBehavior PressedOpacity="0.5" />
+            </Label.Behaviors>
+        </Label>
+    </Border>
+</ContentView>

src/MobileUI/Controls/MultiLineButton.xaml.cs

@@ -0,0 +1,80 @@
+using System.Windows.Input;
+
+namespace SSW.Rewards.Mobile.Controls;
+
+public partial class MultiLineButton
+{
+    public string Text
+    {
+        get => (string)GetValue(TextProperty);
+        set => SetValue(TextProperty, value);
+    }
+
+    public static readonly BindableProperty TextProperty =
+        BindableProperty.Create(
+            nameof(Text),
+            typeof(string),
+            typeof(MultiLineButton),
+            string.Empty
+        );
+
+    public Color TextColor
+    {
+        get => (Color)GetValue(TextColorProperty);
+        set => SetValue(TextColorProperty, value);
+    }
+
+    public static readonly BindableProperty TextColorProperty =
+        BindableProperty.Create(
+            nameof(TextColor),
+            typeof(Color),
+            typeof(MultiLineButton),
+            Colors.White
+        );
+
+    public int FontSize
+    {
+        get => (int)GetValue(FontSizeProperty);
+        set => SetValue(FontSizeProperty, value);
+    }
+
+    public static readonly BindableProperty FontSizeProperty =
+        BindableProperty.Create(
+            nameof(FontSize),
+            typeof(int),
+            typeof(MultiLineButton),
+            14
+        );
+
+    public new Color BackgroundColor
+    {
+        get => (Color)GetValue(BackgroundColorProperty);
+        set => SetValue(BackgroundColorProperty, value);
+    }
+
+    public new static readonly BindableProperty BackgroundColorProperty =
+        BindableProperty.Create(
+            nameof(BackgroundColor),
+            typeof(Color),
+            typeof(MultiLineButton),
+            App.Current.Resources["SSWRed"] as Color
+        );
+
+    public ICommand Command
+    {
+        get => (ICommand)GetValue(CommandProperty);
+        set => SetValue(CommandProperty, value);
+    }
+
+    public static readonly BindableProperty CommandProperty =
+        BindableProperty.Create(
+            nameof(Command),
+            typeof(ICommand),
+            typeof(MultiLineButton)
+        );
+
+    public MultiLineButton()
+    {
+        InitializeComponent();
+    }
+}

src/MobileUI/Controls/Search.xaml

@@ -16,6 +16,7 @@
         <controls:BorderlessEntry
             Grid.Column="0"
             x:Name="SearchEntry"
+            PlaceholderColor="{StaticResource Gray500}"
             android:Entry.ImeOptions="Search"
             Margin="{OnPlatform Android='10,3,0,0', iOS='10,0,0,0'}" 
             TextChanged="SearchEntry_OnTextChanged">

src/MobileUI/MobileUI.csproj

@@ -98,6 +98,10 @@
         <PackageReference Include="Xamarin.Google.Dagger" Version="2.48.1.2" />
         <Compile Update="Platforms\Android\Services\RewardsFirebaseMessagingService.cs">
         </Compile>
+        <Compile Update="Controls\MultiLineButton.xaml.cs">
+          <DependentUpon>MultiLineButton.xaml</DependentUpon>
+          <SubType>Code</SubType>
+        </Compile>
 	</ItemGroup>
 
 	<ItemGroup>
@@ -229,6 +233,10 @@
 		<MauiXaml Update="Pages\SettingsPage.xaml">
 		  <SubType>Designer</SubType>
 		</MauiXaml>
+		<MauiXaml Update="Controls\MultiLineButton.xaml">
+		  <SubType>Designer</SubType>
+		  <Generator>MSBuild:Compile</Generator>
+		</MauiXaml>
 	</ItemGroup>
 
 	<!--https://github.com/dotnet/maui/issues/16514-->

src/MobileUI/PopupPages/ProfilePicturePage.xaml

@@ -5,6 +5,7 @@
                  xmlns:animations="clr-namespace:Mopups.Animations;assembly=Mopups"
                  xmlns:viewModels="clr-namespace:SSW.Rewards.Mobile.ViewModels"
                  xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+                 xmlns:controls="clr-namespace:SSW.Rewards.Mobile.Controls"
                  BackgroundColor="#b3000000"
                  CloseWhenBackgroundIsClicked="False"
                  x:DataType="viewModels:ProfilePictureViewModel"
@@ -61,21 +62,18 @@
                     RowDefinitions="*,15,*"
                     ColumnDefinitions="*,15,*"
                     VerticalOptions="Center">
-                    <Button
-                        Grid.Row="0"
-                        Grid.Column="0"
+
+                    <controls:MultiLineButton
                         Text="Take a new photo"
-                        LineBreakMode="WordWrap"
-                        CornerRadius="10"
-                        Command="{Binding TakePhotoCommand}"/>
-
-                    <Button
+                        Command="{Binding TakePhotoCommand}"
                         Grid.Row="0"
-                        Grid.Column="3"
+                        Grid.Column="0" />
+
+                    <controls:MultiLineButton
                         Text="Choose a new photo"
-                        LineBreakMode="WordWrap"
-                        CornerRadius="10"
-                        Command="{Binding ChoosePhotoCommand}"/>
+                        Command="{Binding ChoosePhotoCommand}"
+                        Grid.Row="0"
+                        Grid.Column="3" />
 
                     <Button
                         Grid.Row="3"

src/MobileUI/PopupPages/RedeemRewardPage.xaml

@@ -309,21 +309,15 @@
                             ColumnDefinitions="*,15,*"
                             Margin="0,0,0,30"
                             IsVisible="{Binding IsBalanceVisible}">
-                            <Button Grid.Column="0"
-                                    Background="{StaticResource SSWRed}"
-                                    CornerRadius="10"
-                                    Text="Redeem in-person"
-                                    FontAttributes="Bold"
-                                    LineBreakMode="WordWrap"
-                                    Command="{Binding RedeemInPersonClickedCommand}"/>
-
-                            <Button Grid.Column="2"
-                                    Background="{StaticResource SSWRed}"
-                                    CornerRadius="10"
-                                    Text="Ship to my address"
-                                    FontAttributes="Bold"
-                                    LineBreakMode="WordWrap"
-                                    Command="{Binding NextClickedCommand}"/>
+                            <controls:MultiLineButton
+                                Text="Redeem in-person"
+                                Command="{Binding RedeemInPersonClickedCommand}"
+                                Grid.Column="0" />
+
+                            <controls:MultiLineButton
+                                Text="Ship to my address"
+                                Command="{Binding NextClickedCommand}"
+                                Grid.Column="2" />
                         </Grid>
 
                         <VerticalStackLayout HorizontalOptions="Center"