From a9d074d2ebb054b7e839edef86b0016183b038f0 Mon Sep 17 00:00:00 2001
From: Bastyen <bastien.alvez@makina-corpus.com>
Date: Wed, 7 Feb 2024 15:46:54 +0100
Subject: [PATCH] add grw- prefix to class name

---
 src/components/grw-app/grw-app.scss | 82 ++++++++++++++---------------
 src/components/grw-app/grw-app.tsx  | 38 ++++++-------
 2 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/components/grw-app/grw-app.scss b/src/components/grw-app/grw-app.scss
index dcb59b2..b9ec71e 100644
--- a/src/components/grw-app/grw-app.scss
+++ b/src/components/grw-app/grw-app.scss
@@ -8,7 +8,7 @@ grw-app {
   max-height: 100dvh;
 }
 
-.app-container {
+.grw-app-container {
   position: relative;
   background-color: var(--color-background);
   width: 100%;
@@ -16,22 +16,22 @@ grw-app {
   overflow: hidden;
 }
 
-.languages-container {
+.grw-languages-container {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin: 16px 16px 0px 0px;
 }
 
-.header-container,
-.large-view-header-container {
+.grw-header-container,
+.grw-large-view-header-container {
   height: var(--header-height);
-  .arrow-back-container {
+  .grw-arrow-back-container {
     display: flex;
     align-items: center;
     height: 100%;
     margin: 0px 16px;
-    .arrow-back-icon {
+    .grw-arrow-back-icon {
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
       color: var(--color-on-surface);
@@ -46,35 +46,35 @@ grw-app {
   }
 }
 
-.handle-search-filters-container {
+.grw-handle-search-filters-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0px 16px;
   height: 64px;
 
-  .handle-search-container {
+  .grw-handle-search-container {
     width: calc(50% + 48px);
     max-width: 220px;
   }
-  .handle-filters-container {
+  .grw-handle-filters-container {
     margin-left: 16px;
   }
 }
 
-.header-detail {
+.grw-header-detail {
   height: 64px;
 }
 
-.large-view-header-container {
-  .handle-search-filters-container {
+.grw-large-view-header-container {
+  .grw-handle-search-filters-container {
     justify-content: flex-start;
   }
 }
 
-.init-loader-container,
-.loader-container,
-.large-view-loader-container {
+.grw-init-loader-container,
+.grw-loader-container,
+.grw-large-view-loader-container {
   position: absolute;
   display: flex;
   justify-content: center;
@@ -83,39 +83,39 @@ grw-app {
   background-color: var(--color-background);
 }
 
-.content-container {
+.grw-content-container {
   position: relative;
   display: flex;
   height: calc(100% - var(--header-height));
 }
 
-.content-treks {
+.grw-content-treks {
   height: calc(100% - var(--header-height));
 }
 
-.content-trek {
+.grw-content-trek {
   height: 100%;
 }
 
-.large-view-app-treks-list-container,
-.large-view-app-trek-detail-container,
-.large-view-app-touristic-content-detail-container,
-.large-view-app-touristic-event-detail-container,
-.large-view-app-treks-list-container,
-.large-view-app-trek-detail-container {
+.grw-large-view-app-treks-list-container,
+.grw-large-view-app-trek-detail-container,
+.grw-large-view-app-touristic-content-detail-container,
+.grw-large-view-app-touristic-event-detail-container,
+.grw-large-view-app-treks-list-container,
+.grw-large-view-app-trek-detail-container {
   display: flex;
   flex-direction: column;
   max-width: 100%;
   height: 100%;
 }
 
-.app-map-container,
-.large-view-app-map-container {
+.grw-app-map-container,
+.grw-large-view-app-map-container {
   width: 100%;
   height: 100%;
 }
 
-.map-visibility-button-container {
+.grw-map-visibility-button-container {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -125,15 +125,15 @@ grw-app {
   z-index: 4;
 }
 
-.init-loader-container,
-.loader-container {
+.grw-init-loader-container,
+.grw-loader-container {
   width: 100%;
 }
 
-.app-treks-list-container,
-.app-trek-detail-container,
-.app-touristic-content-detail-container,
-.app-touristic-event-detail-container {
+.grw-app-treks-list-container,
+.grw-app-trek-detail-container,
+.grw-app-touristic-content-detail-container,
+.grw-app-touristic-event-detail-container {
   width: 100%;
 }
 
@@ -153,28 +153,28 @@ grw-touristic-event-detail {
   max-height: calc(100vh - 64px);
 }
 
-.app-map-container {
+.grw-app-map-container {
   width: 100%;
   position: absolute;
 }
 
-.large-view-loader-container {
+.grw-large-view-loader-container {
   width: 50%;
 }
 
-.large-view-app-treks-list-container,
-.large-view-app-trek-detail-container,
-.large-view-app-touristic-content-detail-container,
-.large-view-app-touristic-event-detail-container {
+.grw-large-view-app-treks-list-container,
+.grw-large-view-app-trek-detail-container,
+.grw-large-view-app-touristic-content-detail-container,
+.grw-large-view-app-touristic-event-detail-container {
   width: 50%;
 }
 
-.large-view-app-map-container {
+.grw-large-view-app-map-container {
   position: relative;
   width: 50%;
 }
 
-.error-container {
+.grw-error-container {
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
index efa5656..9b88b73 100644
--- a/src/components/grw-app/grw-app.tsx
+++ b/src/components/grw-app/grw-app.tsx
@@ -335,7 +335,7 @@ export class GrwApp {
           !state.currentTouristicEvent &&
           !state.currentTouristicContents &&
           !state.currentTouristicEvents && (
-            <div class="init-loader-container">
+            <div class="grw-init-loader-container">
               <grw-loader color-primary-container={this.colorPrimaryContainer} color-on-primary-container={this.colorOnPrimaryContainer}></grw-loader>
             </div>
           )}
@@ -403,15 +403,15 @@ export class GrwApp {
           state.currentTouristicContent ||
           state.currentTouristicEvent ||
           state.networkError) && (
-          <div class="app-container">
+          <div class="grw-app-container">
             {state.languages && state.languages.length > 1 && (
-              <div class="languages-container">
+              <div class="grw-languages-container">
                 <grw-select-language></grw-select-language>
               </div>
             )}
             <div
-              class={`${this.isLargeView ? 'large-view-header-container' : 'header-container'}${
-                this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' header-detail' : ''
+              class={`${this.isLargeView ? 'grw-large-view-header-container' : 'grw-header-container'}${
+                this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' grw-header-detail' : ''
               }`}
             >
               {Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 &&
@@ -426,11 +426,11 @@ export class GrwApp {
                   ></grw-segmented-segment>
                 )}
               {!this.showTrek && !this.showTouristicContent && !this.showTouristicEvent ? (
-                <div class="handle-search-filters-container">
-                  <div class="handle-search-container">
+                <div class="grw-handle-search-filters-container">
+                  <div class="grw-handle-search-container">
                     <grw-search fontFamily={this.fontFamily}></grw-search>
                   </div>
-                  <div class="handle-filters-container">
+                  <div class="hgrw-andle-filters-container">
                     <grw-common-button
                       fontFamily={this.fontFamily}
                       action={() => this.handleFilters()}
@@ -440,8 +440,8 @@ export class GrwApp {
                   </div>
                 </div>
               ) : (
-                <div class="arrow-back-container">
-                  <button onClick={() => this.handleBackButton()} class="arrow-back-icon">
+                <div class="grw-arrow-back-container">
+                  <button onClick={() => this.handleBackButton()} class="grw-arrow-back-icon">
                     {/* @ts-ignore */}
                     <span translate={false} class="material-symbols material-symbols-outlined">
                       arrow_back
@@ -451,15 +451,15 @@ export class GrwApp {
               )}
             </div>
 
-            <div class={`content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'content-trek' : 'content-treks'}`}>
+            <div class={`grw-content-container ${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'grw-content-trek' : 'grw-content-treks'}`}>
               {state.networkError && (
-                <div class="error-container">
+                <div class="grw-error-container">
                   Une erreur est survenue.
                   <grw-common-button icon="refresh" name="Recharger la page" action={() => this.reload()}></grw-common-button>
                 </div>
               )}
               <div
-                class={this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container'}
+                class={this.isLargeView ? 'grw-large-view-app-treks-list-container' : 'grw-app-treks-list-container'}
                 style={{ display: this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' }}
               >
                 {state.mode === 'treks' && this.treks && (
@@ -505,12 +505,12 @@ export class GrwApp {
                 (!state.treks && state.mode === 'treks') ||
                 (!state.touristicContents && state.mode === 'touristicContents') ||
                 (!state.touristicEvents && state.mode === 'touristicEvents')) && (
-                <div class={this.isLargeView ? 'large-view-loader-container' : 'loader-container'}>
+                <div class={this.isLargeView ? 'grw-large-view-loader-container' : 'grw-loader-container'}>
                   <grw-loader color-primary-container={this.colorSecondaryContainer} color-on-primary-container={this.colorOnSecondaryContainer}></grw-loader>
                 </div>
               )}
               {this.showTrek && (
-                <div class={this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container'}>
+                <div class={this.isLargeView ? 'grw-large-view-app-trek-detail-container' : 'grw-app-trek-detail-container'}>
                   <grw-trek-detail
                     style={{
                       visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
@@ -533,7 +533,7 @@ export class GrwApp {
                 </div>
               )}
               {this.showTouristicContent && (
-                <div class={this.isLargeView ? 'large-view-app-touristic-content-detail-container' : 'app-touristic-content-detail-container'}>
+                <div class={this.isLargeView ? 'grw-large-view-app-touristic-content-detail-container' : 'grw-app-touristic-content-detail-container'}>
                   <grw-touristic-content-detail
                     style={{
                       visibility: !this.showTouristicContentMap || this.isLargeView ? 'visible' : 'hidden',
@@ -553,7 +553,7 @@ export class GrwApp {
                 </div>
               )}
               {this.showTouristicEvent && (
-                <div class={this.isLargeView ? 'large-view-app-touristic-event-detail-container' : 'app-touristic-event-detail-container'}>
+                <div class={this.isLargeView ? 'grw-large-view-app-touristic-event-detail-container' : 'grw-app-touristic-event-detail-container'}>
                   <grw-touristic-event-detail
                     style={{
                       visibility: !this.showTouristicEventMap || this.isLargeView ? 'visible' : 'hidden',
@@ -575,7 +575,7 @@ export class GrwApp {
               {!state.networkError && (
                 <grw-map
                   reset-store-on-disconnected={'false'}
-                  class={this.isLargeView ? 'large-view-app-map-container' : 'app-map-container'}
+                  class={this.isLargeView ? 'grw-large-view-app-map-container' : 'grw-app-map-container'}
                   style={{
                     visibility:
                       (this.showHomeMap && !this.showTrek) ||
@@ -610,7 +610,7 @@ export class GrwApp {
               (this.showTrek && state.currentTrek) ||
               (this.showTouristicContent && state.currentTouristicContent) ||
               (this.showTouristicEvent && state.currentTouristicEvent)) && (
-              <div class="map-visibility-button-container">
+              <div class="grw-map-visibility-button-container">
                 <grw-extended-fab
                   fontFamily={this.fontFamily}
                   action={() => this.handleShowMap()}