gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match Angular BoardDetailsHeader typography (18px/500), use $border and $blue-light tokens

Browse Source
This commit is contained in:
Anton
2026-04-20 03:23:08 +03:00
parent 1156dd6f90
commit 0782674140
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
+28 -11
View File
@@ -55,14 +55,31 @@
}
}
// Mirrors Angular's detail-header-badge-flight-number:
// font-weight: $font-medium (500), font-size: $font-size-xl (18px).
// React previously used 28px / 600 which read as a page title and
// dwarfed the logo in the adjacent column.
.details-header-badge {
display: flex;
align-items: center;
gap: 24px;
gap: 10px; // Angular h-spacing($space-m) between flight number + logo
&__flight-number { display: flex; flex-direction: column; }
&__primary { font-size: 28px; font-weight: 600; color: #1a3a5c; }
&__codesharing { font-size: 12px; color: #666; margin-top: 2px; }
&__flight-number {
display: flex;
flex-direction: column;
font-weight: 500;
font-size: 18px;
}
&__primary {
font-size: 18px;
font-weight: 500;
color: colors.$text-color;
}
&__codesharing {
font-size: 12px;
color: colors.$light-gray;
margin-top: 2px;
}
&__airline {
display: flex;
@@ -87,7 +104,7 @@
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid #ddd;
border: 1px solid colors.$border;
border-radius: 14px;
height: 28px;
font-size: 12px;
@@ -99,10 +116,10 @@
align-items: center;
gap: 6px;
font-size: 12px;
color: #333;
color: colors.$text-color;
&__description { font-size: 12px; color: #333; }
&__time { font-size: 12px; color: #333; }
&__description { font-size: 12px; color: colors.$text-color; }
&__time { font-size: 12px; color: colors.$text-color; }
.share-button-wrap {
@media (min-width: 769px) { display: none; }
@@ -117,7 +134,7 @@
top: 100%;
right: 0;
background: #fff;
border: 1px solid #b8d4f1;
border: 1px solid colors.$border-blue;
border-radius: 3px;
padding: 20px;
box-shadow: 0 2px 2px rgba(177, 177, 177, 0.15);
@@ -139,7 +156,7 @@
align-items: center;
text-align: center;
font-size: 10px;
color: #1a3a5c;
color: colors.$blue;
width: 60px;
height: 55px;
padding-top: 32px;
@@ -149,7 +166,7 @@
cursor: pointer;
transition: color 0.2s;
&:hover { color: #2060c0; }
&:hover { color: colors.$blue-light; }
&.facebook { background-image: url('/assets/img/share/facebook.svg'); }
&.vk { background-image: url('/assets/img/share/vk.svg'); }