From f709972f860fbcd2e775909519a7f759d285951f Mon Sep 17 00:00:00 2001
From: Alex Johansson <alexander@n1s.se>
Date: Fri, 24 Sep 2021 13:52:00 +0100
Subject: [PATCH] ui bug: alert looking funky (#766)

* tweak alert text to be growing
* fix alert looking funky
* get rid of `typeof window` dirt
---
 components/ui/Alert.tsx           |  2 +-
 lib/core/browser/browser.utils.ts |  4 +---
 lib/core/browser/useDarkMode.tsx  |  2 +-
 pages/event-types/index.tsx       | 10 +++++-----
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/ui/Alert.tsx b/components/ui/Alert.tsx
index 08deee22ff..2b12f128cf 100644
--- a/components/ui/Alert.tsx
+++ b/components/ui/Alert.tsx
@@ -32,7 +32,7 @@ export function Alert(props: AlertProps) {
             <CheckCircleIcon className={classNames("h-5 w-5 text-gray-400")} aria-hidden="true" />
           )}
         </div>
-        <div className="ml-3">
+        <div className="ml-3 flex-grow">
           <h3 className="text-sm font-medium">{props.title}</h3>
           <div className="text-sm">{props.message}</div>
         </div>
diff --git a/lib/core/browser/browser.utils.ts b/lib/core/browser/browser.utils.ts
index 828c6ca13c..aa91353009 100644
--- a/lib/core/browser/browser.utils.ts
+++ b/lib/core/browser/browser.utils.ts
@@ -1,5 +1,3 @@
-export const isBrowser = () => typeof window !== "undefined";
-
 type BrowserInfo = {
   url: string;
   path: string;
@@ -9,7 +7,7 @@ type BrowserInfo = {
 };
 
 export const getBrowserInfo = (): Partial<BrowserInfo> => {
-  if (!isBrowser()) {
+  if (!process.browser) {
     return {};
   }
   return {
diff --git a/lib/core/browser/useDarkMode.tsx b/lib/core/browser/useDarkMode.tsx
index 35a7bad4c9..b0ccbb2276 100644
--- a/lib/core/browser/useDarkMode.tsx
+++ b/lib/core/browser/useDarkMode.tsx
@@ -12,7 +12,7 @@ interface UseDarkModeOutput {
 function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {
   const getPrefersScheme = (): boolean => {
     // Prevents SSR issues
-    if (typeof window !== "undefined") {
+    if (process.browser) {
       return window.matchMedia(COLOR_SCHEME_QUERY).matches;
     }
 
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index b6d0b2148c..2ac93379fe 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -113,8 +113,8 @@ const EventTypesPage = (props: PageProps) => {
             </Link>
           </span>
         )}
-        {typeof window !== "undefined" && profile?.slug && (
-          <Link href={profile.slug}>
+        {profile?.slug && (
+          <Link href={`/${profile.slug}`}>
             <a className="block text-xs text-neutral-500">{`cal.com/${profile.slug}`}</a>
           </Link>
         )}
@@ -293,15 +293,15 @@ const EventTypesPage = (props: PageProps) => {
             <CreateNewEventDialog canAddEvents={props.canAddEvents} profiles={props.profiles} />
           )
         }>
-        {props.user.plan === "FREE" && !props.canAddEvents && typeof window !== "undefined" && (
+        {props.user.plan === "FREE" && !props.canAddEvents && (
           <Alert
             severity="warning"
             title={<>You need to upgrade your plan to have more than one active event type.</>}
             message={
               <>
                 To upgrade go to{" "}
-                <a href={process.env.UPGRADE_URL || "https://cal.com/upgrade"} className="underline">
-                  {process.env.UPGRADE_URL || "https://cal.com/upgrade"}
+                <a href={"https://cal.com/upgrade"} className="underline">
+                  {"https://cal.com/upgrade"}
                 </a>
               </>
             }