From 487a7c5d449a32e138c7e936d7c68005663aec44 Mon Sep 17 00:00:00 2001
From: Bastyen <bastien.alvez@makina-corpus.com>
Date: Thu, 15 Feb 2024 10:10:12 +0100
Subject: [PATCH] improve style

---
 src/components/grw-app/grw-app.tsx            | 13 ++++++++--
 .../grw-extended-fab/grw-extended-fab.scss    |  3 +--
 src/components/grw-map/grw-map.scss           |  1 +
 .../grw-touristic-content-card.scss           |  7 ++++++
 .../grw-touristic-content-detail.scss         |  7 ++++++
 .../grw-touristic-event-detail.tsx            | 24 +++++++++++--------
 .../grw-trek-card/grw-trek-card.scss          | 14 ++++++++---
 .../grw-trek-detail/grw-trek-detail.scss      | 12 ++++++++--
 8 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
index 5f3d180..1222d2c 100644
--- a/src/components/grw-app/grw-app.tsx
+++ b/src/components/grw-app/grw-app.tsx
@@ -82,6 +82,7 @@ export class GrwApp {
     const parentTrek = state.parentTrekId ? state.parentTrekId : state.currentTrekSteps ? this.currentTrekId : null;
     state.currentTrek = null;
     this.currentTrekId = event.detail;
+    state.mode = 'treks';
     this.showTrek = true;
     this.showTrekMap = false;
     const url = new URL(window.location.toString());
@@ -96,6 +97,7 @@ export class GrwApp {
   onParentTrekPress(event: CustomEvent<number>) {
     state.currentTrek = null;
     this.currentTrekId = event.detail;
+    state.mode = 'treks';
     this.showTrek = true;
     this.showTrekMap = false;
     const url = new URL(window.location.toString());
@@ -110,6 +112,7 @@ export class GrwApp {
     this.currentTrekId = null;
     this.showTrek = false;
     this.currentTouristicContentId = event.detail;
+    state.mode = 'touristicContents';
     this.showTouristicContent = true;
     this.showTouristicContentMap = false;
     const url = new URL(window.location.toString());
@@ -124,6 +127,8 @@ export class GrwApp {
     this.currentTrekId = null;
     this.showTrek = false;
     this.currentTouristicEventId = event.detail;
+    ``;
+    state.mode = 'touristicEvents';
     this.showTouristicEvent = true;
     this.showTouristicEventMap = false;
     const url = new URL(window.location.toString());
@@ -166,14 +171,17 @@ export class GrwApp {
       window.history.replaceState({ isInitialHistoryWithDetails: true }, '', url);
       state.parentTrekId = parentTrekId ? Number(parentTrekId) : null;
       this.currentTrekId = Number(trekParam);
+      state.mode = 'treks';
       this.showTrek = true;
     } else if (touristicContentParam) {
       window.history.replaceState({ isInitialHistoryWithDetails: true }, '', url);
       this.currentTouristicContentId = Number(touristicContentParam);
+      state.mode = 'touristicContents';
       this.showTouristicContent = true;
     } else if (touristicEventParam) {
       window.history.replaceState({ isInitialHistoryWithDetails: true }, '', url);
       this.currentTouristicEventId = Number(touristicEventParam);
+      state.mode = 'touristicEvents';
       this.showTouristicEvent = true;
     }
   }
@@ -241,6 +249,7 @@ export class GrwApp {
       state.currentTouristicEvent = null;
       state.currentTrek = null;
       this.currentTrekId = trekParam;
+      state.mode = 'treks';
       this.showTrek = true;
     } else if (!trekParam && !touristicContentParam && !touristicEventParam) {
       this.onDetailsClose();
@@ -506,8 +515,8 @@ export class GrwApp {
                 (this.showTouristicContent && !state.currentTouristicContent) ||
                 (this.showTouristicEvent && !state.currentTouristicEvent) ||
                 (!state.treks && state.mode === 'treks' && !this.showTrek) ||
-                (!state.touristicContents && state.mode === 'touristicContents') ||
-                (!state.touristicEvents && state.mode === 'touristicEvents')) && (
+                (!state.touristicContents && state.mode === 'touristicContents' && !this.showTouristicContent) ||
+                (!state.touristicEvents && state.mode === 'touristicEvents' && !this.showTouristicEvent)) && (
                 <div class={this.isLargeView ? 'grw-large-view-loader-container' : 'grw-loader-container'}>
                   <grw-loader exportparts="loader" color-primary-container={this.colorSecondaryContainer} color-on-primary-container={this.colorOnSecondaryContainer}></grw-loader>
                 </div>
diff --git a/src/components/grw-extended-fab/grw-extended-fab.scss b/src/components/grw-extended-fab/grw-extended-fab.scss
index d50c9d9..fcb5970 100644
--- a/src/components/grw-extended-fab/grw-extended-fab.scss
+++ b/src/components/grw-extended-fab/grw-extended-fab.scss
@@ -27,8 +27,7 @@
   &:hover {
     box-shadow: var(--elevation-4);
   }
-  .icon,
-  .label {
+  .icon {
     font-size: 24px;
     margin-right: 8px;
     color: var(--fab-color);
diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
index 99a74e0..f244c59 100644
--- a/src/components/grw-map/grw-map.scss
+++ b/src/components/grw-map/grw-map.scss
@@ -231,6 +231,7 @@
   .trek-name,
   .touristic-content-name,
   .touristic-event-name {
+    color: var(--color-primary-app);
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
diff --git a/src/components/grw-touristic-content-card/grw-touristic-content-card.scss b/src/components/grw-touristic-content-card/grw-touristic-content-card.scss
index 8d85be6..a0cf0fb 100644
--- a/src/components/grw-touristic-content-card/grw-touristic-content-card.scss
+++ b/src/components/grw-touristic-content-card/grw-touristic-content-card.scss
@@ -181,3 +181,10 @@
 .selected-touristic-content-card {
   box-shadow: var(--elevation-2);
 }
+
+.touristic-content-category-img {
+  border-radius: 100%;
+  padding: 2px;
+  max-height: 20px;
+  max-width: 20px;
+}
diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss
index d27877e..3d33a84 100644
--- a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss
+++ b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss
@@ -215,3 +215,10 @@ grw-touristic-content-detail {
   box-shadow: var(--elevation-1);
   cursor: pointer;
 }
+
+.touristic-content-category-img {
+  border-radius: 100%;
+  padding: 2px;
+  max-height: 20px;
+  max-width: 20px;
+}
diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx
index ec3ff7e..8710851 100644
--- a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx
+++ b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx
@@ -140,16 +140,20 @@ export class GrwTouristicEventDetail {
               </div>
             </div>
             <div part="touristic-event-category-container" class="touristic-event-category-container">
-              <img
-                part="touristic-event-category-img"
-                class="touristic-event-category-img"
-                /* @ts-ignore */
-                crossorigin="anonymous"
-                src={touristicEventType.pictogram}
-              />
-              <div part="touristic-event-category-name" class="touristic-event-category-name">
-                {touristicEventType.type}
-              </div>
+              {touristicEventType && touristicEventType.pictogram && (
+                <img
+                  part="touristic-event-category-img"
+                  class="touristic-event-category-img"
+                  /* @ts-ignore */
+                  crossorigin="anonymous"
+                  src={touristicEventType.pictogram}
+                />
+              )}
+              {touristicEventType && touristicEventType.type && (
+                <div part="touristic-event-category-name" class="touristic-event-category-name">
+                  {touristicEventType.type}
+                </div>
+              )}
             </div>
             <div part="name" class="name">
               {state.currentTouristicEvent.name}
diff --git a/src/components/grw-trek-card/grw-trek-card.scss b/src/components/grw-trek-card/grw-trek-card.scss
index ea70146..c1ccc09 100644
--- a/src/components/grw-trek-card/grw-trek-card.scss
+++ b/src/components/grw-trek-card/grw-trek-card.scss
@@ -28,7 +28,7 @@
     justify-content: center;
     padding: 8px 16px;
     .trek-name {
-      color: var(--color-on-surface);
+      color: var(--color-primary-app);
       font-size: 22px;
       line-height: 28px;
       font-weight: 400;
@@ -49,11 +49,10 @@
       .trek-theme {
         background-color: var(--color-secondary-container);
         color: var(--color-on-secondary-container);
-        border-radius: var(--border-radius, 8px);
+        border-radius: var(--border-radius, 40px);
         padding: 8px 16px;
         margin: 0px 8px 8px 0px;
         box-shadow: var(--elevation-0);
-        border: 1px solid var(--color-outline);
         height: 32px;
         gap: 8px;
         box-sizing: border-box;
@@ -161,3 +160,12 @@
 .is-current-step {
   background-color: var(--color-surface-variant);
 }
+
+.practice {
+  .trek-icon {
+    border-radius: 100%;
+    padding: 2px;
+    max-height: 20px;
+    max-width: 20px;
+  }
+}
diff --git a/src/components/grw-trek-detail/grw-trek-detail.scss b/src/components/grw-trek-detail/grw-trek-detail.scss
index 7ef4913..49254d5 100644
--- a/src/components/grw-trek-detail/grw-trek-detail.scss
+++ b/src/components/grw-trek-detail/grw-trek-detail.scss
@@ -207,11 +207,10 @@ grw-trek-detail {
     .theme {
       background-color: var(--color-secondary-container);
       color: var(--color-on-secondary-container);
-      border-radius: var(--border-radius, 8px);
+      border-radius: var(--border-radius, 40px);
       padding: 8px 16px;
       margin: 0px 8px 8px 0px;
       box-shadow: var(--elevation-0);
-      border: 1px solid var(--color-outline);
       height: 32px;
       gap: 8px;
       box-sizing: border-box;
@@ -682,3 +681,12 @@ grw-trek-detail {
   box-shadow: var(--elevation-1);
   cursor: pointer;
 }
+
+.practice {
+  .icon {
+    border-radius: 100%;
+    padding: 2px;
+    max-height: 20px;
+    max-width: 20px;
+  }
+}