Complete various TODOs in team layout (#4959)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on enhancing the handling of team images across various components in the dashboard. It updates the `src` attributes for `GradientAvatar` and `ProjectAvatar` components to use the appropriate team images, while also improving the `InviteSection` button functionality.

### Detailed summary
- Updated `src` for `GradientAvatar` in `TeamSelectionUI.tsx` to use `team.image`.
- Modified `className` for `Img` in `ProjectAvatar.tsx` to include an additional `border-border` class.
- Changed `src` for `titleAvatarIcon` in `TeamSettingsSidebar.tsx` to use `props.team.image`.
- Updated the `Upgrade` button in `InviteSection.tsx` to be a link to billing settings.
- Set `src` for `GradientAvatar` in `TeamHeaderUI.tsx` and `TeamHeaderMobileUI.tsx` to use `currentTeam.image`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx

@@ -9,7 +9,7 @@ export function ProjectAvatar(props: {
   return (
     <Img
       src={props.src}
-      className={cn("rounded-lg border", props.className)}
+      className={cn("rounded-lg border border-border", props.className)}
       alt={""}
       fallback={
         <div className="flex items-center justify-center bg-muted/50">

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx

@@ -22,7 +22,7 @@ export function TeamSettingsSidebar(props: {
         team={props.team}
         titleAvatarIcon={{
           id: props.team.id,
-          src: "", // TODO - set team image
+          src: props.team.image || "",
         }}
       />
       <RenderLinkGroup
@@ -31,7 +31,7 @@ export function TeamSettingsSidebar(props: {
         team={props.team}
         titleAvatarIcon={{
           id: props.account?.id,
-          src: "", // TODO - set team image
+          src: props.team.image || "",
         }}
       />
     </aside>

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx

@@ -31,7 +31,7 @@ export function InviteSection(props: {
     bottomSection = (
       <div className="lg:px6 flex items-center justify-between gap-4 border-border border-t px-4 py-4">
         <p className="text-muted-foreground text-sm">
-          This feature is only available on the
+          This feature is only available on the{" "}
           <Link
             href="https://thirdweb.com/pricing"
             target="_blank"
@@ -41,9 +41,13 @@ export function InviteSection(props: {
           </Link>
         </p>
 
-        {/* TODO - link to billing settings page */}
-        <Button variant="outline" size="sm">
-          Upgrade
+        <Button variant="outline" size="sm" asChild>
+          <Link
+            href={`/team/${props.team.slug}/~/settings/billing`}
+            className="gap-2"
+          >
+            Upgrade
+          </Link>
         </Button>
       </div>
     );

apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.tsx

@@ -48,9 +48,11 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
             href={`/team/${currentTeam.slug}`}
             className="flex flex-row items-center gap-2 font-normal text-sm"
           >
-            {/* TODO - set team image */}
-            <GradientAvatar id={currentTeam.id} src={""} className="size-6" />
-
+            <GradientAvatar
+              id={currentTeam.id}
+              src={currentTeam.image || ""}
+              className="size-6"
+            />
             <span> {currentTeam.name} </span>
             <TeamPlanBadge plan={teamPlan} />
           </Link>
@@ -125,8 +127,11 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
               "flex flex-row items-center gap-2 font-normal text-foreground text-sm",
             )}
           >
-            {/* TODO - set team image */}
-            <GradientAvatar id={currentTeam.id} src={""} className="size-6" />
+            <GradientAvatar
+              id={currentTeam.id}
+              src={currentTeam.image || ""}
+              className="size-6"
+            />
 
             {!props.currentProject && (
               <span className="font-semibold">{currentTeam.name}</span>

apps/dashboard/src/app/team/components/TeamHeader/TeamSelectionUI.tsx

@@ -86,9 +86,8 @@ export function TeamSelectionUI(props: {
                   >
                     <Link href={`/team/${team.slug}`}>
                       <div className="flex items-center gap-2">
-                        {/* TODO set Image src */}
                         <GradientAvatar
-                          src={""}
+                          src={team.image || ""}
                           className="size-4"
                           id={team.id}
                         />