From 03e69b315cb89c6e0161a9f5b68bcb25d7141abb Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 18 Feb 2026 02:14:30 +0100
Subject: [PATCH] chore(profile): design & layout adjustments

---
 .../PlayerProfileView/ProfileHistoryList.vue  | 24 +++++++++----------
 .../PlayerProfileView/ProfileRecentStats.vue  | 16 +++++++++----
 .../PlayerProfileView/ProfileSummary.vue      |  2 +-
 src/styles/_global.scss                       |  1 +
 src/views/PlayerProfileView.vue               |  2 ++
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/PlayerProfileView/ProfileHistoryList.vue b/src/components/PlayerProfileView/ProfileHistoryList.vue
index 1975539..3e5a27a 100644
--- a/src/components/PlayerProfileView/ProfileHistoryList.vue
+++ b/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 {
diff --git a/src/components/PlayerProfileView/ProfileRecentStats.vue b/src/components/PlayerProfileView/ProfileRecentStats.vue
index d65c0f6..21610f5 100644
--- a/src/components/PlayerProfileView/ProfileRecentStats.vue
+++ b/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;
-  background-color: var(--clr-tile);
-  margin-bottom: 0.5em;
+  padding: 1em;
+
+  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;
 
diff --git a/src/components/PlayerProfileView/ProfileSummary.vue b/src/components/PlayerProfileView/ProfileSummary.vue
index d9879b1..93ff7cf 100644
--- a/src/components/PlayerProfileView/ProfileSummary.vue
+++ b/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 {
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index fbd3956..18bc92e 100644
--- a/src/styles/_global.scss
+++ b/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;
 
diff --git a/src/views/PlayerProfileView.vue b/src/views/PlayerProfileView.vue
index bad9a52..702779e 100644
--- a/src/views/PlayerProfileView.vue
+++ b/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 {