From 14aa0a2f2df0cd6865c3fb05e05652e221cf178d Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Tue, 4 Jul 2023 17:07:45 -0300
Subject: [PATCH] fix: Few minor UI issues in Orgs (#9919)

---
 .../components/CreateANewOrganizationForm.tsx |   2 +-
 packages/features/shell/Shell.tsx             | 111 +++++++++---------
 .../viewer/eventTypes/getByViewer.handler.ts  |   2 +-
 3 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
index b50980a1cf..8aafdd782a 100644
--- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -150,7 +150,7 @@ export const CreateANewOrganizationForm = () => {
     adminUsername: string;
   }>({
     defaultValues: {
-      slug: `${slug}`,
+      slug: `${slug ?? ""}`,
     },
   });
   const watchAdminEmail = newOrganizationFormMethods.watch("adminEmail");
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 066511b97c..b83360c666 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -948,62 +948,65 @@ export function ShellMain(props: LayoutProps) {
 
   return (
     <>
-      <div
-        className={classNames(
-          "flex items-center md:mb-6 md:mt-0",
-          props.smallHeading ? "lg:mb-7" : "lg:mb-8",
-          props.hideHeadingOnMobile ? "mb-0" : "mb-6"
-        )}>
-        {!!props.backPath && (
-          <Button
-            variant="icon"
-            size="sm"
-            color="minimal"
-            onClick={() =>
-              typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
-            }
-            StartIcon={ArrowLeft}
-            aria-label="Go Back"
-            className="rounded-md ltr:mr-2 rtl:ml-2"
-          />
-        )}
-        {props.heading && (
-          <header
-            className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
-            {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
-            <div className={classNames("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
-              {props.heading && (
-                <h3
-                  className={classNames(
-                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
-                    props.smallHeading ? "text-base" : "text-xl",
-                    props.hideHeadingOnMobile && "hidden"
-                  )}>
-                  {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
-                </h3>
-              )}
-              {props.subtitle && (
-                <p className="text-default hidden text-sm md:block">
-                  {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
-                </p>
-              )}
-            </div>
-            {props.beforeCTAactions}
-            {props.CTA && (
+      {(props.heading || !!props.backPath) && (
+        <div
+          className={classNames(
+            "flex items-center md:mb-6 md:mt-0",
+            props.smallHeading ? "lg:mb-7" : "lg:mb-8",
+            props.hideHeadingOnMobile ? "mb-0" : "mb-6"
+          )}>
+          {!!props.backPath && (
+            <Button
+              variant="icon"
+              size="sm"
+              color="minimal"
+              onClick={() =>
+                typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
+              }
+              StartIcon={ArrowLeft}
+              aria-label="Go Back"
+              className="rounded-md ltr:mr-2 rtl:ml-2"
+            />
+          )}
+          {props.heading && (
+            <header
+              className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
+              {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
               <div
-                className={classNames(
-                  props.backPath
-                    ? "relative"
-                    : "pwa:bottom-24 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"
-                )}>
-                {props.CTA}
+                className={classNames("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
+                {props.heading && (
+                  <h3
+                    className={classNames(
+                      "font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
+                      props.smallHeading ? "text-base" : "text-xl",
+                      props.hideHeadingOnMobile && "hidden"
+                    )}>
+                    {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
+                  </h3>
+                )}
+                {props.subtitle && (
+                  <p className="text-default hidden text-sm md:block">
+                    {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
+                  </p>
+                )}
               </div>
-            )}
-            {props.actions && props.actions}
-          </header>
-        )}
-      </div>
+              {props.beforeCTAactions}
+              {props.CTA && (
+                <div
+                  className={classNames(
+                    props.backPath
+                      ? "relative"
+                      : "pwa:bottom-24 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"
+                  )}>
+                  {props.CTA}
+                </div>
+              )}
+              {props.actions && props.actions}
+            </header>
+          )}
+        </div>
+      )}
       {props.afterHeading && <>{props.afterHeading}</>}
       <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
         {props.children}
diff --git a/packages/trpc/server/routers/viewer/eventTypes/getByViewer.handler.ts b/packages/trpc/server/routers/viewer/eventTypes/getByViewer.handler.ts
index ac04f17b3e..86204bd6f7 100644
--- a/packages/trpc/server/routers/viewer/eventTypes/getByViewer.handler.ts
+++ b/packages/trpc/server/routers/viewer/eventTypes/getByViewer.handler.ts
@@ -285,7 +285,7 @@ export const getByViewerHandler = async ({ ctx, input }: GetByViewerOptions) =>
       ...group.metadata,
       teamId: group.teamId,
       membershipRole: group.membershipRole,
-      image: `${CAL_URL}/${group.profile.slug}/avatar.png`,
+      image: `${CAL_URL}${group.teamId ? "/team" : ""}/${group.profile.slug}/avatar.png`,
     })),
   };
 };