scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-240): add basic styling

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-13 14:13:02 +02:00
parent a3602b285b
commit 8c339fa593
10 changed files with 125 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
View File

@@ -40,12 +40,7 @@ export default async function SelectHotelPage({
zoomLevel={11}
mapType="roadmap"
/>
<Link
className={styles.link}
color="burgundy"
variant="underscored"
href="#"
>
<Link className={styles.link} color="burgundy" href="#">
{intl.formatMessage({ id: "Show map" })}
<ChevronRightIcon color="burgundy" className={styles.icon} />
</Link>

30
components/BookingWidget/bookingWidget.module.css
View File

@@ -1,29 +1,55 @@
.container {
border-top: 1px solid var(--Base-Border-Subtle);
/* display: none; */
}
.form {
display: flex;
justify-content: space-between;
max-width: 1432px;
padding: var(--Spacing-x2) var(--Spacing-x5);
}
.input {
display: flex;
gap: var(--Spacing-x2);
width: 100%;
max-width: 1250px;
}
.button {
width: 118px;
justify-content: center;
}
.bodyFontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}
.where {
width: 100%;
max-width: 280px;
height: 100%;
max-height: 46px;
}
.when {
.when,
.rooms {
width: 100%;
max-width: 240px;
}
.vouchers {
width: 100%;
max-width: 200px;
}
.options {
display: flex;
flex-direction: column;
width: 100%;
max-width: 158px;
}
/**
* Update the styles after mobile UX is ready
*/

71
components/BookingWidget/index.tsx
View File

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import Button from "../TempDesignSystem/Button"
import Body from "../TempDesignSystem/Text/Body"
import { bookingWidgetSchema } from "./schema"
import styles from "./bookingWidget.module.css"
@@ -13,7 +14,7 @@ import styles from "./bookingWidget.module.css"
import { type BookingWidgetSchema } from "@/types/components/bookingWidget"
export function BookingWidget() {
const { formatMessage } = useIntl()
const intl = useIntl()
const methods = useForm<BookingWidgetSchema>({
defaultValues: {
@@ -54,17 +55,75 @@ export function BookingWidget() {
<FormProvider {...methods}>
<div className={styles.input}>
<div className={styles.where}>
{formatMessage({ id: "Where to" })}
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Where to" })}
</Body>
</div>
<div className={styles.when}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "When" })}
</Body>
</div>
<div className={styles.when}>{formatMessage({ id: "When" })}</div>
<div className={styles.rooms}>
{formatMessage({ id: "Rooms & Guests" })}
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Rooms & Guests" })}
</Body>
</div>
<div className={styles.vouchers}>
{formatMessage({ id: "Booking codes and vouchers" })}
<Body
color="textMediumContrast"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Booking codes and vouchers" })}
</Body>
</div>
<div className={styles.options}>
<div>
<Body
color="textMediumContrast"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Use bonus cheque" })}
</Body>
</div>
<div>
<Body
color="textMediumContrast"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Book reward night" })}
</Body>
</div>
</div>
</div>
<Button type="submit">Search</Button>
<Button
type="submit"
size="small"
theme="base"
intent="primary"
className={styles.button}
>
<Body
color="white"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Find hotels" })}
</Body>
</Button>
</FormProvider>
</form>
</div>

2
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -63,7 +63,7 @@
}
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
color: var(--UI-Text-Medium-contrast);
}
.white {

6
i18n/dictionaries/da.json
View File

@@ -138,5 +138,9 @@
"Where to": "Hvorhen",
"When": "Hvornår",
"Rooms & Guests": "Værelser & gæster",
"Booking codes and vouchers": "Bestillingskoder og værdibeviser"
"Booking codes and vouchers": "Bestillingskoder og værdibeviser",
"Add code": "Tilføj kode",
"Use bonus cheque": "Brug bonuscheck",
"Book reward night": "Book belønningsaften",
"Find hotels": "Find hoteller"
}

6
i18n/dictionaries/de.json
View File

@@ -132,5 +132,9 @@
"Where to": "Wohin",
"When": "Wann",
"Rooms & Guests": "Zimmer & Gäste",
"Booking codes and vouchers": "Buchungscodes und Gutscheine"
"Booking codes and vouchers": "Buchungscodes und Gutscheine",
"Add code": "Code hinzufügen",
"Use bonus cheque": "Bonusscheck nutzen",
"Book reward night": "Bonusnacht buchen",
"Find hotels": "Hotels finden"
}

6
i18n/dictionaries/en.json
View File

@@ -143,5 +143,9 @@
"Where to": "Where to",
"When": "When",
"Rooms & Guests": "Rooms & Guests",
"Booking codes and vouchers": "Booking codes and vouchers"
"Booking codes and vouchers": "Booking codes and vouchers",
"Add code": "Add code",
"Use bonus cheque": "Use bonus cheque",
"Book reward night": "Book reward night",
"Find hotels": "Find hotels"
}

6
i18n/dictionaries/fi.json
View File

@@ -138,5 +138,9 @@
"Where to": "Minne",
"When": "Kun",
"Rooms & Guestss": "Huoneet & Vieraat",
"Booking codes and vouchers": "Varauskoodit ja kupongit"
"Booking codes and vouchers": "Varauskoodit ja kupongit",
"Add code": "Lisää koodi",
"Use bonus cheque": "Käytä bonussekkiä",
"Book reward night": "Kirjapalkinto-ilta",
"Find hotels": "Etsi hotelleja"
}

6
i18n/dictionaries/no.json
View File

@@ -138,5 +138,9 @@
"Where to": "Hvor skal du",
"When": "Når",
"Rooms & Guests": "Rom og gjester",
"Booking codes and vouchers": "Bestillingskoder og kuponger"
"Booking codes and vouchers": "Bestillingskoder og kuponger",
"Add code": "Legg til kode",
"Use bonus cheque": "Bruk bonussjekk",
"Book reward night": "Bestill belønningskveld",
"Find hotels": "Finn hotell"
}

6
i18n/dictionaries/sv.json
View File

@@ -140,5 +140,9 @@
"Where to": "Vart",
"When": "När",
"Rooms & Guests": "Rum och gäster",
"Booking codes and vouchers": "Bokningskoder och kuponger"
"Booking codes and vouchers": "Bokningskoder och kuponger",
"Add code": "Add code",
"Use bonus cheque": "Use bonus cheque",
"Book reward night": "Book reward night",
"Find hotels": "Hitta hotell"
}