From e1ed7c06b8b11d6d33c13e3db85286bd3db01d4d Mon Sep 17 00:00:00 2001
From: virginieVachet <vachetvirginie@gmail.com>
Date: Mon, 29 Jul 2024 14:45:16 +0200
Subject: [PATCH] fix style on buttons

---
 packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue   | 5 +++++
 .../LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap       | 4 ++--
 .../src/patterns/SelectBtnField/SelectBtnField.vue         | 5 ++++-
 packages/synapse-bridge/src/styles/settings.scss           | 7 +++++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue b/packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue
index 365b576220..ec0d4a91c9 100644
--- a/packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue
+++ b/packages/synapse-bridge/src/patterns/LangBtn/LangBtn.vue
@@ -117,6 +117,7 @@ export default defineComponent({
 					...props,
 					...options.btn,
 				}"
+				:class="options.btn.variant === 'outlined' ? 'outlined-style' : ''"
 				id="lang-menu-btn"
 			>
 				<span :class="currentLangClass">
@@ -158,4 +159,8 @@ export default defineComponent({
 		height: 100%;
 	}
 }
+
+.outlined-style {
+	border: 1px solid currentColor;
+}
 </style>
diff --git a/packages/synapse-bridge/src/patterns/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap b/packages/synapse-bridge/src/patterns/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap
index d67b312e26..c92bbdc049 100644
--- a/packages/synapse-bridge/src/patterns/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap
+++ b/packages/synapse-bridge/src/patterns/LangBtn/tests/__snapshots__/LangBtn.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LangBtn > open the menu when clicked 1`] = `
-<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined outlined-style" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
   <!----><span class="v-btn__content" data-no-activator=""><span data-v-4a841ee1="" class="ml-1">Français</span><i data-v-4a841ee1="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default ml-1" aria-hidden="true"></i></span>
   <!---->
   <!---->
@@ -13,7 +13,7 @@ exports[`LangBtn > open the menu when clicked 1`] = `
 exports[`LangBtn > renders correctly 1`] = `<v-menu-stub data-v-4a841ee1="" class="vd-lang-btn" contentclass="vd-lang-menu" attach="false" closeonback="true" contained="false" disabled="false" noclickanimation="false" modelvalue="false" persistent="false" scrim="false" zindex="2000" activatorprops="[object Object]" openonhover="false" closeoncontentclick="true" closedelay="250" opendelay="300" eager="false" locationstrategy="connected" location="bottom" origin="auto" scrollstrategy="reposition" transition="[object Object]" offsety="true"></v-menu-stub>`;
 
 exports[`LangBtn > renders properly when all the languages are displayed 1`] = `
-<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+<button data-v-4a841ee1="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined outlined-style" aria-label="Choix de la langue. Actuellement Français" targetref="[object Object]" aria-haspopup="menu" aria-expanded="true" aria-owns="v-menu-0" id="lang-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
   <!----><span class="v-btn__content" data-no-activator=""><span data-v-4a841ee1="" class="">Français</span>
   <!--v-if--></span>
   <!---->
diff --git a/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue b/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
index 47fb60e71b..d19f2926a0 100644
--- a/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
+++ b/packages/synapse-bridge/src/patterns/SelectBtnField/SelectBtnField.vue
@@ -253,7 +253,10 @@ export default defineComponent({
 	}
 
 	&.flex-column .v-btn:not(:last-child) {
-		border-inline-end: 1px solid;
+		border: 1px solid;
+	}
+	.v-btn:last-child {
+		border: 1px solid;
 	}
 }
 </style>
diff --git a/packages/synapse-bridge/src/styles/settings.scss b/packages/synapse-bridge/src/styles/settings.scss
index 774a7beb1d..5429100a84 100644
--- a/packages/synapse-bridge/src/styles/settings.scss
+++ b/packages/synapse-bridge/src/styles/settings.scss
@@ -263,3 +263,10 @@ a {
 	background: rgba(0, 0, 0, 0.54) !important;
 }
 
+// Btn : lowercase text-transform and padding
+
+.v-btn {
+	text-transform: none !important;
+	padding: 0 0.5rem;
+}
+