make the networks view a bit prettier

2 files changed, 58 insertions, 48 deletions

diff --git a/windows/WinUI/NetworkInfoView.xaml b/windows/WinUI/NetworkInfoView.xaml
index 86f2b98c..80a4087a 100644
--- a/windows/WinUI/NetworkInfoView.xaml
+++ b/windows/WinUI/NetworkInfoView.xaml
@@ -5,59 +5,69 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       mc:Ignorable="d"
 	>
-	<Grid Background="#FFFFFFFF" Margin="5,0,5,1">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="auto"/>
-            <ColumnDefinition Width="10"/>
-            <ColumnDefinition Width="*"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
-        </Grid.RowDefinitions>
-
-        <Grid Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
+    
+    <Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1" CornerRadius="8,8,3,3">
+        <Grid Background="#FFFFFFFF" Margin="10,10,10,10">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="auto"/>
+                <ColumnDefinition Width="10"/>
                 <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+            </Grid.RowDefinitions>
 
-            <TextBlock x:Name="networkId" Text="8056c2e21c000001" HorizontalAlignment="Left" Grid.Column="0" Foreground="#FF91A2A3"/>
-            <TextBlock x:Name="networkName" Text="earth.zerotier.net" HorizontalAlignment="Right" Grid.Column="1" Foreground="#FF000000"/>
-        </Grid>
-
-        <TextBlock TextWrapping="Wrap" Text="Status" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="1" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="Type" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="2" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="MAC" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="3" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="MTU" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="4" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="Broadcast" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="5" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="Bridging" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="6" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="Device" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="7" Foreground="#FF000000"/>
-        <TextBlock TextWrapping="Wrap" Text="Managed IPs" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="8" Foreground="#FF000000"/>
+            <Grid Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="auto"/>
+                    <ColumnDefinition Width="*"/>
+                </Grid.ColumnDefinitions>
 
-        <TextBlock x:Name="networkStatus" TextWrapping="Wrap" HorizontalAlignment="Right" Text="OK" TextAlignment="Right"  Grid.Column="2" Grid.Row="1" Foreground="#FF000000"/>
-        <TextBlock x:Name="networkType" TextWrapping="Wrap" Text="PUBLIC" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="2" Foreground="#FF000000"/>
-        <TextBlock x:Name="macAddress" TextWrapping="Wrap" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="3" Foreground="#FF000000"><Span><Run Text="02:83:4a:1e:4b:3a"/></Span></TextBlock>
-        <TextBlock x:Name="mtu" TextWrapping="Wrap" Text="2800" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="4" Foreground="#FF000000"/>
-        <TextBlock x:Name="broadcastEnabled" TextWrapping="Wrap" Text="ENABLED" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="5" Foreground="#FF000000"/>
-        <TextBlock x:Name="bridgingEnabled" TextWrapping="Wrap" Text="DISABLED" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="6" Foreground="#FF000000"/>
-        <TextBlock x:Name="deviceName" TextWrapping="Wrap" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="7" Foreground="#FF000000"><Span><Run Text="ethernet_32771"/></Span></TextBlock>
-        <TextBlock x:Name="managedIps" TextWrapping="Wrap" HorizontalAlignment="Right" TextAlignment="Right"  Grid.Column="2" Grid.Row="8" Foreground="#FF000000"><Span><Run Text="28.2.169.248/7 "/></Span><LineBreak/><Span><Run Text="fd80:56c2:e21c:0000:0199:9383:4a02:a9f8/88"/></Span></TextBlock>
+                <TextBlock x:Name="networkId" Text="8056c2e21c000001" HorizontalAlignment="Left" Grid.Column="0" Foreground="#FF91A2A3"/>
+                <TextBlock x:Name="networkName" Text="earth.zerotier.net" HorizontalAlignment="Right" Grid.Column="1" Foreground="#FF000000"/>
+            </Grid>
+            
+            <Separator Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"/>
+            
+            <TextBlock TextWrapping="Wrap" Text="Status" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="2" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="Type" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="3" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="MAC" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="4" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="MTU" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="5" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="Broadcast" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="6" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="Bridging" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="7" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="Device" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="8" Foreground="#FF000000"/>
+            <TextBlock TextWrapping="Wrap" Text="Managed IPs" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="9" Foreground="#FF000000"/>
+            
+            <Rectangle Grid.Column="2" Grid.Row="2" Grid.RowSpan="8" Fill="#FFEEEEEE"/>
+            
+            <TextBlock x:Name="networkStatus" TextWrapping="Wrap" HorizontalAlignment="Right" Text="OK" TextAlignment="Right"  Grid.Column="2" Grid.Row="2" Foreground="#FF000000"/>
+            <TextBlock x:Name="networkType" TextWrapping="Wrap" Text="PUBLIC" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="3" Foreground="#FF000000"/>
+            <TextBlock x:Name="macAddress" TextWrapping="Wrap" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="4" Foreground="#FF000000"><Span><Run Text="02:83:4a:1e:4b:3a"/></Span></TextBlock>
+            <TextBlock x:Name="mtu" TextWrapping="Wrap" Text="2800" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="5" Foreground="#FF000000"/>
+            <TextBlock x:Name="broadcastEnabled" TextWrapping="Wrap" Text="ENABLED" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="6" Foreground="#FF000000"/>
+            <TextBlock x:Name="bridgingEnabled" TextWrapping="Wrap" Text="DISABLED" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="7" Background="#FFEEEEEE" Foreground="#FF000000"/>
+            <TextBlock x:Name="deviceName" TextWrapping="Wrap" HorizontalAlignment="Right"  Grid.Column="2" Grid.Row="8" Foreground="#FF000000"><Span><Run Text="ethernet_32771"/></Span></TextBlock>
+            <TextBlock x:Name="managedIps" TextWrapping="Wrap" HorizontalAlignment="Right" TextAlignment="Right"  Grid.Column="2" Grid.Row="9" Foreground="#FF000000"><Span><Run Text="28.2.169.248/7 "/></Span><LineBreak/><Span><Run Text="fd80:56c2:e21c:0000:0199:9383:4a02:a9f8/88"/></Span></TextBlock>
 
-        <Grid Grid.Column="0" Grid.Row="9" Grid.ColumnSpan="3" Background="#FFFFFFFF">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*"/>
-            </Grid.ColumnDefinitions>
-            <Button />
-            <Button x:Name="leaveButton" Content="Leave" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Background="#FFFFB354" Click="leaveButton_Click"/>
+            <Separator Grid.Column="0" Grid.Row="10" Grid.ColumnSpan="3"/>
+            
+            <Grid Grid.Column="0" Grid.Row="11" Grid.ColumnSpan="3" Background="#FFFFFFFF">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*"/>
+                </Grid.ColumnDefinitions>
+                <Button x:Name="leaveButton" Content="Leave" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Background="#FFFFB354" Click="leaveButton_Click"/>
+            </Grid>
         </Grid>
-    </Grid>
+    </Border>
 </UserControl>
diff --git a/windows/WinUI/NetworksPage.xaml b/windows/WinUI/NetworksPage.xaml
index f8aec61b..b48ea735 100644
--- a/windows/WinUI/NetworksPage.xaml
+++ b/windows/WinUI/NetworksPage.xaml
@@ -6,7 +6,7 @@
              mc:Ignorable="d" 
              d:DesignHeight="300" d:DesignWidth="300">
     <ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=ActualWidth}" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=ActualHeight}">
-        <WrapPanel x:Name="wrapPanel" Background="#FF555555"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+        <WrapPanel x:Name="wrapPanel" Background="#FFDDDDDD"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
 
         </WrapPanel>
     </ScrollViewer>