Merged in fix/SW-2367-mobile-ui-correction- (pull request #2603)

Fix/SW-2367 mobile ui correction

* fix(SW-2367): UI updates

* fix(SW-2367): Optimised code


Approved-by: Bianca Widstam
This commit is contained in:
Hrishikesh Vaipurkar
2025-08-07 13:00:11 +00:00
parent 271d5ec32c
commit 6dd95d4a4a
10 changed files with 31 additions and 36 deletions

View File

@@ -17,7 +17,6 @@
} }
.termsText:nth-child(n) { .termsText:nth-child(n) {
display: flex; display: flex;
align-items: center;
margin-bottom: var(--Space-x1); margin-bottom: var(--Space-x1);
} }

View File

@@ -87,7 +87,7 @@
color: var(--Component-Button-Brand-Secondary-On-fill-Default); color: var(--Component-Button-Brand-Secondary-On-fill-Default);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 1367px) {
.bottomSheet { .bottomSheet {
padding: var(--Space-x2) 0 var(--Space-x7); padding: var(--Space-x2) 0 var(--Space-x7);
} }

View File

@@ -18,7 +18,6 @@
.termsText:nth-child(n) { .termsText:nth-child(n) {
display: flex; display: flex;
align-items: center;
margin-bottom: var(--Space-x1); margin-bottom: var(--Space-x1);
} }

View File

@@ -2,8 +2,8 @@
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-radius-lg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Space-x2);
padding: var(--Spacing-x3); padding: var(--Space-x3);
height: 100%; height: 100%;
} }
@@ -25,32 +25,32 @@
.date { .date {
align-items: center; align-items: center;
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Space-x1);
justify-content: flex-start; justify-content: flex-start;
grid-area: date; grid-area: date;
} }
.link { .link {
margin-top: var(--Spacing-x1); margin-top: var(--Space-x1);
} }
.addOns { .addOns {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
overflow-y: auto; overflow-y: auto;
} }
.rateDetailsPopover { .rateDetailsPopover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
max-width: 360px; max-width: 360px;
} }
.entry { .entry {
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
justify-content: space-between; justify-content: space-between;
} }
.prices { .prices {
@@ -84,7 +84,7 @@
.total { .total {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Space-x2);
} }
.bottomDivider { .bottomDivider {
@@ -96,16 +96,15 @@
} }
.terms { .terms {
margin-top: var(--Spacing-x3); margin-top: var(--Space-x3);
margin-bottom: var(--Spacing-x3); margin-bottom: var(--Space-x3);
} }
.termsText:nth-child(n) { .termsText:nth-child(n) {
display: flex; display: flex;
align-items: center; margin-bottom: var(--Space-x1);
margin-bottom: var(--Spacing-x1);
} }
.terms .termsIcon { .terms .termsIcon {
margin-right: var(--Spacing-x1); margin-right: var(--Space-x1);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {

View File

@@ -1,19 +1,20 @@
.chequeCard { .chequeCard {
padding: var(--Spacing-x-one-and-half); padding: var(--Space-x15);
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
margin: 0; margin: 0;
width: 100%; width: 100%;
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
.chequeRow, .chequeRow,
.cheque { .cheque {
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
color: var(--Text-Default);
} }
.cheque { .cheque {

View File

@@ -1,5 +1,6 @@
.poinstRow { .poinstRow {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Space-x1);
align-items: baseline; align-items: baseline;
color: var(--Text-Default);
} }

View File

@@ -7,7 +7,6 @@
.term { .term {
display: flex; display: flex;
align-items: center;
gap: var(--Space-x1); gap: var(--Space-x1);
} }

View File

@@ -18,7 +18,6 @@
.termsText:nth-child(n) { .termsText:nth-child(n) {
display: flex; display: flex;
align-items: center;
margin-bottom: var(--Space-x1); margin-bottom: var(--Space-x1);
} }

View File

@@ -2,8 +2,8 @@
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-radius-lg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Space-x2);
padding: var(--Spacing-x3); padding: var(--Space-x3);
height: 100%; height: 100%;
} }
@@ -31,32 +31,32 @@
.date { .date {
align-items: center; align-items: center;
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Space-x1);
justify-content: flex-start; justify-content: flex-start;
grid-area: date; grid-area: date;
} }
.link { .link {
margin-top: var(--Spacing-x1); margin-top: var(--Space-x1);
} }
.addOns { .addOns {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-one-and-half); gap: var(--Space-x15);
overflow-y: auto; overflow-y: auto;
} }
.rateDetailsPopover { .rateDetailsPopover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
max-width: 360px; max-width: 360px;
} }
.entry { .entry {
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
justify-content: space-between; justify-content: space-between;
} }
@@ -67,7 +67,7 @@
.total { .total {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Space-x2);
} }
.bottomDivider { .bottomDivider {
@@ -79,16 +79,15 @@
} }
.terms { .terms {
margin-top: var(--Spacing-x3); margin-top: var(--Space-x3);
margin-bottom: var(--Spacing-x3); margin-bottom: var(--Space-x3);
} }
.termsText:nth-child(n) { .termsText:nth-child(n) {
display: flex; display: flex;
align-items: center; margin-bottom: var(--Space-x1);
margin-bottom: var(--Spacing-x1);
} }
.terms .termsIcon { .terms .termsIcon {
margin-right: var(--Spacing-x1); margin-right: var(--Space-x1);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {

View File

@@ -156,7 +156,6 @@ label:not(:has(.radio:checked)) .checkIcon {
.term { .term {
display: flex; display: flex;
align-items: center;
gap: var(--Space-x1); gap: var(--Space-x1);
} }