refactor: update titles

Author: luiisca

public/icon.png

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <link rel="shortcut icon" type="image/png" href="/icon.png" />
+  <link rel="shortcut icon" type="image/svg+xml" href="/icon.svg" />
 
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet" />
 
@@ -26,11 +26,21 @@
   <div class="sidebar">
     <div class="header">
       <svg class="logo" width="52" height="52" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 90 L40 10 L70 90 L90 50" stroke="white" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M10 90 L40 10 L70 90 L90 50" stroke="white" stroke-width="10" fill="#34495e" stroke-linecap="round"
+          stroke-linejoin="round" />
       </svg>
       <div class="popover-container">
         <button class="location-btn">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-locate-fixed-icon lucide-locate-fixed"><line x1="2" x2="5" y1="12" y2="12"/><line x1="19" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="5"/><line x1="12" x2="12" y1="19" y2="22"/><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="3"/></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="lucide lucide-locate-fixed-icon lucide-locate-fixed">
+            <line x1="2" x2="5" y1="12" y2="12" />
+            <line x1="19" x2="22" y1="12" y2="12" />
+            <line x1="12" x2="12" y1="2" y2="5" />
+            <line x1="12" x2="12" y1="19" y2="22" />
+            <circle cx="12" cy="12" r="7" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
         </button>
         <div class="popover"></div>
       </div>

public/icon.svg

@@ -17,7 +17,9 @@ const LOCATE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="
 class Workout {
   id = (Date.now() + '').slice(-10);
   date = new Date();
-  workoutDate;
+  formattedDate;
+  cardTitle;
+  popupTitle;
   clicks = 0;
   /**
     * @param {number} distance
@@ -28,7 +30,11 @@ class Workout {
     this.distance = distance;
     this.duration = duration;
     this.coords = coords;
+    this.calcDate();
+    this.setPopupTitle();
+    this.setCardTitle();
   }
+
   calcDate() {
     const months = [
       'January',
@@ -44,7 +50,13 @@ class Workout {
       'November',
       'December',
     ];
-    this.workoutDate = `${this.distance}km, ${this.duration}m - ${months[this.date.getMonth()]} ${this.date.getDate()}, ${this.date.getFullYear()}`;
+    this.formattedDate = `${months[this.date.getMonth()]} ${this.date.getDate()}, ${this.date.getFullYear()}`;
+  }
+  setPopupTitle() {
+    this.popupTitle = `${this.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'}${this.distance}km in ${this.duration}min — ${this.formattedDate}`
+  }
+  setCardTitle() {
+    this.cardTitle = `${this.type === 'running' ? 'Running' : 'Cycling'} on ${this.formattedDate}`
   }
   addClick() {
     this.clicks++;
@@ -57,7 +69,6 @@ class Running extends Workout {
     super(distance, duration, coords);
     this.cadence = cadence;
     this.calcPace();
-    this.calcDate();
   }
 
   calcPace() {
@@ -71,7 +82,6 @@ class Cycling extends Workout {
     super(distance, duration, coords);
     this.elevationGain = elevationGain;
     this.calcSpeed();
-    this.calcDate();
   }
 
   calcSpeed() {
@@ -268,16 +278,14 @@ class App {
       .addTo(this.#map)
       .bindPopup(
         L.popup({
-          maxWidth: 250,
+          maxWidth: 300,
           minWidth: 100,
           autoClose: false,
           closeOnClick: false,
           className: `${workout.type}-popup`,
         })
       )
-      .setPopupContent(
-        `${workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'}${workout.workoutDate}`
-      )
+      .setPopupContent(workout.popupTitle)
       .openPopup();
   }
 
@@ -295,16 +303,14 @@ class App {
         className: `${workout.type}-popup`,
       })
     )
-      .setPopupContent(
-        `${workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'}${workout.workoutDate}`
-      )
+      .setPopupContent(workout.popupTitle)
       .openPopup();
   }
 
   _renderWorkout(workout) {
     let html = `
         <li class="workout workout--${workout.type}" data-id="${workout.id}">
-          <h2 class="workout__title">${workout.workoutDate}</h2>
+          <h2 class="workout__title">${workout.cardTitle}</h2>
           <div class="workout__details">
             <span class="workout__icon">${workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'
       }</span>