mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

ui bug: alert looking funky (#766)

Browse source 
* tweak alert text to be growing
* fix alert looking funky
* get rid of `typeof window` dirt
This commit is contained in:
Alex Johansson 2021-09-24 13:52:00 +01:00 committed by GitHub
parent bb1da8150f
commit f709972f86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/ui/Alert.tsx
View file

@ -32,7 +32,7 @@ export function Alert(props: AlertProps) {
<CheckCircleIcon className={classNames("h-5 w-5 text-gray-400")} aria-hidden="true" /> <CheckCircleIcon className={classNames("h-5 w-5 text-gray-400")} aria-hidden="true" />
)} )}
</div> </div>
<div className="ml-3"> <div className="ml-3 flex-grow">
<h3 className="text-sm font-medium">{props.title}</h3> <h3 className="text-sm font-medium">{props.title}</h3>
<div className="text-sm">{props.message}</div> <div className="text-sm">{props.message}</div>
</div> </div>

4
lib/core/browser/browser.utils.ts
View file

@ -1,5 +1,3 @@
export const isBrowser = () => typeof window !== "undefined";
type BrowserInfo = { type BrowserInfo = {
url: string; url: string;
path: string; path: string;
@ -9,7 +7,7 @@ type BrowserInfo = {
}; };
export const getBrowserInfo = (): Partial<BrowserInfo> => { export const getBrowserInfo = (): Partial<BrowserInfo> => {
if (!isBrowser()) { if (!process.browser) {
return {}; return {};
} }
return { return {

2
lib/core/browser/useDarkMode.tsx
View file

@ -12,7 +12,7 @@ interface UseDarkModeOutput {
function useDarkMode(defaultValue?: boolean): UseDarkModeOutput { function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
const getPrefersScheme = (): boolean => { const getPrefersScheme = (): boolean => {
// Prevents SSR issues // Prevents SSR issues
if (typeof window !== "undefined") { if (process.browser) {
return window.matchMedia(COLOR_SCHEME_QUERY).matches; return window.matchMedia(COLOR_SCHEME_QUERY).matches;
} }

10
pages/event-types/index.tsx
View file

@ -113,8 +113,8 @@ const EventTypesPage = (props: PageProps) => {
</Link> </Link>
</span> </span>
)} )}
{typeof window !== "undefined" && profile?.slug && ( {profile?.slug && (
<Link href={profile.slug}> <Link href={`/${profile.slug}`}>
<a className="block text-xs text-neutral-500">{`cal.com/${profile.slug}`}</a> <a className="block text-xs text-neutral-500">{`cal.com/${profile.slug}`}</a>
</Link> </Link>
)} )}
@ -293,15 +293,15 @@ const EventTypesPage = (props: PageProps) => {
<CreateNewEventDialog canAddEvents={props.canAddEvents} profiles={props.profiles} /> <CreateNewEventDialog canAddEvents={props.canAddEvents} profiles={props.profiles} />
) )
}> }>
{props.user.plan === "FREE" && !props.canAddEvents && typeof window !== "undefined" && ( {props.user.plan === "FREE" && !props.canAddEvents && (
<Alert <Alert
severity="warning" severity="warning"
title={<>You need to upgrade your plan to have more than one active event type.</>} title={<>You need to upgrade your plan to have more than one active event type.</>}
message={ message={
<> <>
To upgrade go to{" "} To upgrade go to{" "}
<a href={process.env.UPGRADE_URL || "https://cal.com/upgrade"} className="underline"> <a href={"https://cal.com/upgrade"} className="underline">
{process.env.UPGRADE_URL || "https://cal.com/upgrade"} {"https://cal.com/upgrade"}
</a> </a>
</> </>
} }