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

fix(sw-350): Fixed styling issues and error modal issue

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-01 12:51:08 +01:00
parent 6ffee458dc
commit f4d924e45f
5 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -80,7 +80,7 @@ export default function MobileToggleButton({
{!locationAndDateIsSet && (
<>
<div>
<Caption color="red">
<Caption type="bold" color="red">
{intl.formatMessage({ id: "Where to" })}
</Caption>
<Body color="uiTextPlaceholder">
@@ -91,7 +91,7 @@ export default function MobileToggleButton({
</div>
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div>
<Caption color="red">
<Caption type="bold" color="red">
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }

1
components/DatePicker/date-picker.module.css
View File

@@ -14,6 +14,7 @@
outline: none;
padding: 0;
width: 100%;
text-align: left;
}
.body {

10
components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
View File

@@ -29,17 +29,23 @@ export default function SearchList({
}: SearchListProps) {
const intl = useIntl()
const [hasMounted, setHasMounted] = useState(false)
const [isFormSubmitted, setIsFormSubmitted] = useState(false)
const {
clearErrors,
formState: { errors },
formState: { errors, isSubmitted },
} = useFormContext()
const searchError = errors["search"]
useEffect(() => {
setIsFormSubmitted(isSubmitted) // Update form submission state
}, [isSubmitted])
useEffect(() => {
let timeoutID: ReturnType<typeof setTimeout> | null = null
if (searchError && searchError.message === "Required") {
timeoutID = setTimeout(() => {
clearErrors("search")
setIsFormSubmitted(false)
// magic number originates from animation
// 5000ms delay + 120ms exectuion
}, 5120)
@@ -60,7 +66,7 @@ export default function SearchList({
return null
}
if (searchError) {
if (searchError && isFormSubmitted) {
if (typeof searchError.message === "string") {
if (!isOpen) {
if (searchError.message === "Required") {

6
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -128,7 +128,11 @@ export default function Search({ locations }: SearchProps) {
}) => (
<div className={styles.container}>
<label {...getLabelProps({ htmlFor: name })} className={styles.label}>
<Caption color={isOpen ? "uiTextActive" : "red"} asChild>
<Caption
type="bold"
color={isOpen ? "uiTextActive" : "red"}
asChild
>
<span>
{state.searchData?.type === "hotels"
? state.searchData?.relationships?.city?.name

1
components/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -27,6 +27,7 @@
outline: none;
padding: 0;
width: 100%;
text-align: left;
}
.body {
opacity: 0.8;