improved design of distractions page; improved combobox (now listbox + popup)

InnoLabProjektDektopApp/InnoLabProjektDektopApp/Screens/FirstLaunch/03_0Distractions.xaml

@@ -41,7 +41,7 @@
                  Background="Transparent"
                  Foreground="{StaticResource TEXT_PRIMARY_BRUSH}"
                  BorderBrush="{StaticResource TEXT_SECONDARY_BRUSH}"
-                 BorderThickness="1"
+                 BorderThickness="0"
                  TextChanged="SearchBox_TextChanged" />
                         <TextBlock x:Name="SearchPlaceholder"
                    Text="Search..."
@@ -53,6 +53,13 @@
                    IsHitTestVisible="False"
                    Margin="15,0,0,0" />
 
+                        <!-- Untere Linie als Border -->
+                        <Border Height="1"
+                Background="{StaticResource TEXT_PRIMARY_BRUSH}"
+                VerticalAlignment="Bottom"
+                HorizontalAlignment="Stretch"
+                Margin="10,0,40,0" />
+
                         <Border Width="30"
 Height="30"
 Margin="165,0,0,0"
@@ -62,15 +69,14 @@ MouseDown="SearchButton_Click">
                             <TextBlock Text="🔍"
        FontSize="14"
        VerticalAlignment="Center"
-       HorizontalAlignment="Center" />
+       HorizontalAlignment="Center" 
+                                       Style="{StaticResource ButtonTextStyle2}"/>
+
                         </Border>
 
 
 
                     </Grid>
-
-                    <!-- Lupe-Symbol -->
-                   
                 </Border>
              
 
@@ -88,20 +94,17 @@ MouseDown="SearchButton_Click">
             <Border Background="{StaticResource BACKGROUND_SECONDARY_BRUSH}" CornerRadius="10" Padding="10" Margin="0,10,0,0">
                 <Grid>
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="2*" />
                         <ColumnDefinition Width="3*" />
-                        <ColumnDefinition Width="2*" />
-                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="5*" />
+                        <ColumnDefinition Width="3*" />
+                        <ColumnDefinition Width="1*" />
                     </Grid.ColumnDefinitions>
 
                     <!-- Label -->
                     <TextBlock Text="Add a distracting website:" 
                    VerticalAlignment="Center" 
-                   Foreground="White" 
-                   FontSize="14" 
-                   FontWeight="Bold" 
-                   Grid.Column="0" 
-                   Margin="10,0,10,0" />
+                   Margin="10,0,10,0" 
+                               Style="{StaticResource Header3}"/>
 
                     <!-- Input Field with Placeholder -->
                     <Grid Grid.Column="1" VerticalAlignment="Center" Margin="0,0,10,0">
@@ -112,7 +115,7 @@ MouseDown="SearchButton_Click">
              Background="Transparent" 
              Foreground="White" 
              BorderBrush="Gray" 
-             BorderThickness="1" 
+             BorderThickness="0" 
              TextChanged="UrlInputBox_TextChanged" />
                         <TextBlock x:Name="UrlPlaceholder" 
                Text="Url" 
@@ -122,51 +125,55 @@ MouseDown="SearchButton_Click">
                Padding="5" 
                IsHitTestVisible="False" 
                Margin="5,0,0,0" />
+
+                        <!-- Untere Linie als Border -->
+                        <Border Height="1" 
+            Background="{StaticResource TEXT_PRIMARY_BRUSH}" 
+            VerticalAlignment="Bottom" 
+            HorizontalAlignment="Stretch" 
+            Margin="0,0,0,0" />
                     </Grid>
 
 
-                    <!-- Dropdown for Category -->
-                    <StackPanel Grid.Column="2" VerticalAlignment="Center" Margin="0,0,10,0">
-                        <TextBlock Text="Category" 
-                       HorizontalAlignment="Left" 
-                       Foreground="White" 
-                       FontSize="14" 
-                       FontWeight="Bold" 
-                       Margin="0,0,0,5" />
-                        <ComboBox VerticalAlignment="Center" 
-                                  x:Name="CategoryComboBox"
-                      Padding="5" 
-                      FontSize="14" 
-                      Foreground="Black" 
-                      Background="#ADD8E6" 
-                      FontWeight="Bold"
-                      SelectedIndex="4">
-
-                            <ComboBoxItem Content="Social Media" />
-                            <ComboBoxItem Content="Shopping" />
-                            <ComboBoxItem Content="Games" />
-                            <ComboBoxItem Content="Porn" />
-                            <ComboBoxItem Content="Other Websites" />
-                        </ComboBox>
+                    <StackPanel Grid.Column="2" VerticalAlignment="Center" Margin="0,0,10,0" HorizontalAlignment="Center" Width="200">
+                        <TextBlock Text="Category" HorizontalAlignment="Left" Margin="0,0,0,5" Style="{StaticResource Header3}"/>
+
+                        <!-- Button zum Öffnen des Dropdowns -->
+                        <Border Name="DropdownBorder" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" 
+            Width="200" MouseDown="TogglePopup">
+                            <Grid>
+                                <TextBlock x:Name="SelectedText" Text="Select Category" Foreground="{StaticResource BACKGROUND_PRIMARY_BRUSH}" FontWeight="Bold" VerticalAlignment="Center" Margin="10,0,30,0"/>
+                                <Path Fill="{StaticResource BACKGROUND_PRIMARY_BRUSH}" Data="M 0 0 L 8 8 L 16 0 Z" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10"/>
+                            </Grid>
+                        </Border>
+
+                        <!-- Popup für die Dropdown-Liste -->
+                        <Popup Name="PopupMenu" Placement="Bottom" StaysOpen="True" Width="200">
+                            <Border Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}" CornerRadius="5" BorderThickness="1" BorderBrush="Black" Width="200">
+                                <ListBox x:Name="CategoryList" SelectionChanged="CategoryList_SelectionChanged" Background="{StaticResource HIGHLIGHT_PRIMARY_BRUSH}">
+                                    <ListBoxItem Content="Social Media"/>
+                                    <ListBoxItem Content="Shopping"/>
+                                    <ListBoxItem Content="Games"/>
+                                    <ListBoxItem Content="Porn"/>
+                                    <ListBoxItem Content="Other Websites" />
+                                </ListBox>
+                            </Border>
+                        </Popup>
                     </StackPanel>
 
-                    <!-- Add Button -->
-                    <Button Width="30" 
-                Height="30" 
-                VerticalAlignment="Center" 
-                HorizontalAlignment="Right" 
-                Grid.Column="3" 
-                Margin="0" 
-                BorderThickness="0" 
-                ToolTip="Add"
-                 Click="AddButton_Click">
-                        <TextBlock Text="+" 
-                       FontSize="20" 
-                       Foreground="#333436" 
-                       VerticalAlignment="Center" 
-                       HorizontalAlignment="Center" 
-                                   />
-                    </Button>
+
+
+
+
+
+                    <!-- Add Button als Border -->
+                    <Border  Width="40" Height="40" CornerRadius="10" Background="{StaticResource TEXT_PRIMARY_BRUSH}" Cursor="Hand"
+                            Grid.Column="3" 
+        VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0"
+        MouseDown="AddButton_Click">
+                        <TextBlock Text="+" FontSize="24" FontWeight="Bold" Foreground="Black"
+               VerticalAlignment="Center" HorizontalAlignment="Center"/>
+                    </Border>
                 </Grid>
             </Border>
 
@@ -273,14 +280,14 @@ MouseDown="SearchButton_Click">
         </StackPanel>
 
         <!-- Pagination -->
-        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,520,0,0" VerticalAlignment="Top">
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,550,0,0" VerticalAlignment="Top">
             <Border Style="{StaticResource RoundedButtonBorder}" MouseDown="PreviousPage_Click" Width="100" Margin="10">
                 <TextBlock Text="Previous" Style="{StaticResource ButtonTextStyle}" />
             </Border>
             <StackPanel Orientation="Horizontal">
-                <Ellipse Width="15" Height="15" Fill="Black" Margin="5"/>
+                <Ellipse Width="15" Height="15" Fill="{StaticResource TEXT_PRIMARY_BRUSH}" Margin="5"/>
                 <!-- Aktive Seite -->
-                <Ellipse Width="15" Height="15" Fill="Black" Margin="5"/>
+                <Ellipse Width="15" Height="15" Fill="{StaticResource TEXT_PRIMARY_BRUSH}" Margin="5"/>
                 <!-- Inaktive Seite -->
                 <Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>
                 <Ellipse Width="15" Height="15" Fill="Gray" Margin="5"/>