add better label for markdown syntax (#559)

DISIC · Nov 22, 2023 · 8b25228 · 8b25228
1 parent 6e24205
commit 8b25228
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/confiture-web-app/src/components/MarkdownHelpButton.vue b/confiture-web-app/src/components/MarkdownHelpButton.vue
@@ -16,16 +16,25 @@ function onClick() {
 </script>
 
 <template>
-  <button
-    class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm markdown-notice"
-    @click="onClick"
-  >
-    <MarkdownIcon />
-    Markdown pris en compte
-  </button>
+  <div class="markdown-wrapper">
+    <p class="fr-text--sm fr-m-0">Markdown pris en compte</p>
+    <button
+      class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm markdown-notice"
+      @click="onClick"
+    >
+      <MarkdownIcon />
+      Voir la syntaxe <span class="sr-only">Markdown</span>
+    </button>
+  </div>
 </template>
 
 <style scoped>
+.markdown-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .markdown-notice {
   display: flex;
   align-items: center;