chore(profile): design & layout adjustments

src/components/PlayerProfileView/ProfileHistoryList.vue

@@ -4,7 +4,7 @@
       <div class="history-menu">
         <button
           v-for="(filterState, filterKey) in activeFilterTypes"
-          class="menu-btn"
+          class="menu-btn btn--option"
           :data-active="filterState"
           @click="toggleFilter(filterKey)"
         >
@@ -79,7 +79,8 @@
           {{ ' ' }}
           <b>{{ entry.value.route.replace('|', ' > ') }}</b>
           {{ ' ' }}
-          <b>({{ entry.value.currentDistance }} km / {{ entry.value.routeDistance }} km) </b>
+          <b class="text--primary">{{ entry.value.currentDistance }} km</b>
+          <b> / {{ entry.value.routeDistance }} km</b>
         </div>
 
         <!-- Dispatchers -->
@@ -223,12 +224,9 @@ async function fetchPlayerJournal() {
 .list-header {
   position: sticky;
   top: 0;
-  background-color: var(--clr-bg);
-  padding-bottom: 0.5em;
 
   & > h3 {
     padding: 0.5em;
-    background-color: var(--clr-tile);
     margin-bottom: 0.5em;
   }
 }
@@ -237,26 +235,22 @@ async function fetchPlayerJournal() {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1em;
-  padding: 1px;
+  padding: 0.5em;
+  background-color: var(--clr-tile);
 }
 
 .menu-btn {
-  background-color: var(--clr-tile);
   padding: 0.5em;
   font-weight: bold;
   color: #aaa;
 
-  &:hover {
-    background-color: #2b2b2b;
-  }
-
   &[data-active='true'] {
     color: var(--clr-success);
   }
 }
 
 .history-list-box {
-  padding: 0.25em;
+  padding: 0 0.5em;
 }
 
 .history-list-box > a {
@@ -264,11 +258,15 @@ async function fetchPlayerJournal() {
   flex-direction: column;
   gap: 0.25em;
 
-  background-color: var(--clr-tile);
+  background-color: var(--clr-bg-light);
   padding: 0.5em;
 
   margin-bottom: 0.5em;
   text-align: initial;
+
+  &:hover {
+    background-color: #333;
+  }
 }
 
 .entry-top-date {

src/components/PlayerProfileView/ProfileRecentStats.vue

@@ -1,6 +1,9 @@
 <template>
   <section class="profile-recent-stats">
-    <h3 class="stats-header">{{ t('profile.recent-stats.header') }}</h3>
+    <h2 class="stats-header">
+      <img src="/images/icon-stats.svg" width="30" alt="stats icon" />
+      {{ t('profile.recent-stats.header') }}
+    </h2>
 
     <div class="month-stats-box">
       <div class="month-stat">
@@ -67,19 +70,22 @@ defineProps({
 }
 
 .stats-header {
-  padding: 0.5em;
+  padding: 1em;
-  background-color: var(--clr-tile);
+
-  margin-bottom: 0.5em;
+  img {
+    vertical-align: text-bottom;
+  }
 }
 
 .month-stats-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.5em;
+  padding: 0.5em;
 }
 
 .month-stat {
-  background-color: var(--clr-tile);
+  background-color: var(--clr-bg-light);
   border-radius: 0.5em;
   padding: 0.5em;
 

src/components/PlayerProfileView/ProfileSummary.vue

@@ -326,7 +326,7 @@ const activeTrains = computed(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5em;
+  gap: 0.25em;
 }
 
 .info-activity {

src/styles/_global.scss

@@ -9,6 +9,7 @@
   --clr-bg2: #1b1b1b;
   --clr-bg3: #1d1d1d;
   --clr-view-bg: #1a1a1a;
+  --clr-bg-light: #2b2b2b;
 
   --clr-tile: #181818;
 

src/views/PlayerProfileView.vue

@@ -188,6 +188,8 @@ async function fetchPlayerTD2Info(playerName: string) {
   grid-template-rows: auto 1fr;
   gap: 0.5em;
   overflow: auto;
+  background-color: var(--clr-tile);
+  border-radius: 0.5em;
 }
 
 @include responsive.midScreen {