From 54b658b86bf8a8e66f67dbbf4c2a942cc0bae2d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sat, 8 Jul 2023 12:41:48 +0200 Subject: [PATCH] Remove some hardcoded CSS properties --- front/src/modules/auth/components/ui/FooterNote.tsx | 2 +- front/src/modules/comments/components/CommentChip.tsx | 5 ++--- .../comments/components/CommentThreadCreateMode.tsx | 4 ++-- .../comments/components/CommentThreadEditMode.tsx | 4 ++-- front/src/modules/comments/components/Timeline.tsx | 10 +++++----- .../modules/ui/components/buttons/DropdownButton.tsx | 4 ++-- front/src/modules/ui/components/form/DatePicker.tsx | 2 +- .../modules/ui/components/inputs/AutosizeTextInput.tsx | 6 +++--- front/src/modules/ui/components/table/ColumnHead.tsx | 2 +- .../table/action-bar/EntityTableActionBarButton.tsx | 2 +- .../components/table/table-header/SortAndFilterBar.tsx | 2 +- .../components/table/table-header/SortOrFilterChip.tsx | 2 +- .../ui/components/table/table-header/TableHeader.tsx | 4 ++-- front/src/modules/ui/layout/navbar/NavTitle.tsx | 2 +- .../modules/ui/layout/navbar/NavWorkspaceButton.tsx | 2 +- .../right-drawer/components/RightDrawerTopBar.tsx | 4 ++-- front/src/pages/companies/CompanyShow.tsx | 4 ++-- 17 files changed, 30 insertions(+), 31 deletions(-) diff --git a/front/src/modules/auth/components/ui/FooterNote.tsx b/front/src/modules/auth/components/ui/FooterNote.tsx index a5afe3d3627..5ba151fec65 100644 --- a/front/src/modules/auth/components/ui/FooterNote.tsx +++ b/front/src/modules/auth/components/ui/FooterNote.tsx @@ -7,7 +7,7 @@ const StyledContainer = styled.div` align-items: center; color: ${({ theme }) => theme.font.color.tertiary}; display: flex; - font-size: ${({ theme }) => theme.font.size.sm}px; + font-size: ${({ theme }) => theme.font.size.sm}; text-align: center; `; diff --git a/front/src/modules/comments/components/CommentChip.tsx b/front/src/modules/comments/components/CommentChip.tsx index d40e01c34f6..6afe48ce438 100644 --- a/front/src/modules/comments/components/CommentChip.tsx +++ b/front/src/modules/comments/components/CommentChip.tsx @@ -41,9 +41,8 @@ const StyledChip = styled.div` const StyledCount = styled.div` align-items: center; display: flex; - font-size: 12px; - - font-weight: 500; + font-size: ${({ theme }) => theme.font.size.sm}; + font-weight: ${({ theme }) => theme.font.weight.medium}; justify-content: center; `; diff --git a/front/src/modules/comments/components/CommentThreadCreateMode.tsx b/front/src/modules/comments/components/CommentThreadCreateMode.tsx index d3d0a999bbd..35f87d1729e 100644 --- a/front/src/modules/comments/components/CommentThreadCreateMode.tsx +++ b/front/src/modules/comments/components/CommentThreadCreateMode.tsx @@ -49,9 +49,9 @@ const StyledEditableTitleInput = styled.input` flex-direction: column; font-family: Inter; - font-size: 20px; + font-size: ${({ theme }) => theme.font.size.xl}; font-style: normal; - font-weight: 600; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; justify-content: center; line-height: 120%; diff --git a/front/src/modules/comments/components/CommentThreadEditMode.tsx b/front/src/modules/comments/components/CommentThreadEditMode.tsx index 1c21222759e..d2b6c49c1e9 100644 --- a/front/src/modules/comments/components/CommentThreadEditMode.tsx +++ b/front/src/modules/comments/components/CommentThreadEditMode.tsx @@ -54,9 +54,9 @@ const StyledEditableTitleInput = styled.input` flex-direction: column; font-family: Inter; - font-size: 20px; + font-size: ${({ theme }) => theme.font.size.xl}; font-style: normal; - font-weight: 600; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; justify-content: center; line-height: 120%; diff --git a/front/src/modules/comments/components/Timeline.tsx b/front/src/modules/comments/components/Timeline.tsx index fd3281a512a..740bd75f248 100644 --- a/front/src/modules/comments/components/Timeline.tsx +++ b/front/src/modules/comments/components/Timeline.tsx @@ -43,15 +43,15 @@ const StyledTimelineEmptyContainer = styled.div` const StyledEmptyTimelineTitle = styled.div` color: ${({ theme }) => theme.font.color.secondary}; - font-size: 24px; - font-weight: 600; + font-size: ${({ theme }) => theme.font.size.xxl}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: 120%; `; const StyledEmptyTimelineSubTitle = styled.div` color: ${({ theme }) => theme.font.color.extraLight}; - font-size: 24px; - font-weight: 600; + font-size: ${({ theme }) => theme.font.size.xxl}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: 120%; `; @@ -132,7 +132,7 @@ const StyledCard = styled.div` const StyledCardTitle = styled.div` color: ${({ theme }) => theme.font.color.primary}; - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; line-height: 150%; `; diff --git a/front/src/modules/ui/components/buttons/DropdownButton.tsx b/front/src/modules/ui/components/buttons/DropdownButton.tsx index eb56f16a866..6aca82f3e64 100644 --- a/front/src/modules/ui/components/buttons/DropdownButton.tsx +++ b/front/src/modules/ui/components/buttons/DropdownButton.tsx @@ -22,8 +22,8 @@ const StyledButton = styled.button` border-radius: 4px; color: ${({ theme }) => theme.font.color.secondary}; display: flex; - font-size: 13px; - font-weight: 500; + font-size: ${({ theme }) => theme.font.size.md}; + font-weight: ${({ theme }) => theme.font.weight.medium}; gap: 8px; height: 24px; line-height: 150%; diff --git a/front/src/modules/ui/components/form/DatePicker.tsx b/front/src/modules/ui/components/form/DatePicker.tsx index a9cbf801b46..cf0f63b1dba 100644 --- a/front/src/modules/ui/components/form/DatePicker.tsx +++ b/front/src/modules/ui/components/form/DatePicker.tsx @@ -22,7 +22,7 @@ const StyledContainer = styled.div` font-size: ${({ theme }) => theme.font.size.md}; border: none; display: block; - font-weight: 400; + font-weight: ${({ theme }) => theme.font.weight.medium}; } & .react-datepicker-popper { diff --git a/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx b/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx index 546f260bcee..b0dd6258f9d 100644 --- a/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx +++ b/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx @@ -27,8 +27,8 @@ const StyledTextArea = styled(TextareaAutosize)` border-radius: 5px; color: ${({ theme }) => theme.font.color.primary}; font-family: inherit; - font-size: 13px; - font-weight: 400; + font-size: ${({ theme }) => theme.font.size.md}; + font-weight: ${({ theme }) => theme.font.weight.medium}; line-height: 16px; overflow: auto; padding: 8px; @@ -42,7 +42,7 @@ const StyledTextArea = styled(TextareaAutosize)` &::placeholder { color: ${({ theme }) => theme.font.color.light}; - font-weight: 400; + font-weight: ${({ theme }) => theme.font.weight.medium}; } `; diff --git a/front/src/modules/ui/components/table/ColumnHead.tsx b/front/src/modules/ui/components/table/ColumnHead.tsx index 667e6f6059a..4a3b3d58559 100644 --- a/front/src/modules/ui/components/table/ColumnHead.tsx +++ b/front/src/modules/ui/components/table/ColumnHead.tsx @@ -10,7 +10,7 @@ const StyledTitle = styled.div` align-items: center; display: flex; flex-direction: row; - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; height: ${({ theme }) => theme.spacing(8)}; padding-left: ${({ theme }) => theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx index 98b8e9cbc94..24c15c8380b 100644 --- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx @@ -32,7 +32,7 @@ const StyledButton = styled.div` `; const StyledButtonLabel = styled.div` - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: ${({ theme }) => theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx index cb93dd796a1..c5da7a658a3 100644 --- a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx +++ b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx @@ -43,7 +43,7 @@ const StyledCancelButton = styled.button` border: none; color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: auto; margin-right: ${({ theme }) => theme.spacing(2)}; padding: ${(props) => { diff --git a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx b/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx index 2ad247624e3..a89da7236f6 100644 --- a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx +++ b/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx @@ -45,7 +45,7 @@ const StyledDelete = styled.div` `; const StyledLabelKey = styled.div` - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; `; function SortOrFilterChip({ diff --git a/front/src/modules/ui/components/table/table-header/TableHeader.tsx b/front/src/modules/ui/components/table/table-header/TableHeader.tsx index b2507c70fd6..3753dc20ef3 100644 --- a/front/src/modules/ui/components/table/table-header/TableHeader.tsx +++ b/front/src/modules/ui/components/table/table-header/TableHeader.tsx @@ -27,7 +27,7 @@ const StyledTableHeader = styled.div` color: ${({ theme }) => theme.font.color.secondary}; display: flex; flex-direction: row; - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; height: 40px; justify-content: space-between; padding-left: ${({ theme }) => theme.spacing(3)}; @@ -49,7 +49,7 @@ const StyledViewSection = styled.div` const StyledFilters = styled.div` display: flex; - font-weight: 400; + font-weight: ${({ theme }) => theme.font.weight.medium}; gap: 2px; `; diff --git a/front/src/modules/ui/layout/navbar/NavTitle.tsx b/front/src/modules/ui/layout/navbar/NavTitle.tsx index 0f327f7ff14..2acf0bda280 100644 --- a/front/src/modules/ui/layout/navbar/NavTitle.tsx +++ b/front/src/modules/ui/layout/navbar/NavTitle.tsx @@ -8,7 +8,7 @@ const StyledTitle = styled.div` color: ${({ theme }) => theme.font.color.light}; display: flex; font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: 600; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; padding-bottom: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(8)}; diff --git a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx index ad6e96b4ea8..bfaee543ae5 100644 --- a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx +++ b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx @@ -41,7 +41,7 @@ const StyledName = styled.div` color: ${({ theme }) => theme.font.color.primary}; font-family: 'Inter'; font-size: ${({ theme }) => theme.font.size.md}; - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: ${({ theme }) => theme.spacing(2)}; `; diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx index 8d4f4891965..fc1a8fbcb36 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx @@ -10,7 +10,7 @@ const StyledRightDrawerTopBar = styled.div` color: ${({ theme }) => theme.font.color.secondary}; display: flex; flex-direction: row; - font-size: 13px; + font-size: ${({ theme }) => theme.font.size.md}; justify-content: space-between; min-height: 40px; padding-left: 8px; @@ -19,7 +19,7 @@ const StyledRightDrawerTopBar = styled.div` const StyledTopBarTitle = styled.div` align-items: center; - font-weight: 500; + font-weight: ${({ theme }) => theme.font.weight.medium}; margin-right: ${({ theme }) => theme.spacing(1)}; `; diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx index 8e09ceaa6a2..b4def06445f 100644 --- a/front/src/pages/companies/CompanyShow.tsx +++ b/front/src/pages/companies/CompanyShow.tsx @@ -141,9 +141,9 @@ const StyledDate = styled.div` const StyledTitle = styled.div` color: ${({ theme }) => theme.font.color.primary}; - font-size: 20px; + font-size: ${({ theme }) => theme.font.size.xl}; font-style: normal; - font-weight: 600; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: 120%; `;