diff --git a/src/css/assets/checkmark.svg b/src/css/assets/checkmark.svg new file mode 100644 index 00000000..7a6415c4 --- /dev/null +++ b/src/css/assets/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/css/my-account.css b/src/css/my-account.css index b6ce7952..85318cb4 100644 --- a/src/css/my-account.css +++ b/src/css/my-account.css @@ -86,7 +86,7 @@ #myAccountImportBtnRoutes, #myAccountImportBtnLandmarks { - margin-top: 10px; + margin-top: 20px; padding: 13px 20px 13px 50px; background-image: url("assets/import-file.svg"); background-repeat: no-repeat; @@ -237,20 +237,34 @@ width: 100%; } -.actionSheetTabOption { +[class^="actionSheetTabOption"] { height: 40px; display: flex; align-items: center; font-size: 14px; - padding-left: 20px; + padding-left: 40px; border-radius: 20px; + background-position: center left 15px; + background-repeat: no-repeat; +} + +body:has(#myAccountBody > .tabs-wrap > .tabs-wrap-tabs > .tabs-input:nth-of-type(1):checked) .actionSheetTabOptionRoutes { + background-image: url(assets/checkmark.svg); +} + +body:has(#myAccountBody > .tabs-wrap > .tabs-wrap-tabs > .tabs-input:nth-of-type(2):checked) .actionSheetTabOptionLandmarks { + background-image: url(assets/checkmark.svg); +} + +body:has(#myAccountBody > .tabs-wrap > .tabs-wrap-tabs > .tabs-input:nth-of-type(3):checked) .actionSheetTabOptionCompareLandmarks { + background-image: url(assets/checkmark.svg); } #myaccountRouteList:not(:has(*))::before { content: "Aucun itinéraire enregistré"; font-size: 15px; color: var(--mid-grey); - margin-top: 20px; + margin-top: 80px; width: 100%; display: block; text-align: center; @@ -270,7 +284,7 @@ content: "Aucun point de repère"; font-size: 15px; color: var(--mid-grey); - margin-top: 20px; + margin-top: 80px; width: 100%; display: block; text-align: center; @@ -290,7 +304,7 @@ content: "Aucun repère Comparer"; font-size: 15px; color: var(--mid-grey); - margin-top: 20px; + margin-top: 80px; width: 100%; display: block; text-align: center; diff --git a/src/css/tabs.css b/src/css/tabs.css index fe2c2bd8..71f0bd83 100644 --- a/src/css/tabs.css +++ b/src/css/tabs.css @@ -128,7 +128,7 @@ background-image: url(./assets/close.svg); flex-shrink: 0; position: absolute; - right: 0px; + right: 4px; top: 5px; } diff --git a/src/js/my-account/my-account.js b/src/js/my-account/my-account.js index 10c49c66..e35ea8a4 100644 --- a/src/js/my-account/my-account.js +++ b/src/js/my-account/my-account.js @@ -186,17 +186,17 @@ class MyAccount { { text: "Itinéraires", value: "routes", - class: "actionSheetTabOption", + class: "actionSheetTabOptionRoutes", }, { text: "Points de repère", value: "landmarks", - class: "actionSheetTabOption", + class: "actionSheetTabOptionLandmarks", }, { text: "Repères Comparer", value: "compare-landmarks", - class: "actionSheetTabOption", + class: "actionSheetTabOptionCompareLandmarks", } ] }).then(() => {