- Reordered the settings items and changed some items to expandable card type

- Replaced the theme creation guide link with the Theme Builder link
- Fix Padding for InsideFit card

Flow.Launcher/Resources/Controls/Card.xaml

@@ -20,21 +20,21 @@
                         <Setter Property="BorderThickness" Value="1" />
                         <Setter Property="CornerRadius" Value="5" />
                         <Setter Property="MinHeight" Value="68" />
-                        <Setter Property="Padding" Value="0,15,0,15" />
-                        <Setter Property="Margin" Value="0,4,0,0" />
+                        <Setter Property="Padding" Value="0 15 0 15" />
+                        <Setter Property="Margin" Value="0 4 0 0" />
                         <Setter Property="SnapsToDevicePixels" Value="True" />
                         <Style.Triggers>
                             <DataTrigger Binding="{Binding Type, RelativeSource={RelativeSource AncestorType=local:Card}}" Value="Inside">
-                                <Setter Property="BorderThickness" Value="0,1,0,0" />
+                                <Setter Property="BorderThickness" Value="0 1 0 0" />
                                 <Setter Property="CornerRadius" Value="0" />
-                                <Setter Property="Margin" Value="0,0,0,0" />
+                                <Setter Property="Margin" Value="0 0 0 0" />
                                 <Setter Property="Background" Value="Transparent" />
                             </DataTrigger>
                             <DataTrigger Binding="{Binding Type, RelativeSource={RelativeSource AncestorType=local:Card}}" Value="InsideFit">
-                                <Setter Property="BorderThickness" Value="0,1,0,0" />
+                                <Setter Property="BorderThickness" Value="0 1 0 0" />
                                 <Setter Property="CornerRadius" Value="0" />
-                                <Setter Property="Margin" Value="0,0,0,0" />
-                                <Setter Property="Padding" Value="38,0,26,0" />
+                                <Setter Property="Margin" Value="0 0 0 0" />
+                                <Setter Property="Padding" Value="35 0 26 0" />
                                 <Setter Property="Background" Value="Transparent" />
                             </DataTrigger>
 
@@ -73,7 +73,7 @@
                     <ContentControl
                         Grid.Row="0"
                         Grid.Column="2"
-                        Margin="0,0,16,0"
+                        Margin="0 0 16 0"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
                         Content="{TemplateBinding Content}" />
@@ -91,7 +91,7 @@
                             <TextBlock.Style>
                                 <Style TargetType="{x:Type TextBlock}">
                                     <Setter Property="Foreground" Value="{DynamicResource Color05B}" />
-                                    <Setter Property="Margin" Value="0,0,0,0" />
+                                    <Setter Property="Margin" Value="0 0 0 0" />
                                     <Setter Property="TextWrapping" Value="Wrap" />
                                     <Setter Property="VerticalAlignment" Value="Center" />
                                 </Style>
@@ -107,8 +107,8 @@
                                     </Style.Triggers>
                                     <Setter Property="Foreground" Value="{DynamicResource Color04B}" />
                                     <Setter Property="FontSize" Value="12" />
-                                    <Setter Property="Margin" Value="0,0,0,0" />
-                                    <Setter Property="Padding" Value="0,0,24,0" />
+                                    <Setter Property="Margin" Value="0 0 0 0" />
+                                    <Setter Property="Padding" Value="0 0 24 0" />
                                     <Setter Property="TextWrapping" Value="WrapWithOverflow" />
                                 </Style>
                             </TextBlock.Style>
@@ -120,11 +120,11 @@
                             <Style TargetType="{x:Type TextBlock}">
                                 <Style.Triggers>
                                     <DataTrigger Binding="{Binding ElementName=ItemIcon, Path=Text}" Value="{x:Static sys:String.Empty}">
-                                        <Setter Property="Margin" Value="24,0,0,0" />
+                                        <Setter Property="Margin" Value="24 0 0 0" />
                                     </DataTrigger>
                                 </Style.Triggers>
                                 <Setter Property="Grid.Column" Value="0" />
-                                <Setter Property="Margin" Value="24,0,16,0" />
+                                <Setter Property="Margin" Value="24 0 16 0" />
                                 <Setter Property="VerticalAlignment" Value="Center" />
                                 <Setter Property="FontSize" Value="20" />
                                 <Setter Property="FontFamily" Value="/Resources/#Segoe Fluent Icons" />

Flow.Launcher/SettingPages/ViewModels/SettingsPaneThemeViewModel.cs

@@ -24,7 +24,7 @@ public partial class SettingsPaneThemeViewModel : BaseModel
     public Settings Settings { get; }
     private readonly Theme _theme = Ioc.Default.GetRequiredService<Theme>();
 
-    public static string LinkHowToCreateTheme => @"https://flowlauncher.com/docs/#/how-to-create-a-theme";
+    public static string LinkHowToCreateTheme => @"https://www.flowlauncher.com/theme-builder/";
     public static string LinkThemeGallery => "https://github.com/Flow-Launcher/Flow.Launcher/discussions/1438";
 
     private List<Theme.ThemeData> _themes;

Flow.Launcher/SettingPages/Views/SettingsPaneGeneral.xaml

@@ -29,29 +29,35 @@
                 Text="{DynamicResource general}"
                 TextAlignment="left" />
 
-            <cc:Card Title="{DynamicResource startFlowLauncherOnSystemStartup}" Icon="&#xe8fc;">
-                <ui:ToggleSwitch
-                    IsOn="{Binding StartFlowLauncherOnSystemStartup}"
-                    OffContent="{DynamicResource disable}"
-                    OnContent="{DynamicResource enable}" />
-            </cc:Card>
+            <cc:CardGroup Margin="0 10 0 0">
 
-            <cc:Card Title="{DynamicResource useLogonTaskForStartup}" Sub="{DynamicResource useLogonTaskForStartupTooltip}">
-                <ui:ToggleSwitch
-                    IsOn="{Binding UseLogonTaskForStartup}"
-                    OffContent="{DynamicResource disable}"
-                    OnContent="{DynamicResource enable}" />
-            </cc:Card>
+                <cc:Card Title="{DynamicResource startFlowLauncherOnSystemStartup}" Icon="&#xe8fc;">
+                    <ui:ToggleSwitch
+                        IsOn="{Binding StartFlowLauncherOnSystemStartup}"
+                        OffContent="{DynamicResource disable}"
+                        OnContent="{DynamicResource enable}" />
+                </cc:Card>
 
-            <cc:Card
-                Title="{DynamicResource hideOnStartup}"
-                Icon="&#xed1a;"
-                Sub="{DynamicResource hideOnStartupToolTip}">
-                <ui:ToggleSwitch
-                    IsOn="{Binding Settings.HideOnStartup}"
-                    OffContent="{DynamicResource disable}"
-                    OnContent="{DynamicResource enable}" />
-            </cc:Card>
+                <cc:Card
+                    Title="{DynamicResource useLogonTaskForStartup}"
+                    Sub="{DynamicResource useLogonTaskForStartupTooltip}"
+                    Type="InsideFit">
+                    <ui:ToggleSwitch
+                        IsOn="{Binding UseLogonTaskForStartup}"
+                        OffContent="{DynamicResource disable}"
+                        OnContent="{DynamicResource enable}" />
+                </cc:Card>
+
+                <cc:Card
+                    Title="{DynamicResource hideOnStartup}"
+                    Sub="{DynamicResource hideOnStartupToolTip}"
+                    Type="InsideFit">
+                    <ui:ToggleSwitch
+                        IsOn="{Binding Settings.HideOnStartup}"
+                        OffContent="{DynamicResource disable}"
+                        OnContent="{DynamicResource enable}" />
+                </cc:Card>
+            </cc:CardGroup>
 
             <cc:Card Title="{DynamicResource hideFlowLauncherWhenLoseFocus}" Margin="0 14 0 0">
                 <ui:ToggleSwitch

Flow.Launcher/SettingPages/Views/SettingsPaneTheme.xaml

@@ -500,62 +500,29 @@
                 Uri="{Binding LinkThemeGallery}" />
 
             <!--  Fixed size  -->
-            <cc:CardGroup Margin="0 20 0 0">
-                <cc:Card
-                    Title="{DynamicResource KeepMaxResults}"
-                    Icon="&#xE744;"
-                    Sub="{DynamicResource KeepMaxResultsToolTip}">
-                    <ui:ToggleSwitch
-                        IsOn="{Binding KeepMaxResults}"
-                        OffContent="{DynamicResource disable}"
-                        OnContent="{DynamicResource enable}" />
-                </cc:Card>
+            <cc:ExCard
+                Title="{DynamicResource KeepMaxResults}"
+                Margin="0 20 0 0"
+                Icon="&#xE744;"
+                Sub="{DynamicResource KeepMaxResultsToolTip}">
+                <cc:ExCard.SideContent>
+                    <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
+                        <ui:ToggleSwitch
+                            IsOn="{Binding KeepMaxResults}"
+                            OffContent="{DynamicResource disable}"
+                            OnContent="{DynamicResource enable}" />
+                    </StackPanel>
+                </cc:ExCard.SideContent>
                 <cc:Card
                     Title="{DynamicResource maxShowResults}"
-                    Icon="&#xe8fd;"
                     Sub="{DynamicResource maxShowResultsToolTip}"
-                    Visibility="{Binding KeepMaxResults, Converter={StaticResource BoolToVisibilityConverter}}">
+                    Type="InsideFit">
                     <ComboBox
                         Width="100"
                         ItemsSource="{Binding MaxResultsRange}"
                         SelectedItem="{Binding Settings.MaxResultsToShow}" />
                 </cc:Card>
-            </cc:CardGroup>
-
-            <!--  Fonts and icons  -->
-            <cc:Card
-                Title="{DynamicResource useGlyphUI}"
-                Margin="0 14 0 0"
-                Icon="&#xf6b8;"
-                Sub="{DynamicResource useGlyphUIEffect}">
-                <ui:ToggleSwitch
-                    IsOn="{Binding UseGlyphIcons}"
-                    OffContent="{DynamicResource disable}"
-                    OnContent="{DynamicResource enable}" />
-            </cc:Card>
-
-            <!--  Placeholder text  -->
-            <cc:CardGroup Margin="0 14 0 0">
-                <cc:Card
-                    Title="{DynamicResource ShowPlaceholder}"
-                    Icon="&#xE82F;"
-                    Sub="{DynamicResource ShowPlaceholderTip}">
-                    <ui:ToggleSwitch
-                        IsOn="{Binding ShowPlaceholder}"
-                        OffContent="{DynamicResource disable}"
-                        OnContent="{DynamicResource enable}" />
-                </cc:Card>
-
-                <cc:Card
-                    Title="{DynamicResource PlaceholderText}"
-                    Icon="&#xED59;"
-                    Sub="{Binding PlaceholderTextTip}">
-                    <TextBox
-                        MinWidth="150"
-                        Text="{Binding PlaceholderText}"
-                        TextWrapping="NoWrap" />
-                </cc:Card>
-            </cc:CardGroup>
+            </cc:ExCard>
 
             <!--  Time and date  -->
             <cc:CardGroup Margin="0 14 0 0">
@@ -602,22 +569,45 @@
                 </cc:Card>
             </cc:CardGroup>
 
-            <!--  Animation  -->
-            <cc:CardGroup Margin="0 14 0 0">
+            <!--  Placeholder text  -->
+            <cc:ExCard
+                Title="{DynamicResource ShowPlaceholder}"
+                Margin="0 4 0 0"
+                Icon="&#xea80;"
+                Sub="{DynamicResource ShowPlaceholderTip}">
+                <cc:ExCard.SideContent>
+                    <ui:ToggleSwitch
+                        IsOn="{Binding ShowPlaceholder}"
+                        OffContent="{DynamicResource disable}"
+                        OnContent="{DynamicResource enable}" />
+                </cc:ExCard.SideContent>
                 <cc:Card
-                    Title="{DynamicResource Animation}"
-                    Icon="&#xedb5;"
-                    Sub="{DynamicResource AnimationTip}">
+                    Title="{DynamicResource PlaceholderText}"
+                    Sub="{Binding PlaceholderTextTip}"
+                    Type="InsideFit">
+                    <TextBox
+                        MinWidth="150"
+                        Text="{Binding PlaceholderText}"
+                        TextWrapping="NoWrap" />
+                </cc:Card>
+            </cc:ExCard>
+
+            <!--  Animation  -->
+            <cc:ExCard
+                Title="{DynamicResource Animation}"
+                Margin="0 18 0 0"
+                Icon="&#xedb5;"
+                Sub="{DynamicResource AnimationTip}">
+                <cc:ExCard.SideContent>
                     <ui:ToggleSwitch
                         IsOn="{Binding UseAnimation}"
                         OffContent="{DynamicResource disable}"
                         OnContent="{DynamicResource enable}" />
-                </cc:Card>
+                </cc:ExCard.SideContent>
                 <cc:Card
                     Title="{DynamicResource AnimationSpeed}"
-                    Icon="&#xe916;"
                     Sub="{DynamicResource AnimationSpeedTip}"
-                    Visibility="{Binding UseAnimation, Converter={StaticResource BoolToVisibilityConverter}}">
+                    Type="InsideFit">
                     <StackPanel Orientation="Horizontal">
                         <ComboBox
                             MinWidth="160"
@@ -637,25 +627,25 @@
                                                          IsEqualTo={x:Static userSettings:AnimationSpeeds.Custom}}" />
                     </StackPanel>
                 </cc:Card>
-            </cc:CardGroup>
+            </cc:ExCard>
 
             <!--  SFX  -->
-            <cc:CardGroup Margin="0 14 0 0">
-                <cc:Card
-                    Title="{DynamicResource SoundEffect}"
-                    Icon="&#xe7f5;"
-                    Sub="{DynamicResource SoundEffectTip}">
+            <cc:ExCard
+                Title="{DynamicResource SoundEffect}"
+                Margin="0 4 0 0"
+                Icon="&#xe7f5;"
+                Sub="{DynamicResource SoundEffectTip}">
+                <cc:ExCard.SideContent>
                     <ui:ToggleSwitch
                         IsOn="{Binding UseSound}"
                         OffContent="{DynamicResource disable}"
                         OnContent="{DynamicResource enable}" />
-                </cc:Card>
+                </cc:ExCard.SideContent>
                 <cc:Card
                     Title="{DynamicResource SoundEffectVolume}"
-                    Icon="&#xe994;"
                     IsEnabled="{Binding EnableVolumeAdjustment}"
                     Sub="{DynamicResource SoundEffectVolumeTip}"
-                    Visibility="{Binding UseSound, Converter={StaticResource BoolToVisibilityConverter}}">
+                    Type="InsideFit">
                     <StackPanel Orientation="Horizontal">
                         <TextBlock
                             Margin="0 0 8 0"
@@ -672,7 +662,7 @@
                             Value="{Binding SoundEffectVolume}" />
                     </StackPanel>
                 </cc:Card>
-            </cc:CardGroup>
+            </cc:ExCard>
             <Border
                 Name="WMPWarning"
                 Padding="0 10"
@@ -708,6 +698,18 @@
                 </Grid>
             </Border>
 
+
+            <!--  Fonts and icons  -->
+            <cc:Card
+                Title="{DynamicResource useGlyphUI}"
+                Margin="0 0 0 0"
+                Icon="&#xf6b8;"
+                Sub="{DynamicResource useGlyphUIEffect}">
+                <ui:ToggleSwitch
+                    IsOn="{Binding UseGlyphIcons}"
+                    OffContent="{DynamicResource disable}"
+                    OnContent="{DynamicResource enable}" />
+            </cc:Card>
             <!--  Settings color scheme  -->
             <cc:Card
                 Title="{DynamicResource ColorScheme}"