From 928d072577aa9c3dfc57489050b0fe2b1ee0c5fb Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 05:14:11 +0300
Subject: [PATCH] Align DetailsBackButton to Angular: left-aligned label,
 $button-height, tokens

---
 .../DetailsBackButton/DetailsBackButton.scss  | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/features/online-board/components/DetailsBackButton/DetailsBackButton.scss b/src/features/online-board/components/DetailsBackButton/DetailsBackButton.scss
index 1b25873a..e8e77963 100644
--- a/src/features/online-board/components/DetailsBackButton/DetailsBackButton.scss
+++ b/src/features/online-board/components/DetailsBackButton/DetailsBackButton.scss
@@ -1,29 +1,34 @@
+@use "../../../../styles/colors" as colors;
+@use "../../../../styles/variables" as vars;
+
 // Angular renders the back link as a full-width solid button above the
 // flights mini-list — same 285px column, blue fill, white text, 48px
-// tall. Match that.
+// tall, LEFT-aligned label (Angular's `.details-back .p-button-label`
+// sets `text-align: left` and the chevron sits on the left with a 15px
+// margin).
 .details-back-button {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
+  justify-content: flex-start;
+  gap: vars.$space-m;
   width: 100%;
-  min-height: 48px;
-  padding: 12px 16px;
-  background: #4a90e2;
-  color: #fff;
-  border-radius: 3px;
+  height: vars.$button-height;
+  padding: 0 vars.$space-l;
+  background: colors.$blue-light;
+  color: colors.$white;
+  border-radius: vars.$border-radius;
   text-decoration: none;
   font-size: 14px;
   font-family: inherit;
   cursor: pointer;
 
   &:hover {
-    background: #3a7cc8;
-    color: #fff;
+    background: colors.$blue-light--hover;
+    color: colors.$white;
   }
 
   &__arrow {
     display: inline-block;
-    font-size: 16px;
+    font-size: 13px;
   }
 }