From 33eb0c4295fb53362ddc61cc936586cb249777ed Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 13 Aug 2024 21:44:23 +0200
Subject: [PATCH] feat(ui): harmonize CSS cursors. WF-35

Setup `cursor: pointer` for differents core components and also for
differents parts of the application.
---
 src/ui/src/builder/BuilderHeader.vue              |  1 +
 src/ui/src/builder/BuilderTreeBranch.vue          |  1 +
 src/ui/src/builder/sharedStyles.css               | 10 +++++++++-
 .../core_components/input/CoreCheckboxInput.vue   |  5 +++++
 .../src/core_components/input/CoreDateInput.vue   |  1 +
 .../src/core_components/input/CoreRadioInput.vue  |  7 ++++++-
 .../src/core_components/input/CoreRatingInput.vue |  1 +
 .../src/core_components/input/CoreTimeInput.vue   |  1 +
 src/ui/src/core_components/layout/CoreSidebar.vue |  1 +
 src/ui/src/renderer/sharedStyles.css              | 15 +++++++++++----
 src/ui/src/wds/WdsDropdownInput.vue               |  1 +
 11 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index 4c13288a7..d2bae0061 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -134,6 +134,7 @@ const customHandlerModalCloseAction: ModalAction = {
 }
 
 .syncHealth {
+	cursor: pointer;
 	background: var(--builderHeaderBackgroundHoleColor);
 	border-radius: 18px;
 	padding-left: 16px;
diff --git a/src/ui/src/builder/BuilderTreeBranch.vue b/src/ui/src/builder/BuilderTreeBranch.vue
index 1ec6f34eb..4f68793fd 100644
--- a/src/ui/src/builder/BuilderTreeBranch.vue
+++ b/src/ui/src/builder/BuilderTreeBranch.vue
@@ -278,6 +278,7 @@ onMounted(() => {
 	color: rgba(0, 0, 0, 0.5);
 	display: flex;
 	align-items: center;
+	cursor: pointer;
 }
 
 .main.matching {
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index 97644191e..c26e9fccd 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -12,7 +12,7 @@
 	--builderSubtleSeparatorColor: rgba(0, 0, 0, 0.05);
 	--builderIntenseSeparatorColor: rgba(0, 0, 0, 0.2);
 	--builderSelectedColor: rgba(210, 234, 244, 0.8);
-	--builderIntenseSelectedColor: #6985FF;
+	--builderIntenseSelectedColor: #6985ff;
 	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
 	--builderSubtleHighlightColorSolid: #f2f2f2;
 	--builderDisabledColor: rgb(180, 180, 180);
@@ -106,6 +106,14 @@ textarea[variant="code"] {
 	font-family: Consolas, monospace;
 }
 
+input[type="button"],
+input[type="submit"],
+input[type="radio"],
+input[type="reset"],
+input[type="color"] {
+	cursor: pointer;
+}
+
 code {
 	font-family: monospace;
 }
diff --git a/src/ui/src/core_components/input/CoreCheckboxInput.vue b/src/ui/src/core_components/input/CoreCheckboxInput.vue
index f77e40b46..2161b08d6 100644
--- a/src/ui/src/core_components/input/CoreCheckboxInput.vue
+++ b/src/ui/src/core_components/input/CoreCheckboxInput.vue
@@ -159,6 +159,11 @@ function getCheckedKeys() {
 	font-size: 0.75rem;
 }
 
+label,
+input {
+	cursor: pointer;
+}
+
 input {
 	margin-right: 8px;
 	accent-color: var(--accentColor);
diff --git a/src/ui/src/core_components/input/CoreDateInput.vue b/src/ui/src/core_components/input/CoreDateInput.vue
index 5d0e17cb5..6489b139e 100644
--- a/src/ui/src/core_components/input/CoreDateInput.vue
+++ b/src/ui/src/core_components/input/CoreDateInput.vue
@@ -91,6 +91,7 @@ input {
 	padding: 8.5px 12px 8.5px 12px;
 	font-size: 0.875rem;
 	outline: none;
+	cursor: text;
 }
 
 input:focus {
diff --git a/src/ui/src/core_components/input/CoreRadioInput.vue b/src/ui/src/core_components/input/CoreRadioInput.vue
index 42269e21a..adfa50d33 100644
--- a/src/ui/src/core_components/input/CoreRadioInput.vue
+++ b/src/ui/src/core_components/input/CoreRadioInput.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { inject, Ref } from "vue";
+import { inject } from "vue";
 import { ref } from "vue";
 import { FieldCategory, FieldType } from "../../writerTypes";
 import {
@@ -144,6 +144,11 @@ const { formValue, handleInput } = useFormValueBroker(
 	font-size: 0.75rem;
 }
 
+label,
+input {
+	cursor: pointer;
+}
+
 input {
 	margin-right: 8px;
 	accent-color: var(--accentColor);
diff --git a/src/ui/src/core_components/input/CoreRatingInput.vue b/src/ui/src/core_components/input/CoreRatingInput.vue
index 81d0241d4..1c394c68f 100644
--- a/src/ui/src/core_components/input/CoreRatingInput.vue
+++ b/src/ui/src/core_components/input/CoreRatingInput.vue
@@ -257,6 +257,7 @@ const feedbackRating = computed(() => {
 	gap: 8px;
 	flex-wrap: nowrap;
 	position: relative;
+	cursor: pointer;
 }
 
 .unit {
diff --git a/src/ui/src/core_components/input/CoreTimeInput.vue b/src/ui/src/core_components/input/CoreTimeInput.vue
index c64289dd5..5c433403f 100644
--- a/src/ui/src/core_components/input/CoreTimeInput.vue
+++ b/src/ui/src/core_components/input/CoreTimeInput.vue
@@ -91,6 +91,7 @@ input {
 	padding: 8.5px 12px 8.5px 12px;
 	font-size: 0.875rem;
 	outline: none;
+	cursor: text;
 }
 
 input:focus {
diff --git a/src/ui/src/core_components/layout/CoreSidebar.vue b/src/ui/src/core_components/layout/CoreSidebar.vue
index dcc9a345e..59a5c642e 100644
--- a/src/ui/src/core_components/layout/CoreSidebar.vue
+++ b/src/ui/src/core_components/layout/CoreSidebar.vue
@@ -161,6 +161,7 @@ onMounted(() => {
 	justify-content: center;
 	stroke: var(--primaryTextColor);
 	border: 1px solid var(--separatorColor);
+	pointer: cursor;
 }
 
 .collapserContainer .collapserArrow {
diff --git a/src/ui/src/renderer/sharedStyles.css b/src/ui/src/renderer/sharedStyles.css
index 91390ab8f..639056f77 100644
--- a/src/ui/src/renderer/sharedStyles.css
+++ b/src/ui/src/renderer/sharedStyles.css
@@ -22,7 +22,7 @@ h2 {
 h3 {
 	font-size: 1.25rem;
 	font-weight: 500;
-	line-height: 120%;	
+	line-height: 120%;
 }
 
 h4 {
@@ -55,6 +55,14 @@ code {
 	background-color: var(--separatorColor);
 }
 
+input[type="button"],
+input[type="submit"],
+input[type="radio"],
+input[type="reset"],
+input[type="color"] {
+	cursor: pointer;
+}
+
 .component {
 	font-size: 0.875rem;
 }
@@ -97,10 +105,9 @@ code {
 	display: block;
 }
 
-[data-writer-container].crackedContainer.horizontal
-	> [data-writer-slot-of-id] {
+[data-writer-container].crackedContainer.horizontal > [data-writer-slot-of-id] {
 	animation: appearHorizontal 0.2s forwards;
-	align-self:center;
+	align-self: center;
 	display: block;
 }
 
diff --git a/src/ui/src/wds/WdsDropdownInput.vue b/src/ui/src/wds/WdsDropdownInput.vue
index 98c0b7808..bc216e9e7 100644
--- a/src/ui/src/wds/WdsDropdownInput.vue
+++ b/src/ui/src/wds/WdsDropdownInput.vue
@@ -17,6 +17,7 @@ select {
 	max-width: 100%;
 	width: fit-content;
 	outline: none;
+	cursor: pointer;
 }
 
 select:focus {