more minor styling changes to booking

pull/427/head
Peer Richelsen 2021-08-08 17:46:21 +02:00
parent 425055fd36
commit d32d8ea4c3
2 changed files with 7 additions and 5 deletions

View File

@ -166,8 +166,10 @@ const DatePicker = ({
return selectedMonth ? ( return selectedMonth ? (
<div <div
className={ className={
"mt-8 sm:mt-0 " + "mt-8 sm:mt-0 min-w-[350px] " +
(selectedDate ? "sm:w-1/3 sm:border-r sm:dark:border-black sm:px-4" : "sm:w-1/2 sm:pl-4") (selectedDate
? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-black sm:pl-4 sm:pr-6"
: "sm:w-1/2 sm:pl-4")
}> }>
<div className="flex text-gray-600 font-light text-xl mb-4 ml-2"> <div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
<span className="w-1/2 text-gray-600 dark:text-white"> <span className="w-1/2 text-gray-600 dark:text-white">
@ -191,7 +193,7 @@ const DatePicker = ({
</button> </button>
</div> </div>
</div> </div>
<div className="grid grid-cols-7 gap-y-4 text-center"> <div className="grid grid-cols-7 gap-4 text-center">
{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
.sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0)) .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
.map((weekDay) => ( .map((weekDay) => (

View File

@ -129,7 +129,7 @@ export default function Type(props): Type {
<main <main
className={ className={
"mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " + "mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " +
(selectedDate ? "max-w-6xl" : "max-w-3xl") (selectedDate ? "max-w-5xl" : "max-w-3xl")
}> }>
<div className="dark:bg-neutral-900 bg-white border border-gray-200 rounded-sm dark:border-0"> <div className="dark:bg-neutral-900 bg-white border border-gray-200 rounded-sm dark:border-0">
<div className="sm:flex px-4 py-5 sm:p-4"> <div className="sm:flex px-4 py-5 sm:p-4">
@ -148,7 +148,7 @@ export default function Type(props): Type {
</p> </p>
<Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}> <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
<Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2"> <Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2 text-left min-w-32 ">
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{timeZone()} {timeZone()}
{isTimeOptionsOpen ? ( {isTimeOptionsOpen ? (