From ec2d0a89ba4f69c659d7f7cf61dce7afe52acbe6 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Wed, 1 Dec 2021 20:26:25 +0530
Subject: [PATCH] Bugfix/event types buggy view on tablet (#1238)

---
 components/Shell.tsx        | 48 +++++++++++++++++++++++++++++++++++--
 pages/event-types/index.tsx |  4 ++--
 public/cal-com-icon.svg     |  1 +
 3 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 public/cal-com-icon.svg

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 0c637e6553..0ae6a99b1a 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -196,8 +196,8 @@ export default function Shell(props: {
       </div>
 
       <div className="flex h-screen overflow-hidden bg-gray-100">
-        <div className="hidden md:flex md:flex-shrink-0">
-          <div className="flex flex-col w-56">
+        <div className="hidden lg:flex lg:flex-shrink-0">
+          <div className="flex flex-col w-14 lg:w-56">
             <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
               <div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
                 <Link href="/event-types">
@@ -236,6 +236,50 @@ export default function Shell(props: {
             </div>
           </div>
         </div>
+        <div className="hidden md:flex md:flex-shrink-0 lg:hidden">
+          <div className="flex flex-col w-14 lg:w-56">
+            <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
+              <div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
+                <Link href="/event-types">
+                  <a className="px-2">
+                    {/* <Logo small /> */}
+                    <h1 className="inline p-2">
+                      <strong>
+                        <img className="w-auto h-10" alt="Cal" title="Cal" src="/cal-com-icon.svg" />
+                      </strong>
+                    </h1>
+                  </a>
+                </Link>
+                <nav className="flex-1 px-2 space-y-1 bg-white">
+                  {navigation.map((item) => (
+                    <Link key={item.name} href={item.href}>
+                      <a
+                        className={classNames(
+                          item.current
+                            ? "bg-neutral-100 text-neutral-900"
+                            : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
+                          "group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
+                        )}>
+                        <item.icon
+                          className={classNames(
+                            item.current
+                              ? "text-neutral-500"
+                              : "text-neutral-400 group-hover:text-neutral-500",
+                            "mr-3 flex-shrink-0 h-5 w-5"
+                          )}
+                          aria-hidden="true"
+                        />
+                      </a>
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+              <div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
+                <UserDropdown small />
+              </div>
+            </div>
+          </div>
+        </div>
 
         <div className="flex flex-col flex-1 w-0 overflow-hidden">
           <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]">
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 8632e90372..fe64b1f15c 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -124,7 +124,7 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                 "hover:bg-neutral-50 flex justify-between items-center ",
                 type.$disabled && "pointer-events-none"
               )}>
-              <div className="group flex items-center justify-between w-full px-4 py-4 sm:px-6 hover:bg-neutral-50">
+              <div className="flex items-center justify-between w-full px-4 py-4 group sm:px-6 hover:bg-neutral-50">
                 <button
                   className="absolute mb-8 left-1/2 -ml-4 sm:ml-0 sm:left-[19px] border hover:border-transparent text-gray-400 transition-all hover:text-black hover:shadow group-hover:scale-100 scale-0 w-7 h-7 p-1 invisible group-hover:visible bg-white rounded-full"
                   onClick={() => moveEventType(index, -1)}>
@@ -583,7 +583,7 @@ const CreateNewEventButton = ({ profiles, canAddEvents }: CreateEventTypeProps)
               </RadioArea.Group>
             </div>
           )}
-          <div className="mt-8 sm:flex sm:flex-row-reverse gap-x-2">
+          <div className="flex flex-row-reverse mt-8 gap-x-2">
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
diff --git a/public/cal-com-icon.svg b/public/cal-com-icon.svg
new file mode 100644
index 0000000000..ad98cd7461
--- /dev/null
+++ b/public/cal-com-icon.svg
@@ -0,0 +1 @@
+<svg width="56" height="56" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="56" height="56" rx="12" fill="#292929"/><path d="M18.628 36.781c2.846 0 4.946-1.096 6.183-2.59l-2.38-2.03c-.957 1.05-2.147 1.587-3.733 1.587-3.22 0-5.204-2.427-5.204-5.413 0-2.987 1.984-5.46 5.134-5.46 1.47 0 2.683.513 3.663 1.54l2.31-2.007c-1.47-1.75-3.313-2.567-5.973-2.567-5.04 0-8.517 3.803-8.517 8.493 0 4.667 3.663 8.447 8.517 8.447ZM31.69 36.781c2.17 0 3.267-.91 3.92-2.286v1.983h3.057V24.344H35.54v1.914c-.653-1.307-1.75-2.17-3.85-2.17-3.337 0-5.997 2.87-5.997 6.37s2.66 6.323 5.997 6.323Zm-2.847-6.346c0-1.89 1.354-3.5 3.36-3.5 2.077 0 3.407 1.633 3.407 3.523 0 1.89-1.33 3.477-3.407 3.477-2.006 0-3.36-1.657-3.36-3.5ZM41.472 36.478h3.15V19.444h-3.15v17.034Z" fill="#fff"/></svg>
\ No newline at end of file