From ae796079adc9f094b2966ead4729c74757256309 Mon Sep 17 00:00:00 2001
From: Audrey SERRA <95615798+audserraCGI@users.noreply.github.com>
Date: Thu, 27 Jan 2022 16:23:01 +0100
Subject: [PATCH] Add space between buttons in DeviceDetailPage and
 DeviceModelDetailPage (#119)

* Add space between buttons in device details page

* Add space between buttons in device model details page + Making it looks like the device details page
---
 .../Pages/DeviceModels/DeviceModelDetailPage.razor    | 11 ++++++-----
 .../Client/Pages/Devices/DeviceDetailPage.razor       |  2 +-
 src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss   |  5 +++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/AzureIoTHub.Portal/Client/Pages/DeviceModels/DeviceModelDetailPage.razor b/src/AzureIoTHub.Portal/Client/Pages/DeviceModels/DeviceModelDetailPage.razor
index 6b7db4305..aebea05aa 100644
--- a/src/AzureIoTHub.Portal/Client/Pages/DeviceModels/DeviceModelDetailPage.razor
+++ b/src/AzureIoTHub.Portal/Client/Pages/DeviceModels/DeviceModelDetailPage.razor
@@ -138,11 +138,12 @@
                     </MudGrid>
                 }
             </MudCardContent>
-            <MudCardActions>
-                <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Class="ml-auto" />
-                <MudFab Color="Color.Dark" Icon="@Icons.Material.Filled.Delete" Label="Delete" OnClick="DeleteDeviceModel" />
-            </MudCardActions>
         </MudCard>
+        <MudCardActions>
+            <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Class="btn-aln-right" />
+            <MudFab Color="Color.Dark" Icon="@Icons.Material.Filled.Delete" Label="Delete" OnClick="DeleteDeviceModel" />
+        </MudCardActions>
+
     </EditForm>
 
 </MudContainer>
@@ -199,7 +200,7 @@
 
             // Add the last command entered, in case it wasn't already in the list
             this.AddCommand();
-            
+
             // Unnecessary to send the list of commands to the controller
             // TODO : Do this more effectively
             DeviceModel.Commands.Clear();
diff --git a/src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor b/src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor
index 0f2736179..76b12df5f 100644
--- a/src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor
+++ b/src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor
@@ -157,7 +157,7 @@
                     </MudCardContent>
                 </MudCard>
                 <MudCardActions>
-                    <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Disabled="@(!success)" Class="ml-auto" />
+                    <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Disabled="@(!success)" Class="btn-aln-right" />
                     <MudFab Color="Color.Dark" Icon="@Icons.Material.Filled.Delete" Label="Delete" OnClick="DeleteDevice" />
                 </MudCardActions>
             </EditForm>
diff --git a/src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss b/src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss
index d3aed77a1..08069c8f3 100644
--- a/src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss
+++ b/src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss
@@ -31,6 +31,11 @@
     margin-top: 1em;
 }
 
+.btn-aln-right {
+    margin-left: auto;
+    margin-right : 10px;
+}
+
 /*//////////////////// Search Panel ////////////////*/
 .search-panel {