chore: Unify Label Styles Across App #6389 (#10728)

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>
2025-03-20 15:02:34 +05:30
parent 3b3ed1a907
commit e666506ea3
6 changed files with 35 additions and 34 deletions
--- 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)};
--- 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 = ({
      <TextInputV2
        value={internalValue.addressStreet2 ?? ''}
        ref={inputRefs['addressStreet2']}
-        label="ADDRESS 2"
+        label="Address 2"
        fullWidth
        onChange={getChangeHandler('addressStreet2')}
        onFocus={getFocusHandler('addressStreet2')}
@ -227,7 +227,7 @@ export const AddressInput = ({
        <TextInputV2
          value={internalValue.addressCity ?? ''}
          ref={inputRefs['addressCity']}
-          label="CITY"
+          label="City"
          fullWidth
          onChange={getChangeHandler('addressCity')}
          onFocus={getFocusHandler('addressCity')}
@ -235,7 +235,7 @@ export const AddressInput = ({
        <TextInputV2
          value={internalValue.addressState ?? ''}
          ref={inputRefs['addressState']}
-          label="STATE"
+          label="State"
          fullWidth
          onChange={getChangeHandler('addressState')}
          onFocus={getFocusHandler('addressState')}
@ -245,13 +245,13 @@ export const AddressInput = ({
        <TextInputV2
          value={internalValue.addressPostcode ?? ''}
          ref={inputRefs['addressPostcode']}
-          label="POST CODE"
+          label="Post Code"
          fullWidth
          onChange={getChangeHandler('addressPostcode')}
          onFocus={getFocusHandler('addressPostcode')}
        />
        <CountrySelect
-          label="COUNTRY"
+          label="Country"
          onChange={getChangeHandler('addressCountry')}
          selectedCountryName={internalValue.addressCountry ?? ''}
        />
--- 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<HTMLLabelElement> & {
+  htmlFor?: string;
+};
+
+const StyledInputLabel = styled(Label)<InputLabelProps>`
+  display: block;
  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;

-export const InputLabel = StyledLabel;
+export const InputLabel = StyledInputLabel;
--- 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%;
 `;
--- 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}
+        <Label>{title}</Label>
        {isExpanded ? (
-          <IconChevronUp size={theme.icon.size.sm} />
+          <IconChevronUp
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
        ) : (
-          <IconChevronDown size={theme.icon.size.sm} />
+          <IconChevronDown
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
        )}
      </StyledSectionHeader>
      <StyledSection isExpanded={isExpanded}>
--- 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 (
    <StyledTitle className="section-title-container">
-      <StyledLabel onClick={handleTitleClick}>{label}</StyledLabel>
+      <StyledLabelContainer onClick={handleTitleClick}>
+        <Label>{label}</Label>
+      </StyledLabelContainer>
      {rightIcon && (
        <StyledRightIcon isMobile={isMobile}>{rightIcon}</StyledRightIcon>
      )}