Added: Design from Figma

Borepin/Borepin/Converter/IsNotNullBoolConverter.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Text;
+using Borepin.Model;
+using Xamarin.Forms;
+
+namespace Borepin.Converter
+{
+    public class IsNotNullBoolConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return value != null ? true : false;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

Borepin/Borepin/Converter/MachineStateColorConverter.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Text;
+using Borepin.Model;
+using Xamarin.Forms;
+
+namespace Borepin.Converter
+{
+    public class MachineStateColorConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            switch((MachineStates)value)
+            {
+                case (MachineStates.Free):
+                    return (Color)Application.Current.Resources["FirstColor"];
+                default:
+                    return (Color)Application.Current.Resources["SixthColor"];
+            }
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

Borepin/Borepin/Page/MachinePage.xaml

@@ -2,23 +2,35 @@
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Borepin.Page.MachinePage"
-             Title="{Binding Machine.ID}">
+             xmlns:converters="clr-namespace:Borepin.Converter">
+    <NavigationPage.TitleView>
+        <Label Text="{Binding Machine.State}" FontAttributes="Bold" HorizontalOptions="End" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" WidthRequest="150" Margin="7.5" VerticalOptions="FillAndExpand" FontSize="Small" BackgroundColor="{StaticResource NinthColor}"/>
+    </NavigationPage.TitleView>
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <converters:MachineStateColorConverter x:Key="MachineStateColorConverter"/>
+            <converters:IsNotNullBoolConverter x:Key="IsNotNullBoolConverter"/>
+        </ResourceDictionary>
+    </ContentPage.Resources>
     <ContentPage.Content>
-        <StackLayout>
+        <StackLayout Padding="20">
-            <Label Text="MachineID" FontAttributes="Bold"></Label>
+            <Label Text="{Binding Machine.ID}" Style="{StaticResource LabelStyle_Title}"/>
-            <Label Text="{Binding Machine.ID}"/>
-            <Label Text="Description" FontAttributes="Bold"></Label>
-            <Label Text="{Binding Machine.Description}"/>
-            <Label Text="State" FontAttributes="Bold"></Label>
-            <Label Text="{Binding Machine.State}"/>
 
-            <Button Text="Reserve" Command="{Binding ReserveMachineCommand}" IsVisible="{Binding CanReserve}"/>
+            <Label Text="Current User" IsVisible="{Binding Machine.User, Converter={StaticResource IsNotNullBoolConverter}}" Style="{StaticResource LabelStyle_PropertyTitle}"></Label>
+            <Label Text="{Binding Machine.User.Name}" IsVisible="{Binding Machine.User, Converter={StaticResource IsNotNullBoolConverter}}" Style="{StaticResource LabelStyle_PropertyText}"/>
 
-            <Button Text="Use" Command="{Binding UseMachineCommand}" IsVisible="{Binding CanUse}"/>
+            <Label Text="Description" Style="{StaticResource LabelStyle_PropertyTitle}"></Label>
-            <Button Text="GiveBack" Command="{Binding GiveBackMachineCommand}" IsVisible="{Binding CanGiveBack}"/>
+            <Label Text="{Binding Machine.Description}" Style="{StaticResource LabelStyle_PropertyText}"/>
 
-            <Button Text="Disable" Command="{Binding DisableMachineCommand}" IsVisible="{Binding IsAdmin}"/>
+            <Button Text="Reserve" Command="{Binding ReserveMachineCommand}" IsVisible="{Binding CanReserve}" Style="{StaticResource ButtonStyle_Primary}"/>
-            <Button Text="Block" Command="{Binding BlockMachineCommand}" IsVisible="{Binding IsAdmin}"/>
+
+            <Button Text="Use" Command="{Binding UseMachineCommand}" IsVisible="{Binding CanUse}" Style="{StaticResource ButtonStyle_Primary}"/>
+            <Button Text="GiveBack" Command="{Binding GiveBackMachineCommand}" IsVisible="{Binding CanGiveBack}" Style="{StaticResource ButtonStyle_Primary}"/>
+
+            <Grid>
+                <Button Grid.Column="0" Text="Disable" Command="{Binding DisableMachineCommand}" IsVisible="{Binding IsAdmin}" Style="{StaticResource ButtonStyle_Admin}"/>
+                <Button Grid.Column="1" Text="Block" Command="{Binding BlockMachineCommand}" IsVisible="{Binding IsAdmin}" Style="{StaticResource ButtonStyle_Admin}"/>
+            </Grid>
         </StackLayout>
     </ContentPage.Content>
 </ContentPage>

Borepin/Borepin/Page/MachinesPage.xaml

@@ -2,7 +2,15 @@
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Borepin.Page.MachinesPage"
-             Title="Machines">
+             xmlns:converters="clr-namespace:Borepin.Converter">
+    <NavigationPage.TitleView>
+        <Label Text="Machines" HorizontalOptions="End" Margin="0, 0, 10, 0" VerticalOptions="CenterAndExpand" FontSize="Medium" TextColor="{StaticResource FirstColor}"/>
+    </NavigationPage.TitleView>
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <converters:MachineStateColorConverter x:Key="MachineStateColorConverter"/>
+        </ResourceDictionary>
+    </ContentPage.Resources>
     <ContentPage.Content>
         <StackLayout>
             <ListView x:Name="MachineList" ItemsSource="{Binding MachineList}">
@@ -10,9 +18,14 @@
                     <DataTemplate>
                         <ViewCell>
                             <Grid>
-                                <Label Grid.Column="0" Text="{Binding ID, StringFormat='{0}'}" />
+                                <Grid.ColumnDefinitions>
-                                <Label Grid.Column="1" Text="{Binding State, StringFormat='{0}'}" />
+                                    <ColumnDefinition Width="7*" />
-                                <Button Grid.Column="2" Text="->" Command="{Binding BindingContext.GoToMachineCommand, Source={x:Reference MachineList}}" CommandParameter="{Binding .}"/>
+                                    <ColumnDefinition Width="2*" />
+                                    <ColumnDefinition Width="1*" />
+                                </Grid.ColumnDefinitions>
+                                <Label Grid.Column="0" Text="{Binding ID, StringFormat='{0}'}" Style="{StaticResource LabelStyle_Primary}"/>
+                                <Label Grid.Column="1" Text="{Binding State, StringFormat='{0}'}" Style="{StaticResource LabelStyle_Second}" HorizontalTextAlignment="End" TextColor="{Binding State, Converter={StaticResource MachineStateColorConverter}}" />
+                                <Button Grid.Column="2" Text="->" Command="{Binding BindingContext.GoToMachineCommand, Source={x:Reference MachineList}}" CommandParameter="{Binding .}" Style="{StaticResource ButtonStyle_Primary}"/>
                             </Grid>
                         </ViewCell>
                     </DataTemplate>

Borepin/Borepin/Page/MainPage.xaml

@@ -3,20 +3,13 @@
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="Borepin.Page.MainPage"
                   Title="Main Page"
+                  MasterBehavior="Popover"
                   x:Name="page">
     <MasterDetailPage.Master>
-        <ContentPage Title="Menu">
+        <ContentPage Title="FabAccess">
             <StackLayout>
-                <Label Text="Master Detail Demo"
+                <Button Text="Machines" Command="{Binding NavigateCommand}" CommandParameter="MachinesPage" />
-               FontSize="Large"
+                <Button Text="Settings" Command="{Binding NavigateCommand}" CommandParameter="SettingsPage" />
-               FontAttributes="Bold"
-               Margin="0,20"/>
-                <Button Text="Machines"
-                Command="{Binding NavigateCommand}"
-                CommandParameter="MachinesPage" />
-                <Button Text="Settings"
-                Command="{Binding NavigateCommand}"
-                CommandParameter="SettingsPage" />
             </StackLayout>
         </ContentPage>
     </MasterDetailPage.Master>

Borepin/Borepin/Styles/LightTheme.xaml

@@ -8,4 +8,50 @@
     <Color x:Key="ThirdColor">#FF333333</Color>
     <Color x:Key="FourthColor">#FF555555</Color>
     <Color x:Key="FifthColor">#FFCCCCCC</Color>
+    <Color x:Key="SixthColor">#FF757575</Color>
+    <Color x:Key="SeventhColor">#FF4F4F4F</Color>
+    <Color x:Key="EighthColor">#FFF9F9F9</Color>
+    <Color x:Key="NinthColor">#FFC4C4C4</Color>
+
+    <Style x:Key="ButtonStyle_Primary" TargetType="Button">
+        <Setter Property="TextColor" Value="#000000" />
+        <Setter Property="BackgroundColor" Value="{StaticResource FirstColor}" />
+    </Style>
+
+    <Style x:Key="ButtonStyle_Admin" TargetType="Button">
+        <Setter Property="TextColor" Value="#CD0000" />
+        <Setter Property="BackgroundColor" Value="{StaticResource FifthColor}" />
+    </Style>
+
+    <Style x:Key="LabelStyle_Primary" TargetType="Label">
+        <Setter Property="TextColor" Value="#000000" />
+        <Setter Property="FontAttributes" Value="Bold" />
+    </Style>
+
+    <Style x:Key="LabelStyle_Second" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource SixthColor}" />
+    </Style>
+
+    <Style TargetType="NavigationPage">
+        <Setter Property="BarBackgroundColor" Value="{StaticResource SeventhColor}"/>
+        <Setter Property="BarTextColor" Value="{StaticResource FirstColor}"/>
+    </Style>
+
+    <Style TargetType="MasterDetailPage">
+        <Setter Property="BackgroundColor" Value="{StaticResource EighthColor}"/>
+    </Style>
+
+    <Style x:Key="LabelStyle_Title" TargetType="Label">
+        <Setter Property="FontSize" Value="Medium"/>
+        <Setter Property="HorizontalTextAlignment" Value="Center"/>
+        <Setter Property="FontAttributes" Value="Bold"/>
+    </Style>
+
+    <Style x:Key="LabelStyle_PropertyTitle" TargetType="Label">
+        <Setter Property="FontSize" Value="Default"/>
+        <Setter Property="FontAttributes" Value="Bold"/>
+    </Style>
+    <Style x:Key="LabelStyle_PropertyText" TargetType="Label">
+        <Setter Property="FontSize" Value="Default"/>
+    </Style>
 </ResourceDictionary>