Files
calendar/apps/web/components/ui/AuthContainer.tsx
T
d951a5b872 Allows brand customization (#5329)
* adjustments for each language json file:
- changed every Cal or Cal.com with a variable to make it possible to change that with a custom brand
- fix and renamed  ATTENDEE with attendeeName

* added two new variables for appName and support mail address. so everybody can change it via env

* changed static Cal or Cal.com with new defined constants

* Using useLocal to modify static text to make it multilingual, and passing the correct variables for brand and mail

* adding new readable variables for brand, website domain and mail address

* fixed search routes

* made static text multilingual and fixed german translations

* Revert "fixed search routes"
moved changes in another pr
This reverts commit e6ba11a1ec7821d8c16c502d0357f6d5fcdb1958.

* revert non whitelabel changes and moved it into another pr

* revert attendeeName fix

* reverted translation fixes and moved them in another pr

* changed back to "Cal.com Logo"

* changed back to "https://console.cal.com"

* added new env variable for company name and replaced some domainName variables in language files

* changed default for COMPANY_NAME to Cal.com, Inc.

* changed Cal.com to APP_NAME for mail templates

* Dropped website domain in favor of app name

* Update .env.example

* Apply suggestions from code review

* Code review feedback

* Delete App.tsx

* Update packages/ui/Kbar.tsx

* added meta.CTA back it was mistakenly removed

* updated add members test

Co-authored-by: maxi <maximilian.oehrlein@clicksports.de>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: zomars <zomars@me.com>
2022-11-30 14:52:56 -07:00

43 lines
1.5 KiB
TypeScript

import classNames from "classnames";
import React from "react";
import { APP_NAME, LOGO } from "@calcom/lib/constants";
import Loader from "@components/Loader";
import { HeadSeo } from "@components/seo/head-seo";
interface Props {
title: string;
description: string;
footerText?: React.ReactNode | string;
showLogo?: boolean;
heading?: string;
loading?: boolean;
}
export default function AuthContainer(props: React.PropsWithChildren<Props>) {
return (
<div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
<HeadSeo title={props.title} description={props.description} />
{props.showLogo && (
// eslint-disable-next-line @next/next/no-img-element
<img className="mb-auto h-4" src={LOGO} alt={`${APP_NAME} Logo`} />
)}
<div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
{props.heading && <h2 className="font-cal text-center text-3xl text-neutral-900">{props.heading}</h2>}
</div>
{props.loading && (
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
<Loader />
</div>
)}
<div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-10 sm:px-10">
{props.children}
</div>
<div className="mt-8 text-center text-sm text-neutral-600">{props.footerText}</div>
</div>
</div>
);
}