added a few desktop only improvements (#3725)

* added a few desktop only improvements

* added horizontal line

* fixed icon

* hide download button when already in desktop app

* codacy fixes

Co-authored-by: zomars <zomars@me.com>

apps/web/public/static/locales/en/common.json

@@ -1027,5 +1027,6 @@
   "custom_input_as_variable_info": "Ignore all special characters of the additonal input label (use only letters and numbers), use uppercase for all letters and replace whitespaces with underscores.",
   "using_additional_inputs_as_variables": "How to use additional inputs as variables?",
   "missing_connected_calendar": "No calendar connected",
+  "download_desktop_app": "Download desktop app",
   "set_ping_link": "Set Ping link"
 }

apps/web/styles/globals.css

@@ -14,6 +14,56 @@ body  {
   --brand-text-color-dark-mode: #292929;
 }
 
+/*
+  Desktop App specific CSS
+    https://docs.todesktop.com/
+*/
+
+/* disable user selection on buttons, links and images on desktop app */
+html.todesktop button,
+html.todesktop a,
+html.todesktop img {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* make header draggable on desktop app */
+html.todesktop header {
+  -webkit-app-region: drag;
+}
+html.todesktop header button {
+  -webkit-app-region: no-drag;
+}
+
+
+html.todesktop .logo {
+  display: none;
+}
+
+.desktop-only {
+  display: none;
+}
+
+html.todesktop .desktop-only {
+  display: block;
+}
+
+html.todesktop .desktop-hidden {
+  display: none;
+}
+
+html.todesktop header {
+  margin-top: -9px;
+}
+
+html.todesktop header nav {
+  margin-top: 8px;
+}
+
 /*
   Adds Utility to hide scrollbar to tailwind
     https://github.com/tailwindlabs/tailwindcss/discussions/2394

packages/lib/constants.ts

@@ -25,7 +25,7 @@ export const TRIAL_LIMIT_DAYS = 14;
 export const HOSTED_CAL_FEATURES = process.env.HOSTED_CAL_FEATURES || BASE_URL === "https://app.cal.com";
 /** @deprecated use `WEBAPP_URL` */
 export const NEXT_PUBLIC_BASE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL || `https://${process.env.VERCEL_URL}`;
-export const LOGO = "/calendso-logo-white-word.svg";
+export const LOGO = "/calcom-logo-white-word.svg";
 export const LOGO_ICON = "/cal-com-icon-white.svg";
 export const ROADMAP = "https://cal.com/roadmap";
 export const JOIN_SLACK = "https://cal.com/slack";

packages/ui/Logo.tsx

@@ -2,13 +2,11 @@ import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
 
 export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
   return (
-    <h1 className="inline">
+    <h1 className="logo inline">
       <strong>
         {icon ? (
-          // eslint-disable-next-line @next/next/no-img-element
           <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
         ) : (
-          // eslint-disable-next-line @next/next/no-img-element
           <img className={small ? "h-4 w-auto" : "h-5 w-auto"} alt="Cal" title="Cal" src={LOGO} />
         )}
       </strong>

packages/ui/Shell.tsx

@@ -209,7 +209,7 @@ const Layout = ({
         {status === "authenticated" && (
           <div style={isEmbed ? { display: "none" } : {}} className="hidden md:flex lg:flex-shrink-0">
             <div className="flex w-14 flex-col lg:w-56">
-              <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
+              <header className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
                 <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
                   <div className="items-center justify-between md:hidden lg:flex">
                     <Link href="/event-types">
@@ -217,7 +217,19 @@ const Layout = ({
                         <Logo small />
                       </a>
                     </Link>
-                    <div className="px-4">
+                    <div className="flex space-x-2 px-4">
+                      <button
+                        color="minimal"
+                        onClick={() => window.history.forward()}
+                        className="desktop-only group flex text-sm font-medium text-neutral-500  hover:text-neutral-900">
+                        <Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
+                      </button>
+                      <button
+                        color="minimal"
+                        onClick={() => window.history.forward()}
+                        className="desktop-only group flex text-sm font-medium text-neutral-500  hover:text-neutral-900">
+                        <Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
+                      </button>
                       <KBarTrigger />
                     </div>
                   </div>
@@ -227,6 +239,7 @@ const Layout = ({
                       <Logo small icon />
                     </a>
                   </Link>
+                  <hr className="desktop-only mt-2.5" />
                   <nav className="mt-2 flex-1 space-y-0.5 bg-white px-2 lg:mt-5">
                     {navigation.map((item) =>
                       !item ? null : (
@@ -292,7 +305,7 @@ const Layout = ({
                   </span>
                 </div>
                 <DeploymentInfo />
-              </div>
+              </header>
             </div>
           </div>
         )}
@@ -334,8 +347,7 @@ const Layout = ({
             <div
               className={classNames(
                 props.centered && "mx-auto md:max-w-5xl",
-                props.flexChildrenContainer && "flex flex-1 flex-col",
-                !props.large && "py-8"
+                props.flexChildrenContainer && "flex flex-1 flex-col"
               )}>
               {!!props.backPath && (
                 <div className="mx-3 mb-8 sm:mx-8">
@@ -348,10 +360,10 @@ const Layout = ({
                 </div>
               )}
               {props.heading && (
-                <div
+                <header
                   className={classNames(
                     props.large && "bg-gray-100 py-8 lg:mb-8 lg:pt-16 lg:pb-7",
-                    "block justify-between px-4 sm:flex sm:px-6 md:px-8"
+                    "block justify-between px-4 pt-8 sm:flex sm:px-6 md:px-8"
                   )}>
                   {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
                   <div className="mb-8 w-full">
@@ -370,7 +382,7 @@ const Layout = ({
                     )}
                   </div>
                   {props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>}
-                </div>
+                </header>
               )}
               <div
                 className={classNames(
@@ -631,6 +643,17 @@ function UserDropdown({ small }: { small?: boolean }) {
               {t("help")}
             </button>
 
+            <DropdownMenuItem>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={ROADMAP}
+                className="desktop-hidden flex items-center px-4 py-2 text-sm text-gray-700">
+                <Icon.FiDownload className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
+                {t("download_desktop_app")}
+              </a>
+            </DropdownMenuItem>
+
             <DropdownMenuSeparator className="h-px bg-gray-200" />
             <DropdownMenuItem>
               <a