From 18515a2c2725100b1d48ec0ac185e1c82e8012ea Mon Sep 17 00:00:00 2001
From: SpoinkyNL <spoinky.nl@gmail.com>
Date: Sun, 31 Jan 2016 22:23:33 +0100
Subject: [PATCH] Cleaned up settings windows, added scroll bars

---
 .../AudioVisualizer/AudioVisualizerView.xaml  | 185 +++++++--------
 .../Effects/Debug/DebugEffectView.xaml        | 201 ++++++++---------
 .../Effects/TypeHole/TypeHoleView.xaml        |  58 ++---
 .../Effects/TypeWave/TypeWaveView.xaml        | 211 +++++++++---------
 .../CounterStrike/CounterStrikeView.xaml      |   6 +-
 .../Modules/Games/Dota2/Dota2View.xaml        |   8 +-
 .../Games/RocketLeague/RocketLeagueView.xaml  | 121 +++++-----
 .../Modules/Games/Witcher3/Witcher3View.xaml  |  70 +++---
 .../VolumeDisplay/VolumeDisplayView.xaml      | 103 ++++-----
 .../Views/Flyouts/FlyoutSettingsView.xaml     |   4 +-
 10 files changed, 492 insertions(+), 475 deletions(-)

diff --git a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml
index 32669c020..72d86fab9 100644
--- a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml
+++ b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml
@@ -6,99 +6,102 @@
              xmlns:cal="http://www.caliburnproject.org"
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
-             xmlns:audioVisualizer="clr-namespace:Artemis.Modules.Effects.AudioVisualizer"
              mc:Ignorable="d"
              d:DesignHeight="407.812" d:DesignWidth="671.484"
              cal:Bind.AtDesignTime="True">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20"
-                   Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap" Text="Visualizes the default audio device on the keyboard." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}"
-                              cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20"
+                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap" Text="Visualizes the default audio device on the keyboard." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}"
+                                  cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-            <xctk:ColorPicker x:Name="MainColor"
-                              SelectedColor="{Binding Path=AudioVisualizerSettings.MainColor, Mode=TwoWay}" />
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-            <xctk:ColorPicker x:Name="SecondaryColor"
-                              SelectedColor="{Binding Path=AudioVisualizerSettings.SecondaryColor, Mode=TwoWay}" />
-        </StackPanel>
-        <!-- Sensitivity slider -->
-        <StackPanel Grid.Row="2"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Sensitivity" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="Sensitivity"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="1"
-                    Value="{Binding Path=AudioVisualizerSettings.Sensitivity, Mode=TwoWay}" Minimum="1" Maximum="10"
-                    SmallChange="1"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <StackPanel Grid.Row="3"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=AudioVisualizerSettings.FromBottom, Mode=TwoWay}"
-                                   Header="Origin"
-                                   OnLabel="Bottom" OffLabel="Top"
-                                   Margin="5,3,0,0" Width="125" />
-        </StackPanel>
-        <!-- Fadeout slider -->
-        <StackPanel Grid.Row="3"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Fade speed" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="FadeSpeed"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="1"
-                    Value="{Binding Path=AudioVisualizerSettings.FadeSpeed, Mode=TwoWay}" Minimum="1" Maximum="10"
-                    SmallChange="1"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <!-- Buttons -->
-        <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
-            <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
-                    Style="{DynamicResource SquareButtonStyle}" />
-            <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100" Margin="10,0,0,0"
-                    Style="{DynamicResource SquareButtonStyle}" />
-        </StackPanel>
-    </Grid>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left" Width="130">
+                <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
+                <xctk:ColorPicker x:Name="MainColor"
+                                  SelectedColor="{Binding Path=AudioVisualizerSettings.MainColor, Mode=TwoWay}" />
+            </StackPanel>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left" Width="130">
+                <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
+                <xctk:ColorPicker x:Name="SecondaryColor"
+                                  SelectedColor="{Binding Path=AudioVisualizerSettings.SecondaryColor, Mode=TwoWay}" />
+            </StackPanel>
+            <!-- Sensitivity slider -->
+            <StackPanel Grid.Row="2"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left" Width="132">
+                <Label FontSize="16" Content="Sensitivity" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="Sensitivity"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="1"
+                        Value="{Binding Path=AudioVisualizerSettings.Sensitivity, Mode=TwoWay}" Minimum="1"
+                        Maximum="10"
+                        SmallChange="1"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <StackPanel Grid.Row="3"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left" Width="130">
+                <controls:ToggleSwitch IsChecked="{Binding Path=AudioVisualizerSettings.FromBottom, Mode=TwoWay}"
+                                       Header="Origin"
+                                       OnLabel="Bottom" OffLabel="Top"
+                                       Margin="5,3,0,0" Width="125" />
+            </StackPanel>
+            <!-- Fadeout slider -->
+            <StackPanel Grid.Row="3"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left" Width="132">
+                <Label FontSize="16" Content="Fade speed" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="FadeSpeed"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="1"
+                        Value="{Binding Path=AudioVisualizerSettings.FadeSpeed, Mode=TwoWay}" Minimum="1" Maximum="10"
+                        SmallChange="1"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <!-- Buttons -->
+            <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
+                <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
+                        Style="{DynamicResource SquareButtonStyle}" />
+                <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
+                        Margin="10,0,0,0"
+                        Style="{DynamicResource SquareButtonStyle}" />
+            </StackPanel>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml
index 9c8dbad20..bb625d63f 100644
--- a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml
+++ b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml
@@ -4,110 +4,111 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:cal="http://www.caliburnproject.org"
-             xmlns:debug="clr-namespace:Artemis.Modules.Effects.Debug"
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              mc:Ignorable="d"
              d:DesignHeight="407.812" d:DesignWidth="671.484"
              cal:Bind.AtDesignTime="True">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20"
-                   Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap" Text="A debug effect." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}"
-                              cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20"
+                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap" Text="A debug effect." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}"
+                                  cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Direction" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <ComboBox x:Name="RectangleTypes" Width="120" />
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Direction" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <ComboBox x:Name="RectangleTypes" Width="120" />
 
-        </StackPanel>
-        <StackPanel Grid.Row="2"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Width" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="Width"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="1"
-                    Value="{Binding Path=DebugEffectSettings.Width, Mode=TwoWay}" Minimum="1" Maximum="84"
-                    SmallChange="1"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <StackPanel Grid.Row="2"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Height" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="Height"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="200"
-                    TickPlacement="BottomRight"
-                    TickFrequency="1"
-                    Value="{Binding Path=DebugEffectSettings.Height, Mode=TwoWay}" Minimum="0" Maximum="24"
-                    SmallChange="1"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <StackPanel Grid.Row="3"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=DebugEffectSettings.Rotate, Mode=TwoWay}"
-                                   Header="Rotate" OnLabel="Yes" OffLabel="No"
-                                   Margin="0 3 0 0" Width="125" />
-        </StackPanel>
-        <StackPanel Grid.Row="3"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Spread" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="Spread"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="1"
-                    Value="{Binding Path=DebugEffectSettings.Spread, Mode=TwoWay}" Minimum="0" Maximum="5"
-                    SmallChange="1"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <!-- Preview panel -->
-        <StackPanel Grid.Column="1" Grid.Row="1">
-            <TextBlock>
-                <InlineUIContainer>
-                    <GroupBox Header="Preview" Margin="0" Height="70" Width="118">
-                        <Image Source="{Binding ImageSource}"
-                               HorizontalAlignment="Stretch"
-                               VerticalAlignment="Stretch"
-                               Stretch="Fill" />
-                    </GroupBox>
-                </InlineUIContainer>
-            </TextBlock>
-        </StackPanel>
-    </Grid>
+            </StackPanel>
+            <StackPanel Grid.Row="2"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Width" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="Width"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="1"
+                        Value="{Binding Path=DebugEffectSettings.Width, Mode=TwoWay}" Minimum="1" Maximum="84"
+                        SmallChange="1"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <StackPanel Grid.Row="2"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Height" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="Height"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="200"
+                        TickPlacement="BottomRight"
+                        TickFrequency="1"
+                        Value="{Binding Path=DebugEffectSettings.Height, Mode=TwoWay}" Minimum="0" Maximum="24"
+                        SmallChange="1"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <StackPanel Grid.Row="3"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <controls:ToggleSwitch IsChecked="{Binding Path=DebugEffectSettings.Rotate, Mode=TwoWay}"
+                                       Header="Rotate" OnLabel="Yes" OffLabel="No"
+                                       Margin="0 3 0 0" Width="125" />
+            </StackPanel>
+            <StackPanel Grid.Row="3"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Spread" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="Spread"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="1"
+                        Value="{Binding Path=DebugEffectSettings.Spread, Mode=TwoWay}" Minimum="0" Maximum="5"
+                        SmallChange="1"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <!-- Preview panel -->
+            <StackPanel Grid.Column="1" Grid.Row="1">
+                <TextBlock>
+                    <InlineUIContainer>
+                        <GroupBox Header="Preview" Margin="0" Height="70" Width="118">
+                            <Image Source="{Binding ImageSource}"
+                                   HorizontalAlignment="Stretch"
+                                   VerticalAlignment="Stretch"
+                                   Stretch="Fill" />
+                        </GroupBox>
+                    </InlineUIContainer>
+                </TextBlock>
+            </StackPanel>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/TypeHole/TypeHoleView.xaml b/Artemis/Artemis/Modules/Effects/TypeHole/TypeHoleView.xaml
index 34b318a97..4e78c6bfe 100644
--- a/Artemis/Artemis/Modules/Effects/TypeHole/TypeHoleView.xaml
+++ b/Artemis/Artemis/Modules/Effects/TypeHole/TypeHoleView.xaml
@@ -7,34 +7,36 @@
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              mc:Ignorable="d"
              d:DesignHeight="407.812" d:DesignWidth="671.484"
-             d:DataContext="{d:DesignInstance Type=effects:TypeHoleViewModel, IsDesignTimeCreatable=True}"
              cal:Bind.AtDesignTime="True">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20"
-                   Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap" Text="Creates holes in the keyboard's lightning as you press keys." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}"
-                              cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20"
+                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Creates holes in the keyboard's lightning as you press keys." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}"
+                                  cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-    </Grid>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml b/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml
index b6268d4f8..dff148892 100644
--- a/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml
+++ b/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml
@@ -6,112 +6,115 @@
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              xmlns:cal="http://www.caliburnproject.org"
-             xmlns:typeWave="clr-namespace:Artemis.Modules.Effects.TypeWave"
              mc:Ignorable="d"
              d:DesignHeight="407.812" d:DesignWidth="671.484"
              cal:Bind.AtDesignTime="True">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20"
-                   Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap" Text="Creates waves on the keyboard as you press keys." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}"
-                              cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20"
+                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap" Text="Creates waves on the keyboard as you press keys." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}"
+                                  cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsRandomColors, Mode=TwoWay}"
-                                   Header="Random colors" OnLabel="Yes" OffLabel="No"
-                                   Margin="0 3 0 0" Width="125" />
-        </StackPanel>
-        <StackPanel Grid.Row="2"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsShiftColors, Mode=TwoWay}"
-                                   Header="Shift colors"
-                                   OnLabel="Yes" OffLabel="No"
-                                   Margin="0 3 0 0" Width="125" />
-        </StackPanel>
-        <!-- TTL slider -->
-        <StackPanel Grid.Row="3"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Time to live" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" />
-            <Slider VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="100"
-                    x:Name="TypeWaveSettings_TimeToLive"
-                    Value="{Binding Path=TypeWaveSettings.TimeToLive, Mode=TwoWay}" Minimum="100" Maximum="2000"
-                    SmallChange="45"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Wave color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="125" />
-            <xctk:ColorPicker x:Name="WaveColor" SelectedColor="{Binding Path=TypeWaveSettings.WaveColor, Mode=TwoWay}" />
-        </StackPanel>
-        <!-- Shift speed slider -->
-        <StackPanel Grid.Row="2"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Color shift speed" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="ColorShiftSpeed"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="10"
-                    Value="{Binding Path=TypeWaveSettings.ShiftColorSpeed, Mode=TwoWay}" Minimum="1" Maximum="200"
-                    SmallChange="5"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <!-- Spread Speed slider -->
-        <StackPanel Grid.Row="3"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Spread speed" Style="{DynamicResource DescriptionHeaderStyle}"
-                   Foreground="#535353" FontFamily="Segoe UI Semibold" />
-            <Slider x:Name="SpreadSpeed"
-                    VerticalAlignment="top"
-                    HorizontalAlignment="Left"
-                    Width="132"
-                    TickPlacement="BottomRight"
-                    TickFrequency="1"
-                    Value="{Binding Path=TypeWaveSettings.SpreadSpeed, Mode=TwoWay}" Minimum="1" Maximum="6"
-                    SmallChange="1"
-                    IsSnapToTickEnabled="True" />
-        </StackPanel>
-        <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
-            <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
-                    Style="{DynamicResource SquareButtonStyle}" />
-            <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100" Margin="10,0,0,0"
-                    Style="{DynamicResource SquareButtonStyle}" />
-        </StackPanel>
-    </Grid>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsRandomColors, Mode=TwoWay}"
+                                       Header="Random colors" OnLabel="Yes" OffLabel="No"
+                                       Margin="0 3 0 0" Width="125" />
+            </StackPanel>
+            <StackPanel Grid.Row="2"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsShiftColors, Mode=TwoWay}"
+                                       Header="Shift colors"
+                                       OnLabel="Yes" OffLabel="No"
+                                       Margin="0 3 0 0" Width="125" />
+            </StackPanel>
+            <!-- TTL slider -->
+            <StackPanel Grid.Row="3"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Time to live" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" />
+                <Slider VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="100"
+                        x:Name="TypeWaveSettings_TimeToLive"
+                        Value="{Binding Path=TypeWaveSettings.TimeToLive, Mode=TwoWay}" Minimum="100" Maximum="2000"
+                        SmallChange="45"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Wave color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="125" />
+                <xctk:ColorPicker x:Name="WaveColor"
+                                  SelectedColor="{Binding Path=TypeWaveSettings.WaveColor, Mode=TwoWay}" />
+            </StackPanel>
+            <!-- Shift speed slider -->
+            <StackPanel Grid.Row="2"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Color shift speed" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="ColorShiftSpeed"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="10"
+                        Value="{Binding Path=TypeWaveSettings.ShiftColorSpeed, Mode=TwoWay}" Minimum="1" Maximum="200"
+                        SmallChange="5"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <!-- Spread Speed slider -->
+            <StackPanel Grid.Row="3"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Spread speed" Style="{DynamicResource DescriptionHeaderStyle}"
+                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
+                <Slider x:Name="SpreadSpeed"
+                        VerticalAlignment="top"
+                        HorizontalAlignment="Left"
+                        Width="132"
+                        TickPlacement="BottomRight"
+                        TickFrequency="1"
+                        Value="{Binding Path=TypeWaveSettings.SpreadSpeed, Mode=TwoWay}" Minimum="1" Maximum="6"
+                        SmallChange="1"
+                        IsSnapToTickEnabled="True" />
+            </StackPanel>
+            <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
+                <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
+                        Style="{DynamicResource SquareButtonStyle}" />
+                <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
+                        Margin="10,0,0,0"
+                        Style="{DynamicResource SquareButtonStyle}" />
+            </StackPanel>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml b/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml
index 60414df55..0be92cb60 100644
--- a/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml
+++ b/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml
@@ -8,10 +8,11 @@
              xmlns:cal="http://www.caliburnproject.org"
              mc:Ignorable="d"
              d:DesignHeight="475.61" d:DesignWidth="519.512">
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
     <Grid Margin="15, 5, 15, 5">
         <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
+            <ColumnDefinition Width="320" />
+            <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
@@ -117,4 +118,5 @@
                     Style="{DynamicResource SquareButtonStyle}" />
         </StackPanel>
     </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml b/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml
index 66d66db28..e4f44d378 100644
--- a/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml
+++ b/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml
@@ -5,7 +5,9 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              mc:Ignorable="d"
              d:DesignHeight="300" d:DesignWidth="300">
-    <Grid>
-        <TextBlock Text="{Binding Content}" />
-    </Grid>
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid>
+            <TextBlock Text="{Binding Content}" />
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml b/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml
index 187fd95a2..6e6e05baa 100644
--- a/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml
+++ b/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml
@@ -4,68 +4,69 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:cal="http://www.caliburnproject.org"
-             xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              mc:Ignorable="d"
-             d:DesignHeight="352.568" d:DesignWidth="490.332"
+             d:DesignHeight="383.137" d:DesignWidth="591.211"
              cal:Bind.AtDesignTime="True">
-
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-            <RowDefinition />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap"
-                                Text="Fills up the keyboard according to the amount of boost you have." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Fills up the keyboard according to the amount of boost you have." Width="536" />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-            <xctk:ColorPicker x:Name="MainColor"
-                              SelectedColor="{Binding Path=RocketLeagueSettings.MainColor, Mode=TwoWay}" />
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-            <xctk:ColorPicker x:Name="SecondaryColor"
-                              SelectedColor="{Binding Path=RocketLeagueSettings.SecondaryColor, Mode=TwoWay}" />
-        </StackPanel>
-        <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Top">
-            <Label FontSize="16"
-                   Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Height="79" Margin="0,10,0,0">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap"
-                                Text="Tip: To find a color combination you like, start an exhibition match, pickup 100 boost and play around with the colors. They'll appear on your keyboard immediately! Once you're satisfied don't forget to click save changes."
-                                FontStyle="Italic" FontSize="12" />
-                </Label.Content>
-            </Label>
-        </StackPanel>
-        <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal" VerticalAlignment="Bottom">
-            <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
-                    Style="{DynamicResource SquareButtonStyle}" />
-            <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100" Margin="10,0,0,0"
-                    Style="{DynamicResource SquareButtonStyle}" />
-        </StackPanel>
-    </Grid>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
+                <xctk:ColorPicker x:Name="MainColor"
+                                  SelectedColor="{Binding Path=RocketLeagueSettings.MainColor, Mode=TwoWay}" />
+            </StackPanel>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
+                <xctk:ColorPicker x:Name="SecondaryColor"
+                                  SelectedColor="{Binding Path=RocketLeagueSettings.SecondaryColor, Mode=TwoWay}" />
+            </StackPanel>
+            <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Top">
+                <Label FontSize="16"
+                       Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="500" Margin="0,10,0,0" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Tip: To find a color combination you like, start an exhibition match, pickup 100 boost and play around with the colors. They'll appear on your keyboard immediately! Once you're satisfied don't forget to click save changes."
+                                    FontStyle="Italic" FontSize="12" />
+                    </Label.Content>
+                </Label>
+            </StackPanel>
+            <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal" VerticalAlignment="Bottom">
+                <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
+                        Style="{DynamicResource SquareButtonStyle}" />
+                <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
+                        Margin="10,0,0,0"
+                        Style="{DynamicResource SquareButtonStyle}" />
+            </StackPanel>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml b/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml
index 2ce79bdd6..806199965 100644
--- a/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml
+++ b/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml
@@ -4,40 +4,42 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              mc:Ignorable="d"
-             d:DesignHeight="300" d:DesignWidth="300">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap"
-                                Text="Colors the keyboard according to the sign Gerald is using." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}" />
+             d:DesignHeight="386.842" d:DesignWidth="554.887">
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Colors the keyboard according to the sign Gerald is using." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-        <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Top">
-            <Label FontSize="16"
-                   Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Height="79" Margin="0,10,0,0">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap"
-                                Text="Note: Requires patch 1.12. When a new patch is released Artemis download new pointers for the latest version (unless disabled in settings)."
-                                FontStyle="Italic" FontSize="12" />
+            <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Top">
+                <Label FontSize="16"
+                       Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Height="79" Margin="0,10,0,0">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Note: Requires patch 1.12. When a new patch is released Artemis download new pointers for the latest version (unless disabled in settings)."
+                                    FontStyle="Italic" FontSize="12" Width="515" />
 
-                </Label.Content>
-            </Label>
-        </StackPanel>
-    </Grid>
+                    </Label.Content>
+                </Label>
+            </StackPanel>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml b/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml
index 1636a37b3..41fdb18de 100644
--- a/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml
+++ b/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml
@@ -3,62 +3,63 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              xmlns:cal="http://www.caliburnproject.org"
              mc:Ignorable="d"
              d:DesignHeight="407.812" d:DesignWidth="671.484"
-             d:DataContext="{d:DesignInstance Type=overlays:VolumeDisplayViewModel, IsDesignTimeCreatable=True}"
              cal:Bind.AtDesignTime="True">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition />
-            <ColumnDefinition />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20"
-                   Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap" Text="Displays media key actions on the keyboard." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              IsChecked="{Binding Path=VolumeDisplaySettings.Enabled, Mode=TwoWay}"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}"
-                              cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="320" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+                <Label FontSize="20"
+                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap" Text="Displays media key actions on the keyboard." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  IsChecked="{Binding Path=VolumeDisplaySettings.Enabled, Mode=TwoWay}"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}"
+                                  cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
+                </StackPanel>
+            </StackPanel>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="134" HorizontalAlignment="Left" />
+                <xctk:ColorPicker x:Name="MainColor"
+                                  SelectedColor="{Binding Path=VolumeDisplaySettings.MainColor, Mode=TwoWay}" />
+            </StackPanel>
+            <StackPanel Grid.Row="1"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left">
+                <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" />
+                <xctk:ColorPicker x:Name="SecondaryColor"
+                                  SelectedColor="{Binding Path=VolumeDisplaySettings.SecondaryColor, Mode=TwoWay}" />
             </StackPanel>
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="134" HorizontalAlignment="Left" />
-            <xctk:ColorPicker x:Name="MainColor"
-                              SelectedColor="{Binding Path=VolumeDisplaySettings.MainColor, Mode=TwoWay}" />
-        </StackPanel>
-        <StackPanel Grid.Row="1"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" />
-            <xctk:ColorPicker x:Name="SecondaryColor"
-                              SelectedColor="{Binding Path=VolumeDisplaySettings.SecondaryColor, Mode=TwoWay}" />
-        </StackPanel>
 
-        <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
-            <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
-                    Style="{DynamicResource SquareButtonStyle}" />
-            <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100" Margin="10,0,0,0"
-                    Style="{DynamicResource SquareButtonStyle}" />
-        </StackPanel>
-    </Grid>
+            <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
+                <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
+                        Style="{DynamicResource SquareButtonStyle}" />
+                <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
+                        Margin="10,0,0,0"
+                        Style="{DynamicResource SquareButtonStyle}" />
+            </StackPanel>
+        </Grid>
+    </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Views/Flyouts/FlyoutSettingsView.xaml b/Artemis/Artemis/Views/Flyouts/FlyoutSettingsView.xaml
index 7000f3b3b..8c26de2d7 100644
--- a/Artemis/Artemis/Views/Flyouts/FlyoutSettingsView.xaml
+++ b/Artemis/Artemis/Views/Flyouts/FlyoutSettingsView.xaml
@@ -30,7 +30,7 @@
         <Label Grid.Row="0" Grid.Column="0" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Left"
                Content="Startup with Windows:" />
         <controls:ToggleSwitch Grid.Row="0" Grid.Column="1" Margin="5" OnLabel="Yes" OffLabel="No"
-                               VerticalAlignment="Center" HorizontalAlignment="Right" Width="120" />
+                               VerticalAlignment="Center" HorizontalAlignment="Right" Width="125" />
 
         <!-- Keyboard selection -->
         <Label Grid.Row="1" Grid.Column="0" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Left"
@@ -48,7 +48,7 @@
         <Label Grid.Row="3" Grid.Column="0" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Left"
                Content="Download pointers:" />
         <controls:ToggleSwitch Grid.Row="3" Grid.Column="1" Margin="5" OnLabel="Yes" OffLabel="No"
-                               VerticalAlignment="Center" HorizontalAlignment="Right" Width="120" />
+                               VerticalAlignment="Center" HorizontalAlignment="Right" Width="125" />
 
         <!-- Buttons -->
         <Button Grid.Row="4" Grid.Column="0" Margin="10" x:Name="ResetSettings" Content="Reset settings"