From d821ffbd0d62f1353e4879ec3fda845fc9cb725a Mon Sep 17 00:00:00 2001
From: "Matt J." <matthieu@probabl.ai>
Date: Mon, 21 Oct 2024 18:21:09 +0200
Subject: [PATCH] feat(UI): Add view button is now larger and has a tooltip
 (#555)

This PR makes the add view button larger and adds a tooltip to it.

UI preview:
https://github.com/user-attachments/assets/c5f6de13-18b7-482e-9620-9772e7ecf024

Fixes #509
---
 skore-ui/src/components/SectionHeader.vue      | 7 ++++++-
 skore-ui/src/components/SimpleButton.vue       | 2 +-
 skore-ui/src/views/ComponentsView.vue          | 1 +
 skore-ui/src/views/project/ProjectViewList.vue | 3 ++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/skore-ui/src/components/SectionHeader.vue b/skore-ui/src/components/SectionHeader.vue
index 166de20da..d2d471d91 100644
--- a/skore-ui/src/components/SectionHeader.vue
+++ b/skore-ui/src/components/SectionHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
 import SimpleButton from "@/components/SimpleButton.vue";
 
 const props = defineProps<{
@@ -6,6 +7,7 @@ const props = defineProps<{
   subtitle?: string;
   icon?: string;
   actionIcon?: string;
+  actionTooltip?: string;
 }>();
 
 const emit = defineEmits(["action"]);
@@ -21,7 +23,10 @@ const emit = defineEmits(["action"]);
       </span>
     </h1>
     <div class="action" v-if="props.actionIcon">
-      <SimpleButton :icon="props.actionIcon" @click="emit('action')" />
+      <FloatingTooltip :text="props.actionTooltip" v-if="props.actionTooltip">
+        <SimpleButton :icon="props.actionIcon" @click="emit('action')" />
+      </FloatingTooltip>
+      <SimpleButton v-else :icon="props.actionIcon" @click="emit('action')" />
     </div>
   </div>
 </template>
diff --git a/skore-ui/src/components/SimpleButton.vue b/skore-ui/src/components/SimpleButton.vue
index 4370f95ed..76e075614 100644
--- a/skore-ui/src/components/SimpleButton.vue
+++ b/skore-ui/src/components/SimpleButton.vue
@@ -76,7 +76,7 @@ onBeforeMount(() => {
     background: var(--border-color-lower);
     box-shadow: inset 0 0 3.24px 2.4px rgb(var(--text-color-highlight) 0.5);
     color: var(--text-color-normal);
-    font-size: var(--text-size-small);
+    font-size: var(--text-size-normal);
     font-weight: var(--text-weight-normal);
   }
 
diff --git a/skore-ui/src/views/ComponentsView.vue b/skore-ui/src/views/ComponentsView.vue
index d012c272e..84f678353 100644
--- a/skore-ui/src/views/ComponentsView.vue
+++ b/skore-ui/src/views/ComponentsView.vue
@@ -13,6 +13,7 @@ import DataFrameWidget from "@/components/DataFrameWidget.vue";
 import DropdownButton from "@/components/DropdownButton.vue";
 import DropdownButtonItem from "@/components/DropdownButtonItem.vue";
 import { type EditableListItemModel } from "@/components/EditableList.vue";
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
 import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
 import ImageWidget from "@/components/ImageWidget.vue";
 import MarkdownWidget from "@/components/MarkdownWidget.vue";
diff --git a/skore-ui/src/views/project/ProjectViewList.vue b/skore-ui/src/views/project/ProjectViewList.vue
index e81a7c44f..a8a2e0866 100644
--- a/skore-ui/src/views/project/ProjectViewList.vue
+++ b/skore-ui/src/views/project/ProjectViewList.vue
@@ -90,7 +90,8 @@ onMounted(async () => {
     <SectionHeader
       title="Views"
       icon="icon-recent-document"
-      action-icon="icon-plus-circle"
+      action-icon="icon-plus"
+      action-tooltip="Add a new view"
       @action="onAddView"
     />
     <Simplebar class="list">