Move default yellow to var, add in list UI

app/components/map.gjs

@@ -63,7 +63,10 @@ export default class MapComponent extends Component {
 
     const bookmarkStyleFunction = (feature) => {
       const originalPlace = feature.get('originalPlace');
-      let color = '#ffcc33'; // Default Yellow
+      let color =
+        getComputedStyle(document.documentElement)
+          .getPropertyValue('--default-list-color')
+          .trim() || '#000000'; // Fallback to black if variable is missing to make error obvious
 
       if (
         originalPlace &&

app/components/place-lists-manager.gjs

@@ -71,7 +71,8 @@ export default class PlaceListsManager extends Component {
             checked={{this.isSaved}}
             {{on "change" this.toggleSaved}}
           />
-          <span class="list-name">Saved</span>
+          <span class="list-color"></span>
+          <span class="list-name">Saved places</span>
         </label>
       </div>
 

app/styles/app.css

@@ -1,5 +1,9 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
 
+:root {
+  --default-list-color: #ffcc33;
+}
+
 html,
 body {
   height: 100%;
@@ -1031,6 +1035,7 @@ button.create-place {
 .place-lists-manager .list-color {
   width: 12px;
   height: 12px;
+  background-color: var(--default-list-color);
   border-radius: 50%;
   flex-shrink: 0;
   border: 1px solid rgb(0 0 0 / 10%);