From ff2db0058dfe448d0a46bf8d76780d81d56f8508 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 19 Sep 2024 21:48:38 +0200
Subject: [PATCH] design fixes

---
 .../components/core/content/CoreDataframe.vue | 33 ++++++++++++-------
 .../CoreDataframeCellBoolean.vue              |  3 ++
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index cecd7836d..9a01a250c 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -88,14 +88,15 @@
 					@action="handleActionRow"
 					@change="handleUpdateCell"
 				/>
-				<button
-					v-if="enableRecordAdd"
-					aria-label="Create a new row at the end"
-					class="CoreDataframe__newRow cell"
-					@click="handleAddRow"
-				>
-					<i class="material-symbols-outlined">add</i>
-				</button>
+				<div v-if="enableRecordAdd" class="CoreDataframe__newRow cell">
+					<button
+						class="CoreDataframe__newRow__btn"
+						aria-label="Create a new row at the end"
+						@click="handleAddRow"
+					>
+						<i class="material-symbols-outlined">add</i>
+					</button>
+				</div>
 			</div>
 			<div
 				v-if="isRowCountMassive"
@@ -650,12 +651,20 @@ onUnmounted(() => {
 .CoreDataframe__newRow {
 	display: flex;
 	align-self: center;
-	justify-content: center;
-
+	justify-content: flex-start;
+	padding-left: 0;
+}
+.CoreDataframe__newRow__btn {
 	cursor: pointer;
 
-	background: transparent;
-	border: none;
+	background-color: var(--separatorColor);
+	border: 1px solid var(--emptinessColor);
+	height: 16px;
+	width: 16px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .tools {
diff --git a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
index 9950c50e3..8ab3ac429 100644
--- a/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
+++ b/src/ui/src/components/core/content/CoreDataframe/CoreDataframeCellBoolean.vue
@@ -40,6 +40,9 @@ function onChange(event: InputEvent) {
 	gap: 8px;
 	align-items: center;
 }
+.CoreDataframeCellBoolean input {
+	cursor: pointer;
+}
 .CoreDataframeCellBoolean--disabled input {
 	cursor: not-allowed;
 	pointer-events: none;