added pwa: extension for standalone, lots of mobile improvements (#7218)

Author: PeerRich

apps/web/pages/apps/index.tsx

@@ -57,8 +57,8 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
       heading={t("app_store")}
       subtitle={t("app_store_description")}
       actions={(className) => (
-        <div className="flex w-full flex-col  md:flex-row md:justify-between lg:w-auto">
-          <div className="lg:hidden">
+        <div className="flex w-full flex-col pt-4 md:flex-row md:justify-between md:pt-0 lg:w-auto">
+          <div className="ltr:mr-2 rtl:ml-2 lg:hidden">
             <HorizontalTabs tabs={tabs} />
           </div>
           <div>

apps/web/pages/more.tsx

@@ -5,12 +5,8 @@ export default function MorePage() {
   const { t } = useLocale();
   return (
     <Shell>
-      <div className="mt-8 max-w-screen-lg">
+      <div className="max-w-screen-lg">
         <MobileNavigationMoreItems />
-        {/* Save it for next preview version
-         <div className="mt-6">
-          <UserV2OptInBanner />
-        </div> */}
         <p className="mt-6 text-xs leading-tight text-gray-500 md:hidden">{t("more_page_footer")}</p>
       </div>
     </Shell>

apps/web/styles/globals.css

@@ -105,7 +105,6 @@ html.todesktop nav a svg{
 */
 
 
-
 /*
   Adds Utility to hide scrollbar to tailwind
     https://github.com/tailwindlabs/tailwindcss/discussions/2394

packages/app-store/_components/AppCategoryNavigation.tsx

@@ -31,7 +31,7 @@ const AppCategoryNavigation = ({
   const appCategories = useMemo(() => getAppCategories(baseURL, useQueryParam), [baseURL, useQueryParam]);
 
   return (
-    <div className={cs("flex flex-col gap-x-6 p-2 md:p-0 xl:flex-row", classNames?.root ?? className)}>
+    <div className={cs("flex flex-col gap-x-6 md:p-0 xl:flex-row", classNames?.root ?? className)}>
       <div className="hidden xl:block">
         <VerticalTabs
           tabs={appCategories}
@@ -40,7 +40,7 @@ const AppCategoryNavigation = ({
           itemClassname={classNames?.verticalTabsItem}
         />
       </div>
-      <div className="mb-4 block overflow-x-scroll xl:hidden">
+      <div className="block overflow-x-scroll xl:hidden">
         <HorizontalTabs tabs={appCategories} linkProps={{ shallow: true }} />
       </div>
       <main className={classNames?.container ?? containerClassname} ref={animationRef}>

packages/config/tailwind-preset.js

@@ -140,6 +140,9 @@ module.exports = {
           900: "#f3f4f6",
         },
       },
+      screens: {
+        pwa: { raw: "(display-mode: standalone)" },
+      },
       keyframes: {
         "fade-in-up": {
           "0%": {

packages/features/shell/Shell.tsx

@@ -1,8 +1,10 @@
 import type { User } from "@prisma/client";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
-import React, { Dispatch, Fragment, ReactNode, SetStateAction, useEffect, useState } from "react";
+import type { NextRouter } from "next/router";
+import { useRouter } from "next/router";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 import dayjs from "@calcom/dayjs";
@@ -22,7 +24,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { SVGComponent } from "@calcom/types/SVGComponent";
+import type { SVGComponent } from "@calcom/types/SVGComponent";
 import {
   Button,
   Credits,
@@ -640,7 +642,7 @@ const MobileNavigation = () => {
     <>
       <nav
         className={classNames(
-          "bottom-nav fixed bottom-0 z-30 -mx-4 flex w-full border border-t border-gray-200 bg-gray-50 bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
+          "pwa:pb-2.5 fixed bottom-0 z-30 -mx-4 flex w-full border border-t border-gray-200 bg-gray-50 bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
           isEmbed && "hidden"
         )}>
         {mobileNavigationBottomItems.map((item) => (
@@ -669,7 +671,7 @@ const MobileNavigationItem: React.FC<{
     <Link
       key={item.name}
       href={item.href}
-      className="relative my-2 min-w-0 flex-1 overflow-hidden rounded-md py-2 px-1 text-center text-xs font-medium text-gray-400 hover:bg-gray-200 hover:text-gray-700 focus:z-10 sm:text-sm [&[aria-current='page']]:text-gray-900"
+      className="relative my-2 min-w-0 flex-1 overflow-hidden rounded-md !bg-transparent p-1 text-center text-xs font-medium text-gray-400 hover:text-gray-700 focus:z-10 sm:text-sm [&[aria-current='page']]:text-gray-900"
       aria-current={current ? "page" : undefined}>
       {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
       {item.icon && (
@@ -816,7 +818,7 @@ export function ShellMain(props: LayoutProps) {
                 className={classNames(
                   props.backPath
                     ? "relative"
-                    : "fixed bottom-[88px] z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
+                    : "pwa:bottom-24 fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
                   "flex-shrink-0 md:relative md:bottom-auto md:right-auto"
                 )}>
                 {props.CTA}
@@ -842,7 +844,7 @@ function MainContainer({
     <main className="relative z-0 flex-1 bg-white focus:outline-none">
       {/* show top navigation for md and smaller (tablet and phones) */}
       {TopNavContainerProp}
-      <div className="max-w-full px-4 py-4 md:py-8 lg:px-12">
+      <div className="max-w-full px-4 md:py-8 lg:px-12">
         <ErrorBoundary>
           {!props.withoutMain ? <ShellMain {...props}>{props.children}</ShellMain> : props.children}
         </ErrorBoundary>

packages/ui/components/button/Button.tsx

@@ -42,7 +42,7 @@ const buttonClasses = cva(
       variant: {
         button: "",
         icon: "flex justify-center",
-        fab: "rounded-full justify-center md:rounded-md  radix-state-open:rotate-45 md:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
+        fab: "rounded-full justify-center md:rounded-md radix-state-open:rotate-45 md:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
       },
       color: {
         primary: "text-white dark:text-black",

packages/ui/components/navigation/tabs/HorizontalTabItem.tsx

@@ -32,7 +32,7 @@ const HorizontalTabItem = function ({ name, href, linkProps, avatar, ...props }:
       {...linkProps}
       className={classNames(
         isCurrent ? "bg-gray-100 text-gray-900" : "  text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
-        "inline-flex items-center justify-center whitespace-nowrap rounded-[6px] py-[10px] px-2 text-sm font-medium leading-4 md:mb-0",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-[6px] p-2 text-sm font-medium leading-4 md:mb-0",
         props.disabled && "pointer-events-none !opacity-30",
         props.className
       )}