From 2602a094436d94d0bca19d427f04272c259d3f7e Mon Sep 17 00:00:00 2001
From: Matt Portune <59324545+mportune-bw@users.noreply.github.com>
Date: Thu, 11 Feb 2021 14:38:30 -0500
Subject: [PATCH] UX tweaks for Send (#1260)

* additional help text

* replace send type picker with segmented control

* formatting

* added note about rider issue

* additional design tweaks
---
 src/App/Pages/Accounts/TwoFactorPage.xaml     |   6 +-
 src/App/Pages/Generator/GeneratorPage.xaml    |  30 ++--
 src/App/Pages/Send/SendAddEditPage.xaml       | 148 ++++++++++++++----
 src/App/Pages/Send/SendAddEditPage.xaml.cs    |  19 ++-
 .../Pages/Send/SendAddEditPageViewModel.cs    |  40 ++---
 .../Pages/Settings/AutofillServicesPage.xaml  |   8 +-
 src/App/Pages/Settings/OptionsPage.xaml       |   6 +-
 src/App/Pages/Settings/SyncPage.xaml          |   2 +-
 src/App/Pages/Vault/AddEditPage.xaml          |   4 +-
 src/App/Pages/Vault/CollectionsPage.xaml      |   2 +-
 src/App/Pages/Vault/SharePage.xaml            |   2 +-
 src/App/Resources/AppResources.Designer.cs    |  18 +++
 src/App/Resources/AppResources.resx           |  10 ++
 src/App/Styles/Base.xaml                      |   2 +
 14 files changed, 202 insertions(+), 95 deletions(-)

diff --git a/src/App/Pages/Accounts/TwoFactorPage.xaml b/src/App/Pages/Accounts/TwoFactorPage.xaml
index a253be5d9..e4feaf84b 100644
--- a/src/App/Pages/Accounts/TwoFactorPage.xaml
+++ b/src/App/Pages/Accounts/TwoFactorPage.xaml
@@ -50,7 +50,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="{u:I18n RememberMe}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Remember}"
@@ -85,7 +85,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="{u:I18n RememberMe}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Remember}"
@@ -105,7 +105,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="{u:I18n RememberMe}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Remember}"
diff --git a/src/App/Pages/Generator/GeneratorPage.xaml b/src/App/Pages/Generator/GeneratorPage.xaml
index 7caf105c5..38cc84af4 100644
--- a/src/App/Pages/Generator/GeneratorPage.xaml
+++ b/src/App/Pages/Generator/GeneratorPage.xaml
@@ -98,12 +98,12 @@
                     <StackLayout StyleClass="box-row, box-row-stepper">
                         <Label
                             Text="{u:I18n NumberOfWords}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             VerticalOptions="FillAndExpand"
                             VerticalTextAlignment="Center" />
                         <Label
                             Text="{Binding NumWords}"
-                            StyleClass="box-label, box-sub-label"
+                            StyleClass="box-sub-label"
                             HorizontalOptions="FillAndExpand"
                             HorizontalTextAlignment="End"
                             VerticalOptions="FillAndExpand"
@@ -128,7 +128,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="{u:I18n Capitalize}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Capitalize}"
@@ -141,7 +141,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="{u:I18n IncludeNumber}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding IncludeNumber}"
@@ -155,11 +155,11 @@
                     <StackLayout StyleClass="box-row, box-row-slider">
                         <Label
                             Text="{u:I18n Length}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             VerticalOptions="CenterAndExpand" />
                         <Label
                             Text="{Binding Length}"
-                            StyleClass="box-label, box-sub-label"
+                            StyleClass="box-sub-label"
                             WidthRequest="30"
                             VerticalOptions="CenterAndExpand"
                             HorizontalTextAlignment="End" />
@@ -177,7 +177,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="A-Z"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Uppercase}"
@@ -190,7 +190,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="a-z"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Lowercase}"
@@ -203,7 +203,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="0-9"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Number}"
@@ -216,7 +216,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="!@#$%^&amp;*"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding Special}"
@@ -229,12 +229,12 @@
                     <StackLayout StyleClass="box-row, box-row-stepper">
                         <Label
                             Text="{u:I18n MinNumbers}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             VerticalOptions="FillAndExpand"
                             VerticalTextAlignment="Center" />
                         <Label
                             Text="{Binding MinNumber}"
-                            StyleClass="box-label, box-sub-label"
+                            StyleClass="box-sub-label"
                             HorizontalOptions="FillAndExpand"
                             HorizontalTextAlignment="End"
                             VerticalOptions="FillAndExpand"
@@ -249,12 +249,12 @@
                     <StackLayout StyleClass="box-row, box-row-stepper">
                         <Label
                             Text="{u:I18n MinSpecial}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             VerticalOptions="FillAndExpand"
                             VerticalTextAlignment="Center" />
                         <Label
                             Text="{Binding MinSpecial}"
-                            StyleClass="box-label, box-sub-label"
+                            StyleClass="box-sub-label"
                             HorizontalOptions="FillAndExpand"
                             HorizontalTextAlignment="End"
                             VerticalOptions="FillAndExpand"
@@ -269,7 +269,7 @@
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="{u:I18n AvoidAmbiguousCharacters}"
-                            StyleClass="box-label, box-label-regular"
+                            StyleClass="box-label-regular"
                             HorizontalOptions="StartAndExpand" />
                         <Switch
                             IsToggled="{Binding AvoidAmbiguous}"
diff --git a/src/App/Pages/Send/SendAddEditPage.xaml b/src/App/Pages/Send/SendAddEditPage.xaml
index 2abee8b85..b303e222b 100644
--- a/src/App/Pages/Send/SendAddEditPage.xaml
+++ b/src/App/Pages/Send/SendAddEditPage.xaml
@@ -53,6 +53,26 @@
                          x:Name="_deleteItem"
                          x:Key="deleteItem" />
 
+            <Style x:Key="segmentedButtonBase" TargetType="Button">
+                <Setter Property="HeightRequest" Value="{Binding SegmentedButtonHeight}" />
+                <Setter Property="FontSize" Value="{Binding SegmentedButtonFontSize}" />
+                <Setter Property="CornerRadius" Value="0" />
+            </Style>
+            <Style x:Key="segmentedButtonNormal" BaseResourceKey="segmentedButtonBase" TargetType="Button">
+                <Setter Property="TextColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="FontAttributes" Value="None" />
+                <Setter Property="BackgroundColor" Value="Transparent" />
+                <Setter Property="BorderColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="BorderWidth" Value="1" />
+
+            </Style>
+            <Style x:Key="segmentedButtonDisabled" BaseResourceKey="segmentedButtonBase" TargetType="Button">
+                <Setter Property="TextColor" Value="{StaticResource TitleTextColor}" />
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="BorderWidth" Value="0" />
+            </Style>
+
             <ScrollView x:Key="scrollView" x:Name="_scrollView">
                 <StackLayout Spacing="20">
                     <StackLayout StyleClass="box">
@@ -61,11 +81,62 @@
                             <Label
                                 Text="{u:I18n Type}"
                                 StyleClass="box-label" />
-                            <Picker
-                                x:Name="_typePicker"
-                                ItemsSource="{Binding TypeOptions, Mode=OneTime}"
-                                SelectedIndex="{Binding TypeSelectedIndex}"
-                                StyleClass="box-value" />
+                            <Grid RowSpacing="0" ColumnSpacing="0" Margin="{Binding SegmentedButtonMargins}">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="*" />
+                                </Grid.ColumnDefinitions>
+                                <Button Text="{u:I18n TypeText}"
+                                        IsEnabled="{Binding IsFile}"
+                                        Clicked="TextType_Clicked"
+                                        AutomationProperties.IsInAccessibleTree="True"
+                                        AutomationProperties.Name="{u:I18n Text}"
+                                        Grid.Column="0">
+                                    <VisualStateManager.VisualStateGroups>
+                                        <!-- Rider users, if the x:Name values below are red, it's a known issue: -->
+                                        <!-- https://youtrack.jetbrains.com/issue/RSRP-479388 -->
+                                        <VisualStateGroup x:Name="CommonStates">
+                                            <VisualState x:Name="Normal">
+                                                <VisualState.Setters>
+                                                    <Setter Property="Style"
+                                                            Value="{StaticResource segmentedButtonNormal}" />
+                                                </VisualState.Setters>
+                                            </VisualState>
+                                            <VisualState x:Name="Disabled">
+                                                <VisualState.Setters>
+                                                    <Setter Property="Style"
+                                                            Value="{StaticResource segmentedButtonDisabled}" />
+                                                </VisualState.Setters>
+                                            </VisualState>
+                                        </VisualStateGroup>
+                                    </VisualStateManager.VisualStateGroups>
+                                </Button>
+                                <Button Text="{u:I18n TypeFile}"
+                                        IsEnabled="{Binding IsText}"
+                                        Clicked="FileType_Clicked"
+                                        AutomationProperties.IsInAccessibleTree="True"
+                                        AutomationProperties.Name="{u:I18n File}"
+                                        Grid.Column="1">
+                                    <VisualStateManager.VisualStateGroups>
+                                        <!-- Rider users, if the x:Name values below are red, it's a known issue: -->
+                                        <!-- https://youtrack.jetbrains.com/issue/RSRP-479388 -->
+                                        <VisualStateGroup x:Name="CommonStates">
+                                            <VisualState x:Name="Normal">
+                                                <VisualState.Setters>
+                                                    <Setter Property="Style"
+                                                            Value="{StaticResource segmentedButtonNormal}" />
+                                                </VisualState.Setters>
+                                            </VisualState>
+                                            <VisualState x:Name="Disabled">
+                                                <VisualState.Setters>
+                                                    <Setter Property="Style"
+                                                            Value="{StaticResource segmentedButtonDisabled}" />
+                                                </VisualState.Setters>
+                                            </VisualState>
+                                        </VisualStateGroup>
+                                    </VisualStateManager.VisualStateGroups>
+                                </Button>
+                            </Grid>
                         </StackLayout>
                         <StackLayout StyleClass="box-row">
                             <Label
@@ -75,6 +146,10 @@
                                 x:Name="_nameEntry"
                                 Text="{Binding Send.Name}"
                                 StyleClass="box-value" />
+                            <Label
+                                Text="{u:I18n NameInfo}"
+                                StyleClass="box-footer-label"
+                                Margin="0,5,0,0" />
                         </StackLayout>
                         <StackLayout StyleClass="box-row"
                                      IsVisible="{Binding IsText}">
@@ -88,10 +163,14 @@
                                 StyleClass="box-value"
                                 Margin="{Binding EditorMargins}" />
                             <BoxView StyleClass="box-row-separator" IsVisible="{Binding ShowEditorSeparators}" />
+                            <Label
+                                Text="{u:I18n TypeTextInfo}"
+                                StyleClass="box-footer-label"
+                                Margin="0,5,0,10" />
                             <StackLayout StyleClass="box-row, box-row-switch">
                                 <Label
                                     Text="{u:I18n HideTextByDefault}"
-                                    StyleClass="box-label"
+                                    StyleClass="box-label-regular"
                                     VerticalOptions="Center"
                                     HorizontalOptions="StartAndExpand" />
                                 <Switch
@@ -130,16 +209,22 @@
                                         StyleClass="box-button-row"
                                         Clicked="ChooseFile_Clicked" />
                                 <Label
-                                    Margin="0, 10, 0, 0"
+                                    Margin="0, 5, 0, 0"
                                     Text="{u:I18n MaxFileSize}"
-                                    StyleClass="box-footer-label" />
+                                    StyleClass="text-sm, text-muted"
+                                    HorizontalOptions="FillAndExpand"
+                                    HorizontalTextAlignment="Center" />
                             </StackLayout>
+                            <Label
+                                Text="{u:I18n TypeFileInfo}"
+                                StyleClass="box-footer-label"
+                                Margin="0,5,0,0" />
                         </StackLayout>
                         <StackLayout StyleClass="box-row-header">
                             <Label Text="{u:I18n Options, Header=True}"
                                    StyleClass="box-header, box-header-platform" />
                         </StackLayout>
-                        <StackLayout StyleClass="box-row">
+                        <StackLayout StyleClass="box-row" Margin="0,10,0,0">
                             <Label
                                 Text="{u:I18n DeletionDate}"
                                 StyleClass="box-label" />
@@ -173,10 +258,10 @@
                             </Grid>
                             <Label
                                 Text="{u:I18n DeletionDateInfo}"
-                                StyleClass="box-label"
+                                StyleClass="box-footer-label"
                                 Margin="0,5,0,0" />
                         </StackLayout>
-                        <StackLayout StyleClass="box-row">
+                        <StackLayout StyleClass="box-row" Margin="0,5,0,0">
                             <Label
                                 Text="{u:I18n ExpirationDate}"
                                 StyleClass="box-label" />
@@ -213,20 +298,19 @@
                             <StackLayout Orientation="Horizontal" Margin="0,5,0,0">
                                 <Label
                                     Text="{u:I18n ExpirationDateInfo}"
-                                    StyleClass="box-label"
-                                    HorizontalOptions="StartAndExpand"
-                                    VerticalOptions="Center" />
+                                    StyleClass="box-footer-label"
+                                    HorizontalOptions="StartAndExpand" />
                                 <Button
                                     Text="{u:I18n Clear}"
                                     IsVisible="{Binding EditMode}"
                                     WidthRequest="110"
+                                    HeightRequest="{Binding SegmentedButtonHeight}"
+                                    FontSize="{Binding SegmentedButtonFontSize}"
                                     StyleClass="box-row-button"
                                     Clicked="ClearExpirationDate_Clicked" />
                             </StackLayout>
                         </StackLayout>
-                        <BoxView StyleClass="box-row-separator"
-                                 Margin="0, 5, 0, 0" />
-                        <StackLayout StyleClass="box-row">
+                        <StackLayout StyleClass="box-row" Margin="0,5,0,0">
                             <Label
                                 Text="{u:I18n MaximumAccessCount}"
                                 StyleClass="box-label" />
@@ -246,25 +330,26 @@
                             </StackLayout>
                             <Label
                                 Text="{u:I18n MaximumAccessCountInfo}"
-                                StyleClass="box-label"
-                                Margin="0,5" />
+                                StyleClass="box-footer-label" />
                             <StackLayout
                                 IsVisible="{Binding EditMode}"
                                 StyleClass="box-row"
                                 Orientation="Horizontal">
                                 <Label
                                     Text="{u:I18n CurrentAccessCount}"
-                                    StyleClass="box-label"
-                                    HorizontalOptions="StartAndExpand"
+                                    StyleClass="box-footer-label"
+                                    VerticalTextAlignment="Center" />
+                                <Label
+                                    Text=": "
+                                    StyleClass="box-footer-label"
                                     VerticalTextAlignment="Center" />
                                 <Label
                                     Text="{Binding Send.AccessCount, Mode=OneWay}"
                                     StyleClass="box-label"
-                                    HorizontalOptions="End" />
+                                    VerticalTextAlignment="Center" />
                             </StackLayout>
                         </StackLayout>
-                        <BoxView StyleClass="box-row-separator" />
-                        <StackLayout StyleClass="box-row" Margin="0,5">
+                        <StackLayout StyleClass="box-row" Margin="0,5,0,0">
                             <Label
                                 Text="{u:I18n NewPassword}"
                                 StyleClass="box-label" />
@@ -286,11 +371,10 @@
                             </StackLayout>
                             <Label
                                 Text="{u:I18n PasswordInfo}"
-                                StyleClass="box-label"
+                                StyleClass="box-footer-label"
                                 Margin="0,5,0,0" />
                         </StackLayout>
-                        <BoxView StyleClass="box-row-separator" />
-                        <StackLayout StyleClass="box-row" Margin="0,5">
+                        <StackLayout StyleClass="box-row" Margin="0,5,0,0">
                             <Label
                                 Text="{u:I18n Notes}"
                                 StyleClass="box-label" />
@@ -302,14 +386,13 @@
                             <BoxView StyleClass="box-row-separator" IsVisible="{Binding ShowEditorSeparators}" />
                             <Label
                                 Text="{u:I18n NotesInfo}"
-                                StyleClass="box-label"
+                                StyleClass="box-footer-label"
                                 Margin="0,5,0,0" />
                         </StackLayout>
-                        <BoxView StyleClass="box-row-separator" />
-                        <StackLayout StyleClass="box-row, box-row-switch">
+                        <StackLayout StyleClass="box-row, box-row-switch" Margin="0,5,0,0">
                             <Label
                                 Text="{u:I18n DisableSend}"
-                                StyleClass="box-label"
+                                StyleClass="box-label-regular"
                                 VerticalOptions="Center"
                                 HorizontalOptions="StartAndExpand" />
                             <Switch
@@ -320,7 +403,7 @@
                         <StackLayout StyleClass="box-row, box-row-switch">
                             <Label
                                 Text="{u:I18n ShareOnSave}"
-                                StyleClass="box-label"
+                                StyleClass="box-label-regular"
                                 VerticalOptions="Center"
                                 HorizontalOptions="StartAndExpand" />
                             <Switch
@@ -328,7 +411,6 @@
                                 HorizontalOptions="End"
                                 Margin="10,0,0,0" />
                         </StackLayout>
-                        <BoxView StyleClass="box-row-separator" />
 
                     </StackLayout>
                 </StackLayout>
diff --git a/src/App/Pages/Send/SendAddEditPage.xaml.cs b/src/App/Pages/Send/SendAddEditPage.xaml.cs
index 22dfb598e..ff1199c45 100644
--- a/src/App/Pages/Send/SendAddEditPage.xaml.cs
+++ b/src/App/Pages/Send/SendAddEditPage.xaml.cs
@@ -28,6 +28,7 @@ namespace Bit.App.Pages
             _vm.SendId = sendId;
             _vm.Type = type;
             _vm.Init();
+            SetActivityIndicator();
             if (Device.RuntimePlatform == Device.Android)
             {
                 if (_vm.EditMode)
@@ -37,6 +38,9 @@ namespace Bit.App.Pages
                     ToolbarItems.Add(_shareLink);
                     ToolbarItems.Add(_deleteItem);
                 }
+                _vm.SegmentedButtonHeight = 36;
+                _vm.SegmentedButtonFontSize = 13;
+                _vm.SegmentedButtonMargins = new Thickness(0, 10, 0, 0);
                 _vm.EditorMargins = new Thickness(0, 5, 0, 0);
             }
             else if (Device.RuntimePlatform == Device.iOS)
@@ -46,14 +50,15 @@ namespace Bit.App.Pages
                 {
                     ToolbarItems.Add(_moreItem);
                 }
+                _vm.SegmentedButtonHeight = 30;
+                _vm.SegmentedButtonFontSize = 15;
+                _vm.SegmentedButtonMargins = new Thickness(0, 5, 0, 0);
                 _vm.ShowEditorSeparators = true;
                 _vm.EditorMargins = new Thickness(0, 10, 0, 5);
-                _typePicker.On<iOS>().SetUpdateMode(UpdateMode.WhenFinished);
                 _deletionDateTypePicker.On<iOS>().SetUpdateMode(UpdateMode.WhenFinished);
                 _expirationDateTypePicker.On<iOS>().SetUpdateMode(UpdateMode.WhenFinished);
             }
 
-            _typePicker.ItemDisplayBinding = new Binding("Key");
             _deletionDateTypePicker.ItemDisplayBinding = new Binding("Key");
             _expirationDateTypePicker.ItemDisplayBinding = new Binding("Key");
 
@@ -103,6 +108,16 @@ namespace Bit.App.Pages
             }
         }
 
+        private void TextType_Clicked(object sender, EventArgs eventArgs)
+        {
+            _vm.TypeChanged(SendType.Text);
+        }
+        
+        private void FileType_Clicked(object sender, EventArgs eventArgs)
+        {
+            _vm.TypeChanged(SendType.File);
+        }
+
         private void OnMaxAccessCountTextChanged(object sender, TextChangedEventArgs e)
         {
             if (string.IsNullOrWhiteSpace(e.NewTextValue))
diff --git a/src/App/Pages/Send/SendAddEditPageViewModel.cs b/src/App/Pages/Send/SendAddEditPageViewModel.cs
index 8289b24ca..d8cb97446 100644
--- a/src/App/Pages/Send/SendAddEditPageViewModel.cs
+++ b/src/App/Pages/Send/SendAddEditPageViewModel.cs
@@ -21,10 +21,7 @@ namespace Bit.App.Pages
         private readonly ISendService _sendService;
         private bool _canAccessPremium;
         private SendView _send;
-        private bool _showEditorSeparators;
-        private Thickness _editorMargins;
         private bool _showPassword;
-        private int _typeSelectedIndex;
         private int _deletionDateTypeSelectedIndex;
         private int _expirationDateTypeSelectedIndex;
         private DateTime _deletionDate;
@@ -76,6 +73,11 @@ namespace Bit.App.Pages
 
         public Command TogglePasswordCommand { get; set; }
         public string SendId { get; set; }
+        public int SegmentedButtonHeight { get; set; }
+        public int SegmentedButtonFontSize { get; set; }
+        public Thickness SegmentedButtonMargins { get; set; }
+        public bool ShowEditorSeparators { get; set; }
+        public Thickness EditorMargins { get; set; }
         public SendType? Type { get; set; }
         public string FileName { get; set; }
         public byte[] FileData { get; set; }
@@ -84,17 +86,6 @@ namespace Bit.App.Pages
         public List<KeyValuePair<string, SendType>> TypeOptions { get; }
         public List<KeyValuePair<string, string>> DeletionTypeOptions { get; }
         public List<KeyValuePair<string, string>> ExpirationTypeOptions { get; }
-        public int TypeSelectedIndex
-        {
-            get => _typeSelectedIndex;
-            set
-            {
-                if (SetProperty(ref _typeSelectedIndex, value))
-                {
-                    TypeChanged();
-                }
-            }
-        }
         public int DeletionDateTypeSelectedIndex
         {
             get => _deletionDateTypeSelectedIndex;
@@ -165,16 +156,6 @@ namespace Bit.App.Pages
             get => _send;
             set => SetProperty(ref _send, value, additionalPropertyNames: _additionalSendProperties);
         }
-        public bool ShowEditorSeparators
-        {
-            get => _showEditorSeparators;
-            set => SetProperty(ref _showEditorSeparators, value);
-        }
-        public Thickness EditorMargins
-        {
-            get => _editorMargins;
-            set => SetProperty(ref _editorMargins, value);
-        }
         public bool ShowPassword
         {
             get => _showPassword;
@@ -223,7 +204,6 @@ namespace Bit.App.Pages
                     ExpirationDateTypeSelectedIndex = 0;
                 }
 
-                TypeSelectedIndex = TypeOptions.FindIndex(k => k.Value == Send.Type);
                 MaxAccessCount = Send.MaxAccessCount;
                 _isOverridingPickers = true;
                 DeletionDate = Send.DeletionDate.ToLocalTime();
@@ -389,16 +369,16 @@ namespace Bit.App.Pages
             return await AppHelpers.DeleteSendAsync(SendId);
         }
 
-        private async void TypeChanged()
+        public async void TypeChanged(SendType type)
         {
-            if (Send != null && TypeSelectedIndex > -1)
+            if (Send != null)
             {
-                if (!EditMode && TypeOptions[TypeSelectedIndex].Value == SendType.File && !_canAccessPremium)
+                if (!EditMode && type == SendType.File && !_canAccessPremium)
                 {
                     await _platformUtilsService.ShowDialogAsync(AppResources.PremiumRequired);
-                    TypeSelectedIndex = 0;
+                    type = SendType.Text;
                 }
-                Send.Type = TypeOptions[TypeSelectedIndex].Value;
+                Send.Type = type;
                 TriggerPropertyChanged(nameof(Send), _additionalSendProperties);
             }
         }
diff --git a/src/App/Pages/Settings/AutofillServicesPage.xaml b/src/App/Pages/Settings/AutofillServicesPage.xaml
index 8f823c295..03dc7bb83 100644
--- a/src/App/Pages/Settings/AutofillServicesPage.xaml
+++ b/src/App/Pages/Settings/AutofillServicesPage.xaml
@@ -19,7 +19,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n AutofillService}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <RelativeLayout HorizontalOptions="End">
                         <Switch
@@ -46,7 +46,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n InlineAutofill}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         IsEnabled="{Binding InlineAutofillEnabled}"
                         HorizontalOptions="StartAndExpand" />
                     <RelativeLayout HorizontalOptions="End">
@@ -75,7 +75,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n Accessibility}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <RelativeLayout HorizontalOptions="End">
                         <Switch
@@ -102,7 +102,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n DrawOver}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         IsEnabled="{Binding DrawOverEnabled}"
                         HorizontalOptions="StartAndExpand" />
                     <RelativeLayout HorizontalOptions="End">
diff --git a/src/App/Pages/Settings/OptionsPage.xaml b/src/App/Pages/Settings/OptionsPage.xaml
index cdc633944..8a5781377 100644
--- a/src/App/Pages/Settings/OptionsPage.xaml
+++ b/src/App/Pages/Settings/OptionsPage.xaml
@@ -68,7 +68,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n DisableAutoTotpCopy}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <Switch
                         IsToggled="{Binding DisableAutoTotpCopy}"
@@ -83,7 +83,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n DisableWebsiteIcons}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <Switch
                         IsToggled="{Binding DisableFavicon}"
@@ -102,7 +102,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n DisableSavePrompt}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <Switch
                         IsToggled="{Binding AutofillDisableSavePrompt}"
diff --git a/src/App/Pages/Settings/SyncPage.xaml b/src/App/Pages/Settings/SyncPage.xaml
index 55d09ae44..95c5bb700 100644
--- a/src/App/Pages/Settings/SyncPage.xaml
+++ b/src/App/Pages/Settings/SyncPage.xaml
@@ -22,7 +22,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n EnableSyncOnRefresh}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <Switch
                         IsToggled="{Binding EnableSyncOnRefresh}"
diff --git a/src/App/Pages/Vault/AddEditPage.xaml b/src/App/Pages/Vault/AddEditPage.xaml
index 348515347..0e137f2fd 100644
--- a/src/App/Pages/Vault/AddEditPage.xaml
+++ b/src/App/Pages/Vault/AddEditPage.xaml
@@ -523,7 +523,7 @@
                 <StackLayout StyleClass="box-row, box-row-switch">
                     <Label
                         Text="{u:I18n Favorite}"
-                        StyleClass="box-label, box-label-regular"
+                        StyleClass="box-label-regular"
                         HorizontalOptions="StartAndExpand" />
                     <Switch
                         IsToggled="{Binding Cipher.Favorite}"
@@ -674,7 +674,7 @@
                                 <StackLayout StyleClass="box-row, box-row-switch">
                                     <Label
                                         Text="{Binding Collection.Name}"
-                                        StyleClass="box-label, box-label-regular"
+                                        StyleClass="box-label-regular"
                                         HorizontalOptions="StartAndExpand" />
                                     <Switch
                                         IsToggled="{Binding Checked}"
diff --git a/src/App/Pages/Vault/CollectionsPage.xaml b/src/App/Pages/Vault/CollectionsPage.xaml
index 1f2a1fbef..0f9f12905 100644
--- a/src/App/Pages/Vault/CollectionsPage.xaml
+++ b/src/App/Pages/Vault/CollectionsPage.xaml
@@ -39,7 +39,7 @@
                                 <StackLayout StyleClass="box-row, box-row-switch">
                                     <Label
                                         Text="{Binding Collection.Name}"
-                                        StyleClass="box-label, box-label-regular"
+                                        StyleClass="box-label-regular"
                                         HorizontalOptions="StartAndExpand" />
                                     <Switch
                                         IsToggled="{Binding Checked}"
diff --git a/src/App/Pages/Vault/SharePage.xaml b/src/App/Pages/Vault/SharePage.xaml
index f204eb897..ad84a2a7b 100644
--- a/src/App/Pages/Vault/SharePage.xaml
+++ b/src/App/Pages/Vault/SharePage.xaml
@@ -66,7 +66,7 @@
                                 <StackLayout StyleClass="box-row, box-row-switch">
                                     <Label
                                         Text="{Binding Collection.Name}"
-                                        StyleClass="box-label, box-label-regular"
+                                        StyleClass="box-label-regular"
                                         HorizontalOptions="StartAndExpand" />
                                     <Switch
                                         IsToggled="{Binding Checked}"
diff --git a/src/App/Resources/AppResources.Designer.cs b/src/App/Resources/AppResources.Designer.cs
index fff984078..f5b15c5aa 100644
--- a/src/App/Resources/AppResources.Designer.cs
+++ b/src/App/Resources/AppResources.Designer.cs
@@ -3201,12 +3201,24 @@ namespace Bit.App.Resources {
             }
         }
         
+        public static string NameInfo {
+            get {
+                return ResourceManager.GetString("NameInfo", resourceCulture);
+            }
+        }
+        
         public static string TypeText {
             get {
                 return ResourceManager.GetString("TypeText", resourceCulture);
             }
         }
         
+        public static string TypeTextInfo {
+            get {
+                return ResourceManager.GetString("TypeTextInfo", resourceCulture);
+            }
+        }
+        
         public static string HideTextByDefault {
             get {
                 return ResourceManager.GetString("HideTextByDefault", resourceCulture);
@@ -3219,6 +3231,12 @@ namespace Bit.App.Resources {
             }
         }
         
+        public static string TypeFileInfo {
+            get {
+                return ResourceManager.GetString("TypeFileInfo", resourceCulture);
+            }
+        }
+        
         public static string DeletionDate {
             get {
                 return ResourceManager.GetString("DeletionDate", resourceCulture);
diff --git a/src/App/Resources/AppResources.resx b/src/App/Resources/AppResources.resx
index 5912a7fc5..9b4c04a4b 100644
--- a/src/App/Resources/AppResources.resx
+++ b/src/App/Resources/AppResources.resx
@@ -1811,9 +1811,16 @@
     <value>Sends</value>
     <comment>'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated.</comment>
   </data>
+  <data name="NameInfo" xml:space="preserve">
+    <value>A friendly name to describe this Send.</value>
+    <comment>'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated.</comment>
+  </data>
   <data name="TypeText" xml:space="preserve">
     <value>Text</value>
   </data>
+  <data name="TypeTextInfo" xml:space="preserve">
+    <value>The text you want to send.</value>
+  </data>
   <data name="HideTextByDefault" xml:space="preserve">
     <value>When accessing the Send, hide the text by default</value>
     <comment>'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated.</comment>
@@ -1821,6 +1828,9 @@
   <data name="TypeFile" xml:space="preserve">
     <value>File</value>
   </data>
+  <data name="TypeFileInfo" xml:space="preserve">
+    <value>The file you want to send.</value>
+  </data>
   <data name="DeletionDate" xml:space="preserve">
     <value>Deletion Date</value>
   </data>
diff --git a/src/App/Styles/Base.xaml b/src/App/Styles/Base.xaml
index 161f11993..d863935f2 100644
--- a/src/App/Styles/Base.xaml
+++ b/src/App/Styles/Base.xaml
@@ -320,6 +320,8 @@
            Class="box-label">
         <Setter Property="FontSize"
                 Value="Small" />
+        <Setter Property="FontAttributes"
+                Value="Bold" />
         <Setter Property="TextColor"
                 Value="{StaticResource MutedColor}" />
     </Style>