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

@@ -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>

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 {

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;
     }
 

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>
               </>
             }