diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx index fd8f69afd906..7d7f718f5679 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx @@ -14,22 +14,12 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useState } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { getImageAbsoluteURI } from 'twenty-shared'; import { + Avatar, IconChevronDown, MenuItemSelectAvatar, UndecoratedLink, } from 'twenty-ui'; -import { REACT_APP_SERVER_BASE_URL } from '~/config'; - -const StyledLogo = styled.div<{ logo: string }>` - background: url(${({ logo }) => logo}); - background-position: center; - background-size: cover; - border-radius: ${({ theme }) => theme.border.radius.xs}; - height: 16px; - width: 16px; -`; const StyledContainer = styled.div<{ isNavigationDrawerExpanded: boolean }>` align-items: center; @@ -102,13 +92,9 @@ export const MultiWorkspaceDropdownButton = ({ data-testid="workspace-dropdown" isNavigationDrawerExpanded={isNavigationDrawerExpanded} > - {currentWorkspace?.displayName ?? ''} @@ -135,13 +121,9 @@ export const MultiWorkspaceDropdownButton = ({ } selected={currentWorkspace?.id === workspace.id} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx index 4d7bf0fa4727..decd0475aa28 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx @@ -7,11 +7,11 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; -import { isNonEmptyString } from '@sniptt/guards'; +import { Avatar } from 'twenty-ui'; import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton'; -import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; const StyledContainer = styled.div` align-items: center; @@ -19,20 +19,12 @@ const StyledContainer = styled.div` height: ${({ theme }) => theme.spacing(8)}; user-select: none; `; + const StyledSingleWorkspaceContainer = styled(StyledContainer)` gap: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1)}; `; -const StyledLogo = styled.div<{ logo: string }>` - background: url(${({ logo }) => logo}); - background-position: center; - background-size: cover; - border-radius: ${({ theme }) => theme.border.radius.xs}; - height: 16px; - width: 16px; -`; - const StyledName = styled.div` color: ${({ theme }) => theme.font.color.primary}; font-family: 'Inter'; @@ -75,9 +67,7 @@ export const NavigationDrawerHeader = ({ ) : ( - + {name} diff --git a/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx b/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx index e72ff93a7df8..dd7b5d8ece18 100644 --- a/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx @@ -1,4 +1,5 @@ import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState'; +import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo'; import { Helmet } from 'react-helmet-async'; import { useRecoilValue } from 'recoil'; import { getImageAbsoluteURI } from 'twenty-shared'; @@ -16,7 +17,7 @@ export const PageFavicon = () => { getImageAbsoluteURI({ imageUrl: workspacePublicData.logo, baseUrl: REACT_APP_SERVER_BASE_URL, - }) ?? '' + }) ?? DEFAULT_WORKSPACE_LOGO } /> )} diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx index 35941629b6b2..0f17ca9edf10 100644 --- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx +++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { isNonEmptyString, isUndefined } from '@sniptt/guards'; +import { isNonEmptyString, isNull, isUndefined } from '@sniptt/guards'; import { useContext } from 'react'; import { useRecoilState } from 'recoil'; @@ -90,12 +90,10 @@ export const Avatar = ({ }) : null; - const noAvatarUrl = !isNonEmptyString(avatarImageURI); - const placeholderChar = placeholder?.[0]?.toLocaleUpperCase(); const showPlaceholder = - noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI); + isNull(avatarImageURI) || invalidAvatarUrls.includes(avatarImageURI); const handleImageError = () => { if (isNonEmptyString(avatarImageURI)) {