another booking page design revision

components/booking/DatePicker.tsx

@@ -147,14 +147,14 @@ const DatePicker = ({
           onClick={() => setSelectedDate(inviteeDate.date(day))}
           disabled={isDisabled(day)}
           className={
-            "text-center w-10 h-10 mx-auto hover:border hover:border-black dark:hover:border-white" +
+            "text-center w-14 h-14 mx-auto hover:border hover:border-black dark:hover:border-white" +
             (isDisabled(day)
               ? " text-gray-400 font-light hover:border-0 cursor-default"
               : " dark:text-white text-primary-500 font-medium") +
             (selectedDate && selectedDate.isSame(inviteeDate.date(day), "day")
               ? " bg-black text-white-important"
               : !isDisabled(day)
-              ? " bg-gray-100 dark:bg-black dark:bg-opacity-30"
+              ? " bg-gray-100 dark:bg-gray-600"
               : "")
           }>
           {day}
@@ -166,12 +166,12 @@ const DatePicker = ({
   return selectedMonth ? (
     <div
       className={
-        "mt-8 sm:mt-0 min-w-[350px] " +
+        "mt-8 sm:mt-0 sm:min-w-[430px]" +
         (selectedDate
-          ? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-black sm:pl-4 sm:pr-6"
+          ? "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"
           : "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">
         <span className="w-1/2 text-gray-600 dark:text-white">
           <strong className="text-gray-900 dark:text-white">
             {dayjs().month(selectedMonth).format("MMMM")}
@@ -193,11 +193,11 @@ const DatePicker = ({
           </button>
         </div>
       </div>
-      <div className="grid grid-cols-7 gap-4 text-center">
+      <div className="grid grid-cols-7 gap-2 sm:gap-1 text-center">
         {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
           .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
           .map((weekDay) => (
-            <div key={weekDay} className="uppercase text-gray-400 text-xs tracking-widest">
+            <div key={weekDay} className="uppercase text-gray-500 text-xs tracking-widest my-2">
               {weekDay}
             </div>
           ))}

pages/[user]/[type].tsx

@@ -128,14 +128,33 @@ export default function Type(props): Type {
         </Head>
         <main
           className={
-            "mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " +
+            "mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
             (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="sm:dark:border-gray-600 dark:bg-gray-900 bg-white md:border border-gray-200 rounded-sm">
-            <div className="sm:flex px-4 py-5 sm:p-4">
+            {/* mobile: details */}
+            <div className="p-4 sm:p-8 block md:hidden">
+              <div className="flex items-center">
+                <Avatar user={props.user} className="inline-block h-9 w-9 rounded-full" />
+                <div className="ml-3">
+                  <p className="text-sm font-medium dark:text-gray-300 text-black">{props.user.name}</p>
+                  <div className="flex gap-2 text-xs font-medium text-gray-600">
+                    {props.eventType.title}
+                    <div>
+                      <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
+                      {props.eventType.length} minutes
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <p className="dark:text-gray-200 text-gray-600 mt-3">{props.eventType.description}</p>
+            </div>
+
+            <div className="sm:flex px-4 sm:py-5 sm:p-4">
               <div
                 className={
-                  "pr-8 sm:border-r sm:dark:border-black " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
+                  "hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
+                  (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
                 }>
                 <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
                 <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
@@ -147,23 +166,7 @@ export default function Type(props): Type {
                   {props.eventType.length} minutes
                 </p>
 
-                <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+                <TimezoneDropdown />
-                  <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" />
-                    {timeZone()}
-                    {isTimeOptionsOpen ? (
-                      <ChevronUpIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
-                    ) : (
-                      <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
-                    )}
-                  </Collapsible.Trigger>
-                  <Collapsible.Content>
-                    <TimeOptions
-                      onSelectTimeZone={handleSelectTimeZone}
-                      onToggle24hClock={handleToggle24hClock}
-                    />
-                  </Collapsible.Content>
-                </Collapsible.Root>
 
                 <p className="dark:text-gray-200 text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
               </div>
@@ -182,6 +185,11 @@ export default function Type(props): Type {
                 eventLength={props.eventType.length}
                 minimumBookingNotice={props.eventType.minimumBookingNotice}
               />
+
+              <div className="ml-1 mt-4 block sm:hidden">
+                <TimezoneDropdown />
+              </div>
+
               {selectedDate && (
                 <AvailableTimes
                   workingHours={props.workingHours}
@@ -201,6 +209,25 @@ export default function Type(props): Type {
       </div>
     )
   );
+
+  function TimezoneDropdown() {
+    return (
+      <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+        <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" />
+          {timeZone()}
+          {isTimeOptionsOpen ? (
+            <ChevronUpIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
+          ) : (
+            <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
+          )}
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
+        </Collapsible.Content>
+      </Collapsible.Root>
+    );
+  }
 }
 
 export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {

tailwind.config.js

@@ -5,6 +5,19 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        black: "#111111",
+        gray: {
+          50: "#F8F8F8",
+          100: "#F5F5F5",
+          200: "#E1E1E1",
+          300: "#CFCFCF",
+          400: "#ACACAC",
+          500: "#888888",
+          600: "#494949",
+          700: "#3E3E3E",
+          800: "#313131",
+          900: "#292929",
+        },
         neutral: {
           50: "#F7F8F9",
           100: "#F4F5F6",