diff --git a/static/app/components/nav/orgDropdown.tsx b/static/app/components/nav/orgDropdown.tsx index fd1f4750a846da..6bc7f447781060 100644 --- a/static/app/components/nav/orgDropdown.tsx +++ b/static/app/components/nav/orgDropdown.tsx @@ -5,7 +5,8 @@ import {logout} from 'sentry/actionCreators/account'; import {Button} from 'sentry/components/button'; import {OrganizationAvatar} from 'sentry/components/core/avatar/organizationAvatar'; import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu'; -import IdBadge from 'sentry/components/idBadge'; +import OrganizationBadge from 'sentry/components/idBadge/organizationBadge'; +import UserBadge from 'sentry/components/idBadge/userBadge'; import {IconAdd, IconWarning} from 'sentry/icons'; import {t, tn} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; @@ -49,25 +50,6 @@ function createOrganizationMenuItem(): MenuItemProps { }; } -function MenuOrgSummary() { - const organization = useOrganization(); - const {projects} = useProjects(); - - return ( - - -
- - {organization.name} - - {tn('%s Project', '%s Projects', projects.length)} -
-
- ); -} - function SwitchOrganizationItem({organization}: {organization: OrganizationSummary}) { return ( @@ -102,6 +84,8 @@ export function OrgDropdown() { const {organizations} = useLegacyStore(OrganizationsStore); + const {projects} = useProjects(); + function handleLogout() { logout(api); } @@ -115,20 +99,22 @@ export function OrgDropdown() { aria-label={t('Toggle organization menu')} {...props} > - - - + )} minMenuWidth={200} items={[ { key: 'organization', - label: , + label: ( + + + + ), children: [ { key: 'organization-settings', @@ -173,9 +159,9 @@ export function OrgDropdown() { { key: 'user', label: ( - - - + + + ), textValue: t('User Summary'), children: [ @@ -212,26 +198,10 @@ const OrgDropdownTrigger = styled(Button)` width: 44px; `; -const AvatarWrapper = styled('div')` - position: relative; -`; - const StyledOrganizationAvatar = styled(OrganizationAvatar)` border-radius: 6px; /* Fixes background bleeding on corners */ `; -const MenuOrgSummaryWrapper = styled('div')` - font-size: ${p => p.theme.fontSizeMedium}; - font-weight: ${p => p.theme.fontWeightNormal}; - - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: ${space(1)}; - align-items: center; - padding: ${space(0.5)} 0; - text-transform: none; -`; - const SwitchOrganizationWrapper = styled('div')` display: flex; align-items: center; @@ -241,7 +211,7 @@ const SwitchOrganizationWrapper = styled('div')` font-weight: ${p => p.theme.fontWeightNormal}; `; -const UserSummaryWrapper = styled('div')` +const SectionTitleWrapper = styled('div')` text-transform: none; font-size: ${p => p.theme.fontSizeMedium}; font-weight: ${p => p.theme.fontWeightNormal}; @@ -254,21 +224,6 @@ const SwitchOrganizationItemName = styled('div')<{pendingDeletion: boolean}>` ${p => p.theme.overflowEllipsis}; `; -const MenuOrgSummaryName = styled('div')<{pendingDeletion: boolean}>` - color: ${p => (p.pendingDeletion ? p.theme.subText : p.theme.textColor)}; - line-height: normal; - font-weight: ${p => p.theme.fontWeightBold}; - ${p => p.theme.overflowEllipsis}; -`; - -const ProjectCount = styled('div')` - color: ${p => p.theme.subText}; - font-size: ${p => p.theme.fontSizeMedium}; - line-height: 1; - margin-top: ${space(0.5)}; - ${p => p.theme.overflowEllipsis}; -`; - const PendingDeletionAvatar = styled('div')` height: 22px; width: 22px;