mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

added border to date picker days on mobile

Browse source
This commit is contained in:
Peer Richelsen 2021-08-12 16:29:48 +02:00
parent 7b2b75c25c
commit 1dc6ae1d26
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/booking/DatePicker.tsx
View file

@ -166,9 +166,9 @@ const DatePicker = ({
return selectedMonth ? ( return selectedMonth ? (
<div <div
className={ className={
"mt-8 sm:mt-0 sm:min-w-[430px]" + "mt-8 sm:mt-0 sm:min-w-[460px]" +
(selectedDate (selectedDate
? "w-full sm:min-w-[455px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-4" ? "w-full sm:min-w-[465px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-4"
: "sm:w-1/2 sm:pl-4") : "sm:w-1/2 sm:pl-4")
}> }>
<div className="flex text-gray-600 font-light text-xl mb-4"> <div className="flex text-gray-600 font-light text-xl mb-4">
@ -193,16 +193,16 @@ const DatePicker = ({
</button> </button>
</div> </div>
</div> </div>
<div className="grid grid-cols-7 gap-2 sm:gap-1 text-center"> <div className="grid grid-cols-7 gap-4 text-center border-b border-t sm:border-0">
{["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) => (
<div key={weekDay} className="uppercase text-gray-500 text-xs tracking-widest my-2"> <div key={weekDay} className="uppercase text-gray-500 text-xs tracking-widest my-4">
{weekDay} {weekDay}
</div> </div>
))} ))}
{calendar}
</div> </div>
<div className="grid grid-cols-7 gap-y-2 gap-x-4 text-center">{calendar}</div>
</div> </div>
) : null; ) : null;
}; };

2
components/booking/TimeOptions.tsx
View file

@ -25,7 +25,7 @@ const TimeOptions = (props) => {
return ( return (
selectedTimeZone !== "" && ( selectedTimeZone !== "" && (
<div className="absolute w-full max-w-80 rounded-sm border border-gray-200 dark:bg-gray-700 dark:border-0 bg-white px-4 py-2"> <div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 dark:bg-gray-700 dark:border-0 bg-white px-4 py-2">
<div className="flex mb-4"> <div className="flex mb-4">
<div className="w-1/2 dark:text-white text-gray-600 font-medium">Time Options</div> <div className="w-1/2 dark:text-white text-gray-600 font-medium">Time Options</div>
<div className="w-1/2"> <div className="w-1/2">