From fb274baebfc936b974a0c155fe68bfbeca0a7133 Mon Sep 17 00:00:00 2001
From: GreenXeMotion <97885053+GreenXeMotion@users.noreply.github.com>
Date: Mon, 7 Apr 2025 03:56:44 +0600
Subject: [PATCH] Rework ServerSelector app UI (#27)

* Rework ServerSelector app UI

* fix border on linux

---------

Co-authored-by: Mikhail Tyukin <mishakeys20@gmail.com>
---
 ServerSelector/App.axaml                 |  20 ++-
 ServerSelector/Views/MainView.axaml      | 100 +++++++++++-
 ServerSelector/Views/MainView.axaml.cs   |   8 +-
 ServerSelector/Views/MainWindow.axaml    | 198 ++++++++++++++++++++++-
 ServerSelector/Views/MainWindow.axaml.cs |  20 +++
 5 files changed, 331 insertions(+), 15 deletions(-)

diff --git a/ServerSelector/App.axaml b/ServerSelector/App.axaml
index 5ec1193..603bea1 100644
--- a/ServerSelector/App.axaml
+++ b/ServerSelector/App.axaml
@@ -1,11 +1,25 @@
 <Application xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-			 xmlns:sty="using:FluentAvalonia.Styling"
+             xmlns:sty="using:FluentAvalonia.Styling"
              x:Class="ServerSelector.App"
-             RequestedThemeVariant="Default">
+             RequestedThemeVariant="Dark">
              <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
 
     <Application.Styles>
-		<sty:FluentAvaloniaTheme />
+        <sty:FluentAvaloniaTheme />
+        <Style Selector="Button">
+            <Setter Property="Transitions">
+                <Transitions>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2"/>
+                </Transitions>
+            </Setter>
+        </Style>
+        <Style Selector="Button:pointerover">
+            <Setter Property="RenderTransform" Value="scale(1.05)"/>
+            <Setter Property="Opacity" Value="0.9"/>
+        </Style>
+        <Style Selector="Button:pressed">
+            <Setter Property="RenderTransform" Value="scale(0.95)"/>
+        </Style>
     </Application.Styles>
 </Application>
diff --git a/ServerSelector/Views/MainView.axaml b/ServerSelector/Views/MainView.axaml
index d7f9b4f..2def89e 100644
--- a/ServerSelector/Views/MainView.axaml
+++ b/ServerSelector/Views/MainView.axaml
@@ -7,6 +7,88 @@
              x:Class="ServerSelector.Views.MainView"
 			 xmlns:ui="using:FluentAvalonia.UI.Controls"
 			 >
+    <UserControl.Styles>
+        <!-- Modern Utility Button Style -->
+        <Style Selector="Button.utility">
+            <Setter Property="Width" Value="32"/>
+            <Setter Property="Height" Value="32"/>
+            <Setter Property="Background" Value="#3E3E42"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Padding" Value="0"/>
+            <Setter Property="FontWeight" Value="DemiBold"/>
+            <Setter Property="FontSize" Value="16"/>
+            <Setter Property="Foreground" Value="#FFFFFF"/>
+            <Setter Property="VerticalContentAlignment" Value="Center"/>
+            <Setter Property="HorizontalContentAlignment" Value="Center"/>
+            <Setter Property="CornerRadius" Value="4"/>
+            <Setter Property="Content" Value="•••"/>
+            <Setter Property="Transitions">
+                <Transitions>
+                    <BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                    <DoubleTransition Property="Opacity" Duration="0:0:0.2"/>
+                </Transitions>
+            </Setter>
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <ContentPresenter Name="PART_ContentPresenter"
+                                        Content="{TemplateBinding Content}"
+                                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                                        Padding="{TemplateBinding Padding}"
+                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+        <Style Selector="Button.utility:pointerover">
+            <Setter Property="Background" Value="#4b4b4e"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="RenderTransform" Value="translateY(-1px)"/>
+            <Setter Property="Opacity" Value="0.9"/>
+        </Style>
+        <Style Selector="Button.utility:pressed">
+            <Setter Property="Background" Value="#505054"/>
+            <Setter Property="RenderTransform" Value="translateY(1px)"/>
+            <Setter Property="Opacity" Value="0.8"/>
+        </Style>
+
+        <!-- Modern Save Button Style -->
+        <Style Selector="Button.save-button">
+            <Setter Property="Width" Value="120"/>
+            <Setter Property="Height" Value="38"/>
+            <Setter Property="Background" Value="#3CB371"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Padding" Value="16,8"/>
+            <Setter Property="CornerRadius" Value="4"/>
+            <Setter Property="FontWeight" Value="SemiBold"/>
+            <Setter Property="FontSize" Value="14"/>
+            <Setter Property="HorizontalContentAlignment" Value="Center"/>
+            <Setter Property="VerticalContentAlignment" Value="Center"/>
+            <Setter Property="Transitions">
+                <Transitions>
+                    <BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                    <DoubleTransition Property="Opacity" Duration="0:0:0.2"/>
+                </Transitions>
+            </Setter>
+        </Style>
+        <Style Selector="Button.save-button:pointerover">
+            <Setter Property="Background" Value="#45C67D"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Opacity" Value="0.95"/>
+        </Style>
+        <Style Selector="Button.save-button:pressed">
+            <Setter Property="Background" Value="#318F5A"/>
+            <Setter Property="Opacity" Value="0.9"/>
+            <Setter Property="RenderTransform" Value="scale(0.98)"/>
+        </Style>
+    </UserControl.Styles>
+
 	<Grid>
 		<TabControl x:Name="MainUI">
 			<TabItem Header="PC" x:Name="TabPc">
@@ -34,7 +116,7 @@
 
 					<TextBlock VerticalAlignment="Center" Margin="5" Grid.Row="0" Grid.Column="0">Game path: </TextBlock>
 					<TextBox x:Name="txtGamePath" Grid.Row="0" Grid.Column="1" TextChanged="GamePath_TextChanged" ToolTip.Tip="The folder with the game and launcher folders.">C:\NIKKE\</TextBox>
-					<Button x:Name="btnSelectGamePath" Grid.Row="0" Grid.Column="2" Content="..." Click="BtnSelectGamePath_Click"></Button>
+					<Button x:Name="btnSelectGamePath" Grid.Row="0" Grid.Column="2" Classes="utility" Click="BtnSelectGamePath_Click">...</Button>
 
 					<TextBlock VerticalAlignment="Center" Margin="5" Grid.Row="4" Grid.Column="0">Server: </TextBlock>
 
@@ -51,7 +133,15 @@
 					<CheckBox x:Name="ChkOffline" VerticalAlignment="Center" Margin="5" Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" ToolTip.Tip="Enables the ability to run the game offline by making the game download the assets from the server, and not the official server. This only works if enableOffline is enabled on the server. Please note that this should not be enabled on public servers due to copyright issues, as assets are downloaded through said server. This is required if you want to use an older version of the game.">Enable offline mode</CheckBox>
 
 					<TextBlock Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="WrapWithOverflow" VerticalAlignment="Center" Margin="5" x:Name="LblStatus" ToolTip.Tip="Shows the status of the patches to the game. All patches are reverted when server is set to official.">Status: OK</TextBlock>
-					<Button HorizontalAlignment="Right" Margin="5" Click="Save_Click" Grid.Row="10" Grid.Column="1" Grid.ColumnSpan="2" Classes="accent">Save</Button>
+					<Button HorizontalAlignment="Right"
+                            Margin="5"
+                            Click="Save_Click"
+                            Grid.Row="10"
+                            Grid.Column="1"
+                            Grid.ColumnSpan="2"
+                            Classes="save-button">
+                        Save Changes
+                    </Button>
 				</Grid>
 			</TabItem>
 			<TabItem Header="Android">
@@ -70,16 +160,12 @@
 						<RowDefinition Height="auto"></RowDefinition>
 						<RowDefinition Height="5"></RowDefinition>
 						<RowDefinition Height="auto"></RowDefinition>
-						<RowDefinition Height="5"></RowDefinition>
-						<RowDefinition Height="auto"></RowDefinition>
-						<RowDefinition Height="5"></RowDefinition>
-						<RowDefinition Height="auto"></RowDefinition>
 					</Grid.RowDefinitions>
 
 
 					<TextBlock Grid.Row="0" Grid.Column="0"  VerticalAlignment="Center" Margin="5">APK path: </TextBlock>
 					<TextBox x:Name="txtApkPath" Grid.Row="0" Grid.Column="1"></TextBox>
-					<Button x:Name="btnSelectApkPath" Grid.Row="0" Grid.Column="2" Content="..."></Button>
+					<Button x:Name="btnSelectApkPath" Grid.Row="0" Grid.Column="2" Classes="utility">...</Button>
 
 
 					<TextBlock VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" Margin="5">IP: </TextBlock>
diff --git a/ServerSelector/Views/MainView.axaml.cs b/ServerSelector/Views/MainView.axaml.cs
index 7e5456e..15d9ede 100644
--- a/ServerSelector/Views/MainView.axaml.cs
+++ b/ServerSelector/Views/MainView.axaml.cs
@@ -5,7 +5,6 @@ using FluentAvalonia.UI.Controls;
 using System;
 using System.IO;
 using System.Net;
-using System.Runtime.InteropServices;
 using System.Security.Principal;
 
 namespace ServerSelector.Views;
@@ -108,7 +107,7 @@ public partial class MainView : UserControl
             return;
 
         SetLoadingScreenVisible(true);
-        LblStatus.Text = "Status: " + await ServerSwitcher.CheckIntegrity(GamePath, LauncherPath) + ", for game version " + ServerSwitcher.PatchGameVersion;
+        LblStatus.Text = "Status: " + await ServerSwitcher.CheckIntegrity(GamePath, LauncherPath);
         SetLoadingScreenVisible(false);
     }
 
@@ -211,6 +210,11 @@ public partial class MainView : UserControl
         }
     }
 
+    private void BtnSelectApkPath_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
+    {
+        // To be implemented
+    }
+
     private void GamePath_TextChanged(object? sender, TextChangedEventArgs e)
     {
         UpdateIntegrityLabel();
diff --git a/ServerSelector/Views/MainWindow.axaml b/ServerSelector/Views/MainWindow.axaml
index 5e33ac7..a1c0add 100644
--- a/ServerSelector/Views/MainWindow.axaml
+++ b/ServerSelector/Views/MainWindow.axaml
@@ -4,8 +4,200 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:views="clr-namespace:ServerSelector.Views"
-        mc:Ignorable="d" d:DesignWidth="370" d:DesignHeight="300"
+        xmlns:ui="using:FluentAvalonia.UI.Controls"
+        mc:Ignorable="d" d:DesignWidth="380" d:DesignHeight="300"
         x:Class="ServerSelector.Views.MainWindow"
-        Title="Server Switcher" Width="370" Height="300" CanResize="True">
-        <views:MainView />
+        Width="380" Height="360"
+        WindowStartupLocation="CenterScreen"
+        TransparencyLevelHint="AcrylicBlur"
+        Background="Transparent"
+        ExtendClientAreaToDecorationsHint="True"
+        ExtendClientAreaChromeHints="NoChrome"
+        ExtendClientAreaTitleBarHeightHint="-1"
+        SystemDecorations="BorderOnly">
+        <Window.Styles>
+        <!-- Global Button Style -->
+        <Style Selector="Button">
+            <Setter Property="Background" Value="#2D2D30"/>
+            <Setter Property="Foreground" Value="White"/>
+            <Setter Property="BorderThickness" Value="0"/>
+            <Setter Property="Padding" Value="12,8"/>
+            <Setter Property="CornerRadius" Value="4"/>
+            <Setter Property="RenderTransform" Value="none"/>
+        </Style>
+        <Style Selector="Button:pointerover">
+            <Setter Property="Background" Value="#3E3E42"/>
+            <Setter Property="RenderTransform" Value="scale(1.02)"/>
+        </Style>
+        <Style Selector="Button:pressed">
+            <Setter Property="RenderTransform" Value="scale(0.98)"/>
+        </Style>
+
+        <!-- Primary Button Style -->
+        <Style Selector="Button.primary">
+            <Setter Property="Background" Value="#007ACC"/>
+        </Style>
+        <Style Selector="Button.primary:pointerover">
+            <Setter Property="Background" Value="#1C97EA"/>
+        </Style>
+
+        <!-- Secondary Button Style -->
+        <Style Selector="Button.secondary">
+            <Setter Property="Background" Value="#3E3E42"/>
+        </Style>
+        <Style Selector="Button.secondary:pointerover">
+            <Setter Property="Background" Value="#505054"/>
+        </Style>
+
+        <!-- Danger Button Style -->
+        <Style Selector="Button.danger">
+            <Setter Property="Background" Value="#E51400"/>
+        </Style>
+        <Style Selector="Button.danger:pointerover">
+            <Setter Property="Background" Value="#FF2D1A"/>
+        </Style>
+    </Window.Styles>
+
+    <Panel>
+        <!-- Gradient Background -->
+        <Panel>
+            <Rectangle>
+                <Rectangle.Fill>
+                    <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
+                        <GradientStop Offset="0" Color="#15171E"/>
+                        <GradientStop Offset="1" Color="#1A1C23"/>
+                    </LinearGradientBrush>
+                </Rectangle.Fill>
+            </Rectangle>
+        </Panel>
+
+        <!-- Enhanced Acrylic Effect -->
+        <ExperimentalAcrylicBorder IsHitTestVisible="False">
+            <ExperimentalAcrylicBorder.Material>
+                <ExperimentalAcrylicMaterial
+                    BackgroundSource="Digger"
+                    TintColor="#151515"
+                    TintOpacity="0.3"
+                    MaterialOpacity="0.2"
+                    FallbackColor="#151515"/>
+            </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
+
+        <!-- Additional Overlay for Depth -->
+        <Border IsHitTestVisible="False">
+            <Border.Background>
+                <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                    <GradientStop Offset="0" Color="#15000000"/>
+                    <GradientStop Offset="1" Color="#45000000"/>
+                </LinearGradientBrush>
+            </Border.Background>
+        </Border>
+
+        <Grid RowDefinitions="Auto,Auto,*" Margin="20">
+            <!-- Header with Window Controls -->
+            <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Height="40">
+                <!-- Draggable Title Area -->
+                <Grid Grid.Column="0" Grid.ColumnSpan="2"
+                      Background="Transparent"
+                      PointerPressed="WindowPointerPressed">
+                    <TextBlock Text="SERVER SWITCHER"
+                             FontSize="14"
+                             FontWeight="SemiBold"
+                             Foreground="White"
+                             VerticalAlignment="Center"
+                             Margin="5,0,0,0"/>
+                </Grid>
+
+                <!-- Window Controls -->
+                <StackPanel Grid.Column="2"
+                          Orientation="Horizontal"
+                          HorizontalAlignment="Right"
+                          Spacing="0">
+                    <!-- Minimize Button -->
+                    <Button Click="MinimizeButton_Click"
+                            Width="40" Height="30"
+                            Padding="0"
+                            Margin="0"
+                            VerticalContentAlignment="Center"
+                            HorizontalContentAlignment="Center"
+                            Background="Transparent"
+                            BorderThickness="0"
+                            CornerRadius="0">
+                        <Button.Styles>
+                            <Style Selector="Button">
+                                <Setter Property="Transitions">
+                                    <Transitions>
+                                        <BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                                        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                                    </Transitions>
+                                </Setter>
+                            </Style>
+                            <Style Selector="Button:pointerover">
+                                <Setter Property="Background" Value="#25FFFFFF"/>
+                                <Setter Property="Cursor" Value="Hand"/>
+                            </Style>
+                            <Style Selector="Button:pressed">
+                                <Setter Property="Background" Value="#15FFFFFF"/>
+                            </Style>
+                        </Button.Styles>
+                        <TextBlock Text="─"
+                                 FontSize="14"
+                                 FontWeight="Bold"/>
+                    </Button>
+                    <!-- Close Button -->
+                    <Button Click="CloseButton_Click"
+                            Width="40" Height="30"
+                            Padding="0"
+                            Margin="1,0,1,0"
+                            VerticalContentAlignment="Center"
+                            HorizontalContentAlignment="Center"
+                            Background="#DC143C"
+                            BorderThickness="0"
+                            CornerRadius="4">
+                        <Button.Styles>
+                            <Style Selector="Button">
+                                <Setter Property="Template">
+                                    <ControlTemplate>
+                                        <Border Background="{TemplateBinding Background}"
+                                                BorderBrush="{TemplateBinding BorderBrush}"
+                                                BorderThickness="{TemplateBinding BorderThickness}"
+                                                CornerRadius="{TemplateBinding CornerRadius}">
+                                            <ContentPresenter Name="PART_ContentPresenter"
+                                                            Content="{TemplateBinding Content}"
+                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                            Padding="{TemplateBinding Padding}"
+                                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                                        </Border>
+                                    </ControlTemplate>
+                                </Setter>
+                                <Setter Property="Transitions">
+                                    <Transitions>
+                                        <BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                                        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                                    </Transitions>
+                                </Setter>
+                            </Style>
+                            <Style Selector="Button:pointerover">
+                                <Setter Property="Background" Value="#E32636"/>
+                                <Setter Property="Cursor" Value="Hand"/>
+                                <Setter Property="RenderTransform" Value="translateY(-1px)"/>
+                            </Style>
+                            <Style Selector="Button:pressed">
+                                <Setter Property="Background" Value="#B22222"/>
+                                <Setter Property="RenderTransform" Value="translateY(1px)"/>
+                            </Style>
+                        </Button.Styles>
+                        <TextBlock Text="×"
+                                 FontSize="20"
+                                 FontWeight="Bold"
+                                 VerticalAlignment="Center"/>
+                    </Button>
+                </StackPanel>
+            </Grid>
+
+            <!-- Main Content -->
+            <views:MainView Grid.Row="2" Margin="5"/>
+        </Grid>
+    </Panel>
 </Window>
diff --git a/ServerSelector/Views/MainWindow.axaml.cs b/ServerSelector/Views/MainWindow.axaml.cs
index 6a5f0fb..610d422 100644
--- a/ServerSelector/Views/MainWindow.axaml.cs
+++ b/ServerSelector/Views/MainWindow.axaml.cs
@@ -1,4 +1,6 @@
 using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Interactivity;
 
 namespace ServerSelector.Views;
 
@@ -8,4 +10,22 @@ public partial class MainWindow : Window
     {
         InitializeComponent();
     }
+
+    private void WindowPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
+        {
+            BeginMoveDrag(e);
+        }
+    }
+
+    private void MinimizeButton_Click(object sender, RoutedEventArgs e)
+    {
+        WindowState = WindowState.Minimized;
+    }
+
+    private void CloseButton_Click(object sender, RoutedEventArgs e)
+    {
+        Close();
+    }
 }