add frontend assets in the patches and map them to the docker container

README.md

@@ -2,7 +2,7 @@
 
 L'instance Geonature-Citizen de Champs-Libres.
 
-# Installation développeur :
+## Installation
 
  $ git submodule update --init --recursive
  $ docker-compose up -d
@@ -10,22 +10,22 @@ L'instance Geonature-Citizen de Champs-Libres.
 
 note: les credentials pour accéder au backend se trouvent dans /home/appuser/citizen/config
 
-# Mise à jour de GeoNature
+## Mise à jour de GeoNature
 
 Certaines modifications sont faites sur le fork de GeoNature-citizen. Pour télécharger la dernièer version, faire:
 
 $ git submodule foreach git pull git@github.com:Champs-Libres/GeoNature-citizen.git champs-libres
 
-# Remise en route du service
+## Remise en route du service
 
  $ docker-compose up -d
  $ docker-compose exec citizen sh install/restart.sh
 
-# Documentation :
+## Documentation
 
  $ make doc
 
-# Builder le front (pour production)
+## Builder le front (pour production)
 
 ```
 $ docker-compose exec citizen bash
@@ -34,12 +34,18 @@ appuser@ab136184159a:~/citizen/frontend$ npm run ng build -- --configuration=fr
 ```
 
 
-# Modifier la config du front end
+## Modifier la config du front end
 
-- faire des modifications dans patches/frontend/conf
+- faire des modifications dans `patches/frontend/conf`
 - Builder le front (cfr commande ci-dessus)
 - remise en route du service (cfr commande ci-desssus)
 
-# Modifier l'image de fond
+## Modifier les images (e.g., image de fond)
 
-Il semble qu'un rebuild du container soit nécessaire!?
+- changer les fichiers dans `patches/frontend/src/assets/`
+- copier ces fichiers dans le dossier `media`
+
+```
+$ docker-compose exec citizen bash
+appuser@ab136184159a:~/citizen/$ cp -r frontend/src/assets/* media
+```

docker-compose.override.yml

@@ -7,4 +7,5 @@ services:
       - ./vendor/GeoNature-citizen/frontend:/home/appuser/citizen/frontend
       - ./vendor/GeoNature-citizen/backend:/home/appuser/citizen/backend
       - ./restart.sh:/home/appuser/citizen/install/restart.sh
-      - ./patches/frontend/conf:/home/appuser/citizen/frontend/src/conf
+      - ./patches/frontend/src/conf:/home/appuser/citizen/frontend/src/conf
+      - ./patches/frontend/src/assets:/home/appuser/citizen/frontend/src/assets

patches/frontend/src/assets/binoculars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>100all</title><path d="M97.53,52l.26,0L88,33.46a14.59,14.59,0,0,0-7.55-6.38,14.11,14.11,0,0,0-26.06.2,9.67,9.67,0,0,0-8.69,0,14.1,14.1,0,0,0-26.13,0,14.55,14.55,0,0,0-7.12,6.25L4.82,47.45A21.84,21.84,0,1,0,44.66,61.74a20.55,20.55,0,0,0,.1-2.07,22.13,22.13,0,0,0-.43-4.37h0a21.58,21.58,0,0,0-.75-2.65,7.14,7.14,0,0,1,12.84,0,21.71,21.71,0,0,0-.75,2.66,22.13,22.13,0,0,0-.43,4.37,20.33,20.33,0,0,0,.1,2A21.84,21.84,0,1,0,97.53,52ZM22.91,74.32A14.65,14.65,0,1,1,37,55.48a14.27,14.27,0,0,1,.62,4.19A14.69,14.69,0,0,1,22.91,74.32Zm54.18,0a14.69,14.69,0,0,1-14.7-14.65A14.33,14.33,0,0,1,63,55.46,14.77,14.77,0,0,1,77.09,45,14.6,14.6,0,0,1,87.75,49.6h.06l.76.93A14.64,14.64,0,0,1,77.09,74.32Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Kiran</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>

patches/frontend/src/assets/css/material.css

@@ -0,0 +1,419 @@
+/*
+  This stylesheet uses scss valiables for most of the colors / background-colors of the table
+  to enable the customization of the displayed table without cloning the stylesheet into the
+  own application.
+
+  To modify table colors, add the following lines to the scss file of your application
+  (this example modifies the color of the selected row - selectionType = single, multi or multiClick):
+
+  $ngx-datatable-selected-active-background: yellow;
+  $ngx-datatable-selected-active-background-hover: rgba(yellow, 0.2);
+
+  @import '~@swimlane/ngx-datatable/index.css';
+  @import '~@swimlane/ngx-datatable/themes/material.scss';
+  @import '~@swimlane/ngx-datatable/assets/icons.css';
+
+That's all.
+*/
+.ngx-datatable.material {
+    background: #fff;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    /**
+	 * Shared Styles
+	 */
+    /**
+	 * Global Row Styles
+	 */
+    /**
+	 * Header Styles
+	 */
+    /**
+	 * Body Styles
+	 */
+    /**
+	 * Footer Styles
+	 */
+}
+.ngx-datatable.material.striped .datatable-row-odd {
+    background: #eee;
+}
+.ngx-datatable.material.single-selection .datatable-body-row.active,
+.ngx-datatable.material.single-selection
+    .datatable-body-row.active
+    .datatable-row-group,
+.ngx-datatable.material.multi-selection .datatable-body-row.active,
+.ngx-datatable.material.multi-selection
+    .datatable-body-row.active
+    .datatable-row-group,
+.ngx-datatable.material.multi-click-selection .datatable-body-row.active,
+.ngx-datatable.material.multi-click-selection
+    .datatable-body-row.active
+    .datatable-row-group {
+    background-color: none;
+    color: #fff;
+}
+.ngx-datatable.material.single-selection .datatable-body-row.active:hover,
+.ngx-datatable.material.single-selection
+    .datatable-body-row.active:hover
+    .datatable-row-group,
+.ngx-datatable.material.multi-selection .datatable-body-row.active:hover,
+.ngx-datatable.material.multi-selection
+    .datatable-body-row.active:hover
+    .datatable-row-group,
+.ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover,
+.ngx-datatable.material.multi-click-selection
+    .datatable-body-row.active:hover
+    .datatable-row-group {
+    background-color: none;
+    color: #fff;
+}
+.ngx-datatable.material.single-selection .datatable-body-row.active:focus,
+.ngx-datatable.material.single-selection
+    .datatable-body-row.active:focus
+    .datatable-row-group,
+.ngx-datatable.material.multi-selection .datatable-body-row.active:focus,
+.ngx-datatable.material.multi-selection
+    .datatable-body-row.active:focus
+    .datatable-row-group,
+.ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus,
+.ngx-datatable.material.multi-click-selection
+    .datatable-body-row.active:focus
+    .datatable-row-group {
+    background-color: none;
+    color: #fff;
+}
+.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover,
+.ngx-datatable.material:not(.cell-selection)
+    .datatable-body-row:hover
+    .datatable-row-group {
+    background-color: #eee;
+    transition-property: background;
+    transition-duration: 0.3s;
+    transition-timing-function: linear;
+}
+.ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus,
+.ngx-datatable.material:not(.cell-selection)
+    .datatable-body-row:focus
+    .datatable-row-group {
+    background-color: #ddd;
+}
+.ngx-datatable.material.cell-selection .datatable-body-cell:hover,
+.ngx-datatable.material.cell-selection
+    .datatable-body-cell:hover
+    .datatable-row-group {
+    background-color: #eee;
+    transition-property: background;
+    transition-duration: 0.3s;
+    transition-timing-function: linear;
+}
+.ngx-datatable.material.cell-selection .datatable-body-cell:focus,
+.ngx-datatable.material.cell-selection
+    .datatable-body-cell:focus
+    .datatable-row-group {
+    background-color: #ddd;
+}
+.ngx-datatable.material.cell-selection .datatable-body-cell.active,
+.ngx-datatable.material.cell-selection
+    .datatable-body-cell.active
+    .datatable-row-group {
+    background-color: #ddd;
+    color: #fff;
+}
+.ngx-datatable.material.cell-selection .datatable-body-cell.active:hover,
+.ngx-datatable.material.cell-selection
+    .datatable-body-cell.active:hover
+    .datatable-row-group {
+    background-color: #ddd;
+    color: #fff;
+}
+.ngx-datatable.material.cell-selection .datatable-body-cell.active:focus,
+.ngx-datatable.material.cell-selection
+    .datatable-body-cell.active:focus
+    .datatable-row-group {
+    background-color: #ddd;
+    color: #fff;
+}
+.ngx-datatable.material .empty-row {
+    height: 50px;
+    text-align: left;
+    padding: 0.5rem 1.2rem;
+    vertical-align: top;
+    border-top: 0;
+}
+.ngx-datatable.material .loading-row {
+    text-align: left;
+    padding: 0.5rem 1.2rem;
+    vertical-align: top;
+    border-top: 0;
+}
+.ngx-datatable.material .datatable-header .datatable-row-left,
+.ngx-datatable.material .datatable-body .datatable-row-left {
+    background-color: #fff;
+    background-position: 100% 0;
+    background-repeat: repeat-y;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
+}
+.ngx-datatable.material .datatable-header .datatable-row-right,
+.ngx-datatable.material .datatable-body .datatable-row-right {
+    background-position: 0 0;
+    background-color: #fff;
+    background-repeat: repeat-y;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
+}
+.ngx-datatable.material .datatable-header {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+.ngx-datatable.material .datatable-header .datatable-header-cell {
+    text-align: left;
+    padding: 0.9rem 1.2rem;
+    font-weight: 400;
+    background-color: #fff;
+    color: rgba(0, 0, 0, 0.54);
+    vertical-align: bottom;
+    font-size: 12px;
+    font-weight: 500;
+}
+.ngx-datatable.material
+    .datatable-header
+    .datatable-header-cell
+    .datatable-header-cell-wrapper {
+    position: relative;
+}
+.ngx-datatable.material
+    .datatable-header
+    .datatable-header-cell.longpress
+    .draggable::after {
+    transition: transform 400ms ease, opacity 400ms ease;
+    opacity: 0.5;
+    transform: scale(1);
+}
+.ngx-datatable.material
+    .datatable-header
+    .datatable-header-cell
+    .draggable::after {
+    content: ' ';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -30px 0 0 -30px;
+    height: 60px;
+    width: 60px;
+    background: #eee;
+    border-radius: 100%;
+    opacity: 1;
+    filter: none;
+    transform: scale(0);
+    z-index: 9999;
+    pointer-events: none;
+}
+.ngx-datatable.material
+    .datatable-header
+    .datatable-header-cell.dragging
+    .resize-handle {
+    border-right: none;
+}
+.ngx-datatable.material .datatable-header .resize-handle {
+    border-right: solid 1px #eee;
+}
+.ngx-datatable.material .datatable-body .datatable-row-detail {
+    background: #f5f5f5;
+    padding: 10px;
+}
+.ngx-datatable.material .datatable-body .datatable-group-header {
+    background: #f5f5f5;
+    border-bottom: solid 1px #d9d8d9;
+    border-top: solid 1px #d9d8d9;
+}
+.ngx-datatable.material
+    .datatable-body
+    .datatable-body-row
+    .datatable-body-cell {
+    text-align: left;
+    padding: 0.9rem 1.2rem;
+    vertical-align: top;
+    border-top: 0;
+    color: rgba(0, 0, 0, 0.87);
+    transition: width 0.3s ease;
+    font-size: 14px;
+    font-weight: 400;
+}
+.ngx-datatable.material
+    .datatable-body
+    .datatable-body-row
+    .datatable-body-group-cell {
+    text-align: left;
+    padding: 0.9rem 1.2rem;
+    vertical-align: top;
+    border-top: 0;
+    color: rgba(0, 0, 0, 0.87);
+    transition: width 0.3s ease;
+    font-size: 14px;
+    font-weight: 400;
+}
+.ngx-datatable.material .datatable-body .progress-linear {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 5px;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+}
+.ngx-datatable.material .datatable-body .progress-linear .container {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 5px;
+    -webkit-transform: translate(0, 0) scale(1, 1);
+    transform: translate(0, 0) scale(1, 1);
+    background-color: #aad1f9;
+}
+.ngx-datatable.material .datatable-body .progress-linear .container .bar {
+    transition: all 0.2s linear;
+    -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
+    animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
+    transition: -webkit-transform 0.2s linear;
+    transition: transform 0.2s linear;
+    background-color: #106cc8;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 5px;
+}
+.ngx-datatable.material .datatable-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.54);
+}
+.ngx-datatable.material .datatable-footer .page-count {
+    line-height: 50px;
+    height: 50px;
+    padding: 0 1.2rem;
+}
+.ngx-datatable.material .datatable-footer .datatable-pager {
+    margin: 0 10px;
+}
+.ngx-datatable.material .datatable-footer .datatable-pager li {
+    vertical-align: middle;
+}
+.ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
+    color: rgba(0, 0, 0, 0.26) !important;
+    background-color: transparent !important;
+}
+.ngx-datatable.material .datatable-footer .datatable-pager li.active a {
+    background-color: rgba(158, 158, 158, 0.2);
+    font-weight: bold;
+}
+.ngx-datatable.material .datatable-footer .datatable-pager a {
+    height: 22px;
+    min-width: 24px;
+    line-height: 22px;
+    padding: 0 6px;
+    border-radius: 3px;
+    margin: 6px 3px;
+    text-align: center;
+    vertical-align: top;
+    color: rgba(0, 0, 0, 0.54);
+    text-decoration: none;
+    vertical-align: bottom;
+}
+.ngx-datatable.material .datatable-footer .datatable-pager a:hover {
+    color: rgba(0, 0, 0, 0.75);
+    background-color: rgba(158, 158, 158, 0.2);
+}
+.ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
+.ngx-datatable.material
+    .datatable-footer
+    .datatable-pager
+    .datatable-icon-right,
+.ngx-datatable.material
+    .datatable-footer
+    .datatable-pager
+    .datatable-icon-prev {
+    font-size: 20px;
+    line-height: 20px;
+    padding: 0 3px;
+}
+.ngx-datatable.material .datatable-summary-row .datatable-body-row {
+    background-color: #ddd;
+}
+.ngx-datatable.material .datatable-summary-row .datatable-body-row:hover {
+    background-color: #ddd;
+}
+.ngx-datatable.material
+    .datatable-summary-row
+    .datatable-body-row
+    .datatable-body-cell {
+    font-weight: bold;
+}
+
+/**
+ * Checkboxes
+**/
+.datatable-checkbox {
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    vertical-align: middle;
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0;
+}
+.datatable-checkbox input[type='checkbox'] {
+    position: relative;
+    margin: 0 1rem 0 0;
+    cursor: pointer;
+    outline: none;
+}
+.datatable-checkbox input[type='checkbox']:before {
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    content: '';
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid #f2f2f2;
+}
+.datatable-checkbox input[type='checkbox']:checked:before {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    height: 0.5rem;
+    border-color: #009688;
+    border-top-style: none;
+    border-right-style: none;
+}
+.datatable-checkbox input[type='checkbox']:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1rem;
+    height: 1rem;
+    background: #fff;
+    cursor: pointer;
+}
+
+/**
+ * Progress bar animations
+ */
+@keyframes query {
+    0% {
+        opacity: 1;
+        transform: translateX(35%) scale(0.3, 1);
+    }
+    100% {
+        opacity: 0;
+        transform: translateX(-50%) scale(0, 1);
+    }
+}

patches/frontend/src/assets/logo.svg

@@ -0,0 +1,213 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="300"
+   height="300"
+   viewBox="0 0 79.374998 79.375002"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="logo.png">
+  <defs
+     id="defs2">
+    <circle
+       r="64"
+       cy="64"
+       cx="64"
+       id="SVGID_1_" />
+    <defs
+       id="defs8526">
+      <circle
+         r="64"
+         cy="64"
+         cx="64"
+         id="circle8586" />
+    </defs>
+    <clipPath
+       id="SVGID_2_">
+      <use
+         id="use8528"
+         overflow="visible"
+         xlink:href="#SVGID_1_"
+         style="overflow:visible"
+         x="0"
+         y="0"
+         width="100%"
+         height="100%" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="43.364681"
+     inkscape:cy="49.417101"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="638"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-217.62498)">
+    <path
+       style="fill:#1abc9c;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+       d="m 25.617504,217.78252 -3.883873,24.41091 43.571372,-18.32609 z"
+       id="path8433"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#1ab39c;stroke:none;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 43.46726,232.93302 21.837743,-9.06568 14.280586,39.6875 z"
+       id="path8435"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#1abc9c;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+       d="m 61.610118,248.24105 17.975473,15.31379 -25.40691,33.60267 z"
+       id="path8437"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#1ab39c;stroke:none;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 57.830357,272.62051 -21.884287,9.3175 -21.454888,9.13468 39.687499,6.08482 z"
+       id="path8439"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#1abc9c;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+       d="M 35.974556,281.82557 0.21059367,251.38519 14.491182,291.07269 Z"
+       id="path8441"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+    <path
+       style="fill:#1ab39c;stroke:none;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 18.142857,266.5729 25.617504,217.78252 0.21059367,251.38519 Z"
+       id="path8443"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#1ac39c;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+       d="m 21.733631,242.19343 21.733629,-9.26041 18.142858,15.30803 -3.779761,24.37946 -21.8558,9.20506 -17.8317,-15.25267 z"
+       id="path8445"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#d9b455;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 48.37577,227.2544 c 0.0069,-0.005 0.01314,-0.0177 0.02057,-0.0246 0.297716,0.0286 0.589717,0.0749 0.882862,0.11943 -0.300573,-0.0343 -0.600004,-0.0674 -0.903434,-0.0949 z"
+       id="path8531" />
+    <path
+       style="fill:#f5f5f5;stroke-width:2.15974236"
+       d="M 140.16406 237.43555 L 129.87695 288.86914 L 129.92383 289.12109 L 136.48438 290.12695 L 136.25195 288.90039 L 146.29492 238.66992 L 140.16406 237.43555 z "
+       id="polygon8533"
+       transform="matrix(0.26458333,0,0,0.26458333,0,217.62498)" />
+    <path
+       style="fill:#f5f5f5;stroke-width:2.15974236"
+       d="M 143.88477 236.14062 L 110.86133 278.82617 L 112.99414 286.52539 L 119.77539 287.56445 L 117.72852 280.17578 L 148.83008 239.9668 L 143.88477 236.14062 z "
+       id="polygon8535"
+       transform="matrix(0.26458333,0,0,0.26458333,0,217.62498)" />
+    <path
+       style="fill:#f5f5f5;stroke-width:2.15974236"
+       d="M 127.60352 288.76367 L 138.06055 290.36719 A 5.4727868 4.3972355 0 0 0 138.53711 288.58984 A 5.4727868 4.3972355 0 0 0 133.06445 284.19336 A 5.4727868 4.3972355 0 0 0 127.5918 288.58984 A 5.4727868 4.3972355 0 0 0 127.60352 288.76367 z "
+       id="ellipse8537"
+       transform="matrix(0.26458333,0,0,0.26458333,0,217.62498)" />
+    <ellipse
+       id="ellipse8539"
+       ry="1.1640066"
+       rx="1.4474368"
+       cy="291.65363"
+       cx="-30.317383"
+       style="fill:#f5f5f5;stroke-width:0.57143182"
+       transform="scale(-1,1)" />
+    <path
+       style="fill:#d9b455;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 48.412342,239.72076 c 0.0063,0.02 0.0097,0.044 0.01371,0.0646 -0.01086,-0.0137 -0.02057,-0.0286 -0.03086,-0.0446 -0.0069,-0.009 -0.012,-0.02 -0.01771,-0.0309 0.01143,0.002 0.02286,0.007 0.03486,0.0109 z"
+       id="path8543" />
+    <path
+       style="fill:#ee8e88;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 29.779093,256.19571 c 3.578878,0.009 6.619466,2.13829 9.301767,4.01716 2.468586,1.72801 4.624026,3.31716 6.272607,2.43259 0.236573,-0.12629 0.625147,-0.38229 0.716576,-0.63086 1.014291,-2.72459 -6.017749,-11.95721 -5.720604,-23.21499 l 4.736027,0.016 c 0,9.17262 14.736083,19.44868 14.736083,28.20701 0,1.68859 -0.394859,3.26631 -1.353722,4.68289 -3.621735,6.32175 -8.470333,7.12975 -12.444642,7.23204 -1.770867,1.70344 -6.152035,2.91316 -11.289778,2.91316 -5.121743,0 -9.491482,-1.20229 -11.272064,-2.89659 h -8.16976 c -1.144007,0 -2.069155,-0.92515 -2.069155,-2.06858 0,-10.24806 8.348047,-20.68983 16.556665,-20.68983 z"
+       id="path8545" />
+    <g
+       id="g8553"
+       transform="matrix(-0.57143181,0,0,0.57143181,72.946195,216.74234)">
+      <path
+         style="fill:#d9817c"
+         inkscape:connector-curvature="0"
+         d="m 42.688,79.227 c 0.162,0.437 0.84,0.885 1.256,1.104 1.242,0.668 2.652,0.526 4.197,-0.087 C 47.729,80.008 47.177,79.617 47.035,79.226 45.26,74.458 57.565,58.301 57.046,38.6 L 52.7,38.616 C 53.214,58.31 40.913,74.46 42.688,79.227 Z"
+         id="path8547" />
+      <path
+         style="fill:#d9817c"
+         inkscape:connector-curvature="0"
+         d="m 64.7,113.895 c 0.715,0.027 1.437,0.049 2.172,0.049 8.963,0 16.61,-2.104 19.726,-5.07 h -4.345 c -2.86,2.722 -9.544,4.713 -17.553,5.021 z"
+         id="path8549" />
+      <path
+         style="fill:#d9817c"
+         inkscape:connector-curvature="0"
+         d="m 75.542,69.043 c -0.726,0.002 -1.438,0.059 -2.14,0.152 13.615,1.729 26.768,19.039 26.768,36.056 0,2.001 -1.619,3.62 -3.621,3.62 h 4.346 c 2.002,0 3.621,-1.619 3.621,-3.62 0,-17.935 -14.609,-36.208 -28.974,-36.208 z"
+         id="path8551" />
+    </g>
+    <path
+       style="fill:#ee8e88;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 51.552359,228.78069 c -0.207429,-1.75943 -3.54402,-3.46687 -5.225172,-3.46687 -1.137721,0 -4.137738,0 -4.137738,0 -6.186321,0 -9.725198,3.24916 -9.725198,8.20004 0,4.55317 4.918885,6.05204 7.882902,6.15318 l 7.358899,0.0349 z"
+       id="path8555" />
+    <path
+       style="fill:#d9817c;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 42.189449,225.16067 c 0,0 1.278293,0 2.483443,0 -6.187464,0 -9.72577,3.32459 -9.72577,8.27548 0,4.55202 4.918314,6.08975 7.882902,6.19089 l 4.877742,0.0109 -0.0017,0.006 -7.358899,-0.016 c -2.964017,-0.10114 -7.882902,-1.63886 -7.882902,-6.19089 0,-4.95088 3.538877,-8.27662 9.725198,-8.27662 z"
+       id="path8557" />
+    <path
+       style="fill:#f5f5f5;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 51.552359,228.70412 c 0.96972,0 5.793748,3.54345 7.241184,4.42231 1.44858,0.87944 1.500009,4.70689 1.552009,7.44862 0.052,2.74115 -0.103429,6.36175 -1.137721,6.36175 -1.034291,0 -2.5263,-4.86174 -3.254304,-5.48289 -0.727432,-0.62058 -7.488042,-1.80973 -8.246332,-1.80973 -0.75829,0 -2.464586,-3.10401 -1.845153,-5.32803 0.619432,-2.22458 3.102874,-5.61203 5.690317,-5.61203 z"
+       id="path8559" />
+    <path
+       style="fill:#242424;stroke-width:0.57143182"
+       inkscape:connector-curvature="0"
+       d="m 54.878093,235.33445 c 1.227435,0.48114 2.814873,0.37028 4.906313,-0.64287 0.489146,1.60059 0.525717,3.99888 0.560003,5.88347 0.052,2.74115 -0.104,6.36175 -1.13772,6.36175 -0.920006,0 -2.201727,-3.8406 -2.986303,-5.12689 0.618289,-2.32173 -0.04572,-3.73888 -1.342293,-6.47546 z"
+       id="path8561" />
+    <circle
+       style="fill:#f5f5f5;stroke-width:0.57143182"
+       cx="-46.1889"
+       cy="229.26469"
+       r="1.6548665"
+       id="circle8563"
+       transform="scale(-1,1)" />
+    <circle
+       style="fill:#242424;stroke-width:0.57143182"
+       cx="-46.189472"
+       cy="229.26469"
+       r="0.82743323"
+       id="circle8565"
+       transform="scale(-1,1)" />
+  </g>
+</svg>

patches/frontend/src/assets/marker2.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.42 14.42"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:0.25px;}.cls-2{fill:#fff;}.cls-3{fill:#00a89b;}</style></defs><title>marker2</title><circle class="cls-1" cx="7.21" cy="7.21" r="7.09"/><circle class="cls-2" cx="7.21" cy="7.21" r="6.02"/><path class="cls-3" d="M-108.83,9.59h0l-.54-1a.81.81,0,0,0-.42-.35.78.78,0,0,0-1-.41.74.74,0,0,0-.41.42.53.53,0,0,0-.49,0,.78.78,0,0,0-1-.43.82.82,0,0,0-.43.43.83.83,0,0,0-.39.35l-.42.77a1.21,1.21,0,0,0,.32,1.68A1.21,1.21,0,0,0-112,10.7a1.2,1.2,0,0,0,.21-.57V10a1.94,1.94,0,0,0,0-.24h0s0-.1,0-.15a.39.39,0,0,1,.53-.18.35.35,0,0,1,.18.18.83.83,0,0,0,0,.15,1,1,0,0,0,0,.24.41.41,0,0,0,0,.11,1.21,1.21,0,0,0,1.32,1.1,1.21,1.21,0,0,0,1.09-1.32A1.14,1.14,0,0,0-108.83,9.59ZM-113,10.83a.81.81,0,0,1-.81-.81.81.81,0,0,1,.81-.81.8.8,0,0,1,.78.58.85.85,0,0,1,0,.23A.82.82,0,0,1-113,10.83Zm3,0a.82.82,0,0,1-.82-.81,1,1,0,0,1,0-.24A.85.85,0,0,1-110,9.2a.84.84,0,0,1,.59.26h0l0,0a.81.81,0,0,1-.12,1.14A.81.81,0,0,1-110,10.83Z" transform="translate(118.68 -3.82)"/></svg>

patches/frontend/src/assets/pointer-blue.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.2 19.8" style="enable-background:new 0 0 15.2 19.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#00AA9E;}
+</style>
+<title>pointer-blue</title>
+<path class="st0" d="M7.4,19.7C-0.3,13.8,0,7.8,0,7.6C0,3.4,3.4,0,7.6,0s7.6,3.4,7.6,7.6c0.2,7.1-7.4,12.1-7.5,12.1l-0.2,0.1
+	L7.4,19.7z"/>
+<path class="st1" d="M11.5,7.7L11.5,7.7c-0.6-0.6-1.6-0.6-2.2,0C9.2,7.9,9.1,8.1,9,8.3c0,0.1-0.1,0.3-0.1,0.4c0,0.9,0.7,1.5,1.6,1.5
+	c0.3,0,0.7-0.1,0.9-0.3c0.7-0.5,0.8-1.5,0.3-2.1c0,0,0,0,0,0l0,0L11.5,7.7z"/>
+<path class="st1" d="M4.8,7.2c-0.8,0-1.5,0.7-1.5,1.5c0,0,0,0,0,0l0,0c-0.1,0.8,0.6,1.6,1.4,1.6C5.5,10.4,6.2,9.8,6.3,9
+	c0-0.1,0-0.2,0-0.2c0-0.1,0-0.3-0.1-0.4C6,7.6,5.5,7.2,4.8,7.2z"/>
+<path class="st1" d="M7.6,0.3c-4,0-7.3,3.3-7.3,7.3c0,0,0,0,0,0c0,0-0.4,6,7.3,11.9c0,0,7.5-4.8,7.3-11.9C14.9,3.5,11.6,0.3,7.6,0.3
+	z M10.6,10.9c-1.2,0.1-2.4-0.8-2.5-2c0,0,0,0,0,0l0,0V8.7c0-0.2,0-0.3,0-0.5c0-0.1,0-0.2,0.1-0.3C8.2,7.8,8,7.7,7.9,7.6
+	c-0.4-0.2-0.8,0-1,0.3C6.9,8,7,8.1,7,8.2c0,0.2,0,0.3,0,0.5c0,0.1,0,0.1,0,0.2C7,9.3,6.9,9.6,6.7,10c-0.7,1-2.1,1.3-3.2,0.6
+	c-1-0.7-1.3-2.1-0.6-3.2l0.8-1.5c0.2-0.3,0.4-0.5,0.7-0.6c0.1-0.4,0.4-0.7,0.8-0.8c0.7-0.3,1.6,0,1.9,0.8c0,0,0,0,0,0l0,0
+	c0.3-0.1,0.6-0.1,0.9,0c0.1-0.4,0.4-0.6,0.8-0.8c0.7-0.3,1.6,0,1.9,0.8c0,0,0,0,0,0l0,0c0.3,0.1,0.6,0.4,0.8,0.7l1,1.9l0,0
+	c0.1,0.2,0.1,0.4,0.1,0.6C12.9,9.7,11.9,10.8,10.6,10.9L10.6,10.9z"/>
+</svg>

patches/frontend/src/assets/pointer-green.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.2 19.8" style="enable-background:new 0 0 15.2 19.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#60B15C;}
+</style>
+<path class="st0" d="M7.4,19.7C-0.3,13.8,0,7.8,0,7.6C0,3.4,3.4,0,7.6,0s7.6,3.4,7.6,7.6c0.2,7.1-7.4,12.1-7.5,12.1l-0.2,0.1
+	L7.4,19.7z"/>
+<title>pointer-green</title>
+<path class="st1" d="M11.5,7.7L11.5,7.7c-0.6-0.6-1.6-0.6-2.2,0C9.2,7.9,9.1,8.1,9,8.3c0,0.1-0.1,0.3-0.1,0.4c0,0.9,0.7,1.5,1.6,1.5
+	c0.3,0,0.7-0.1,0.9-0.3c0.7-0.5,0.8-1.5,0.3-2.1c0,0,0,0,0,0l0,0L11.5,7.7z"/>
+<path class="st1" d="M4.8,7.2c-0.8,0-1.5,0.7-1.5,1.5c0,0,0,0,0,0l0,0c-0.1,0.8,0.6,1.6,1.4,1.6C5.5,10.4,6.2,9.8,6.3,9
+	c0-0.1,0-0.2,0-0.2c0-0.1,0-0.3-0.1-0.4C6,7.6,5.5,7.2,4.8,7.2z"/>
+<path class="st1" d="M7.6,0.3c-4,0-7.3,3.3-7.3,7.3c0,0,0,0,0,0c0,0-0.4,6,7.3,11.9c0,0,7.5-4.8,7.3-11.9C14.9,3.5,11.6,0.3,7.6,0.3
+	z M10.6,10.9c-1.2,0.1-2.4-0.8-2.5-2c0,0,0,0,0,0l0,0V8.7c0-0.2,0-0.3,0-0.5c0-0.1,0-0.2,0.1-0.3C8.2,7.8,8,7.7,7.9,7.6
+	c-0.4-0.2-0.8,0-1,0.3C6.9,8,7,8.1,7,8.2c0,0.2,0,0.3,0,0.5c0,0.1,0,0.1,0,0.2C7,9.3,6.9,9.6,6.7,10c-0.7,1-2.1,1.3-3.2,0.6
+	S2.2,8.4,2.9,7.4l0.8-1.5c0.2-0.3,0.4-0.5,0.7-0.6c0.1-0.4,0.4-0.7,0.8-0.8c0.7-0.3,1.6,0,1.9,0.8c0,0,0,0,0,0l0,0
+	c0.3-0.1,0.6-0.1,0.9,0c0.1-0.4,0.4-0.6,0.8-0.8c0.7-0.3,1.6,0,1.9,0.8c0,0,0,0,0,0l0,0c0.3,0.1,0.6,0.4,0.8,0.7l1,1.9l0,0
+	c0.1,0.2,0.1,0.4,0.1,0.6C12.9,9.7,11.9,10.8,10.6,10.9L10.6,10.9z"/>
+</svg>

patches/frontend/src/assets/pointer-white.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.2 19.8" style="enable-background:new 0 0 15.2 19.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M7.4,19.7C-0.3,13.8,0,7.8,0,7.6C0,3.4,3.4,0,7.6,0s7.6,3.4,7.6,7.6c0.2,7.1-7.4,12.1-7.5,12.1l-0.2,0.1
+	L7.4,19.7z"/>
+<title>pointer-green</title>
+<path class="st0" d="M11.5,7.7L11.5,7.7c-0.6-0.6-1.6-0.6-2.2,0C9.2,7.9,9.1,8.1,9,8.3c0,0.1-0.1,0.3-0.1,0.4c0,0.9,0.7,1.5,1.6,1.5
+	c0.3,0,0.7-0.1,0.9-0.3c0.7-0.5,0.8-1.5,0.3-2.1c0,0,0,0,0,0l0,0L11.5,7.7z"/>
+<path class="st0" d="M4.8,7.2c-0.8,0-1.5,0.7-1.5,1.5c0,0,0,0,0,0l0,0c-0.1,0.8,0.6,1.6,1.4,1.6C5.5,10.4,6.2,9.8,6.3,9
+	c0-0.1,0-0.2,0-0.2c0-0.1,0-0.3-0.1-0.4C6,7.6,5.5,7.2,4.8,7.2z"/>
+<path class="st0" d="M7.6,0.3c-4,0-7.3,3.3-7.3,7.3c0,0,0,0,0,0c0,0-0.4,6,7.3,11.9c0,0,7.5-4.8,7.3-11.9C14.9,3.5,11.6,0.3,7.6,0.3
+	z M10.6,10.9c-1.2,0.1-2.4-0.8-2.5-2c0,0,0,0,0,0l0,0V8.7c0-0.2,0-0.3,0-0.5c0-0.1,0-0.2,0.1-0.3C8.2,7.8,8,7.7,7.9,7.6
+	c-0.4-0.2-0.8,0-1,0.3C6.9,8,7,8.1,7,8.2c0,0.2,0,0.3,0,0.5c0,0.1,0,0.1,0,0.2C7,9.3,6.9,9.6,6.7,10c-0.7,1-2.1,1.3-3.2,0.6
+	S2.2,8.4,2.9,7.4l0.8-1.5c0.2-0.3,0.4-0.5,0.7-0.6c0.1-0.4,0.4-0.7,0.8-0.8c0.7-0.3,1.6,0,1.9,0.8c0,0,0,0,0,0l0,0
+	c0.3-0.1,0.6-0.1,0.9,0c0.1-0.4,0.4-0.6,0.8-0.8c0.7-0.3,1.6,0,1.9,0.8c0,0,0,0,0,0l0,0c0.3,0.1,0.6,0.4,0.8,0.7l1,1.9l0,0
+	c0.1,0.2,0.1,0.4,0.1,0.6C12.9,9.7,11.9,10.8,10.6,10.9L10.6,10.9z"/>
+</svg>

patches/frontend/src/assets/scroll.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.24 33.72"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:0.75px;}</style></defs><title>scroll</title><rect class="cls-1" x="0.38" y="0.37" width="12.49" height="20.73" rx="6.24"/><line class="cls-1" x1="6.62" y1="5.25" x2="6.62" y2="10.74"/><line class="cls-1" x1="6.62" y1="21.1" x2="6.62" y2="33.72"/></svg>