From 3aee139da9cf72ae7a1e7c91285c13d242cc7c04 Mon Sep 17 00:00:00 2001
From: Kunhui-Li <kunhuix.li@intel.com>
Date: Tue, 19 Jul 2022 14:08:12 +0800
Subject: [PATCH] config_tools: left-align the plus icon in the virtio devices

left-align the plus icon in the virtio devices so that they
match the alignment in the IVSHMEM widget.

Tracked-On: #7897
Signed-off-by: Kunhui-Li <kunhuix.li@intel.com>
Reviewed-by: Junjie Mao <junjie.mao@intel.com>
---
 .../ConfigForm/CustomWidget/Virtio/Console.vue   | 16 ++++++++++------
 .../ConfigForm/CustomWidget/Virtio/Input.vue     | 16 ++++++++++------
 .../ConfigForm/CustomWidget/Virtio/Network.vue   | 16 ++++++++++------
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Console.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Console.vue
index 216919d8b..c315ff344 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Console.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Console.vue
@@ -151,13 +151,17 @@ export default {
 <style scoped>
 .ToolSet {
   display: flex;
-  flex-direction: row-reverse;
-  gap: 8px;
+  justify-content: space-around;
+  margin: 1rem;
+  gap: 0.5rem;
+  max-width: 5rem;
 }
-.ToolSet div{
-  padding: 8px;
-  border: 1px solid rgb(193,193,193);
-  border-radius: 5px;
+.ToolSet div {
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 3px;
+  background: #f9f9f9;
+  padding: 5px 5px 3px;
 }
 .virtio_consoles{
   width: 100%;
diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Input.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Input.vue
index 6c747dc22..aadc2af7e 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Input.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Input.vue
@@ -120,13 +120,17 @@ label:after{
 }
 .ToolSet {
   display: flex;
-  flex-direction: row-reverse;
-  gap: 8px;
+  justify-content: space-around;
+  margin: 1rem;
+  gap: 0.5rem;
+  max-width: 5rem;
 }
-.ToolSet div{
-  padding: 8px;
-  border: 1px solid rgb(193,193,193);
-  border-radius: 5px;
+.ToolSet div {
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 3px;
+  background: #f9f9f9;
+  padding: 5px 5px 3px;
 }
 .virtio_inputs{
   width: 100%;
diff --git a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Network.vue b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Network.vue
index f5eeaa4f0..fcd794587 100644
--- a/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Network.vue
+++ b/misc/config_tools/configurator/packages/configurator/src/pages/Config/ConfigForm/CustomWidget/Virtio/Network.vue
@@ -121,13 +121,17 @@ label:after{
 }
 .ToolSet {
   display: flex;
-  flex-direction: row-reverse;
-  gap: 8px;
+  justify-content: space-around;
+  margin: 1rem;
+  gap: 0.5rem;
+  max-width: 5rem;
 }
-.ToolSet div{
-  padding: 8px;
-  border: 1px solid rgb(193,193,193);
-  border-radius: 5px;
+.ToolSet div {
+  cursor: pointer;
+  border: 1px solid gray;
+  border-radius: 3px;
+  background: #f9f9f9;
+  padding: 5px 5px 3px;
 }
 .virtio_networks{
   width: 100%;