From a5e8366f1b7fc57ff57ff5c5e2870f5f3a057da2 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Thu, 17 Mar 2022 20:36:15 +0100
Subject: [PATCH] Redesign status bar in the app

---
 app/Desktop/Main/Controls/StatusBar.axaml     | 15 +++--
 app/Desktop/Main/MainWindow.axaml             |  2 +-
 .../Main/Screens/MainContentScreen.axaml      | 61 ++++++++++---------
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/app/Desktop/Main/Controls/StatusBar.axaml b/app/Desktop/Main/Controls/StatusBar.axaml
index ff9ca16..becdcf4 100644
--- a/app/Desktop/Main/Controls/StatusBar.axaml
+++ b/app/Desktop/Main/Controls/StatusBar.axaml
@@ -11,32 +11,35 @@
     </Design.DataContext>
 
     <UserControl.Background>
-        <SolidColorBrush>#546A9F</SolidColorBrush>
+        <SolidColorBrush>#3C4F79</SolidColorBrush>
     </UserControl.Background>
 
     <UserControl.Styles>
         <Style Selector="StackPanel > TextBlock">
-            <Setter Property="Foreground" Value="#E0E0E0" />
+            <Setter Property="Foreground" Value="#E7E7E7" />
         </Style>
         <Style Selector="StackPanel > TextBlock.label">
             <Setter Property="FontSize" Value="15" />
+            <Setter Property="FontWeight" Value="SemiLight" />
         </Style>
         <Style Selector="StackPanel > TextBlock.value">
             <Setter Property="FontSize" Value="16" />
+            <Setter Property="FontWeight" Value="SemiLight" />
             <Setter Property="TextAlignment" Value="Right" />
+            <Setter Property="Margin" Value="0 1" />
         </Style>
         <Style Selector="StackPanel > Rectangle">
-            <Setter Property="Margin" Value="14 0" />
-            <Setter Property="Stroke" Value="#3B5287" />
+            <Setter Property="Margin" Value="14 1" />
+            <Setter Property="Stroke" Value="#697899" />
             <Setter Property="StrokeThickness" Value="2" />
             <Setter Property="VerticalAlignment" Value="Stretch" />
         </Style>
     </UserControl.Styles>
 
-    <StackPanel Orientation="Horizontal" Margin="4 3">
+    <StackPanel Orientation="Horizontal" Margin="6 3">
         <StackPanel Orientation="Vertical" Width="65">
             <TextBlock Classes="label">Status</TextBlock>
-            <TextBlock FontSize="12" Margin="0 2 0 0" Text="{Binding StatusText}" />
+            <TextBlock FontSize="12" Margin="0 3 0 0" Text="{Binding StatusText}" />
         </StackPanel>
         <Rectangle />
         <StackPanel Orientation="Vertical">
diff --git a/app/Desktop/Main/MainWindow.axaml b/app/Desktop/Main/MainWindow.axaml
index d5246a8..06fdda5 100644
--- a/app/Desktop/Main/MainWindow.axaml
+++ b/app/Desktop/Main/MainWindow.axaml
@@ -8,7 +8,7 @@
         Title="{Binding Title}"
         Icon="avares://DiscordHistoryTracker/Resources/icon.ico"
         Width="800" Height="500"
-        MinWidth="480" MinHeight="260"
+        MinWidth="500" MinHeight="275"
         WindowStartupLocation="CenterScreen"
         Closed="OnClosed">
 
diff --git a/app/Desktop/Main/Screens/MainContentScreen.axaml b/app/Desktop/Main/Screens/MainContentScreen.axaml
index cf6771c..b7197d8 100644
--- a/app/Desktop/Main/Screens/MainContentScreen.axaml
+++ b/app/Desktop/Main/Screens/MainContentScreen.axaml
@@ -12,10 +12,20 @@
     </Design.DataContext>
 
     <UserControl.Styles>
+        <Style Selector="Border.statusBar">
+            <Setter Property="Background" Value="#3C4F79" />
+        </Style>
+        <Style Selector="TextBlock.invisibleTabItem">
+            <Setter Property="FontSize" Value="20" />
+            <Setter Property="FontWeight" Value="SemiLight" />
+            <Setter Property="Margin" Value="17 0" />
+            <Setter Property="Opacity" Value="0" />
+        </Style>
         <Style Selector="TabControl ItemsPresenter > Grid">
             <Setter Property="Background" Value="#546A9F" />
         </Style>
         <Style Selector="TabItem">
+            <Setter Property="Cursor" Value="Hand" />
             <Setter Property="Foreground" Value="#E9E9E9" />
             <Setter Property="FontSize" Value="20" />
         </Style>
@@ -23,10 +33,11 @@
             <Setter Property="Margin" Value="5 0" />
         </Style>
         <Style Selector="TabItem:pointerover">
-            <Setter Property="Background" Value="#1F2E45" />
+            <Setter Property="Cursor" Value="Hand" />
+            <Setter Property="Background" Value="#455785" />
         </Style>
         <Style Selector="TabItem:pointerover /template/ Border">
-            <Setter Property="Background" Value="#1F2E45" />
+            <Setter Property="Background" Value="#455785" />
         </Style>
         <Style Selector="TabItem:pointerover > TextBlock">
             <Setter Property="Foreground" Value="#E9E9E9" />
@@ -60,43 +71,37 @@
     </UserControl.Styles>
 
     <DockPanel>
-        <TabControl x:Name="TabControl" TabStripPlacement="Left">
+        <Border Classes="statusBar" DockPanel.Dock="Bottom">
+            <DockPanel>
+                <TextBlock Classes="invisibleTabItem" DockPanel.Dock="Left">Advanced</TextBlock>
+                <controls:StatusBar DataContext="{Binding StatusBarModel}" DockPanel.Dock="Right" />
+            </DockPanel>
+        </Border>
+        <TabControl x:Name="TabControl" TabStripPlacement="Left" DockPanel.Dock="Top">
             <TabControl.ItemsPanel>
                 <ItemsPanelTemplate>
-                    <Grid ColumnDefinitions="Auto" RowDefinitions="Auto,Auto,Auto,*,Auto,43" />
+                    <Grid ColumnDefinitions="Auto" RowDefinitions="Auto,Auto,Auto,*,Auto" />
                 </ItemsPanelTemplate>
             </TabControl.ItemsPanel>
             <TabItem x:Name="TabDatabase" Header="Database" Classes="first" Grid.Row="0">
-                <DockPanel>
-                    <controls:StatusBar DataContext="{Binding StatusBarModel}" DockPanel.Dock="Bottom" />
-                    <ScrollViewer>
-                        <ContentPresenter Content="{Binding DatabasePage}" Classes="page" />
-                    </ScrollViewer>
-                </DockPanel>
+                <ScrollViewer>
+                    <ContentPresenter Content="{Binding DatabasePage}" Classes="page" />
+                </ScrollViewer>
             </TabItem>
             <TabItem x:Name="TabTracking" Header="Tracking" DockPanel.Dock="Top" Grid.Row="1">
-                <DockPanel>
-                    <controls:StatusBar DataContext="{Binding StatusBarModel}" DockPanel.Dock="Bottom" />
-                    <ScrollViewer>
-                        <ContentPresenter Content="{Binding TrackingPage}" Classes="page" />
-                    </ScrollViewer>
-                </DockPanel>
+                <ScrollViewer>
+                    <ContentPresenter Content="{Binding TrackingPage}" Classes="page" />
+                </ScrollViewer>
             </TabItem>
             <TabItem x:Name="TabViewer" Header="Viewer" DockPanel.Dock="Top" Grid.Row="2">
-                <DockPanel>
-                    <controls:StatusBar DataContext="{Binding StatusBarModel}" DockPanel.Dock="Bottom" />
-                    <ScrollViewer>
-                        <ContentPresenter Content="{Binding ViewerPage}" Classes="page" />
-                    </ScrollViewer>
-                </DockPanel>
+                <ScrollViewer>
+                    <ContentPresenter Content="{Binding ViewerPage}" Classes="page" />
+                </ScrollViewer>
             </TabItem>
             <TabItem x:Name="TabAdvanced" Header="Advanced" DockPanel.Dock="Bottom" Grid.Row="4">
-                <DockPanel>
-                    <controls:StatusBar DataContext="{Binding StatusBarModel}" DockPanel.Dock="Bottom" />
-                    <ScrollViewer>
-                        <ContentPresenter Content="{Binding AdvancedPage}" Classes="page" />
-                    </ScrollViewer>
-                </DockPanel>
+                <ScrollViewer>
+                    <ContentPresenter Content="{Binding AdvancedPage}" Classes="page" />
+                </ScrollViewer>
             </TabItem>
         </TabControl>
     </DockPanel>