d6546c3107
* chore: refactor config files to prevent migration tool errors * refactor: upgrade with the tailwind migration tool * chore: restore pre-commit command + mc * refactor(wip): update dependencies and migrate to Tailwind CSS v4 (mainly web) * chore: resolve Tailwind v4 migration conflicts from merging main * chore: remove unused Tailwind packages from config and update dependencies for v4 migration * chore: uncomment Tailwind CSS utility classes in globals.css * fix: resolve token conflicts between calcom and coss ui * fix: textarea scrollbar * Fix CUI-16 * fix: added @tailwindcss/forms plugin and cleaned up CSS classes in various components to remove unnecessary dark mode styles * fix: selects and inputs of different sizes * fix: remove unnecessary leading-20 class from modal titles in various components * fix: update Checkbox component styles to remove unnecessary border on checked state * fix: clean up styles in RequiresConfirmationController, Checkbox, and Radio components to enhance consistency * fix: update button and filter component styles to remove unnecessary rounded classes for consistency * fix: calendar * fix: update KBarSearch * fix: refine styles in Empty and Checkbox components for improved consistency * Fix focus state email input * fix: update button hover and active states to use 'not-disabled' instead of 'enabled' * fix: line-height issues * fix: update class name for muted background in BookingListItem component * fix: sidebar spacing * chore: update class names to use new Tailwind CSS color utilities * fix embed * chore: upgrade Tailwind CSS to version 4.1.16 and update related dependencies * Map css variables and add a playground test for heavy css customization * suggestion for coss-ui * refactor: update CSS variable usage and clean up styles - Replace instances of `--cal-brand-color` with `--cal-brand` in embed-related HTML files. - Remove the now-unnecessary `addAppCssVars` function from the embed core. - Import theme tokens in the embed core styles for better consistency. - Clean up whitespace and formatting in CSS files for improved readability. - Add a comment in `tokens.css` regarding its usage in both embed and webapp contexts. * Handle within tokens.css instead of fixing coss-ui * Remove initial, not needed. Also, remove tailwind.config.js as tailwidn scans the html automaically * fix: examples app breaking * fix: modal not resizing correctly * feat: upgrade atoms to tailwind v4 * fix: atoms build breaking * fix: atoms build breaking * chore: upgrate examples/base to tailwind 4 * chore: update globals.css * fix: add missing scheduler css variables * fix: PlatformAdditionalCalendarSelector * chore: update global styles * chore: update tailwindcss and postcss dependencies to stable versions * chore: remove unneeded class * fix: dialog and toast animation * fix: replace flex-shrink-0 with shrink-0 for consistent styling in various components * fix: dialog modal for Apple connect * add margin in SaveFilterSegmentButton * Fix radix button nested states * add cursor pointer to buttons but keep dsabled state * Fix commandK selectors and adds cursor pointer * Fix teams filter * fix - round checkboxes * fix filter checkbox * fix select indicator's margin * command group font size * style: fix badge and tooltip radius * chore: remove unneeded files * Delete PR_REVIEW_MANAGED_EVENT_REASSIGNMENT.md * remove ui-playground leftover * fix: add missing react phone input styles in atoms * Delete managed-event-reassignment-flow-and-architecture.mermaid * fix: inter font not loading * Add theme to skeleton container so that it can support dark mode * fix: create custom stack-y-* utilities post tw4 upgrade * fix: typo * fix: atoms stack class + remove unused css file * fix default radius valiue * fix space-y in embed * fix skeleton background * Hardcode radius values to match production * fix border in embed * add missing externalThemeClass * feat: create a custom stack-y-* utility * fix: add stack utility to atom global css * fix: Skeleton loader class modalbox * Add stack-y utility in embed * fix: add missing stack utilities in atoms globals.css * update yarn.lock * add popover portla * update --------- Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Ryukemeister <sahalrajiv6900@gmail.com> Co-authored-by: cal.com <morgan@cal.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev> Co-authored-by: Anik Dhabal Babu <adhabal2002@gmail.com>
166 lines
4.6 KiB
TypeScript
166 lines
4.6 KiB
TypeScript
import { dir } from "i18next";
|
|
import { Inter } from "next/font/google";
|
|
import localFont from "next/font/local";
|
|
import { headers, cookies } from "next/headers";
|
|
import React from "react";
|
|
|
|
import { getLocale } from "@calcom/features/auth/lib/getLocale";
|
|
import { loadTranslations } from "@calcom/lib/server/i18n";
|
|
import { IconSprites } from "@calcom/ui/components/icon";
|
|
|
|
import { buildLegacyRequest } from "@lib/buildLegacyCtx";
|
|
|
|
import "../styles/globals.css";
|
|
import { AppRouterI18nProvider } from "./AppRouterI18nProvider";
|
|
import { SpeculationRules } from "./SpeculationRules";
|
|
import { Providers } from "./providers";
|
|
|
|
const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
|
|
const calFont = localFont({
|
|
src: "../fonts/CalSans-SemiBold.woff2",
|
|
variable: "--font-cal",
|
|
preload: true,
|
|
display: "block",
|
|
weight: "600",
|
|
});
|
|
|
|
export const viewport = {
|
|
width: "device-width",
|
|
initialScale: 1.0,
|
|
maximumScale: 1.0,
|
|
userScalable: false,
|
|
viewportFit: "cover",
|
|
themeColor: [
|
|
{
|
|
media: "(prefers-color-scheme: light)",
|
|
color: "#f9fafb",
|
|
},
|
|
{
|
|
media: "(prefers-color-scheme: dark)",
|
|
color: "#1C1C1C",
|
|
},
|
|
],
|
|
};
|
|
|
|
export const metadata = {
|
|
icons: {
|
|
icon: "/favicon.ico",
|
|
apple: "/api/logo?type=apple-touch-icon",
|
|
other: [
|
|
{
|
|
rel: "icon-mask",
|
|
url: "/safari-pinned-tab.svg",
|
|
color: "#000000",
|
|
},
|
|
{
|
|
url: "/api/logo?type=favicon-16",
|
|
sizes: "16x16",
|
|
type: "image/png",
|
|
},
|
|
{
|
|
url: "/api/logo?type=favicon-32",
|
|
sizes: "32x32",
|
|
type: "image/png",
|
|
},
|
|
],
|
|
},
|
|
manifest: "/site.webmanifest",
|
|
other: {
|
|
"application-TileColor": "#ff0000",
|
|
},
|
|
twitter: {
|
|
site: "@calcom",
|
|
creator: "@calcom",
|
|
card: "summary_large_image",
|
|
},
|
|
robots: {
|
|
index: true,
|
|
follow: true,
|
|
},
|
|
};
|
|
|
|
const getInitialProps = async () => {
|
|
const h = await headers();
|
|
const isEmbed = h.get("x-isEmbed") === "true";
|
|
const embedColorScheme = h.get("x-embedColorScheme");
|
|
const newLocale = (await getLocale(buildLegacyRequest(await headers(), await cookies()))) ?? "en";
|
|
const direction = dir(newLocale) ?? "ltr";
|
|
|
|
return {
|
|
isEmbed,
|
|
embedColorScheme,
|
|
locale: newLocale,
|
|
direction,
|
|
};
|
|
};
|
|
|
|
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
|
const h = await headers();
|
|
const nonce = h.get("x-csp-nonce") ?? "";
|
|
|
|
const { locale, direction, isEmbed, embedColorScheme } = await getInitialProps();
|
|
|
|
const ns = "common";
|
|
const translations = await loadTranslations(locale, ns);
|
|
|
|
return (
|
|
<html
|
|
className="notranslate"
|
|
translate="no"
|
|
lang={locale}
|
|
dir={direction}
|
|
style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}
|
|
suppressHydrationWarning
|
|
data-nextjs-router="app">
|
|
<head nonce={nonce}>
|
|
<style>{`
|
|
:root {
|
|
--font-sans: ${interFont.style.fontFamily.replace(/\'/g, "")};
|
|
--font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
|
|
}
|
|
`}</style>
|
|
</head>
|
|
<body
|
|
className="dark:bg-default bg-subtle antialiased"
|
|
style={
|
|
isEmbed
|
|
? {
|
|
background: "transparent",
|
|
// Keep the embed hidden till parent initializes and
|
|
// - gives it the appropriate styles if UI instruction is there.
|
|
// - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
|
|
// - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
|
|
visibility: "hidden",
|
|
// This in addition to visibility: hidden is to ensure that elements with specific opacity set are not visible
|
|
opacity: 0,
|
|
}
|
|
: {
|
|
visibility: "visible",
|
|
opacity: 1,
|
|
}
|
|
}>
|
|
<IconSprites />
|
|
<SpeculationRules
|
|
// URLs In Navigation
|
|
prerenderPathsOnHover={[
|
|
"/event-types",
|
|
"/availability",
|
|
"/bookings/upcoming",
|
|
"/teams",
|
|
"/apps",
|
|
"/apps/routing-forms/forms",
|
|
"/workflows",
|
|
"/insights",
|
|
]}
|
|
/>
|
|
|
|
<Providers isEmbed={isEmbed} nonce={nonce}>
|
|
<AppRouterI18nProvider translations={translations} locale={locale} ns={ns}>
|
|
{children}
|
|
</AppRouterI18nProvider>
|
|
</Providers>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|