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

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

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

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

@@ -29,17 +29,23 @@ export default function SearchList({
}: SearchListProps) { }: SearchListProps) {
const intl = useIntl() const intl = useIntl()
const [hasMounted, setHasMounted] = useState(false) const [hasMounted, setHasMounted] = useState(false)
const [isFormSubmitted, setIsFormSubmitted] = useState(false)
const { const {
clearErrors, clearErrors,
formState: { errors }, formState: { errors, isSubmitted },
} = useFormContext() } = useFormContext()
const searchError = errors["search"] const searchError = errors["search"]
useEffect(() => {
setIsFormSubmitted(isSubmitted) // Update form submission state
}, [isSubmitted])
useEffect(() => { useEffect(() => {
let timeoutID: ReturnType<typeof setTimeout> | null = null let timeoutID: ReturnType<typeof setTimeout> | null = null
if (searchError && searchError.message === "Required") { if (searchError && searchError.message === "Required") {
timeoutID = setTimeout(() => { timeoutID = setTimeout(() => {
clearErrors("search") clearErrors("search")
setIsFormSubmitted(false)
// magic number originates from animation // magic number originates from animation
// 5000ms delay + 120ms exectuion // 5000ms delay + 120ms exectuion
}, 5120) }, 5120)
@@ -60,7 +66,7 @@ export default function SearchList({
return null return null
} }
if (searchError) { if (searchError && isFormSubmitted) {
if (typeof searchError.message === "string") { if (typeof searchError.message === "string") {
if (!isOpen) { if (!isOpen) {
if (searchError.message === "Required") { 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}> <div className={styles.container}>
<label {...getLabelProps({ htmlFor: name })} className={styles.label}> <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
<Caption color={isOpen ? "uiTextActive" : "red"} asChild> <Caption
type="bold"
color={isOpen ? "uiTextActive" : "red"}
asChild
>
<span> <span>
{state.searchData?.type === "hotels" {state.searchData?.type === "hotels"
? state.searchData?.relationships?.city?.name ? state.searchData?.relationships?.city?.name

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

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