f443bae46e
Feat/LOY-400 create spend points modal * feat(LOY-400): Added custom button to my pages overview and skeleton file to custom modal for my points. * feat(LOY-400): Added custom button to my pages overview and components for custom modal for my points. * feat(LOY-400): Changed some style and infogridcardover * feat(LOY-400):Removed custom card components and changed in infoCard: Added imagePosition top, added optional height prop. In Card: Changed Text-wrap styling, added min-width styling to buttons, added optional Icon prop, added optional height prop * feat(LOY-400):Added linkList, LinkListItem component and messageBanner component. Added granola illustration. * feat(LOY-400): Removed background in several illustrations. Added component for illustration. Fixed LinkedList and styling for UsePointsButton. * feat(LOY-400): Added modal to PointsToSpendCard and fixed UsePointsButton. * fix(LOY-400):added some styling * feat(LOY-400): Linked Modal to contentstack and fetch the data in cards with UsePointsModal for now * feat(LOY-400): changed link to aria-component, cleaned up a bit * feat(LOY-400): Changed height for larger modals in mobile, fixed zod schema for no illustration input, cleaned up * fix(LOY-400): fixed graphql after rebase * fix(LOY-400): mini fix * fix(LOY-400): fixed pr-comments * fix(LOY-400): fixed some PR-comments * fix(LOY-400): fixed a PR-comment * feat(LOY-400): added size prop to ilustration in LinkListItem to be able to use illustrations in IllustrationByIconName * fix(LOY-400): fixed pr-comments * Merged in feat/LOY-402-pre-ticked-book-reward-night-in-booking-flow (pull request #3210) Feat/LOY-402 pre ticked book reward night in booking flow * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * fix(LOY-402): fixed pr comments Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Anton Gunnarsson Approved-by: Matilda Landström * Merged in feat/LOY-404-add-tracking-for-spend-points-modal (pull request #3229) Feat/LOY-404 add tracking for spend points modal * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * feat(LOY-404): added tracking * fix(LOY-404): fix for session storage removal of bookNowFromPointsModal * feat(LOY-404): added consts * fix(LOY-404): moved foxusWidget const * fix(LOY-404): moved BOOKING_WIDGET_STATE const * fix(LOY-404):fix Approved-by: Matilda Landström * fix(LOY-400): some fixes * feat(LOY-400): created linkList storybook Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
122 lines
2.1 KiB
CSS
122 lines
2.1 KiB
CSS
.card {
|
|
background: var(--Surface-Brand-Primary-1-Default);
|
|
border-radius: var(--Corner-radius-lg);
|
|
padding: var(--Space-x3) var(--Space-x2);
|
|
position: relative;
|
|
min-height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x3);
|
|
}
|
|
|
|
.content {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: var(--Space-x3);
|
|
}
|
|
|
|
.textContent {
|
|
display: grid;
|
|
gap: var(--Space-x1);
|
|
align-self: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
.title {
|
|
color: var(--Text-Brand-OnPrimary-1-Heading);
|
|
}
|
|
|
|
.pointsContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--Space-x1);
|
|
}
|
|
|
|
.pointsValue {
|
|
color: var(--Text-Accent-Primary);
|
|
}
|
|
|
|
.pointsLabel {
|
|
color: var(--Text-Brand-OnPrimary-1-Heading);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.description {
|
|
margin-top: auto;
|
|
padding: var(--Space-x2);
|
|
border-radius: var(--Corner-radius-md);
|
|
background: var(--Surface-Primary-Default);
|
|
}
|
|
|
|
.descriptionText {
|
|
color: var(--Text-Brand-OnPrimary-1-Body);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.expiringPointsCard {
|
|
display: flex;
|
|
padding: var(--Space-x2);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: var(--Space-x1);
|
|
border-radius: var(--Corner-radius-md);
|
|
background: var(--Surface-Primary-Default);
|
|
}
|
|
|
|
.expiryDate {
|
|
color: var(--Text-Heading);
|
|
}
|
|
|
|
.pointsRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.expiringPoints {
|
|
margin: 0;
|
|
}
|
|
|
|
.sidePeekContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x2);
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
.usePointsButton {
|
|
margin-top: var(--Space-x2);
|
|
}
|
|
}
|
|
@media screen and (min-width: 768px) {
|
|
.content {
|
|
grid-template-columns: auto 1fr;
|
|
place-items: start;
|
|
}
|
|
|
|
.textContent {
|
|
justify-items: start;
|
|
}
|
|
|
|
.expiringPointsCard {
|
|
padding: var(--Space-x2) var(--Space-x4);
|
|
}
|
|
|
|
.description {
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
.usePointsButton {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
.card {
|
|
padding: var(--Space-x3) var(--Space-x4);
|
|
}
|
|
}
|