chore: replace global.css with todesktop tailwind variant (#12991)
* installed todesktop tailwind variant * moved todesktop styles into tailwind classes * fixed back button in settings
This commit is contained in:
parent
7d7e74c869
commit
c4b296d580
|
@ -84,7 +84,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
|
|||
`}</style>
|
||||
</head>
|
||||
<body
|
||||
className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
|
||||
className="dark:bg-darkgray-50 todesktop:!bg-transparent bg-subtle antialiased"
|
||||
style={
|
||||
isEmbed
|
||||
? {
|
||||
|
|
|
@ -26,7 +26,7 @@ export default function AdminLayout({
|
|||
const isAppsPage = pathname?.startsWith("/settings/admin/apps");
|
||||
return (
|
||||
<SettingsLayout {...rest}>
|
||||
<div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
|
||||
<div className="divide-subtle bg-default mx-auto flex max-w-4xl flex-row divide-y">
|
||||
<div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
|
||||
<ErrorBoundary>{children}</ErrorBoundary>
|
||||
</div>
|
||||
|
|
|
@ -87,7 +87,7 @@ class MyDocument extends Document<Props> {
|
|||
</Head>
|
||||
|
||||
<body
|
||||
className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
|
||||
className="dark:bg-darkgray-50 todesktop:!bg-transparent bg-subtle antialiased"
|
||||
style={
|
||||
isEmbed
|
||||
? {
|
||||
|
|
|
@ -142,77 +142,27 @@ html.todesktop div {
|
|||
html.todesktop header {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
html.todesktop header button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
html.todesktop .logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.todesktop .desktop-only {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html.todesktop .desktop-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.todesktop header nav {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
html.todesktop aside {
|
||||
margin: 0px -6px;
|
||||
}
|
||||
|
||||
html.todesktop-platform-darwin .desktop-transparent {
|
||||
background: transparent !important;
|
||||
border: none !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.6) !important;
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
html.todesktop.light nav a[aria-current="page"]{
|
||||
background: #CFD0D0 !important;
|
||||
html.todesktop.light {
|
||||
--cal-bg-emphasis: hsla(0, 0%, 11%, 0.1);
|
||||
}
|
||||
|
||||
|
||||
html.todesktop.dark nav a[aria-current="page"]{
|
||||
background: #3D3D3D !important;
|
||||
html.todesktop.dark {
|
||||
--cal-bg-emphasis: hsla(220, 2%, 26%, 0.3);
|
||||
}
|
||||
|
||||
html.todesktop aside header {
|
||||
margin-top: -12px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
html.todesktop aside header > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html.todesktop.dark nav a:hover{
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
html.todesktop.light nav a:hover{
|
||||
background: none;
|
||||
}
|
||||
|
||||
html.todesktop nav a svg{
|
||||
color: #229CFF !important
|
||||
}
|
||||
|
||||
/*
|
||||
Adds Utility to hide scrollbar to tailwind
|
||||
https://github.com/tailwindlabs/tailwindcss/discussions/2394
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@calcom/eslint-plugin-eslint": "*",
|
||||
"@todesktop/tailwind-variants": "^1.0.0",
|
||||
"eslint-config-next": "^13.2.1",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-config-turbo": "^0.0.7",
|
||||
|
|
|
@ -150,6 +150,7 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@todesktop/tailwind-variants"),
|
||||
require("@tailwindcss/forms"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("tailwind-scrollbar")({ nocompatible: true }),
|
||||
|
|
|
@ -273,7 +273,7 @@ export const KBarTrigger = () => {
|
|||
<button
|
||||
color="minimal"
|
||||
onClick={query.toggle}
|
||||
className="text-default hover:bg-subtle lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md px-3 py-2 text-sm font-medium transition lg:px-2">
|
||||
className="text-default hover:bg-subtle todesktop:hover:!bg-transparent lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md px-3 py-2 text-sm font-medium transition lg:px-2">
|
||||
<Search className="h-4 w-4 flex-shrink-0 text-inherit" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
|
|
@ -175,7 +175,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
|
|||
return (
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
|
||||
className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
|
||||
data-testid={`vertical-tab-${name}`}>
|
||||
<ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
|
||||
<Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate" loadingClassName="ms-3">
|
||||
|
|
|
@ -421,7 +421,7 @@ function UserDropdown({ small }: UserDropdownProps) {
|
|||
<DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
|
||||
<button
|
||||
className={classNames(
|
||||
"hover:bg-emphasis group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
|
||||
"hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded",
|
||||
small ? "p-2" : "px-2 py-1.5"
|
||||
)}>
|
||||
<span
|
||||
|
@ -525,7 +525,7 @@ function UserDropdown({ small }: UserDropdownProps) {
|
|||
{t("help")}
|
||||
</DropdownItem>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="desktop-hidden hidden lg:flex">
|
||||
<DropdownMenuItem className="todesktop:hidden hidden lg:flex">
|
||||
<DropdownItem StartIcon={Download} target="_blank" rel="noreferrer" href={DESKTOP_APP_LINK}>
|
||||
{t("download_desktop_app")}
|
||||
</DropdownItem>
|
||||
|
@ -717,19 +717,21 @@ const NavigationItem: React.FC<{
|
|||
href={item.href}
|
||||
aria-label={t(item.name)}
|
||||
className={classNames(
|
||||
"text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
|
||||
item.child ? `[&[aria-current='page']]:bg-transparent` : `[&[aria-current='page']]:bg-emphasis`,
|
||||
"todesktop:py-[7px] text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
|
||||
item.child ? `[&[aria-current='page']]:!bg-transparent` : `[&[aria-current='page']]:bg-emphasis`,
|
||||
isChild
|
||||
? `[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 ${
|
||||
props.index === 0 ? "mt-0" : "mt-px"
|
||||
}`
|
||||
: "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
|
||||
isLocaleReady ? "hover:bg-subtle hover:text-emphasis" : ""
|
||||
isLocaleReady
|
||||
? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
|
||||
: ""
|
||||
)}
|
||||
aria-current={current ? "page" : undefined}>
|
||||
{item.icon && (
|
||||
<item.icon
|
||||
className="mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit"
|
||||
className="todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit"
|
||||
aria-hidden="true"
|
||||
aria-current={current ? "page" : undefined}
|
||||
/>
|
||||
|
@ -887,9 +889,9 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
|
|||
<div className="relative">
|
||||
<aside
|
||||
style={{ maxHeight: `calc(100vh - ${bannersHeight}px)`, top: `${bannersHeight}px` }}
|
||||
className="desktop-transparent bg-muted border-muted fixed left-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3">
|
||||
className="todesktop:!bg-transparent bg-muted border-muted fixed left-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3">
|
||||
<div className="flex h-full flex-col justify-between py-3 lg:pt-4">
|
||||
<header className="items-center justify-between md:hidden lg:flex">
|
||||
<header className="todesktop:-mt-3 todesktop:flex-col-reverse todesktop:[-webkit-app-region:drag] items-center justify-between md:hidden lg:flex">
|
||||
{orgBranding ? (
|
||||
<Link href="/settings/organizations/profile" className="px-1.5">
|
||||
<div className="flex items-center gap-2 font-medium">
|
||||
|
@ -904,7 +906,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
|
|||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div data-testid="user-dropdown-trigger">
|
||||
<div data-testid="user-dropdown-trigger" className="todesktop:mt-4 w-full">
|
||||
<span className="hidden lg:inline">
|
||||
<UserDropdown />
|
||||
</span>
|
||||
|
@ -913,17 +915,17 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
|
|||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end space-x-0.5 rtl:space-x-reverse">
|
||||
<div className="flex w-full justify-end space-x-2 rtl:space-x-reverse">
|
||||
<button
|
||||
color="minimal"
|
||||
onClick={() => window.history.back()}
|
||||
className="desktop-only hover:text-emphasis text-subtle group flex text-sm font-medium">
|
||||
className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
|
||||
<ArrowLeft className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
|
||||
</button>
|
||||
<button
|
||||
color="minimal"
|
||||
onClick={() => window.history.forward()}
|
||||
className="desktop-only hover:text-emphasis text-subtle group flex text-sm font-medium">
|
||||
className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
|
||||
<ArrowRight className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
|
||||
</button>
|
||||
{!!orgBranding && (
|
||||
|
@ -1041,7 +1043,7 @@ export function ShellMain(props: LayoutProps) {
|
|||
props.backPath
|
||||
? "relative"
|
||||
: "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
|
||||
"flex-shrink-0 md:relative md:bottom-auto md:right-auto"
|
||||
"flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
|
||||
)}>
|
||||
{isLocaleReady && props.CTA}
|
||||
</div>
|
||||
|
|
|
@ -4,6 +4,8 @@ import type { Table } from "@tanstack/react-table";
|
|||
import type { LucideIcon } from "lucide-react";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
|
||||
import { Button } from "../button";
|
||||
import { Input } from "../form";
|
||||
import { DataTableFilter } from "./DataTableFilter";
|
||||
|
@ -35,8 +37,10 @@ export function DataTableToolbar<TData>({
|
|||
// If you select ALL filters for a column, the table is not filtered and we dont get a reset button
|
||||
const isFiltered = table.getState().columnFilters.length > 0;
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<div className="bg-default sticky top-[3rem] z-10 flex items-center justify-end space-x-2 py-4 md:top-0">
|
||||
<div className="sticky top-[3rem] z-10 flex items-center justify-end space-x-2 py-4 md:top-0">
|
||||
{searchKey && (
|
||||
<Input
|
||||
className="max-w-64 mb-0 mr-auto rounded-md"
|
||||
|
@ -51,7 +55,7 @@ export function DataTableToolbar<TData>({
|
|||
EndIcon={X}
|
||||
onClick={() => table.resetColumnFilters()}
|
||||
className="h-8 px-2 lg:px-3">
|
||||
Reset
|
||||
{t("clear")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ export const AnimatedPopover = ({
|
|||
prefix?: string;
|
||||
}) => {
|
||||
const [open, setOpen] = React.useState(defaultOpen ?? false);
|
||||
const ref = React.useRef<HTMLDivElement>(null);
|
||||
const ref = React.useRef<HTMLButtonElement>(null);
|
||||
// calculate which aligment to open the popover with based on which half of the screen it is on (left or right)
|
||||
const [align, setAlign] = React.useState<"start" | "end">("start");
|
||||
React.useEffect(() => {
|
||||
|
@ -50,7 +50,7 @@ export const AnimatedPopover = ({
|
|||
return (
|
||||
<Popover.Root defaultOpen={defaultOpen} onOpenChange={setOpen} modal={true}>
|
||||
<Popover.Trigger asChild>
|
||||
<div
|
||||
<button
|
||||
ref={ref}
|
||||
className={classNames(
|
||||
"hover:border-emphasis border-default text-default hover:text-emphasis radix-state-open:border-emphasis radix-state-open:outline-none radix-state-open:ring-2 radix-state-open:ring-emphasis mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer",
|
||||
|
@ -77,7 +77,7 @@ export const AnimatedPopover = ({
|
|||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content side="bottom" align={align} asChild>
|
||||
<div
|
||||
|
|
Loading…
Reference in New Issue
Block a user