Repository: supabase/supabase
File: apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx (TypeScript)

Code before:
      {isLoading ? (
        <div className="p-5">
          <GenericSkeletonLoader />
        </div>
      ) : inviteHasBeenAccepted ? (
        <>
          <Admonition
            type="default"
            title="Invalid invitation"
            description="This organization invite is no longer valid as it has either been accepted or declined"
            className="mb-0 border-0 rounded-none text-left"
          />
          <div className="p-4 border-muted border-t">
            <Button type="default" asChild>
              <Link href="/">Back to dashboard</Link>
            </Button>
          </div>
        </>
      ) : (
        <>
          <div className="flex flex-col gap-y-1 px-6 py-6">
            <p className="text-sm text-foreground-light">You have been invited to join </p>
            <p className={cn('text-foreground', !!profile ? 'text-2xl' : 'text-3xl')}>
              {organizationName}
            </p>
            {isSuccess && slug && (
              <p className="text-xs text-foreground-lighter">{`Organization slug: ${slug}`}</p>
            )}
          </div>
          <div
            className={cn('border-t border-muted', hasError ? 'bg-alternative' : 'bg-transparent')}
          >
            {profile === undefined && (
              <div className="flex flex-col gap-y-4 p-4">
                <p className="text-sm text-foreground">
                  Sign in or create an account first to view this invitation
                </p>
                <div className="flex justify-center gap-3">
                  <Button asChild type="default">
                    <Link href={loginRedirectLink}>Sign in</Link>
                  </Button>
                  <Button asChild type="default">
                    <Link href={loginRedirectLink}>Create an account</Link>
                  </Button>
                </div>
              </div>
            )}
            <div className={cn('flex flex-col gap-4', !isLoading && !hasError && 'px-6 py-4')}>
              {!!profile && hasError && (
                <OrganizationInviteError
                  data={data}

Review comment (suggestion):
Just because this is a in a big ternary, would be helpful to have a more specific variable name here. Like `succesfullyFetchedInvitation` or something like that

Code after:
      className={cn(
        'mx-auto overflow-hidden rounded-md border',
        'border-muted bg-alternative text-center shadow',
        'md:w-[400px]'
      )}
    >
      {isLoadingInvitation ? (
        <div className="p-5">
          <GenericSkeletonLoader />
        </div>
      ) : inviteIsNoLongerValid ? (
        <>
          <Admonition
            type="default"
            title="Invalid invitation"
            description="This organization invite is no longer valid as it has either been accepted or declined"
            className="mb-0 border-0 rounded-none text-left"
          />
          <div className="p-4 border-muted border-t">
            <Button type="default" asChild>
              <Link href="/">Back to dashboard</Link>
            </Button>
          </div>
        </>
      ) : (
        <>
          <div className="flex flex-col gap-y-1 px-6 py-6">
            <p className="text-sm text-foreground-light">You have been invited to join </p>
            <p className={cn('text-foreground', !!profile ? 'text-2xl' : 'text-3xl')}>
              {organizationName}
            </p>
            {isSuccessInvitation && (
              <p className="text-xs text-foreground-lighter">{`Organization slug: ${slug}`}</p>
            )}
          </div>
          <div
            className={cn('border-t border-muted', hasError ? 'bg-alternative' : 'bg-transparent')}
          >
            {profile === undefined && (
              <div className="flex flex-col gap-y-4 p-4">
                <p className="text-sm text-foreground">
                  Sign in or create an account first to view this invitation
                </p>
                <div className="flex justify-center gap-3">
                  <Button asChild type="default">
                    <Link href={loginRedirectLink}>Sign in</Link>
                  </Button>
                  <Button asChild type="default">
                    <Link href={loginRedirectLink}>Create an account</Link>
                  </Button>
                </div>