e666506ea3
Chores #6389 ## Description This PR addresses inconsistencies in the codebase where elements that visually function as labels were implemented with custom-styled components rather than the standardized Label component from the UI library. ## Changes I've replaced several custom-styled text elements with the standardized Label component from twenty-ui to improve consistency and maintainability across the application. These modifications maintain the same visual appearance and functionality while standardizing the implementation. ## Components Modified: InputLabel: Converted from a styled label to use the Label component InputHint: Replaced styled div with a styled Label component TableSection: Introduced a StyledLabel using the Label component for section headings StyledDropdownMenuSubheader: Converted from a styled div to a styled Label component NavigationDrawerSectionTitle: Replaced internal text element with the Label component SettingsCard: Updated description element to use the Label component SettingsListItemCardContent: Changed description span to use the Label component RecordDetailSectionHeader: Added a StyledLabelLink for link text using the Label component TaskList: Modified the task count display to use the Label component CommandGroup: Updated group headings to use the Label component WorkerMetricsGraph: Replaced no-data message with a Label-based component ViewPickerSelectContainer: Changed from a styled div to a styled Label component --------- Co-authored-by: Félix Malfait <felix@twenty.com>
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { currentUserState } from '@/auth/states/currentUserState';
|
|
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
|
|
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
|
|
import { NavigationDrawerSectionTitleSkeletonLoader } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader';
|
|
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
import styled from '@emotion/styled';
|
|
import React from 'react';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { isDefined } from 'twenty-shared';
|
|
import { Label } from 'twenty-ui';
|
|
|
|
const StyledTitle = styled.div`
|
|
align-items: center;
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
display: flex;
|
|
height: ${({ theme }) => theme.spacing(5)};
|
|
padding-left: ${({ theme }) => theme.spacing(1)};
|
|
padding-right: ${({ theme }) => theme.spacing(0.5)};
|
|
padding-top: ${({ theme }) => theme.spacing(1)};
|
|
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
|
justify-content: space-between;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: ${({ theme }) => theme.background.transparent.light};
|
|
}
|
|
`;
|
|
|
|
const StyledLabelContainer = styled.div`
|
|
flex-grow: 1;
|
|
`;
|
|
|
|
type StyledRightIconProps = {
|
|
isMobile: boolean;
|
|
};
|
|
|
|
const StyledRightIcon = styled.div<StyledRightIconProps>`
|
|
cursor: pointer;
|
|
opacity: ${({ isMobile }) => (isMobile ? 1 : 0)};
|
|
|
|
.section-title-container:hover & {
|
|
opacity: 1;
|
|
}
|
|
`;
|
|
|
|
type NavigationDrawerSectionTitleProps = {
|
|
onClick?: () => void;
|
|
label: string;
|
|
rightIcon?: React.ReactNode;
|
|
};
|
|
|
|
export const NavigationDrawerSectionTitle = ({
|
|
onClick,
|
|
label,
|
|
rightIcon,
|
|
}: NavigationDrawerSectionTitleProps) => {
|
|
const isMobile = useIsMobile();
|
|
const isNavigationDrawerExpanded = useRecoilValue(
|
|
isNavigationDrawerExpandedState,
|
|
);
|
|
const isSettingsPage = useIsSettingsPage();
|
|
const currentUser = useRecoilValue(currentUserState);
|
|
const loading = useIsPrefetchLoading();
|
|
const handleTitleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
e.stopPropagation();
|
|
if (isDefined(onClick) && (isNavigationDrawerExpanded || isSettingsPage)) {
|
|
onClick();
|
|
}
|
|
};
|
|
|
|
if (loading && isDefined(currentUser)) {
|
|
return <NavigationDrawerSectionTitleSkeletonLoader />;
|
|
}
|
|
|
|
return (
|
|
<StyledTitle className="section-title-container">
|
|
<StyledLabelContainer onClick={handleTitleClick}>
|
|
<Label>{label}</Label>
|
|
</StyledLabelContainer>
|
|
{rightIcon && (
|
|
<StyledRightIcon isMobile={isMobile}>{rightIcon}</StyledRightIcon>
|
|
)}
|
|
</StyledTitle>
|
|
);
|
|
};
|