From 735254d48e4a19a1d7b490990c7d81905e61682d Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Tue, 13 Sep 2022 13:55:39 -0400
Subject: [PATCH] fixing settings layout for teams (#4444)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
---
 .../ui/v2/core/layouts/SettingsLayout.tsx     | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index fb9f152799..befad7892c 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -11,6 +11,7 @@ import Button from "@calcom/ui/v2/core/Button";
 
 import ErrorBoundary from "../../../ErrorBoundary";
 import { Icon } from "../../../Icon";
+import { Badge } from "../Badge";
 import { useMeta } from "../Meta";
 import Shell from "../Shell";
 import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
@@ -150,7 +151,7 @@ const SettingsSidebarContainer = ({ className = "" }) => {
           ) : (
             <React.Fragment key={tab.href}>
               <div>
-                <div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100  group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
+                <div className="group mt-2 flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100  group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
                   {tab && tab.icon && (
                     <tab.icon className="mr-[12px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
                   )}
@@ -193,53 +194,62 @@ const SettingsSidebarContainer = ({ className = "" }) => {
                           {team.logo && (
                             <img
                               src={team.logo}
-                              className=" ml-[12px] mr-[8px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0"
+                              className="mt-2 ml-[12px] mr-[8px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0"
                               alt={team.name || "Team logo"}
                             />
                           )}
                           <p>{team.name}</p>
+                          {!team.accepted && (
+                            <Badge className="ml-3" variant="orange">
+                              Inv.
+                            </Badge>
+                          )}
                         </div>
                       </CollapsibleTrigger>
                       <CollapsibleContent>
-                        <VerticalTabItem
-                          name={t("profile")}
-                          href={`${WEBAPP_URL}/settings/my-account/appearance`}
-                          textClassNames="px-3 text-gray-900 font-medium text-sm"
-                          disableChevron
-                        />
+                        {team.accepted && (
+                          <VerticalTabItem
+                            name={t("profile")}
+                            href={`${WEBAPP_URL}/settings/teams/${team.id}/profile`}
+                            textClassNames="px-3 text-gray-900 font-medium text-sm"
+                            disableChevron
+                          />
+                        )}
                         <VerticalTabItem
                           name={t("members")}
-                          href={`${WEBAPP_URL}/settings/my-account/appearance`}
+                          href={`${WEBAPP_URL}/settings/teams/${team.id}/members`}
                           textClassNames="px-3 text-gray-900 font-medium text-sm"
                           disableChevron
                         />
                         {(team.role === MembershipRole.OWNER || team.role === MembershipRole.ADMIN) && (
                           <>
-                            <VerticalTabItem
+                            {/* TODO */}
+                            {/* <VerticalTabItem
                               name={t("general")}
                               href={`${WEBAPP_URL}/settings/my-account/appearance`}
                               textClassNames="px-3 text-gray-900 font-medium text-sm"
                               disableChevron
-                            />
+                            /> */}
                             <VerticalTabItem
                               name={t("appearance")}
-                              href={`${WEBAPP_URL}/settings/my-account/appearance`}
+                              href={`${WEBAPP_URL}/settings/teams/${team.id}/appearance`}
                               textClassNames="px-3 text-gray-900 font-medium text-sm"
                               disableChevron
                             />
-                            <VerticalTabItem
+                            {/* TODO: Implement saml configuration page */}
+                            {/* <VerticalTabItem
                               name={t("saml_config")}
-                              href={`${WEBAPP_URL}/settings/my-account/appearance`}
+                              href={`${WEBAPP_URL}/settings/teams/${team.id}/samlConfig`}
                               textClassNames="px-3 text-gray-900 font-medium text-sm"
                               disableChevron
-                            />
+                            /> */}
                           </>
                         )}
                       </CollapsibleContent>
                     </Collapsible>
                   ))}
                 <div className="group flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-sm font-medium leading-none  hover:bg-gray-100  group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
-                  <Icon.FiPlus className=" mr-[10px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
+                  <Icon.FiPlus className="mt-2 mr-[10px] h-[16px] w-[16px] self-start stroke-[2px] md:mt-0" />
                   <p>{t("add_a_team")}</p>
                 </div>
               </div>