From e9221ac1301d45c5403a29328abb371489f4f85f Mon Sep 17 00:00:00 2001
From: Natalia Portillo <claunia@claunia.com>
Date: Sat, 15 Nov 2025 04:12:13 +0000
Subject: [PATCH] Return the keyboard styling back.

---
 .../Presentation/Views/ComputersPage.xaml     | 168 +++++++++++++++++-
 1 file changed, 166 insertions(+), 2 deletions(-)

diff --git a/Marechai.App/Presentation/Views/ComputersPage.xaml b/Marechai.App/Presentation/Views/ComputersPage.xaml
index abafb0b8..94f5bcfa 100644
--- a/Marechai.App/Presentation/Views/ComputersPage.xaml
+++ b/Marechai.App/Presentation/Views/ComputersPage.xaml
@@ -86,7 +86,14 @@
                                    Foreground="{ThemeResource SystemBaseMediumColor}" />
                         <ItemsRepeater ItemsSource="{Binding LettersList}"
                                        Layout="{StaticResource LettersGridLayout}">
-                            <ItemsRepeater.ItemTemplate></ItemsRepeater.ItemTemplate>
+                            <ItemsRepeater.ItemTemplate>
+                                <DataTemplate>
+                                    <Button Content="{Binding}"
+                                            Command="{Binding DataContext.NavigateByLetterCommand, ElementName=PageRoot}"
+                                            CommandParameter="{Binding}"
+                                            Style="{StaticResource KeyboardKeyButtonStyle}" />
+                                </DataTemplate>
+                            </ItemsRepeater.ItemTemplate>
                         </ItemsRepeater>
                     </StackPanel>
 
@@ -98,7 +105,14 @@
                                    Foreground="{ThemeResource SystemBaseMediumColor}" />
                         <ItemsRepeater ItemsSource="{Binding YearsList}"
                                        Layout="{StaticResource YearsGridLayout}">
-                            <ItemsRepeater.ItemTemplate></ItemsRepeater.ItemTemplate>
+                            <ItemsRepeater.ItemTemplate>
+                                <DataTemplate>
+                                    <Button Content="{Binding}"
+                                            Command="{Binding DataContext.NavigateByYearCommand, ElementName=PageRoot}"
+                                            CommandParameter="{Binding}"
+                                            Style="{StaticResource KeyboardKeyButtonStyle}" />
+                                </DataTemplate>
+                            </ItemsRepeater.ItemTemplate>
                         </ItemsRepeater>
                     </StackPanel>
 
@@ -128,6 +142,156 @@
 
     <Page.Resources>
         <!-- Keyboard Key Button Style (revised: more padding, simplified borders to avoid clipping, darker scheme) -->
+        <Style x:Key="KeyboardKeyButtonStyle"
+               TargetType="Button">
+            <!-- Base appearance -->
+            <Setter Property="Foreground"
+                    Value="#1A1A1A" />
+            <Setter Property="Background">
+                <Setter.Value>
+                    <LinearGradientBrush StartPoint="0,0"
+                                         EndPoint="0,1">
+                        <GradientStop Color="#D6D6D6"
+                                      Offset="0" />
+                        <GradientStop Color="#C2C2C2"
+                                      Offset="0.55" />
+                        <GradientStop Color="#B0B0B0"
+                                      Offset="1" />
+                    </LinearGradientBrush>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="BorderBrush"
+                    Value="#7A7A7A" />
+            <Setter Property="BorderThickness"
+                    Value="1" />
+            <Setter Property="CornerRadius"
+                    Value="6" />
+            <Setter Property="Padding"
+                    Value="14,12" /> <!-- Increased vertical padding to prevent cutoff -->
+            <Setter Property="Margin"
+                    Value="4" />
+            <Setter Property="FontFamily"
+                    Value="Segoe UI" />
+            <Setter Property="FontWeight"
+                    Value="SemiBold" />
+            <Setter Property="FontSize"
+                    Value="15" />
+            <Setter Property="HorizontalAlignment"
+                    Value="Stretch" />
+            <Setter Property="VerticalAlignment"
+                    Value="Stretch" />
+            <Setter Property="HorizontalContentAlignment"
+                    Value="Center" />
+            <Setter Property="VerticalContentAlignment"
+                    Value="Center" />
+            <Setter Property="MinWidth"
+                    Value="52" />
+            <Setter Property="MinHeight"
+                    Value="52" /> <!-- Larger min height avoids clipping ascenders/descenders -->
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="Button">
+                        <Grid>
+                            <!-- Shadow (simple) -->
+                            <Border x:Name="Shadow"
+                                    CornerRadius="6"
+                                    Background="#33000000"
+                                    Margin="2,4,4,2" />
+                            <!-- Key surface -->
+                            <Border x:Name="KeyBorder"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    CornerRadius="{TemplateBinding CornerRadius}">
+                                <!-- Inner highlight & content -->
+                                <Grid>
+                                    <Border CornerRadius="{TemplateBinding CornerRadius}"
+                                            BorderBrush="#60FFFFFF"
+                                            BorderThickness="1,1,0,0" />
+                                    <Border CornerRadius="{TemplateBinding CornerRadius}"
+                                            BorderBrush="#30000000"
+                                            BorderThickness="0,0,1,1" />
+                                    <ContentPresenter x:Name="ContentPresenter"
+                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                      Margin="0"
+                                                      TextWrapping="NoWrap" />
+                                </Grid>
+                            </Border>
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal" />
+                                    <VisualState x:Name="PointerOver">
+                                        <VisualState.Setters>
+                                            <Setter Target="KeyBorder.Background">
+                                                <Setter.Value>
+                                                    <LinearGradientBrush StartPoint="0,0"
+                                                                         EndPoint="0,1">
+                                                        <GradientStop Color="#E0E0E0"
+                                                                      Offset="0" />
+                                                        <GradientStop Color="#CFCFCF"
+                                                                      Offset="0.55" />
+                                                        <GradientStop Color="#BDBDBD"
+                                                                      Offset="1" />
+                                                    </LinearGradientBrush>
+                                                </Setter.Value>
+                                            </Setter>
+                                            <Setter Target="KeyBorder.BorderBrush"
+                                                    Value="#5F5F5F" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="Pressed">
+                                        <VisualState.Setters>
+                                            <Setter Target="KeyBorder.Background">
+                                                <Setter.Value>
+                                                    <LinearGradientBrush StartPoint="0,0"
+                                                                         EndPoint="0,1">
+                                                        <GradientStop Color="#9C9C9C"
+                                                                      Offset="0" />
+                                                        <GradientStop Color="#A8A8A8"
+                                                                      Offset="0.55" />
+                                                        <GradientStop Color="#B4B4B4"
+                                                                      Offset="1" />
+                                                    </LinearGradientBrush>
+                                                </Setter.Value>
+                                            </Setter>
+                                            <Setter Target="KeyBorder.BorderBrush"
+                                                    Value="#4A4A4A" />
+                                            <Setter Target="KeyBorder.RenderTransform">
+                                                <Setter.Value>
+                                                    <TranslateTransform Y="2" />
+                                                </Setter.Value>
+                                            </Setter>
+                                            <Setter Target="Shadow.Opacity"
+                                                    Value="0.15" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="Disabled">
+                                        <VisualState.Setters>
+                                            <Setter Target="KeyBorder.Opacity"
+                                                    Value="0.45" />
+                                            <Setter Target="ContentPresenter.Foreground"
+                                                    Value="#777777" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="FocusStates">
+                                    <VisualState x:Name="Focused">
+                                        <VisualState.Setters>
+                                            <Setter Target="KeyBorder.BorderBrush"
+                                                    Value="#3A7AFE" />
+                                            <Setter Target="KeyBorder.BorderThickness"
+                                                    Value="2" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="Unfocused" />
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
 
         <!-- Responsive Grid Layouts -->
         <UniformGridLayout x:Key="LettersGridLayout"