diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css index 78d8ce13b7..e373c86cd3 100644 --- a/apps/storybook/styles/storybook-styles.css +++ b/apps/storybook/styles/storybook-styles.css @@ -230,7 +230,7 @@ --cal-text-info: hsla(228, 56%, 33%, 1); --cal-text-success: hsla(133, 34%, 24%, 1); --cal-text-attention: hsla(16, 62%, 28%, 1); - --cal-text-error: hsla(2, 55%, 30%, 1); + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shinanigans -> These will be computed for the users theme at runtime. diff --git a/apps/ui-playground/.gitignore b/apps/ui-playground/.gitignore deleted file mode 100644 index 5ef6a52078..0000000000 --- a/apps/ui-playground/.gitignore +++ /dev/null @@ -1,41 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.* -.yarn/* -!.yarn/patches -!.yarn/plugins -!.yarn/releases -!.yarn/versions - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# env files (can opt-in for committing if needed) -.env* - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/apps/ui-playground/README.md b/apps/ui-playground/README.md deleted file mode 100644 index e215bc4ccf..0000000000 --- a/apps/ui-playground/README.md +++ /dev/null @@ -1,36 +0,0 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/apps/ui-playground/app/favicon.ico b/apps/ui-playground/app/favicon.ico deleted file mode 100644 index 718d6fea48..0000000000 Binary files a/apps/ui-playground/app/favicon.ico and /dev/null differ diff --git a/apps/ui-playground/app/globals.css b/apps/ui-playground/app/globals.css deleted file mode 100644 index 4c25942b20..0000000000 --- a/apps/ui-playground/app/globals.css +++ /dev/null @@ -1,485 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; -/** -* Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC -*/ -:root { - /* background */ - - --cal-bg-emphasis: hsla(220,13%,91%,1); - --cal-bg: hsla(0,0%,100%,1); - --cal-bg-subtle: hsla(220, 14%, 96%,1); - --cal-bg-muted: hsla(210,20%,98%,1); - --cal-bg-inverted: hsla(0,0%,6%,1); - - /* background -> components*/ - --cal-bg-info: hsla(218,83%,98%,1); - --cal-bg-success: hsla(134,76%,94%,1); - --cal-bg-attention: hsla(37, 86%, 92%, 1); - --cal-bg-error: hsla(3,66%,93%,1); - --cal-bg-dark-error: hsla(2, 55%, 30%, 1); - - /* Borders */ - --cal-border-emphasis: hsla(218, 11%, 65%, 1); - --cal-border: hsla(216, 12%, 84%, 1); - --cal-border-subtle: hsla(220, 13%, 91%, 1); - --cal-border-booker: #e5e7eb; - --cal-border-muted: hsla(220, 14%, 96%, 1); - --cal-border-error: hsla(4, 63%, 41%, 1); - --cal-border-focus: hsla(0, 0%, 10%, 1); - - /* Content/Text */ - --cal-text-emphasis: hsla(217, 19%, 27%, 1); - --cal-text: hsla(217, 19%, 27%, 1); - --cal-text-subtle: hsla(220, 9%, 46%, 1); - --cal-text-muted: hsla(218, 11%, 65%, 1); - --cal-text-inverted: hsla(0, 0%, 100%, 1); - - /* Content/Text -> components */ - --cal-text-info: hsla(228, 56%, 33%, 1); - --cal-text-success: hsla(133, 34%, 24%, 1); - --cal-text-attention: hsla(16, 62%, 28%, 1); - --cal-text-error: hsla(2, 55%, 30%, 1); - - /* Brand shinanigans - -> These will be computed for the users theme at runtime. - */ - --cal-brand: hsla(221, 39%, 11%, 1); - --cal-brand-emphasis: hsla(0, 0%, 6%, 1); - --cal-brand-text: hsla(0, 0%, 100%, 1); -} -.dark { - /* background */ - - --cal-bg-emphasis: hsla(0, 0%, 25%, 1); - --cal-bg: hsla(0, 0%, 10%, 1); - --cal-bg-subtle: hsla(0, 0%, 18%, 1); - --cal-bg-muted: hsla(0, 0%, 12%, 1); - --cal-bg-inverted: hsla(220, 14%, 96%, 1); - - /* background -> components*/ - --cal-bg-info: hsla(228, 56%, 33%, 1); - --cal-bg-success: hsla(133, 34%, 24%, 1); - --cal-bg-attention: hsla(16, 62%, 28%, 1); - --cal-bg-error: hsla(2, 55%, 30%, 1); - --cal-bg-dark-error: hsla(2, 55%, 30%, 1); - - /* Borders */ - --cal-border-emphasis: hsla(0, 0%, 46%, 1); - --cal-border: hsla(0, 0%, 34%, 1); - --cal-border-subtle: hsla(0, 0%, 22%, 1); - --cal-border-booker: hsla(0, 0%, 22%, 1); - --cal-border-muted: hsla(0, 0%, 18%, 1); - --cal-border-error: hsla(4, 63%, 41%, 1); - --cal-border-focus: hsla(0, 0%, 100%, 1); - - /* Content/Text */ - --cal-text-emphasis: hsla(240, 20%, 99%, 1); - --cal-text: hsla(0, 0%, 84%, 1); - --cal-text-subtle: hsla(0, 0%, 65%, 1); - --cal-text-muted: hsla(0, 0%, 34%, 1); - --cal-text-inverted: hsla(0, 0%, 10%, 1); - - /* Content/Text -> components */ - --cal-text-info: hsla(218, 83%, 93%, 1); - --cal-text-success: hsla(134, 76%, 94%, 1); - --cal-text-attention: hsla(37, 86%, 92%, 1); - --cal-text-error: hsla(3, 66%, 93%, 1); - - /* Brand shenanigans - -> These will be computed for the users theme at runtime. - */ - --cal-brand: hsla(0, 0%, 100%, 1); - --cal-brand-emphasis: hsla(218, 11%, 65%, 1); - --cal-brand-text: hsla(0, 0%, 0%,1); -} - -@layer base { - * { - @apply border-default - } -} - -::-moz-selection { - color: var(--cal-brand-text); - background: var(--cal-brand); -} - -::selection { - color: var(--cal-brand-text); - background: var(--cal-brand); -} - -body  { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; -} - -/* - Desktop App specific CSS - https://docs.todesktop.com/ -*/ - -html.todesktop-platform-win32 .todesktop\:\!bg-transparent{ - background: inherit !important; -} - -/* disable user selection on buttons, links and images on desktop app */ -html.todesktop button, -html.todesktop a, -html.todesktop img, -html.todesktop header { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default !important; -} - -html.todesktop, -html.todesktop div { - cursor: default !important; -} - -/* make header draggable on desktop app */ -html.todesktop header { - -webkit-app-region: drag; -} - -html.todesktop header button, -html.todesktop header a { - -webkit-app-region: no-drag; -} - -html.todesktop-platform-darwin body, html.todesktop-platform-darwin aside { - background: transparent !important; -} - -html.todesktop-platform-darwin.dark main.bg-default { - background: rgba(0, 0, 0, 0.6) !important; -} - -html.todesktop-platform-darwin.light main.bg-default { - background: rgba(255, 255, 255, 0.8) !important; -} - -html.todesktop.light { - --cal-bg-emphasis: hsla(0, 0%, 11%, 0.1); -} - -html.todesktop.dark { - --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3); -} - -/* - Adds Utility to hide scrollbar to tailwind - https://github.com/tailwindlabs/tailwindcss/discussions/2394 - https://github.com/tailwindlabs/tailwindcss/pull/5732 -*/ -@layer utilities { - /* Chrome, Safari and Opera */ - .no-scrollbar::-webkit-scrollbar { - display: none; - } - - .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } -} - -/* - * Override the default tailwindcss-forms styling (default is: 'colors.blue.600') - * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006 - */ -[type="text"]:focus, -[type="email"]:focus, -[type="url"]:focus, -[type="password"]:focus, -[type="number"]:focus, -[type="date"]:focus, -[type="datetime-local"]:focus, -[type="month"]:focus, -[type="search"]:focus, -[type="tel"]:focus, -[type="checkbox"]:focus, -[type="radio"]:focus, -[type="time"]:focus, -[type="week"]:focus, -[multiple]:focus, -textarea:focus, -select:focus { - --tw-ring-color: var(--brand-color); - border-color: var(--brand-color); -} - -@layer components { - .scroll-bar { - @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent; - } -} - -/* TODO: avoid global specific css */ -/* button[role="switch"][data-state="checked"] span { - transform: translateX(16px); -} */ - -@layer components { - /* slider */ - .slider { - @apply relative flex h-4 w-40 select-none items-center; - } - - .slider > .slider-track { - @apply relative h-1 flex-grow rounded-md bg-gray-400; - } - - .slider .slider-range { - @apply absolute h-full rounded-full bg-gray-700; - } - - .slider .slider-thumb { - @apply block h-3 w-3 cursor-pointer rounded-full bg-gray-700 transition-all; - } - - .slider .slider-thumb:hover { - @apply bg-gray-600; - } - - .slider .slider-thumb:focus { - box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2); - } -} - -/* hide chat bubble on mobile */ -@media only screen and (max-width: 768px) { - /* Intercom FAB*/ - #launcher { - display: none !important; - } - - /* Zendesk FAB*/ - div[role="presentation"] > iframe { - display: none !important; - } - - /* Helpscout FAB*/ - .BeaconFabButtonFrame { - margin-left: -30px; - left: 50%; - bottom: 28px !important; - z-index: 1058 !important; - } -} - -/* TODO: implement styling for react-multi-email */ - -/* !important to override react-dates */ -.DateRangePickerInput__withBorder { - border: 0 !important; -} -.DateInput_input { - border: 1px solid #d1d5db !important; - border-radius: 2px !important; - font-size: inherit !important; - font-weight: inherit !important; - color: #000; - padding: 11px ​11px 9px !important; - line-height: 16px !important; -} - -.DateInput_input__focused { - border: 2px solid #000 !important; - border-radius: 2px !important; - box-shadow: none !important; - padding: 10px ​10px 9px !important; -} - -.DateRangePickerInput_arrow { - padding: 0px 10px; -} - -.loader { - display: block; - width: 30px; - height: 30px; - margin: 60px auto; - position: relative; - border-width: 4px; - border-style: solid; - animation: loader 2s infinite ease; -} - -.loader-inner { - vertical-align: top; - display: inline-block; - width: 100%; - animation: loader-inner 2s infinite ease-in; -} - -.no-ring-inset { - --tw-ring-inset: unset; -} - -@keyframes loader { - 0% { - transform: rotate(0deg); - } - - 25% { - transform: rotate(180deg); - } - - 50% { - transform: rotate(180deg); - } - - 75% { - transform: rotate(360deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes loader-inner { - 0% { - height: 0%; - } - - 25% { - height: 0%; - } - - 50% { - height: 100%; - } - - 75% { - height: 100%; - } - - 100% { - height: 0%; - } -} - -.text-inverted-important { - color: white !important; -} - -@layer utilities { - .transition-max-width { - -webkit-transition-property: max-width; - transition-property: max-width; - } -} - -#timeZone input:focus { - box-shadow: none; -} - -/* react-date-picker forces a border upon us, cast it away */ -.react-date-picker__wrapper { - border: none !important; -} - -.react-date-picker__inputGroup__input { - padding-top: 0; - padding-bottom: 0; -} - -/* animations */ -.slideInBottom { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: slideInBottom; -} - -@keyframes slideInBottom { - from { - opacity: 0; - transform: translateY(30%); - pointer-events: none; - } - to { - opacity: 1; - pointer-events: auto; - } -} - -/* animations */ -.slideInTop { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: slideInTop; -} - -@keyframes slideInTop { - from { - opacity: 0; - transform: translateY(-20%); - pointer-events: none; - } - to { - opacity: 1; - pointer-events: auto; - transform: translateY(0%); - } -} - -.fadeIn { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-name: fadeIn; - animation-timing-function: ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -/** - * Makes sure h-screen works on mobile Safari. By default h-screen - * does not take into account the height of the address bar, causing - * weird behaviour when scrolling — sometimes the height will be correct - * and sometimes it won't, depending on whether the address bar is - * in 'collapsed' state or not. - * @see: https://benborgers.com/posts/tailwind-h-screen - */ -@supports (-webkit-touch-callout: none) { - .h-screen { - height: -webkit-fill-available; - } -} - -::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -.react-tel-input .country-list .country:hover, -.react-tel-input .country-list .country.highlight { - @apply !bg-emphasis; -} - -.react-tel-input .flag-dropdown .selected-flag, -.react-tel-input .flag-dropdown.open .selected-flag { - @apply !bg-default; -} - -.react-tel-input .flag-dropdown { - @apply !border-r-default left-0.5 !border-y-0 !border-l-0; -} - -.intercom-lightweight-app { - @apply z-40 !important; -} diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx deleted file mode 100644 index a521089ba0..0000000000 --- a/apps/ui-playground/app/layout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; - -import "./globals.css"; - -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - {children} - - ); -} diff --git a/apps/ui-playground/app/page.tsx b/apps/ui-playground/app/page.tsx deleted file mode 100644 index 18bb6f0c61..0000000000 --- a/apps/ui-playground/app/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -// import AvatarDemo from "./_components/AvatarDemo"; - -export default function Home() { - return
{/* */}
; -} diff --git a/apps/ui-playground/eslint.config.mjs b/apps/ui-playground/eslint.config.mjs deleted file mode 100644 index c85fb67c46..0000000000 --- a/apps/ui-playground/eslint.config.mjs +++ /dev/null @@ -1,16 +0,0 @@ -import { dirname } from "path"; -import { fileURLToPath } from "url"; -import { FlatCompat } from "@eslint/eslintrc"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); - -const compat = new FlatCompat({ - baseDirectory: __dirname, -}); - -const eslintConfig = [ - ...compat.extends("next/core-web-vitals", "next/typescript"), -]; - -export default eslintConfig; diff --git a/apps/ui-playground/next.config.ts b/apps/ui-playground/next.config.ts deleted file mode 100644 index e9ffa3083a..0000000000 --- a/apps/ui-playground/next.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { NextConfig } from "next"; - -const nextConfig: NextConfig = { - /* config options here */ -}; - -export default nextConfig; diff --git a/apps/ui-playground/package.json b/apps/ui-playground/package.json deleted file mode 100644 index 79f7abbe38..0000000000 --- a/apps/ui-playground/package.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "ui-playground", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev --turbopack --port=1337", - "build": "next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "@calcom/config": "*", - "@calcom/lib": "*", - "@calcom/ui": "*", - "next": "15.1.6", - "react": "^18.0.0", - "react-dom": "^18.0.0" - }, - "devDependencies": { - "@eslint/eslintrc": "^3", - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", - "eslint": "^9", - "eslint-config-next": "15.1.6", - "postcss": "^8", - "tailwindcss": "^3.4.1", - "typescript": "^5" - } -} diff --git a/apps/ui-playground/postcss.config.mjs b/apps/ui-playground/postcss.config.mjs deleted file mode 100644 index 1a69fd2a45..0000000000 --- a/apps/ui-playground/postcss.config.mjs +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('postcss-load-config').Config} */ -const config = { - plugins: { - tailwindcss: {}, - }, -}; - -export default config; diff --git a/apps/ui-playground/tailwind.config.ts b/apps/ui-playground/tailwind.config.ts deleted file mode 100644 index f21d47baef..0000000000 --- a/apps/ui-playground/tailwind.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import base from "@calcom/config/tailwind-preset"; - -/** @type {import('tailwindcss').Config} */ -module.exports = { - ...base, - content: [...base.content], - plugins: [...base.plugins, require("tailwindcss-animate")], -}; diff --git a/apps/ui-playground/tsconfig.json b/apps/ui-playground/tsconfig.json deleted file mode 100644 index d8b93235f2..0000000000 --- a/apps/ui-playground/tsconfig.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2017", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] -} diff --git a/apps/web/app/icons/page.tsx b/apps/web/app/icons/page.tsx index a2ebf86a70..decbbac82e 100644 --- a/apps/web/app/icons/page.tsx +++ b/apps/web/app/icons/page.tsx @@ -35,7 +35,7 @@ export default async function IconsPage() { diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index d344b0a5b8..cbebcbeaf2 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -122,7 +122,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo `} { }> + CTA={}> ); diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx index 390bb55cba..a1fd3be7bf 100644 --- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx +++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx @@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { TRPCClientErrorLike } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { AppRouter } from "@calcom/trpc/server/routers/_app"; -import { Button, Form, Icon } from "@calcom/ui"; +import { Button, Form } from "@calcom/ui"; interface ISetupAvailabilityProps { nextStep: () => void; @@ -73,12 +73,13 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx index d2f22d531e..2e8ab49666 100644 --- a/apps/web/components/getting-started/steps-views/UserSettings.tsx +++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx @@ -9,7 +9,7 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { trpc } from "@calcom/trpc/react"; -import { Button, TimezoneSelect, Icon, Input } from "@calcom/ui"; +import { Button, TimezoneSelect, Input } from "@calcom/ui"; import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability"; @@ -110,12 +110,12 @@ const UserSettings = (props: IUserSettingsProps) => { ); diff --git a/apps/web/components/settings/CustomEmailTextField.tsx b/apps/web/components/settings/CustomEmailTextField.tsx index 509f35b409..230c9f82da 100644 --- a/apps/web/components/settings/CustomEmailTextField.tsx +++ b/apps/web/components/settings/CustomEmailTextField.tsx @@ -45,7 +45,7 @@ const CustomEmailTextField = ({ return ( <>
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx index 744ede19a1..e3fd6ca82b 100644 --- a/apps/web/components/setup/EnterpriseLicense.tsx +++ b/apps/web/components/setup/EnterpriseLicense.tsx @@ -115,7 +115,6 @@ const EnterpriseLicense = ( placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx" labelSrOnly={true} value={value} - addOnFilled={false} addOnClassname={classNames( "hover:border-default", errors.licenseKey === undefined && isDirty && "group-hover:border-emphasis" diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx index bfb3a936f4..d1714c63a9 100644 --- a/apps/web/components/ui/AuthContainer.tsx +++ b/apps/web/components/ui/AuthContainer.tsx @@ -13,7 +13,7 @@ interface Props { export default function AuthContainer(props: React.PropsWithChildren) { return ( -
+
{props.showLogo && }
diff --git a/apps/web/modules/apps/apps-view.tsx b/apps/web/modules/apps/apps-view.tsx index 411ee415ed..b28ec76d7f 100644 --- a/apps/web/modules/apps/apps-view.tsx +++ b/apps/web/modules/apps/apps-view.tsx @@ -42,7 +42,6 @@ function AppsSearch({ const { t } = useLocale(); return ( } addOnClassname="!border-muted" containerClassName={classNames("focus:!ring-offset-0 m-1", className)} diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx index 70d8458f56..3c1e751e08 100644 --- a/apps/web/modules/bookings/views/bookings-listing-view.tsx +++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx @@ -44,22 +44,27 @@ const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [ { name: "upcoming", href: "/bookings/upcoming", + "data-testid": "upcoming", }, { name: "unconfirmed", href: "/bookings/unconfirmed", + "data-testid": "unconfirmed", }, { name: "recurring", href: "/bookings/recurring", + "data-testid": "recurring", }, { name: "past", href: "/bookings/past", + "data-testid": "past", }, { name: "cancelled", href: "/bookings/cancelled", + "data-testid": "cancelled", }, ]; @@ -250,7 +255,12 @@ function BookingsContent({ status }: BookingsProps) { return (
- + ({ + ...tab, + name: t(tab.name), + }))} + />
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx index a2664ca60b..bc423c43c7 100644 --- a/apps/web/modules/bookings/views/bookings-single-view.tsx +++ b/apps/web/modules/bookings/views/bookings-single-view.tsx @@ -983,7 +983,7 @@ export default function Success(props: PageProps) { className={classNames( "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100", rateValue === 1 - ? "border-focus bg-emphasis" + ? "border-emphasis bg-emphasis" : "border-muted bg-default opacity-50" )} disabled={isFeedbackSubmitted} @@ -994,7 +994,7 @@ export default function Success(props: PageProps) { className={classNames( "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100", rateValue === 2 - ? "border-focus bg-emphasis" + ? "border-emphasis bg-emphasis" : "border-muted bg-default opacity-50" )} disabled={isFeedbackSubmitted} @@ -1005,7 +1005,7 @@ export default function Success(props: PageProps) { className={classNames( "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100", rateValue === 3 - ? "border-focus bg-emphasis" + ? "border-emphasis bg-emphasis" : " border-muted bg-default opacity-50" )} disabled={isFeedbackSubmitted} @@ -1016,7 +1016,7 @@ export default function Success(props: PageProps) { className={classNames( "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100", rateValue === 4 - ? "border-focus bg-emphasis" + ? "border-emphasis bg-emphasis" : "border-muted bg-default opacity-50" )} disabled={isFeedbackSubmitted} @@ -1027,7 +1027,7 @@ export default function Success(props: PageProps) { className={classNames( "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100", rateValue === 5 - ? "border-focus bg-emphasis" + ? "border-emphasis bg-emphasis" : "border-muted bg-default opacity-50" )} disabled={isFeedbackSubmitted} diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx index 63c3dd7016..9a6c368356 100644 --- a/apps/web/modules/event-types/views/event-types-listing-view.tsx +++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx @@ -120,9 +120,8 @@ const InfiniteTeamsTab: FC = (props) => { return (
} - addOnClassname="!border-muted" containerClassName="max-w-64 focus:!ring-offset-0 mb-4" type="search" value={searchTerm} @@ -600,7 +599,8 @@ export const InfiniteEventTypeList = ({ variant="icon" color="secondary" StartIcon="ellipsis" - className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md" + // Unsual practice to use radix state open but for some reason this dropdown and only thi dropdown clears the border radius of this button. + className="ltr:radix-state-open:rounded-r-[--btn-group-radius] rtl:radix-state-open:rounded-l-[--btn-group-radius]" /> @@ -915,6 +915,7 @@ const InfiniteScrollMain = ({ name: item.profile.name ?? "", href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam", avatar: item.profile.image, + "data-testid": item.profile.name ?? "", })); const activeEventTypeGroup = diff --git a/apps/web/modules/settings/my-account/general-view.tsx b/apps/web/modules/settings/my-account/general-view.tsx index 83441bdada..8482de931b 100644 --- a/apps/web/modules/settings/my-account/general-view.tsx +++ b/apps/web/modules/settings/my-account/general-view.tsx @@ -250,7 +250,7 @@ const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: Gene ) : (
-
+
{watchedTzSchedules.map((schedule, index) => { return (
{(!formState.isSubmitting || !formState.isSubmitted) && (
diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx index 7047831283..ae602d6840 100644 --- a/apps/web/modules/team/team-view.tsx +++ b/apps/web/modules/team/team-view.tsx @@ -74,7 +74,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
  • @@ -157,7 +157,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) { return ( <> -
    +
    @@ -208,9 +208,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
    - - {t("or")} - + {t("or")}
    diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx index 2a561cf72f..95bbd69ef4 100644 --- a/apps/web/pages/_document.tsx +++ b/apps/web/pages/_document.tsx @@ -121,7 +121,7 @@ class MyDocument extends Document { { const locator = page.getByTestId("horizontal-tab-upcoming"); - await expect(locator).toHaveClass(/bg-emphasis/); + await expect(locator).toBeDefined(); }); test("should render the /getting-started", async ({ page, users }) => { diff --git a/apps/web/playwright/embed-code-generator.e2e.ts b/apps/web/playwright/embed-code-generator.e2e.ts index 548b6121a0..2bc0c6490a 100644 --- a/apps/web/playwright/embed-code-generator.e2e.ts +++ b/apps/web/playwright/embed-code-generator.e2e.ts @@ -336,7 +336,7 @@ async function goToReactCodeTab(page: Page) { // To prevent early timeouts // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(1000); - await page.locator("[data-testid=horizontal-tab-React]").click(); + await page.locator("[data-testid=horizontal-tab-react]").click(); } async function clickEmbedButton(page: Page) { diff --git a/apps/web/playwright/lib/testUtils.ts b/apps/web/playwright/lib/testUtils.ts index a752cb9a64..d8742c20ad 100644 --- a/apps/web/playwright/lib/testUtils.ts +++ b/apps/web/playwright/lib/testUtils.ts @@ -66,9 +66,9 @@ export function createHttpServer(opts: { requestHandler?: RequestHandler } = {}) eventEmitter.on("push", pushHandler); setTimeout(() => { if (resolved) return; - // Timeout after 5 seconds + // Timeout after 10 seconds reject(new Error("Timeout waiting for webhook")); - }, 5000); + }, 10000); }); }; diff --git a/apps/web/playwright/manage-booking-questions.e2e.ts b/apps/web/playwright/manage-booking-questions.e2e.ts index 9443f13f1b..7a12904544 100644 --- a/apps/web/playwright/manage-booking-questions.e2e.ts +++ b/apps/web/playwright/manage-booking-questions.e2e.ts @@ -258,7 +258,6 @@ test.describe("Manage Booking Questions", () => { await test.step("Go to First Team Event", async () => { const locator = page.getByTestId(`horizontal-tab-${team?.name}`); await locator.click(); - await expect(locator).toHaveClass(/bg-emphasis/); const $eventTypes = page.locator("[data-testid=event-types]").locator("li a"); const firstEventTypeElement = $eventTypes.first(); diff --git a/apps/web/playwright/organization/lib/inviteUser.ts b/apps/web/playwright/organization/lib/inviteUser.ts index 12f2b0db5d..53d9046afe 100644 --- a/apps/web/playwright/organization/lib/inviteUser.ts +++ b/apps/web/playwright/organization/lib/inviteUser.ts @@ -56,6 +56,6 @@ async function inviteAnEmail(page: Page, invitedUserEmail: string) { await page.getByTestId("new-organization-member-button").click(); await page.locator('input[name="inviteUser"]').fill(invitedUserEmail); await submitAndWaitForResponse(page, "/api/trpc/teams/inviteMember?batch=1", { - action: () => page.locator('button:text("Send invite")').click(), + action: () => page.getByTestId("invite-new-member-button").click(), }); } diff --git a/apps/web/playwright/organization/organization-creation.e2e.ts b/apps/web/playwright/organization/organization-creation.e2e.ts index 6a4ba312ed..5f6ae6eada 100644 --- a/apps/web/playwright/organization/organization-creation.e2e.ts +++ b/apps/web/playwright/organization/organization-creation.e2e.ts @@ -135,7 +135,7 @@ test.describe("Organization", () => { await test.step("Basic info", async () => { // Check required fields await page.locator("button[type=submit]").click(); - await expect(page.locator(".text-red-700")).toHaveCount(3); + await expect(page.getByTestId("field-error")).toHaveCount(3); // Happy path await fillAndSubmitFirstStepAsAdmin(page, orgOwnerEmail, orgName, orgSlug); @@ -152,12 +152,12 @@ test.describe("Organization", () => { await test.step("About the organization", async () => { // Choosing an avatar - await page.locator('button:text("Upload")').click(); + await page.getByTestId("open-upload-avatar-dialog").click(); const fileChooserPromise = page.waitForEvent("filechooser"); await page.getByText("Choose a file...").click(); const fileChooser = await fileChooserPromise; await fileChooser.setFiles(path.join(__dirname, "../../public/apple-touch-icon.png")); - await page.locator('button:text("Save")').click(); + await page.getByTestId("upload-avatar").click(); // About text await page.locator('textarea[name="about"]').fill("This is a testing org"); @@ -202,7 +202,7 @@ test.describe("Organization", () => { await page.locator('input[name="teams.0.name"]').fill("Marketing"); // Adding another team - await page.locator('button:text("Add a team")').click(); + await page.getByTestId("add_a_team").click(); await page.locator('input[name="teams.1.name"]').fill("Sales"); // Finishing the creation wizard @@ -269,7 +269,7 @@ test.describe("Organization", () => { await test.step("Basic info", async () => { // Check required fields await page.locator("button[type=submit]").click(); - await expect(page.locator(".text-red-700")).toHaveCount(3); + await expect(page.getByTestId("field-error")).toHaveCount(3); // Happy path await fillAndSubmitFirstStepAsAdmin(page, orgOwnerEmail, orgName, orgSlug); @@ -319,12 +319,12 @@ test.describe("Organization", () => { await test.step("About the organization", async () => { // Choosing an avatar - await page.locator('button:text("Upload")').click(); + await page.getByTestId("open-upload-avatar-dialog").click(); const fileChooserPromise = page.waitForEvent("filechooser"); await page.getByText("Choose a file...").click(); const fileChooser = await fileChooserPromise; await fileChooser.setFiles(path.join(__dirname, "../../public/apple-touch-icon.png")); - await page.locator('button:text("Save")').click(); + await page.getByTestId("upload-avatar").click(); // About text await page.locator('textarea[name="about"]').fill("This is a testing org"); @@ -369,7 +369,7 @@ test.describe("Organization", () => { await page.locator('input[name="teams.0.name"]').fill("Marketing"); // Adding another team - await page.locator('button:text("Add a team")').click(); + await page.getByTestId("add_a_team").click(); await page.locator('input[name="teams.1.name"]').fill("Sales"); // Finishing the creation wizard @@ -451,12 +451,12 @@ test.describe("Organization", () => { await test.step("About the organization", async () => { // Choosing an avatar - await page.locator('button:text("Upload")').click(); + await page.getByTestId("open-upload-avatar-dialog").click(); const fileChooserPromise = page.waitForEvent("filechooser"); await page.getByText("Choose a file...").click(); const fileChooser = await fileChooserPromise; await fileChooser.setFiles(path.join(__dirname, "../../public/apple-touch-icon.png")); - await page.locator('button:text("Save")').click(); + await page.getByTestId("upload-avatar").click(); // About text await page.locator('textarea[name="about"]').fill("This is a testing org"); @@ -511,7 +511,7 @@ test.describe("Organization", () => { await page.locator('input[name="teams.0.name"]').fill("Marketing"); // Adding another team - await page.locator('button:text("Add a team")').click(); + await page.getByTestId("new-team-dialog-button").click(); await page.locator('input[name="teams.1.name"]').fill("Sales"); // Finishing the creation wizard diff --git a/apps/web/playwright/organization/organization-invitation.e2e.ts b/apps/web/playwright/organization/organization-invitation.e2e.ts index a9604e2bc4..9fab1a31ea 100644 --- a/apps/web/playwright/organization/organization-invitation.e2e.ts +++ b/apps/web/playwright/organization/organization-invitation.e2e.ts @@ -546,7 +546,7 @@ async function inviteAnEmail(page: Page, invitedUserEmail: string, teamPage?: bo } await page.locator('input[name="inviteUser"]').fill(invitedUserEmail); const submitPromise = page.waitForResponse("/api/trpc/teams/inviteMember?batch=1"); - await page.locator('button:text("Send invite")').click(); + await page.getByTestId("invite-new-member-button").click(); const response = await submitPromise; expect(response.status()).toBe(200); } diff --git a/apps/web/playwright/team/team-invitation.e2e.ts b/apps/web/playwright/team/team-invitation.e2e.ts index 0405d8e108..2b18d0b6db 100644 --- a/apps/web/playwright/team/team-invitation.e2e.ts +++ b/apps/web/playwright/team/team-invitation.e2e.ts @@ -29,7 +29,7 @@ test.describe("Team", () => { }); await page.getByTestId("new-member-button").click(); await page.locator('input[name="inviteUser"]').fill(invitedUserEmail); - await page.locator(`button:text("${t("send_invite")}")`).click(); + await page.getByText(t("send_invite")).click(); const inviteLink = await expectInvitationEmailToBeReceived( page, emails, @@ -110,7 +110,7 @@ test.describe("Team", () => { }); await page.getByTestId("new-member-button").click(); await page.locator('input[name="inviteUser"]').fill(invitedUserEmail); - await page.locator(`button:text("${t("send_invite")}")`).click(); + await page.getByText(t("send_invite")).click(); await expectInvitationEmailToBeReceived( page, emails, @@ -155,7 +155,7 @@ test.describe("Team", () => { await page.goto(`/settings/teams/${team.id}/members`); await page.getByTestId("new-member-button").click(); await page.locator('input[name="inviteUser"]').fill(invitedMember.email); - await page.locator(`button:text("${t("send_invite")}")`).click(); + await page.getByText(t("send_invite")).click(); await invitedMember.apiLogin(); await page.goto(`/teams`); diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index 7a9021fe68..163fda356c 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -5,94 +5,248 @@ * Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC */ :root { - /* background */ + /* Spacing Scale */ + --cal-spacing-0: 0px; + --cal-spacing-px: 1px; + --cal-spacing-0_5: 0.125rem; /* 2px */ + --cal-spacing-1: 0.25rem; /* 4px */ + --cal-spacing-1_5: 0.375rem; /* 6px */ + --cal-spacing-2: 0.5rem; /* 8px */ + --cal-spacing-2_5: 0.625rem; /* 10px */ + --cal-spacing-3: 0.75rem; /* 12px */ + --cal-spacing-3_5: 0.875rem; /* 14px */ + --cal-spacing-4: 1rem; /* 16px */ + --cal-spacing-5: 1.25rem; /* 20px */ + --cal-spacing-6: 1.5rem; /* 24px */ + --cal-spacing-7: 1.75rem; /* 28px */ + --cal-spacing-8: 2rem; /* 32px */ + --cal-spacing-9: 2.25rem; /* 36px */ + --cal-spacing-10: 2.5rem; /* 40px */ + --cal-spacing-11: 2.75rem; /* 44px */ + --cal-spacing-12: 3rem; /* 48px */ + --cal-spacing-14: 3.5rem; /* 56px */ + --cal-spacing-16: 4rem; /* 64px */ + --cal-spacing-20: 5rem; /* 80px */ + --cal-spacing-24: 6rem; /* 96px */ + --cal-spacing-28: 7rem; /* 112px */ + --cal-spacing-32: 8rem; /* 128px */ + --cal-spacing-36: 9rem; /* 144px */ + --cal-spacing-40: 10rem; /* 160px */ + --cal-spacing-44: 11rem; /* 176px */ + --cal-spacing-48: 12rem; /* 192px */ + --cal-spacing-52: 13rem; /* 208px */ + --cal-spacing-56: 14rem; /* 224px */ + --cal-spacing-60: 15rem; /* 240px */ + --cal-spacing-64: 16rem; /* 256px */ + --cal-spacing-72: 18rem; /* 288px */ + --cal-spacing-80: 20rem; /* 320px */ + --cal-spacing-96: 24rem; /* 384px */ - --cal-bg-emphasis: hsla(220,13%,91%,1); - --cal-bg: hsla(0,0%,100%,1); - --cal-bg-subtle: hsla(220, 14%, 96%,1); - --cal-bg-muted: hsla(210,20%,98%,1); - --cal-bg-inverted: hsla(0,0%,6%,1); + /* Border Radius */ + --cal-radius-none: 0px; + --cal-radius-sm: 0.125rem; /* 2px */ + --cal-radius: 0.25rem; /* 4px */ + --cal-radius-md: 0.375rem; /* 6px */ + --cal-radius-lg: 0.5rem; /* 8px */ + --cal-radius-xl: 0.75rem; /* 12px */ + --cal-radius-2xl: 1rem; /* 16px */ + --cal-radius-3xl: 1.5rem; /* 24px */ + --cal-radius-full: 9999px; - /* background -> components*/ - --cal-bg-info: hsla(218,83%,98%,1); - --cal-bg-success: hsla(134,76%,94%,1); - --cal-bg-attention: hsla(37, 86%, 92%, 1); - --cal-bg-error: hsla(3,66%,93%,1); - --cal-bg-dark-error: hsla(2, 55%, 30%, 1); + /* Background Standard */ + --cal-bg-emphasis: hsla(220, 13%, 91%, 1); /* gray.200 - active items and emphasising */ + --cal-bg: hsla(0, 0%, 100%, 1); /* white - default background */ + --cal-bg-subtle: hsla(220, 14%, 94%, 1); /* gray.100 - hovering on items, subtle raising */ + --cal-bg-muted: hsla(210, 20%, 97%, 1); /* gray.50 - large items, sidebar, sections */ + --cal-bg-inverted: hsla(210, 30%, 4%, 1); /* gray.900 - tooltips */ + + /* Background Primary */ + --cal-bg-primary: hsla(214, 30%, 16%, 1); /* stone-100 */ + --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1); /* stone-800 */ + --cal-bg-primary-muted: hsla(220, 14%, 94%, 1); /* stone-400 */ + + /* Background Brand */ + --cal-bg-brand: hsla(214, 30%, 16%, 1); /* gray-50 */ + --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1); /* stone-100 */ + --cal-bg-brand-muted: hsla(220, 14%, 94%, 1); /* stone-100 */ + + /* Background Semantic */ + --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1); /* blue-100 */ + --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1); /* blue-500 */ + --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1); /* green-100 */ + --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ + --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */ + --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1); /* orange-500 */ + --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1); /* red-100 */ + --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1); /* red-500 */ + + /* Background Visualization */ + --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1); /* pink-100 */ + --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */ + --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1); /* purple-100 */ + --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */ + --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1); /* blue-100 */ + --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */ + --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1); /* green-100 */ + --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ + --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1); /* yellow-100 */ + --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */ + --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */ + --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */ + --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1); /* red-100 */ + --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */ + + /* Legacy Background Components - Consider deprecating */ + --cal-bg-info: hsla(221, 91%, 93%, 1); /* #dee9fc - info backgrounds */ + --cal-bg-success: hsla(142, 76%, 94%, 1); /* #e2fbe8 - success backgrounds */ + --cal-bg-attention: hsla(33, 100%, 92%, 1); /* #fceed8 - attention backgrounds */ + --cal-bg-error: hsla(3, 66%, 93%, 1); /* #f9e3e2 - error backgrounds */ + --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */ /* Borders */ - --cal-border-emphasis: hsla(218, 11%, 65%, 1); - --cal-border: hsla(216, 12%, 84%, 1); - --cal-border-subtle: hsla(220, 13%, 91%, 1); - --cal-border-booker: #e5e7eb; - --cal-border-muted: hsla(220, 14%, 96%, 1); - --cal-border-error: hsla(4, 63%, 41%, 1); - --cal-border-focus: hsla(0, 0%, 10%, 1); + --cal-border-emphasis: hsla(218, 11%, 65%, 1); /* gray.400 - input:hover */ + --cal-border: hsla(216, 12%, 84%, 1); /* gray.300 - inputs */ + --cal-border-subtle: hsla(220, 13%, 91%, 1); /* gray.200 - container borders */ + --cal-border-muted: hsla(220, 14%, 94%, 1); /* gray.100 */ + --cal-border-error: hsla(0, 96%, 89%, 1); /* Keeping existing error border */ + --cal-border-semantic-error: hsla(0, 96%, 89%, 1); + --cal-border-booker: var(--cal-border-subtle); - /* Content/Text */ - --cal-text-emphasis: hsla(217, 19%, 27%, 1); - --cal-text: hsla(217, 19%, 27%, 1); - --cal-text-subtle: hsla(220, 9%, 46%, 1); - --cal-text-muted: hsla(218, 11%, 65%, 1); - --cal-text-inverted: hsla(0, 0%, 100%, 1); + /* Content/Text Standard */ + --cal-text-emphasis: hsla(210, 30%, 4%, 1); /* gray-900 */ + --cal-text: hsla(220, 6%, 25%, 1); /* gray-700 */ + --cal-text-subtle: hsla(220, 9%, 46%, 1); /* gray-500 */ + --cal-text-muted: hsla(218, 11%, 65%, 1); /* gray-400 */ + --cal-text-inverted: hsla(0, 0%, 100%, 1); /* white */ - /* Content/Text -> components */ - --cal-text-info: hsla(228, 56%, 33%, 1); - --cal-text-success: hsla(133, 34%, 24%, 1); - --cal-text-attention: hsla(16, 62%, 28%, 1); - --cal-text-error: hsla(2, 55%, 30%, 1); + /* Content/Text Semantic */ + --cal-text-semantic-info: hsla(236, 80%, 25%, 1); /* blue-800 */ + --cal-text-semantic-success: hsla(150, 84%, 22%, 1); /* green-800 */ + --cal-text-semantic-attention: hsla(15, 79%, 34%, 1); /* orange-800 */ + --cal-text-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */ - /* Brand shinanigans - -> These will be computed for the users theme at runtime. - */ - --cal-brand: hsla(221, 39%, 11%, 1); - --cal-brand-emphasis: hsla(0, 0%, 6%, 1); - --cal-brand-text: hsla(0, 0%, 100%, 1); + /* Content/Text Visualization */ + --cal-text-visualization-1: hsla(332, 79%, 25%, 1); /* pink-800 */ + --cal-text-visualization-2: hsla(270, 91%, 25%, 1); /* purple-800 */ + --cal-text-visualization-3: hsla(217, 91%, 25%, 1); /* blue-800 */ + --cal-text-visualization-4: hsla(142, 71%, 25%, 1); /* green-800 */ + --cal-text-visualization-5: hsla(45, 93%, 25%, 1); /* yellow-800 */ + --cal-text-visualization-6: hsla(24, 95%, 25%, 1); /* orange-800 */ + --cal-text-visualization-7: hsla(0, 84%, 25%, 1); /* red-800 */ + + /* Border/Semantic Subtle */ + --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1); + --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1); + + /* Legacy Content/Text Components - Consider deprecating */ + --cal-text-info: hsla(225, 57%, 33%, 1); /* #253985 - interactive text/icons */ + --cal-text-success: hsla(144, 34%, 24%, 1); /* #285231 */ + --cal-text-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention text */ + --cal-text-error: hsla(0, 63%, 31%, 1); /* Keeping existing error text */ + + /* Brand */ + --cal-brand: hsla(221, 39%, 11%, 1); /* Keeping existing brand color */ + --cal-brand-emphasis: hsla(0, 0%, 6%, 1); /* Keeping existing brand emphasis */ + --cal-brand-text: hsla(0, 0%, 100%, 1); /* white */ } .dark { - /* background */ + /* Background Standard */ + --cal-bg-emphasis: hsla(0, 0%, 25%, 1); /* stone-700 */ + --cal-bg: hsla(0, 0%, 6%, 1); /* stone-950 */ + --cal-bg-subtle: hsla(0, 0%, 15%, 1); /* stone-800 */ + --cal-bg-muted: hsla(0, 0%, 9%, 1); /* stone-900 */ + --cal-bg-inverted: hsla(0, 0%, 98%, 1); /* stone-50 */ - --cal-bg-emphasis: hsla(0, 0%, 25%, 1); - --cal-bg: hsla(0, 0%, 10%, 1); - --cal-bg-subtle: hsla(0, 0%, 18%, 1); - --cal-bg-muted: hsla(0, 0%, 12%, 1); - --cal-bg-inverted: hsla(220, 14%, 96%, 1); + /* Background Primary */ + --cal-bg-primary: hsla(0, 0%, 96%, 1); /* stone-100 */ + --cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1); /* stone-800 */ + --cal-bg-primary-muted: hsla(0, 0%, 15%, 1); /* stone-400 */ - /* background -> components*/ - --cal-bg-info: hsla(228, 56%, 33%, 1); - --cal-bg-success: hsla(133, 34%, 24%, 1); - --cal-bg-attention: hsla(16, 62%, 28%, 1); - --cal-bg-error: hsla(2, 55%, 30%, 1); - --cal-bg-dark-error: hsla(2, 55%, 30%, 1); + /* Background Brand */ + --cal-bg-brand: hsla(0, 0%, 98%, 1); /* gray-50 */ + --cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1); /* stone-100 */ + --cal-bg-brand-muted: hsla(0, 0%, 96%, 1); /* stone-100 */ - /* Borders */ - --cal-border-emphasis: hsla(0, 0%, 46%, 1); - --cal-border: hsla(0, 0%, 34%, 1); - --cal-border-subtle: hsla(0, 0%, 22%, 1); - --cal-border-booker: hsla(0, 0%, 22%, 1); - --cal-border-muted: hsla(0, 0%, 18%, 1); - --cal-border-error: hsla(4, 63%, 41%, 1); - --cal-border-focus: hsla(0, 0%, 100%, 1); + /* Background Semantic */ + --cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1); /* blue-800 */ + --cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1); /* blue-500 */ + --cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1); /* green-800 */ + --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ + --cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1); /* orange-800 */ + --cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1); /* orange-500 */ + --cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1); /* red-800 */ + --cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1); /* red-500 */ - /* Content/Text */ - --cal-text-emphasis: hsla(240, 20%, 99%, 1); - --cal-text: hsla(0, 0%, 84%, 1); - --cal-text-subtle: hsla(0, 0%, 65%, 1); - --cal-text-muted: hsla(0, 0%, 34%, 1); - --cal-text-inverted: hsla(0, 0%, 10%, 1); + /* Background Visualization */ + --cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1); /* pink-200 */ + --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */ + --cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1); /* purple-200 */ + --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */ + --cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1); /* blue-200 */ + --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */ + --cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1); /* green-200 */ + --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ + --cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1); /* yellow-200 */ + --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */ + --cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1); /* orange-200 */ + --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */ + --cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1); /* red-200 */ + --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */ - /* Content/Text -> components */ - --cal-text-info: hsla(218, 83%, 93%, 1); - --cal-text-success: hsla(134, 76%, 94%, 1); - --cal-text-attention: hsla(37, 86%, 92%, 1); - --cal-text-error: hsla(3, 66%, 93%, 1); + /* Legacy Background Components - Consider deprecating */ + --cal-bg-info: hsla(228, 56%, 33%, 1); /* Keeping existing info background */ + --cal-bg-success: hsla(133, 34%, 24%, 1); /* Keeping existing success background */ + --cal-bg-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention background */ + --cal-bg-error: hsla(2, 55%, 30%, 1); /* Keeping existing error background */ + --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */ - /* Brand shenanigans - -> These will be computed for the users theme at runtime. - */ - --cal-brand: hsla(0, 0%, 100%, 1); - --cal-brand-emphasis: hsla(218, 11%, 65%, 1); - --cal-brand-text: hsla(0, 0%, 0%,1); + /* Border Standard */ + --cal-border: hsla(0, 0%, 30%, 1); /* stone-600 */ + --cal-border-muted: hsla(0, 0%, 9%, 1); /* stone-500 */ + --cal-border-subtle: hsla(0, 0%, 15%, 1); /* stone-700 */ + --cal-border-emphasis: hsla(0, 0%, 45%, 1); /* stone-800 */ + --cal-border-booker: var(--cal-border-subtle); + /* Border Semantic */ + --cal-border-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */ + + + /* Border/Semantic Subtle */ + --cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1); + --cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1); + + + /* Legacy Border - Consider deprecating */ + --cal-border-error: hsla(0, 63%, 24%, 1); /* Keeping existing error border */ + + /* Content/Text Standard */ + --cal-text-emphasis: hsla(0, 0%, 98%, 1); /* stone-50 */ + --cal-text: hsla(0, 0%, 83%, 1); /* stone-300 */ + --cal-text-subtle: hsla(0, 0%, 64%, 1); /* stone-400 */ + --cal-text-muted: hsla(0, 0%, 64%, 1); /* stone-400 */ + --cal-text-inverted: hsla(0, 0%, 0%, 1); /* black */ + + /* Content/Text Semantic */ + --cal-text-semantic-info: hsla(229, 90%, 74%, 1); /* blue-100 */ + --cal-text-semantic-success: hsla(161, 49%, 54%, 1); /* green-100 */ + --cal-text-semantic-attention: hsla(27, 96%, 61%, 1); /* orange-100 */ + --cal-text-semantic-error: hsla(0, 91%, 71%, 1); /* red-100 */ + + /* Content/Text Semantic Emphasis */ + --cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1); /* blue-800 */ + --cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1); /* green-800 */ + --cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1); /* orange-800 */ + --cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1); /* red-800 */ + + /* Legacy Content/Text Components - Consider deprecating */ + --cal-text-info: hsla(218, 83%, 93%, 1); /* Keeping existing info text */ + --cal-text-success: hsla(134, 76%, 94%, 1); /* Keeping existing success text */ + --cal-text-attention: hsla(37, 86%, 92%, 1); /* Keeping existing attention text */ + --cal-text-error: hsla(3, 66%, 93%, 1); /* Keeping existing error text */ + + /* Brand */ + --cal-brand: hsla(0, 0%, 100%, 1); /* white */ + --cal-brand-emphasis: hsla(218, 11%, 65%, 1); /* Keeping existing brand emphasis */ + --cal-brand-text: hsla(0, 0%, 0%, 1); /* black */ } @layer base { @@ -484,5 +638,8 @@ select:focus { @apply z-40 !important; } +[data-radix-popper-content-wrapper] { + border: none; +} @import "./raqb.css"; diff --git a/packages/app-store/_utils/getAppCategories.ts b/packages/app-store/_utils/getAppCategories.ts index 115634d79c..3833d82a6b 100644 --- a/packages/app-store/_utils/getAppCategories.ts +++ b/packages/app-store/_utils/getAppCategories.ts @@ -12,6 +12,7 @@ type AppCategoryEntry = { name: AppCategories; href: string; icon: IconName; + "data-testid": string; }; const getAppCategories = (baseURL: string, useQueryParam: boolean): AppCategoryEntry[] => { @@ -22,41 +23,49 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean): AppCategoryE name: "analytics", href: getHref(baseURL, "analytics", useQueryParam), icon: "chart-bar", + "data-testid": "analytics", }, { name: "automation", href: getHref(baseURL, "automation", useQueryParam), icon: "share-2", + "data-testid": "automation", }, { name: "calendar", href: getHref(baseURL, "calendar", useQueryParam), icon: "calendar", + "data-testid": "calendar", }, { name: "conferencing", href: getHref(baseURL, "conferencing", useQueryParam), icon: "video", + "data-testid": "conferencing", }, { name: "crm", href: getHref(baseURL, "crm", useQueryParam), icon: "contact", + "data-testid": "crm", }, { name: "messaging", href: getHref(baseURL, "messaging", useQueryParam), icon: "mail", + "data-testid": "messaging", }, { name: "payment", href: getHref(baseURL, "payment", useQueryParam), icon: "credit-card", + "data-testid": "payment", }, { name: "other", href: getHref(baseURL, "other", useQueryParam), icon: "grid-3x3", + "data-testid": "other", }, ]; }; diff --git a/packages/app-store/hitpay/components/KeyInput.tsx b/packages/app-store/hitpay/components/KeyInput.tsx index e9aa3ec494..16a80e4f5e 100644 --- a/packages/app-store/hitpay/components/KeyInput.tsx +++ b/packages/app-store/hitpay/components/KeyInput.tsx @@ -10,17 +10,15 @@ import type { InputFieldProps } from "@calcom/ui/components/form/inputs/types"; type AddonProps = { children: React.ReactNode; - isFilled?: boolean; className?: string; error?: boolean; onClickAddon?: () => void; }; -const Addon = ({ isFilled, children, className, error }: AddonProps) => ( +const Addon = ({ children, className, error }: AddonProps) => (
    {addOnLeading && ( - + {addOnLeading} )} diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx index 688ee5b2c9..b1a9740824 100644 --- a/packages/app-store/routing-forms/components/FormActions.tsx +++ b/packages/app-store/routing-forms/components/FormActions.tsx @@ -525,7 +525,7 @@ export const FormAction = forwardRef(function FormAction +
    -
    +
    -
    +
    {customPageMessage}
    diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js index 6f21acbe0f..049a1932d1 100644 --- a/packages/config/tailwind-preset.js +++ b/packages/config/tailwind-preset.js @@ -1,5 +1,6 @@ const plugin = require("tailwindcss/plugin"); const { fontFamily } = require("tailwindcss/defaultTheme"); +const colors = require("tailwindcss/colors"); /** @type {import('tailwindcss').Config} */ const subtleColor = "#E5E7EB"; @@ -16,72 +17,191 @@ module.exports = { ], darkMode: "class", theme: { + spacing: { + 0: "var(--cal-spacing-0)", + px: "var(--cal-spacing-px)", + 0.5: "var(--cal-spacing-0_5)", + 1: "var(--cal-spacing-1)", + 1.5: "var(--cal-spacing-1_5)", + 2: "var(--cal-spacing-2)", + 2.5: "var(--cal-spacing-2_5)", + 3: "var(--cal-spacing-3)", + 3.5: "var(--cal-spacing-3_5)", + 4: "var(--cal-spacing-4)", + 5: "var(--cal-spacing-5)", + 6: "var(--cal-spacing-6)", + 7: "var(--cal-spacing-7)", + 8: "var(--cal-spacing-8)", + 9: "var(--cal-spacing-9)", + 10: "var(--cal-spacing-10)", + 11: "var(--cal-spacing-11)", + 12: "var(--cal-spacing-12)", + 14: "var(--cal-spacing-14)", + 16: "var(--cal-spacing-16)", + 20: "var(--cal-spacing-20)", + 24: "var(--cal-spacing-24)", + 28: "var(--cal-spacing-28)", + 32: "var(--cal-spacing-32)", + 36: "var(--cal-spacing-36)", + 40: "var(--cal-spacing-40)", + 44: "var(--cal-spacing-44)", + 48: "var(--cal-spacing-48)", + 52: "var(--cal-spacing-52)", + 56: "var(--cal-spacing-56)", + 60: "var(--cal-spacing-60)", + 64: "var(--cal-spacing-64)", + 72: "var(--cal-spacing-72)", + 80: "var(--cal-spacing-80)", + 96: "var(--cal-spacing-96)", + }, + borderRadius: { + none: "var(--cal-radius-none)", + sm: "var(--cal-radius-sm)", + DEFAULT: "var(--cal-radius)", + md: "var(--cal-radius-md)", + lg: "var(--cal-radius-lg)", + xl: "var(--cal-radius-xl)", + "2xl": "var(--cal-radius-2xl)", + "3xl": "var(--cal-radius-3xl)", + full: "var(--cal-radius-full)", + }, extend: { colors: { + // Standard Background emphasis: "var(--cal-bg-emphasis)", default: "var(--cal-bg, white)", subtle: "var(--cal-bg-subtle)", muted: "var(--cal-bg-muted)", inverted: "var(--cal-bg-inverted)", - info: "var(--cal-bg-info)", - success: "var(--cal-bg-success)", - attention: "var(--cal-bg-attention)", - error: "var(--cal-bg-error)", - darkerror: "var(--cal-bg-dark-error)", - black: "#111111", + + // Primary Background + primary: { + default: "var(--cal-bg-primary)", + emphasis: "var(--cal-bg-primary-emphasis)", + muted: "var(--cal-bg-primary-muted)", + }, + + // Brand brand: { default: "var(--cal-brand,#111827)", emphasis: "var(--cal-brand-emphasis,#101010)", subtle: "var(--cal-brand-subtle,#9CA3AF)", accent: "var(--cal-brand-accent,white)", }, - gray: { - 50: "#F9FAFB", - 100: "#F3F4F6", - 200: "#E5E7EB", - 300: "#D1D5DB", - 400: "#9CA3AF", - 500: "#6B7280", - 600: "#4B5563", - 700: "#374151", - 800: "#1F2937", - 900: "#111827", + + // Semantic Background + semantic: { + info: { + subtle: "var(--cal-bg-semantic-info-subtle)", + emphasis: "var(--cal-bg-semantic-info-emphasis)", + }, + success: { + subtle: "var(--cal-bg-semantic-success-subtle)", + emphasis: "var(--cal-bg-semantic-success-emphasis)", + }, + attention: { + subtle: "var(--cal-bg-semantic-attention-subtle)", + emphasis: "var(--cal-bg-semantic-attention-emphasis)", + }, + error: { + subtle: "var(--cal-bg-semantic-error-subtle)", + emphasis: "var(--cal-bg-semantic-error-emphasis)", + }, }, - darkgray: { - 50: "#101010", - 100: "#1c1c1c", - 200: "#2b2b2b", - 300: "#444444", - 400: "#575757", - 500: "#767676", - 600: "#a5a5a5", - 700: "#d6d6d6", - 800: "#e8e8e8", - 900: "#f3f4f6", + + // Visualization Background + visualization: { + 1: { + subtle: "var(--cal-bg-visualization-1-subtle)", + emphasis: "var(--cal-bg-visualization-1-emphasis)", + }, + 2: { + subtle: "var(--cal-bg-visualization-2-subtle)", + emphasis: "var(--cal-bg-visualization-2-emphasis)", + }, + 3: { + subtle: "var(--cal-bg-visualization-3-subtle)", + emphasis: "var(--cal-bg-visualization-3-emphasis)", + }, + 4: { + subtle: "var(--cal-bg-visualization-4-subtle)", + emphasis: "var(--cal-bg-visualization-4-emphasis)", + }, + 5: { + subtle: "var(--cal-bg-visualization-5-subtle)", + emphasis: "var(--cal-bg-visualization-5-emphasis)", + }, + 6: { + subtle: "var(--cal-bg-visualization-6-subtle)", + emphasis: "var(--cal-bg-visualization-6-emphasis)", + }, + 7: { + subtle: "var(--cal-bg-visualization-7-subtle)", + emphasis: "var(--cal-bg-visualization-7-emphasis)", + }, }, + + // Legacy - Consider deprecating + info: "var(--cal-bg-info)", + success: "var(--cal-bg-success)", + attention: "var(--cal-bg-attention)", + error: "var(--cal-bg-error)", + darkerror: "var(--cal-bg-dark-error)", + + // Base colors + black: "#111111", + gray: colors.gray, + darkgray: colors.slate, }, borderColor: { - emphasis: "var(--cal-border-emphasis, #9CA3AF)", - default: "var(--cal-border, #D1D5DB)", - subtle: `var(--cal-border-subtle, ${subtleColor})`, - muted: "var(--cal-border-muted, #F3F4F6)", + // Standard Borders + emphasis: "var(--cal-border-emphasis)", + default: "var(--cal-border)", + subtle: "var(--cal-border-subtle)", + muted: "var(--cal-border-muted)", + + // Semantic Borders + semantic: { + error: "var(--cal-border-semantic-error)", + "attention-subtle": "var(--cal-border-semantic-attention-subtle)", + "error-subtle": "var(--cal-border-semantic-error-subtle)", + }, + + // Used in booker embed customization booker: `var(--cal-border-booker, ${subtleColor})`, - error: "var(--cal-border-error, #AA2E26)", - focus: "var(--cal-border-focus, #1A1A1A)", - "cal-bg": "var(--cal-bg, white)", + // Legacy - Consider deprecating + error: "var(--cal-border-error)", + "cal-bg": "var(--cal-bg)", "cal-bg-muted": "var(--cal-bg-muted)", }, textColor: { - emphasis: "var(--cal-text-emphasis, #111827)", - default: "var(--cal-text, #374151)", - subtle: "var(--cal-text-subtle, #6B7280)", - muted: "var(--cal-text-muted, #9CA3AF)", - inverted: "var(--cal-text-inverted, white)", - info: "var(--cal-text-info, #253985)", - success: "var(--cal-text-success, #285231)", - attention: "var(--cal-text-attention, #73321B)", - error: "var(--cal-text-error, #752522)", - brand: "var(--cal-brand-text,'white')", + // Standard Text + emphasis: "var(--cal-text-emphasis)", + default: "var(--cal-text)", + subtle: "var(--cal-text-subtle)", + muted: "var(--cal-text-muted)", + inverted: "var(--cal-text-inverted)", + + // Semantic Text + semantic: { + info: "var(--cal-text-semantic-info)", + success: "var(--cal-text-semantic-success)", + attention: "var(--cal-text-semantic-attention)", + error: "var(--cal-text-semantic-error)", + }, + + // Semantic Text Emphasis + "semantic-info-emphasis": "var(--cal-text-semantic-info-emphasis)", + "semantic-success-emphasis": "var(--cal-text-semantic-success-emphasis)", + "semantic-attention-emphasis": "var(--cal-text-semantic-attention-emphasis)", + "semantic-error-emphasis": "var(--cal-text-semantic-error-emphasis)", + + // Legacy - Consider deprecating + info: "var(--cal-text-info)", + success: "var(--cal-text-success)", + attention: "var(--cal-text-attention)", + error: "var(--cal-text-error)", + brand: "var(--cal-brand-text)", }, fill: { emphasis: "var(--cal-text-emphasis, #111827)", @@ -122,9 +242,6 @@ module.exports = { drawerSlideLeftAndFade: "drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)", drawerSlideRightAndFade: "drawerSlideRightAndFade 150ms ease-in", }, - boxShadow: { - dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)", - }, borderWidth: { "booker-width": "var(--cal-border-booker-width, 1px)", }, @@ -162,6 +279,39 @@ module.exports = { backgroundImage: { "gradient-primary": "radial-gradient(162.05% 170% at 109.58% 35%, #667593 0%, #E3E3E3 100%)", }, + boxShadow: { + dropdown: "0px 5px 20px 0px rgba(0, 0, 0, 0.10), 0px 10px 40px 0px rgba(0, 0, 0, 0.03)", + "switch-thumb": "0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.10), 0px 0.8px 3.2px 0px rgba(0, 0, 0, 0.08)", + "solid-gray-rested": + "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 2px 0px rgba(0, 0, 0, 0.40) inset", + "solid-gray-hover": + "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -2px 2px 0px rgba(0, 0, 0, 0.40) inset", + "solid-gray-active": + "0px 2px 3px 0px rgba(0, 0, 0, 0.40) inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.40) inset", + "outline-gray-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)", + "outline-gray-hover": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)", + "outline-gray-active": "0px 2px 1px 0px rgba(0, 0, 0, 0.05) inset", + "outline-gray-focused": + "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 0px 0px 2px rgba(0, 0, 0, 0.10)", + "outline-red-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)", + "outline-red-hover": "0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 3px 0px rgba(0, 0, 0, 0.08)", + "outline-red-active": + "0px 1px 1px 0px rgba(127, 29, 29, 0.06), 0px 0px 3px 0px rgba(127, 29, 29, 0.08), 0px 2px 2px 1px rgba(127, 29, 29, 0.06) inset", + "elevation-low": + "0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 0px 8px 0px rgba(0, 0, 0, 0.05)", + // Brand + "button-solid-brand-default": + " 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.12) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.04) inset;", + "button-solid-brand-hover": + "0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset", + "button-solid-brand-active": + "0px 3px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.10) inset", + "button-solid-brand-focused": + "0px 0px 0px 1px rgba(255, 255, 255, 0.40), 0px 0px 0px 2px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset", + // Outline - red + "button-outline-red-focused": + "0px 0px 0px 1px rgba(255, 255, 255, 0.32), 0px 0px 0px 2px rgba(220, 38, 38, 0.15)", + }, }, }, plugins: [ @@ -183,6 +333,9 @@ module.exports = { }, }); }), + plugin(function ({ addVariant }) { + addVariant("enabled", "&:not(:disabled)"); + }), ], variants: { scrollbar: ["dark"], diff --git a/packages/config/theme/colors.css b/packages/config/theme/colors.css index 528238f007..3444160864 100644 --- a/packages/config/theme/colors.css +++ b/packages/config/theme/colors.css @@ -32,8 +32,7 @@ --cal-text-info: #253985; --cal-text-success: #285231; --cal-text-attention: #73321b; - --cal-text-error: #752522; - + --cal-text-error: hsla(0, 63%, 31%, 1); /* Brand shenanigans -> These will be computed for the users theme at runtime. */ diff --git a/packages/embeds/embed-core/src/addAppCssVars.ts b/packages/embeds/embed-core/src/addAppCssVars.ts new file mode 100644 index 0000000000..24899221f7 --- /dev/null +++ b/packages/embeds/embed-core/src/addAppCssVars.ts @@ -0,0 +1,157 @@ +export const addAppCssVars = () => { + try { + const cssVarsStyle = `cal-floating-button, cal-modal-box, cal-inline { + /* Spacing Scale */ + --cal-spacing-0: 0px; + --cal-spacing-px: 1px; + --cal-spacing-0_5: 0.125rem; /* 2px */ + --cal-spacing-1: 0.25rem; /* 4px */ + --cal-spacing-1_5: 0.375rem; /* 6px */ + --cal-spacing-2: 0.5rem; /* 8px */ + --cal-spacing-2_5: 0.625rem; /* 10px */ + --cal-spacing-3: 0.75rem; /* 12px */ + --cal-spacing-3_5: 0.875rem; /* 14px */ + --cal-spacing-4: 1rem; /* 16px */ + --cal-spacing-5: 1.25rem; /* 20px */ + --cal-spacing-6: 1.5rem; /* 24px */ + --cal-spacing-7: 1.75rem; /* 28px */ + --cal-spacing-8: 2rem; /* 32px */ + --cal-spacing-9: 2.25rem; /* 36px */ + --cal-spacing-10: 2.5rem; /* 40px */ + --cal-spacing-11: 2.75rem; /* 44px */ + --cal-spacing-12: 3rem; /* 48px */ + --cal-spacing-14: 3.5rem; /* 56px */ + --cal-spacing-16: 4rem; /* 64px */ + --cal-spacing-20: 5rem; /* 80px */ + --cal-spacing-24: 6rem; /* 96px */ + --cal-spacing-28: 7rem; /* 112px */ + --cal-spacing-32: 8rem; /* 128px */ + --cal-spacing-36: 9rem; /* 144px */ + --cal-spacing-40: 10rem; /* 160px */ + --cal-spacing-44: 11rem; /* 176px */ + --cal-spacing-48: 12rem; /* 192px */ + --cal-spacing-52: 13rem; /* 208px */ + --cal-spacing-56: 14rem; /* 224px */ + --cal-spacing-60: 15rem; /* 240px */ + --cal-spacing-64: 16rem; /* 256px */ + --cal-spacing-72: 18rem; /* 288px */ + --cal-spacing-80: 20rem; /* 320px */ + --cal-spacing-96: 24rem; /* 384px */ + + /* Border Radius */ + --cal-radius-none: 0px; + --cal-radius-sm: 0.125rem; /* 2px */ + --cal-radius: 0.25rem; /* 4px */ + --cal-radius-md: 0.375rem; /* 6px */ + --cal-radius-lg: 0.5rem; /* 8px */ + --cal-radius-xl: 0.75rem; /* 12px */ + --cal-radius-2xl: 1rem; /* 16px */ + --cal-radius-3xl: 1.5rem; /* 24px */ + --cal-radius-full: 9999px; + + /* Background Standard */ + --cal-bg-emphasis: hsla(220, 13%, 91%, 1); /* gray.200 - active items and emphasising */ + --cal-bg: hsla(0, 0%, 100%, 1); /* white - default background */ + --cal-bg-subtle: hsla(220, 14%, 94%, 1); /* gray.100 - hovering on items, subtle raising */ + --cal-bg-muted: hsla(210, 20%, 97%, 1); /* gray.50 - large items, sidebar, sections */ + --cal-bg-inverted: hsla(210, 30%, 4%, 1); /* gray.900 - tooltips */ + + /* Background Primary */ + --cal-bg-primary: hsla(214, 30%, 16%, 1); /* stone-100 */ + --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1); /* stone-800 */ + --cal-bg-primary-muted: hsla(220, 14%, 94%, 1); /* stone-400 */ + + /* Background Brand */ + --cal-bg-brand: hsla(214, 30%, 16%, 1); /* gray-50 */ + --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1); /* stone-100 */ + --cal-bg-brand-muted: hsla(220, 14%, 94%, 1); /* stone-100 */ + + /* Background Semantic */ + --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1); /* blue-100 */ + --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1); /* blue-500 */ + --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1); /* green-100 */ + --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ + --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */ + --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1); /* orange-500 */ + --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1); /* red-100 */ + --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1); /* red-500 */ + + /* Background Visualization */ + --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1); /* pink-100 */ + --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */ + --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1); /* purple-100 */ + --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */ + --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1); /* blue-100 */ + --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */ + --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1); /* green-100 */ + --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */ + --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1); /* yellow-100 */ + --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */ + --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */ + --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */ + --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1); /* red-100 */ + --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */ + + /* Legacy Background Components - Consider deprecating */ + --cal-bg-info: hsla(221, 91%, 93%, 1); /* #dee9fc - info backgrounds */ + --cal-bg-success: hsla(142, 76%, 94%, 1); /* #e2fbe8 - success backgrounds */ + --cal-bg-attention: hsla(33, 100%, 92%, 1); /* #fceed8 - attention backgrounds */ + --cal-bg-error: hsla(3, 66%, 93%, 1); /* #f9e3e2 - error backgrounds */ + --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */ + + /* Borders */ + --cal-border-emphasis: hsla(218, 11%, 65%, 1); /* gray.400 - input:hover */ + --cal-border: hsla(216, 12%, 84%, 1); /* gray.300 - inputs */ + --cal-border-subtle: hsla(220, 13%, 91%, 1); /* gray.200 - container borders */ + --cal-border-muted: hsla(220, 14%, 94%, 1); /* gray.100 */ + --cal-border-error: hsla(0, 96%, 89%, 1); /* Keeping existing error border */ + --cal-border-semantic-error: hsla(0, 96%, 89%, 1); + --cal-border-booker: var(--cal-border-subtle); + + /* Content/Text Standard */ + --cal-text-emphasis: hsla(210, 30%, 4%, 1); /* gray-900 */ + --cal-text: hsla(220, 6%, 25%, 1); /* gray-700 */ + --cal-text-subtle: hsla(220, 9%, 46%, 1); /* gray-500 */ + --cal-text-muted: hsla(218, 11%, 65%, 1); /* gray-400 */ + --cal-text-inverted: hsla(0, 0%, 100%, 1); /* white */ + + /* Content/Text Semantic */ + --cal-text-semantic-info: hsla(236, 80%, 25%, 1); /* blue-800 */ + --cal-text-semantic-success: hsla(150, 84%, 22%, 1); /* green-800 */ + --cal-text-semantic-attention: hsla(15, 79%, 34%, 1); /* orange-800 */ + --cal-text-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */ + + /* Content/Text Visualization */ + --cal-text-visualization-1: hsla(332, 79%, 25%, 1); /* pink-800 */ + --cal-text-visualization-2: hsla(270, 91%, 25%, 1); /* purple-800 */ + --cal-text-visualization-3: hsla(217, 91%, 25%, 1); /* blue-800 */ + --cal-text-visualization-4: hsla(142, 71%, 25%, 1); /* green-800 */ + --cal-text-visualization-5: hsla(45, 93%, 25%, 1); /* yellow-800 */ + --cal-text-visualization-6: hsla(24, 95%, 25%, 1); /* orange-800 */ + --cal-text-visualization-7: hsla(0, 84%, 25%, 1); /* red-800 */ + + /* Border/Semantic Subtle */ + --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1); + --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1); + + /* Legacy Content/Text Components - Consider deprecating */ + --cal-text-info: hsla(225, 57%, 33%, 1); /* #253985 - interactive text/icons */ + --cal-text-success: hsla(144, 34%, 24%, 1); /* #285231 */ + --cal-text-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention text */ + --cal-text-error: hsla(0, 63%, 31%, 1); /* Keeping existing error text */ + + /* Brand */ + --cal-brand: hsla(221, 39%, 11%, 1); /* Keeping existing brand color */ + --cal-brand-emphasis: hsla(0, 0%, 6%, 1); /* Keeping existing brand emphasis */ + --cal-brand-text: hsla(0, 0%, 100%, 1); /* white */ + }`; + + // Create a style rule for above css + const style = document.createElement("style"); + style.id = "cal-css-vars"; + style.textContent = cssVarsStyle; + document.head.appendChild(style); + } catch (error) { + console.error("Error adding app css vars - Report this issue to support", error); + } +}; diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts index ec5e3bb589..7375fb4c18 100644 --- a/packages/embeds/embed-core/src/embed.ts +++ b/packages/embeds/embed-core/src/embed.ts @@ -2,6 +2,7 @@ import { FloatingButton } from "./FloatingButton/FloatingButton"; import { Inline } from "./Inline/inline"; import { ModalBox } from "./ModalBox/ModalBox"; +import { addAppCssVars } from "./addAppCssVars"; import type { InterfaceWithParent, interfaceWithParent, PrefillAndIframeAttrsConfig } from "./embed-iframe"; import css from "./embed.css"; import { SdkActionManager } from "./sdk-action-manager"; @@ -1056,6 +1057,8 @@ function initializeGlobalCalProps() { globalCal.config.forwardQueryParams = globalCal.config.forwardQueryParams ?? false; } +addAppCssVars(); + function log(...args: unknown[]) { console.log(...args); } diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index 1bd30b526e..6c5a1de9ba 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/packages/features/bookings/Booker/components/EventMeta.tsx @@ -214,7 +214,8 @@ export const EventMeta = ({ menuPosition="absolute" timezoneSelectCustomClassname={classNames?.eventMetaTimezoneSelect} classNames={{ - control: () => "!min-h-0 p-0 w-full border-0 bg-transparent focus-within:ring-0", + control: () => + "!min-h-0 p-0 w-full border-0 bg-transparent focus-within:ring-0 shadow-none!", menu: () => "!w-64 max-w-[90vw] mb-1 ", singleValue: () => "text-text py-1", indicatorsContainer: () => "ml-auto", diff --git a/packages/features/bookings/components/FilterToggle.tsx b/packages/features/bookings/components/FilterToggle.tsx index a27dd8f4d6..a43b6f0cc5 100644 --- a/packages/features/bookings/components/FilterToggle.tsx +++ b/packages/features/bookings/components/FilterToggle.tsx @@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from "react"; import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Badge, Button, Icon, Tooltip } from "@calcom/ui"; +import { Badge, Button, Tooltip } from "@calcom/ui"; export interface FilterToggleProps { setIsFiltersVisible: Dispatch>; @@ -19,8 +19,7 @@ export function FilterToggle({ setIsFiltersVisible }: FilterToggleProps) { } return ( - diff --git a/packages/features/data-table/components/filters/ClearFiltersButton.tsx b/packages/features/data-table/components/filters/ClearFiltersButton.tsx index 000118c0e6..101589110b 100644 --- a/packages/features/data-table/components/filters/ClearFiltersButton.tsx +++ b/packages/features/data-table/components/filters/ClearFiltersButton.tsx @@ -1,6 +1,6 @@ import { useDataTable } from "@calcom/features/data-table"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Icon, Button, Tooltip } from "@calcom/ui"; +import { Button, Tooltip } from "@calcom/ui"; export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => { const { t } = useLocale(); @@ -13,14 +13,13 @@ export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => { return ( diff --git a/packages/features/data-table/components/filters/DateRangeFilter.tsx b/packages/features/data-table/components/filters/DateRangeFilter.tsx index b6d9759452..25919845f1 100644 --- a/packages/features/data-table/components/filters/DateRangeFilter.tsx +++ b/packages/features/data-table/components/filters/DateRangeFilter.tsx @@ -147,7 +147,7 @@ export const DateRangeFilter = ({ column }: DateRangeFilterProps) => { return ( - diff --git a/packages/features/data-table/components/filters/FilterPopover.tsx b/packages/features/data-table/components/filters/FilterPopover.tsx index b2d5e5e747..c122f93f89 100644 --- a/packages/features/data-table/components/filters/FilterPopover.tsx +++ b/packages/features/data-table/components/filters/FilterPopover.tsx @@ -2,7 +2,7 @@ import startCase from "lodash/startCase"; import type { IconName } from "@calcom/ui"; -import { Button, Icon, Popover, PopoverContent, PopoverTrigger, Badge } from "@calcom/ui"; +import { Button, Popover, PopoverContent, PopoverTrigger, Badge } from "@calcom/ui"; import { useFilterValue } from "../../hooks"; import { type FilterableColumn, type FilterValue, ZFilterValue, ColumnFilterType } from "../../lib/types"; @@ -137,11 +137,11 @@ export function FilterPopover({ column }: FilterPopoverProps) { diff --git a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx index 84fa838c99..b998d850d0 100644 --- a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx +++ b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx @@ -31,7 +31,7 @@ export const LockedSwitch = ( setUnlockedFields(fieldName, !enabled || undefined); }} checked={fieldState[fieldName]} - small={!options.simple} + size="sm" /> ) : null; }; @@ -58,7 +58,7 @@ export const LockedIndicator = ( {!options.simple && ( @@ -78,7 +78,7 @@ export const LockedIndicator = ( setUnlockedFields(fieldName, !enabled || undefined); }} checked={isLocked} - small={!options.simple} + size="sm" /> )} diff --git a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx index 5c51b9b925..cfde9559b4 100644 --- a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx +++ b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx @@ -236,7 +236,8 @@ const AddNewTeamsFormChild = ({ disabled={createTeamsMutation.isPending} onClick={handleCounterIncrease} aria-label={t("add_a_team")} - className="my-1"> + className="my-1" + data-testId="add_a_team"> {t("add_a_team")} )} diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx index bbacde3575..49e5e9f26d 100644 --- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx +++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx @@ -120,7 +120,6 @@ export const CreateANewTeamForm = (props: CreateANewTeamFormProps) => { rules={{ required: t("team_url_required") }} render={({ field: { value } }) => ( - {t("Delete")} + + {t("Delete")} + - {t("add_to_event_type")} + + {t("add_to_event_type")} + diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx index 640fd0c27c..d73b080046 100644 --- a/packages/features/ee/teams/components/MemberInvitationModal.tsx +++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx @@ -433,8 +433,8 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps) } }} className={classNames("gap-2", props.token && "opacity-50")} + StartIcon="link" data-testid="copy-invite-link-button"> -
    diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx index c8f11e1189..fa823826d8 100644 --- a/packages/features/ee/teams/components/MemberList.tsx +++ b/packages/features/ee/teams/components/MemberList.tsx @@ -674,7 +674,6 @@ function MemberListContent(props: Props) { type="button" color="primary" StartIcon="plus" - className="rounded-md" onClick={() => props.setShowMemberInvitationModal(true)} data-testid="new-member-button"> {t("add")} @@ -698,6 +697,7 @@ function MemberListContent(props: Props) {

    {numberOfSelectedRows >= 2 && ( setDynamicLinkVisible(!dynamicLinkVisible)} icon="handshake"> {t("group_meeting")} diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx index 57c9590109..5fd55623ee 100644 --- a/packages/features/ee/teams/pages/team-appearance-view.tsx +++ b/packages/features/ee/teams/pages/team-appearance-view.tsx @@ -91,8 +91,8 @@ const ProfileView = ({ team }: ProfileViewProps) => { }}>
    -

    {t("theme")}

    -

    {t("theme_applies_note")}

    +

    {t("theme")}

    +

    {t("theme_applies_note")}

    diff --git a/packages/features/ee/teams/pages/team-listing-view.tsx b/packages/features/ee/teams/pages/team-listing-view.tsx index ada02ac789..112eff6a52 100644 --- a/packages/features/ee/teams/pages/team-listing-view.tsx +++ b/packages/features/ee/teams/pages/team-listing-view.tsx @@ -1,11 +1,8 @@ "use client"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; - import { TeamsListing } from "../components"; const TeamListingView = () => { - const { t } = useLocale(); return ; }; diff --git a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx index 075338ee4d..987be7a6bd 100644 --- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx +++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx @@ -64,7 +64,7 @@ export const TimeTimeUnitInput = (props: Props) => { label="" disabled={props.disabled} defaultValue={form.getValues("time") ?? props.defaultTime ?? 24} - className="-mt-2 rounded-r-none text-sm focus:ring-0" + className="rounded-r-none text-sm focus:ring-0" {...form.register("time", { valueAsNumber: true })} addOnSuffix={
    {workflow.team.name}
    diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx index e4d62c8ba3..24e7038dd4 100644 --- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx +++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx @@ -917,7 +917,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { emailSubjectFormRef?.(e); refEmailSubject.current = e; }} - rows={1} + rows={2} disabled={props.readOnly || !hasActiveTeamPlan} className="my-0 focus:ring-transparent" required diff --git a/packages/features/embed/lib/EmbedTabs.tsx b/packages/features/embed/lib/EmbedTabs.tsx index 536cdf6146..0915b85f2d 100644 --- a/packages/features/embed/lib/EmbedTabs.tsx +++ b/packages/features/embed/lib/EmbedTabs.tsx @@ -21,6 +21,7 @@ export const tabs = [ href: "embedTabName=embed-code", icon: "code" as const, type: "code", + "data-testid": "HTML", Component: forwardRef< HTMLTextAreaElement | HTMLIFrameElement | null, { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string } @@ -75,6 +76,7 @@ export const tabs = [ { name: "React", href: "embedTabName=embed-react", + "data-testid": "react", icon: "code" as const, type: "code", Component: forwardRef< @@ -126,6 +128,7 @@ export const tabs = [ href: "embedTabName=embed-preview", icon: "trello" as const, type: "iframe", + "data-testid": "Preview", Component: forwardRef< HTMLIFrameElement | HTMLTextAreaElement | null, { calLink: string; embedType: EmbedType; previewState: PreviewState; namespace: string } diff --git a/packages/features/eventtypes/components/EmptyPage.tsx b/packages/features/eventtypes/components/EmptyPage.tsx index 603b8afb81..f03825f552 100644 --- a/packages/features/eventtypes/components/EmptyPage.tsx +++ b/packages/features/eventtypes/components/EmptyPage.tsx @@ -2,20 +2,20 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; const SkeletonEventType = () => { return ( -
    +
    -
    -
    +
    +
    -
    -
    -
    +
    +
    +
    -
    -
    +
    +
    @@ -26,7 +26,7 @@ function EmptyPage({ name }: { name: string }) { const { t } = useLocale(); return (
    -
    +
    diff --git a/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx b/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx index 402fb91a28..e912244042 100644 --- a/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx +++ b/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx @@ -55,7 +55,6 @@ export const MultiplePrivateLinksController = ({ color="minimal" size="sm" type="button" - className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent" aria-label="copy link" onClick={() => { navigator.clipboard.writeText(singleUseURL); diff --git a/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx b/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx index acc900b948..b2fa00882a 100644 --- a/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx +++ b/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx @@ -184,7 +184,7 @@ export default function RequiresConfirmationController({ ); }} className={classNames( - "border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r", + "border-default h-8! !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r", customClassNames?.conditionalConfirmationRadio?.timeInput )} defaultValue={metadata?.requiresConfirmationThreshold?.time || 30} diff --git a/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx b/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx index 3e3abb16a2..09750e0004 100644 --- a/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx +++ b/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx @@ -92,7 +92,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
    {(isManagedEventType || isChildrenManagedEventType) && ( diff --git a/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx b/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx index 0666dfedd5..23a6c5b926 100644 --- a/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx +++ b/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx @@ -576,7 +576,7 @@ const UseCommonScheduleSettingsToggle = ({ const { t } = useLocale(); const { useHostSchedulesForTeamEvent, toggleScheduleState } = useCommonScheduleState(eventType.schedule); return ( - <> +
    )} - +
    ); }; diff --git a/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx b/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx index e80a4eabb2..9176db17c1 100644 --- a/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx +++ b/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx @@ -327,7 +327,7 @@ const MinimumBookingNoticeInput = React.forwardRef< label={t("minimum_booking_notice")} type="number" placeholder="0" - className={classNames("mb-0 h-9 rounded-[4px] ltr:mr-2 rtl:ml-2", customClassNames?.input)} + className={classNames("mb-0 h-9 ltr:mr-2 rtl:ml-2", customClassNames?.input)} min={0} /> diff --git a/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx b/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx index c9b11cab04..b82f10d675 100644 --- a/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx +++ b/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx @@ -115,7 +115,7 @@ export const EventWebhooksTab = ({ eventType }: Pick {(isManagedEventType || isChildrenManagedEventType) && ( { {!workflow.readOnly && (
    -
    @@ -244,7 +243,7 @@ function EventWorkflowsTab(props: Props) { <> {(isManagedEventType || isChildrenManagedEventType) && ( diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx index e90793d6d8..19c89614b8 100644 --- a/packages/features/form-builder/Components.tsx +++ b/packages/features/form-builder/Components.tsx @@ -236,8 +236,6 @@ export const Components: Record = { const placeholder = props.placeholder; const { t } = useLocale(); value = value || []; - const inputClassName = - "dark:placeholder:text-muted focus:border-emphasis border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:selection:bg-green-500 disabled:dark:text-subtle bg-default"; return ( <> {value.length ? ( @@ -252,7 +250,6 @@ export const Components: Record = { id={`${props.name}.${index}`} disabled={readOnly} value={value[index]} - className={inputClassName} onChange={(e) => { value[index] = e.target.value.toLowerCase(); setValue(value); @@ -353,7 +350,7 @@ export const Components: Record = { } setValue(newValue); }} - className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:bg-darkgray-100 dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded transition ltr:mr-2 rtl:ml-2" + className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded transition ltr:mr-2 rtl:ml-2" value={option.value} checked={value.includes(option.value)} /> diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx index 6a17630bfd..908d28a1f3 100644 --- a/packages/features/form-builder/FormBuilder.tsx +++ b/packages/features/form-builder/FormBuilder.tsx @@ -248,7 +248,6 @@ export const FormBuilder = function FormBuilder({ onCheckedChange={(checked) => { update(index, { ...field, hidden: !checked }); }} - classNames={{ container: "p-2 hover:bg-subtle rounded transition" }} tooltip={t("show_on_booking_page")} /> )} @@ -487,12 +486,9 @@ function FieldEditDialog({ return ( - +
    -
    +
    - + {t("cancel")} diff --git a/packages/features/insights/filters/OrgTeamsFilter.tsx b/packages/features/insights/filters/OrgTeamsFilter.tsx index 07804d2a06..42f652c5e1 100644 --- a/packages/features/insights/filters/OrgTeamsFilter.tsx +++ b/packages/features/insights/filters/OrgTeamsFilter.tsx @@ -73,7 +73,7 @@ export const OrgTeamsFilter = () => { ) : null; diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx index 3212a110d0..a781ed5c8b 100644 --- a/packages/features/schedules/components/ScheduleListItem.tsx +++ b/packages/features/schedules/components/ScheduleListItem.tsx @@ -43,8 +43,8 @@ export function ScheduleListItem({ return (
  • -
    -
    +
    +
    {openModal && ( { event.preventDefault(); }}> @@ -245,7 +246,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({ onChange={(e) => setSearchText(e.target.value)} value={searchText} /> -
    +
    {memberListOptions.map((member) => (