diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css index 5ed12af3c..e799b1f10 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css @@ -16,7 +16,7 @@ align-items: center; gap: var(--Spacing-x-half); position: relative; - color: var(--Text-Accent-Primary); + color: var(--Text-Secondary); } .errorContainer { @@ -107,13 +107,17 @@ } @media screen and (min-width: 1367px) { - .container:hover, - .container:focus-within, - .container:has([data-focused="true"], [data-pressed="true"]) { - background-color: var(--Base-Surface-Primary-light-Hover-alt); + .container:hover { + background-color: var(--Surface-Primary-Hover); border-radius: var(--Corner-radius-md); } - + .container:focus-within, + .container:has([data-focused="true"]), + .container:has([data-pressed="true"]) { + background-color: var(--Surface-Primary-Hover); + border-radius: var(--Corner-radius-md); + border: 1px solid var(--Border-Interactive-Focus); + } .bookingCodeRememberVisible { padding: var(--Spacing-x2); position: absolute; diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/input.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/input.module.css index ad59c2449..8f16ffcd6 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/input.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Input/input.module.css @@ -9,15 +9,15 @@ &:placeholder-shown::-webkit-search-cancel-button { display: none; - background-image: url("/_static/icons/close.svg"); + background-image: url("/_static/icons/cancel.svg"); } &:not(:placeholder-shown)::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; - background-image: url("/_static/icons/close.svg"); - height: 20px; - width: 20px; + background-image: url("/_static/icons/cancel.svg"); + height: 24px; + width: 24px; } } diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/button.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/button.module.css index 8538870f2..76025b0c5 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/button.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/button.module.css @@ -15,5 +15,5 @@ .active, .button:focus { - background-color: var(--Base-Surface-Primary-light-Hover-alt); + background-color: var(--Surface-Primary-Hover); } diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/listItem.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/listItem.module.css index 70fbcb01a..167f470ae 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/listItem.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/listItem.module.css @@ -9,5 +9,5 @@ } .active { - background-color: var(--Base-Surface-Primary-light-Hover-alt); + background-color: var(--Surface-Primary-Hover); } diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx index 9af7ed9c1..062be23ba 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx @@ -123,9 +123,7 @@ export function Search({ htmlFor: SEARCH_TERM_NAME, id: searchLabelId, })} - className={labelVariants({ - color: withSearchButton && isOpen ? "default" : "red", - })} + className={styles.label} > @@ -280,15 +278,3 @@ const clearButtonVariants = cva(styles.clearButton, { }, }, }) - -const labelVariants = cva(styles.label, { - variants: { - color: { - default: "", - red: styles.red, - }, - }, - defaultVariants: { - color: "default", - }, -}) diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css index 3f8fc8267..a22db9927 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/search.module.css @@ -2,7 +2,7 @@ border-color: transparent; border-style: solid; border-width: 1px; - border-radius: var(--Corner-radius-sm); + border-radius: var(--Corner-radius-md); padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); position: relative; height: 60px; @@ -17,27 +17,21 @@ &:hover, &:has(input:active, input:focus, input:focus-within) { - background-color: var(--Background-Primary); + background-color: var(--Surface-Primary-Hover); } &:has(input:active, input:focus, input:focus-within) { - border-color: 1px solid var(--UI-Input-Controls-Border-Focus); + border-color: 1px solid var(--Border-Interactive-Focus); } } .label { flex: 1; - &:has( - ~ .inputContainer input:active, - ~ .inputContainer input:focus, - ~ .inputContainer input:focus-within - ) - p { - color: var(--UI-Text-Active); - } - - &.red { - color: var(--Scandic-Brand-Scandic-Red); + color: var(--Text-Accent-Primary); + &:focus-within, + &:focus, + &:active { + color: var(--Text-Interactive-Focus); } } diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css index 3e1fefb73..4e2195a18 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css @@ -29,6 +29,10 @@ .label { color: var(--Text-Accent-Primary); } +.when:has([data-isopen="true"]) .label, +.rooms:has([data-focused="true"], [data-pressed="true"]) .label { + color: var(--Text-Interactive-Focus); +} @media screen and (max-width: 767px) { .voucherContainer { @@ -102,14 +106,17 @@ .rooms, .when { padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); - border-radius: var(--Corner-radius-sm); + border-radius: var(--Corner-radius-md); } .when:hover, - .rooms:hover, + .rooms:hover { + background-color: var(--Surface-Primary-Hover); + } .when:has([data-isopen="true"]), .rooms:has([data-focused="true"], [data-pressed="true"]) { - background-color: var(--Base-Surface-Primary-light-Hover-alt); + background-color: var(--Surface-Primary-Hover); + border: 1px solid var(--Border-Interactive-Focus); } .where { diff --git a/apps/scandic-web/public/_static/icons/cancel.svg b/apps/scandic-web/public/_static/icons/cancel.svg new file mode 100644 index 000000000..9b72e85a0 --- /dev/null +++ b/apps/scandic-web/public/_static/icons/cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file