From e666506ea39456080efa5629c7357ce406f7f893 Mon Sep 17 00:00:00 2001 From: Aaryan Bajaj <73265857+aaryan182@users.noreply.github.com> Date: Thu, 20 Mar 2025 15:02:34 +0530 Subject: [PATCH] chore: Unify Label Styles Across App #6389 (#10728) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../command-menu/components/CommandGroup.tsx | 6 ++---- .../field/input/components/AddressInput.tsx | 12 +++++------ .../ui/input/components/InputLabel.tsx | 14 ++++++++----- .../StyledDropdownMenuSubheader.tsx | 7 ++----- .../layout/table/components/TableSection.tsx | 20 ++++++++++--------- .../NavigationDrawerSectionTitle.tsx | 10 +++++----- 6 files changed, 35 insertions(+), 34 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx index 320ebee6a..47450003b 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx @@ -1,11 +1,9 @@ import styled from '@emotion/styled'; import React from 'react'; +import { Label } from 'twenty-ui'; -const StyledGroupHeading = styled.div` +const StyledGroupHeading = styled(Label)` align-items: center; - color: ${({ theme }) => theme.font.color.light}; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; padding-bottom: ${({ theme }) => theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx index aa63b01be..fa635a01d 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx @@ -210,7 +210,7 @@ export const AddressInput = ({ autoFocus value={internalValue.addressStreet1 ?? ''} ref={inputRefs['addressStreet1']} - label="ADDRESS 1" + label="Address 1" fullWidth onChange={getChangeHandler('addressStreet1')} onFocus={getFocusHandler('addressStreet1')} @@ -218,7 +218,7 @@ export const AddressInput = ({ diff --git a/packages/twenty-front/src/modules/ui/input/components/InputLabel.tsx b/packages/twenty-front/src/modules/ui/input/components/InputLabel.tsx index f5fd8db5c..f356547f6 100644 --- a/packages/twenty-front/src/modules/ui/input/components/InputLabel.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/InputLabel.tsx @@ -1,10 +1,14 @@ import styled from '@emotion/styled'; +import { HTMLAttributes } from 'react'; +import { Label } from 'twenty-ui'; -const StyledLabel = styled.label` - color: ${({ theme }) => theme.font.color.light}; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; +type InputLabelProps = HTMLAttributes & { + htmlFor?: string; +}; + +const StyledInputLabel = styled(Label)` + display: block; margin-bottom: ${({ theme }) => theme.spacing(1)}; `; -export const InputLabel = StyledLabel; +export const InputLabel = StyledInputLabel; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx index c659e3dc6..cae7e833c 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx @@ -1,11 +1,8 @@ import styled from '@emotion/styled'; +import { Label } from 'twenty-ui'; -export const StyledDropdownMenuSubheader = styled.div` +export const StyledDropdownMenuSubheader = styled(Label)` background-color: ${({ theme }) => theme.background.transparent.lighter}; - color: ${({ theme }) => theme.font.color.light}; - font-size: ${({ theme }) => theme.font.size.xxs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`}; - text-transform: uppercase; width: 100%; `; diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx index 84be28c93..54db42466 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx +++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx @@ -1,7 +1,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { ReactNode, useState } from 'react'; -import { IconChevronDown, IconChevronUp } from 'twenty-ui'; +import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui'; import { TableBody } from './TableBody'; type TableSectionProps = { @@ -14,16 +14,12 @@ const StyledSectionHeader = styled.div<{ isExpanded: boolean }>` align-items: center; background-color: ${({ theme }) => theme.background.transparent.lighter}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; - color: ${({ theme }) => theme.font.color.light}; cursor: pointer; display: flex; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; height: ${({ theme }) => theme.spacing(6)}; justify-content: space-between; padding: 0 ${({ theme }) => theme.spacing(2)}; text-align: left; - text-transform: uppercase; `; const StyledSection = styled.div<{ isExpanded: boolean }>` @@ -44,8 +40,8 @@ export const TableSection = ({ isInitiallyExpanded = true, title, }: TableSectionProps) => { - const theme = useTheme(); const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded); + const theme = useTheme(); const handleToggleSection = () => setIsExpanded((previousIsExpanded) => !previousIsExpanded); @@ -56,11 +52,17 @@ export const TableSection = ({ isExpanded={isExpanded} onClick={handleToggleSection} > - {title} + {isExpanded ? ( - + ) : ( - + )} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx index 72c7215fc..c26dcc9c5 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx @@ -8,14 +8,12 @@ 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}; - color: ${({ theme }) => theme.font.color.light}; display: flex; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; height: ${({ theme }) => theme.spacing(5)}; padding-left: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(0.5)}; @@ -29,7 +27,7 @@ const StyledTitle = styled.div` } `; -const StyledLabel = styled.div` +const StyledLabelContainer = styled.div` flex-grow: 1; `; @@ -77,7 +75,9 @@ export const NavigationDrawerSectionTitle = ({ return ( - {label} + + + {rightIcon && ( {rightIcon} )}