css: update UI

IGNF · Dec 3, 2024 · e9688fe · e9688fe
1 parent e99d67c
commit e9688fe
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/src/css/assets/checkmark.svg b/src/css/assets/checkmark.svg
diff --git 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
@@ -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
@@ -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(() => {