From 4903a36671272658b8436fd2074a188a366de1d2 Mon Sep 17 00:00:00 2001
From: Sandra Borst <108298114+VerfluchteZocke@users.noreply.github.com>
Date: Sun, 9 Mar 2025 15:00:08 +0100
Subject: [PATCH] imrpoved design of abonnement screen

---
 .../Screens/Regulaer/Abonnement.xaml          | 94 +++++++++++++------
 .../Screens/Regulaer/Abonnement.xaml.cs       |  7 ++
 2 files changed, 70 insertions(+), 31 deletions(-)

diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml
index f50cb09..763b6c1 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml
@@ -5,42 +5,45 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:local="clr-namespace:InnoLabProjektDektopApp.Screens.Regulaer"
       mc:Ignorable="d" 
-      d:DesignHeight="450" d:DesignWidth="800"
+     Background="{StaticResource BACKGROUND_PRIMARY_BRUSH}"
       Title="Abonnement">
-    
-    
 
-    <Border Background="#1E1E1E" Padding="20">
+
+    <ScrollViewer>
+        <Border Padding="20" VerticalAlignment="Center">
+       
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
-                <RowDefinition Height="*" />
-                <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" MinHeight="39.62" />
             </Grid.RowDefinitions>
 
 
             <!-- Titel & Beschreibung -->
-            <StackPanel Grid.Row="0" Margin="0,0,0,80">
+            <StackPanel Grid.Row="0" Orientation="Vertical">
                 <TextBlock Text="Available subscription plans" FontSize="24" Foreground="White" FontWeight="Bold"/>
                 <TextBlock TextWrapping="Wrap"  Text="Become a premium member for even more features! With the free version, you already have great tools to stay focused and work better. But with Premium, you’ll unlock extra features to work even smarter and make it more personal." FontSize="14" Foreground="Gray"/>
-            </StackPanel>
+                    <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" Padding="10" CornerRadius="5" Margin="0,20,0,20" MaxHeight="50" >
+                        <TextBlock>
+        <Run Text="Your current membership: " Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontWeight="Bold"/>
+        <Run Text="Free" Foreground="White" FontWeight="Bold"/>
+                        </TextBlock>
+                    </Border>
+                </StackPanel>
 
-            <Border Background="#2A2A2A" Padding="10" CornerRadius="5" Margin="0,80,0,34">
-                <TextBlock>
-                    <Run Text="Your current membership: " Foreground="LightGray" FontWeight="Bold"/>
-                    <Run Text="Free" Foreground="White"/>
-                </TextBlock>
-            </Border>
+                
 
 
 
             <!-- Feature Tabelle -->
-            <Border Background="#2A2A2A" Padding="10" CornerRadius="10" Margin="0,126,0,27" Grid.RowSpan="3">
+                <Border Grid.Row="1" Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" Padding="10" CornerRadius="10" Margin="0,0,0,27" >
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto"/>
                         <RowDefinition Height="*"/>
-                    </Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                        </Grid.RowDefinitions>
 
                     <!-- Header -->
                     <Grid Margin="0,0,0,10">
@@ -49,10 +52,30 @@
                             <ColumnDefinition Width="2*"/>
                             <ColumnDefinition Width="2*"/>
                         </Grid.ColumnDefinitions>
-                        <TextBlock Text="Feature" Foreground="White" FontWeight="Bold" Grid.Column="0"/>
-                        <TextBlock Text="Free" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="1"/>
-                        <TextBlock Text="Premium (€4,99/month or €20/year)" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="2"/>
-                    </Grid>
+                        <TextBlock Text="Feature" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontWeight="Bold" Grid.Column="0"/>
+                            <TextBlock Text="Free" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontWeight="Bold" HorizontalAlignment="Center" Grid.Column="1"/>
+                            <Grid Grid.Column="2" HorizontalAlignment="Center">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                    <!-- Erlaubt dynamisches Wrapping -->
+                                </Grid.ColumnDefinitions>
+                                <StackPanel Orientation="Vertical" >
+                                    <TextBlock Text="Premium" TextAlignment="Center"
+Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" 
+FontWeight="Bold"
+TextWrapping="Wrap"
+Grid.Column="0"/>
+
+                                    <TextBlock Text=" (€2,99/month or €20/year)"  TextAlignment="Center"
+FontWeight="Normal" 
+TextWrapping="Wrap"
+Grid.Column="1"/>
+                                </StackPanel>
+                                
+                            </Grid>
+
+                        </Grid>
 
                     <!-- Feature Liste -->
                     <StackPanel Grid.Row="1">
@@ -64,8 +87,8 @@
                                     <ColumnDefinition Width="2*"/>
                                 </Grid.ColumnDefinitions>
                                 <TextBlock Text="Start and manage focus session" Foreground="White" Grid.Column="0"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
+                                <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
                             </Grid>
                         </Border>
 
@@ -77,8 +100,8 @@
                                     <ColumnDefinition Width="2*"/>
                                 </Grid.ColumnDefinitions>
                                 <TextBlock Text="View today’s session stats after it ends" Foreground="White" Grid.Column="0"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
                             </Grid>
                         </Border>
 
@@ -91,7 +114,7 @@
                                 </Grid.ColumnDefinitions>
                                 <TextBlock Text="Detailed stats (days, weeks, months)" Foreground="White" Grid.Column="0"/>
                                 <TextBlock Text="✖" Foreground="Red" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
                             </Grid>
                         </Border>
 
@@ -104,7 +127,7 @@
                                 </Grid.ColumnDefinitions>
                                 <TextBlock Text="Specify work sessions" Foreground="White" Grid.Column="0"/>
                                 <TextBlock Text="✖" Foreground="Red" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
                             </Grid>
                         </Border>
 
@@ -117,7 +140,7 @@
                                 </Grid.ColumnDefinitions>
                                 <TextBlock Text="Analyze peak productivity times" Foreground="White" Grid.Column="0"/>
                                 <TextBlock Text="✖" Foreground="Red" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
                             </Grid>
                         </Border>
 
@@ -130,7 +153,7 @@
                                 </Grid.ColumnDefinitions>
                                 <TextBlock Text="Customize mascot (accessories, skins)" Foreground="White" Grid.Column="0"/>
                                 <TextBlock Text="✖" Foreground="Red" FontSize="16" HorizontalAlignment="Center" Grid.Column="1"/>
-                                <TextBlock Text="✔" Foreground="Green" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
+                                    <TextBlock Text="✔" Foreground="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" FontSize="16" HorizontalAlignment="Center" Grid.Column="2"/>
                             </Grid>
                         </Border>
 
@@ -139,8 +162,17 @@
                 </Grid>
             </Border>
 
-            <!-- Premium Button -->
-            <Button Content="Try premium now" Grid.Row="2" Background="#4CAF50" Foreground="White" FontSize="16" Padding="10,5" HorizontalAlignment="Left" Margin="0,20,0,-11" Cursor="Hand"/>
-        </Grid>
+                <!-- Premium Button -->
+                <Border Grid.Row="2" HorizontalAlignment="Left" 
+        Style="{StaticResource RoundedButtonBorder}" 
+        MouseDown="Button_Click" >
+                    <TextBlock Text="Try premium now" Style="{StaticResource ButtonTextStyle}" />
+                </Border>
+
+
+            </Grid>
+            
+        
     </Border>
+    </ScrollViewer>
 </Page>
diff --git a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml.cs b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml.cs
index 40a1282..a743fdc 100644
--- a/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml.cs
+++ b/InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/Regulaer/Abonnement.xaml.cs
@@ -24,5 +24,12 @@ namespace InnoLabProjektDektopApp.Screens.Regulaer
         {
             InitializeComponent();
         }
+
+        private void Button_Click(object sender, MouseButtonEventArgs e)
+        {
+            // Beispiel: Öffne eine neue Seite / neues Fenster
+            MessageBox.Show("Premium Button clicked!");
+        }
+
     }
 }
-- 
GitLab