From eb8fc50ff11d36a6cb53dd0d6b363ba841d1118c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Wed, 14 Jun 2023 07:59:16 +0200 Subject: [PATCH] Add rule to order css in styled components alphabetically (#284) * Add plugin * Run plugin --- front/.eslintrc.js | 5 +- front/package-lock.json | 55 ++++++++++++ front/package.json | 1 + .../modules/auth/components/RequireAuth.tsx | 8 +- .../components/comments/CellCommentChip.tsx | 8 +- .../components/comments/CommentChip.tsx | 32 +++---- .../components/comments/CommentHeader.tsx | 30 +++---- .../components/comments/CommentThread.tsx | 18 ++-- .../comments/CommentThreadCreateMode.tsx | 20 ++--- .../components/comments/CommentThreadItem.tsx | 14 ++-- .../__stories__/CommentChip.stories.tsx | 18 ++-- .../companies/components/CompanyChip.tsx | 6 +- .../components/EditablePeopleFullName.tsx | 2 +- .../modules/people/components/PersonChip.tsx | 12 +-- .../pipelines/components/PipelineChip.tsx | 4 +- .../search/components/CommandMenuStyles.tsx | 84 +++++++++---------- .../ui/components/board/BoardColumn.tsx | 8 +- .../modules/ui/components/board/BoardItem.tsx | 4 +- .../ui/components/board/BoardNewButton.tsx | 10 +-- .../ui/components/buttons/IconButton.tsx | 20 ++--- .../components/editable-cell/EditableCell.tsx | 10 +-- .../editable-cell/EditableCellDisplayMode.tsx | 18 ++-- .../editable-cell/EditableCellEditMode.tsx | 16 ++-- .../editable-cell/HoverableMenuItem.tsx | 16 ++-- .../editable-cell/types/EditableChip.tsx | 2 +- .../editable-cell/types/EditableDate.tsx | 8 +- .../types/EditableDoubleText.tsx | 6 +- .../editable-cell/types/EditablePhone.tsx | 2 +- .../editable-cell/types/EditableRelation.tsx | 20 ++--- .../types/EditableRelationCreateButton.tsx | 18 ++-- .../editable-cell/types/EditableText.tsx | 2 +- .../modules/ui/components/form/Checkbox.tsx | 14 ++-- .../components/inputs/AutosizeTextInput.tsx | 24 +++--- .../ui/components/inputs/DoubleTextInput.tsx | 6 +- .../ui/components/menu/DropdownMenu.tsx | 16 ++-- .../ui/components/menu/DropdownMenuButton.tsx | 20 ++--- .../menu/DropdownMenuCheckableItem.tsx | 8 +- .../ui/components/menu/DropdownMenuItem.tsx | 14 ++-- .../menu/DropdownMenuItemContainer.tsx | 12 +-- .../ui/components/menu/DropdownMenuSearch.tsx | 12 +-- .../menu/DropdownMenuSelectableItem.tsx | 4 +- .../components/menu/DropdownMenuSeparator.tsx | 4 +- .../menu/stories/DropdownMenu.stories.tsx | 10 +-- .../ui/components/table/CheckboxCell.tsx | 8 +- .../ui/components/table/ColumnHead.tsx | 4 +- .../ui/components/table/EntityTable.tsx | 18 ++-- .../table/action-bar/EntityTableActionBar.tsx | 24 +++--- .../action-bar/EntityTableActionBarButton.tsx | 10 +-- .../table/table-header/DropdownButton.tsx | 80 +++++++++--------- .../table/table-header/SortAndFilterBar.tsx | 30 +++---- .../table/table-header/SortOrFilterChip.tsx | 24 +++--- .../table/table-header/TableHeader.tsx | 8 +- front/src/modules/ui/layout/DefaultLayout.tsx | 6 +- front/src/modules/ui/layout/Panel.tsx | 4 +- .../src/modules/ui/layout/SecondaryLayout.tsx | 20 ++--- .../layout/containers/WithTopBarContainer.tsx | 10 +-- .../ui/layout/navbar/NavBackButton.tsx | 14 ++-- .../ui/layout/navbar/NavCollapseButton.tsx | 22 ++--- .../src/modules/ui/layout/navbar/NavItem.tsx | 24 +++--- .../src/modules/ui/layout/navbar/NavTitle.tsx | 6 +- .../ui/layout/navbar/NavWorkspaceButton.tsx | 28 +++---- .../ui/layout/navbar/NavbarContainer.tsx | 4 +- .../components/RightDrawerPage.tsx | 2 +- .../components/RightDrawerTopBar.tsx | 10 +-- .../RightDrawerTopBarCloseButton.tsx | 12 +-- front/src/modules/ui/layout/styles/themes.ts | 8 +- .../src/modules/ui/layout/top-bar/TopBar.tsx | 32 +++---- .../modules/ui/layout/top-bar/TopTitle.tsx | 4 +- front/src/modules/users/components/Avatar.tsx | 30 +++---- front/src/pages/people/People.tsx | 2 +- .../src/testing/ComponentStorybookLayout.tsx | 12 +-- .../src/testing/FullHeightStorybookLayout.tsx | 2 +- 72 files changed, 568 insertions(+), 511 deletions(-) diff --git a/front/.eslintrc.js b/front/.eslintrc.js index 17c3e2c37..89f8a63d3 100644 --- a/front/.eslintrc.js +++ b/front/.eslintrc.js @@ -5,7 +5,7 @@ module.exports = { tsconfigRootDir: __dirname, sourceType: 'module', }, - plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort'], + plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort', 'better-styled-components'], extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', @@ -44,6 +44,7 @@ module.exports = { '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-explicit-any': 'off', 'simple-import-sort/imports': 'error', - 'simple-import-sort/exports': 'error' + 'simple-import-sort/exports': 'error', + 'better-styled-components/sort-declarations-alphabetically': 2 }, }; diff --git a/front/package-lock.json b/front/package-lock.json index e7a0438d0..5d501b928 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -71,6 +71,7 @@ "eslint-config-prettier": "^8.5.0", "eslint-config-react-app": "^7.0.1", "eslint-config-standard-with-typescript": "^23.0.0", + "eslint-plugin-better-styled-components": "^1.1.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-n": "^15.5.1", "eslint-plugin-prettier": "^4.2.1", @@ -18267,6 +18268,60 @@ "ms": "^2.1.1" } }, + "node_modules/eslint-plugin-better-styled-components": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-better-styled-components/-/eslint-plugin-better-styled-components-1.1.2.tgz", + "integrity": "sha512-pGLIv8Z05xnmMyDyLWV65KQs7HU+FN403Tqb5xv3BZvw5kjC3K18/aYm7mcRpLLPse5/lwhX8ieGQKflPgr0xQ==", + "dev": true, + "dependencies": { + "postcss": "^7.0.2", + "requireindex": "~1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/eslint-plugin-better-styled-components/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/eslint-plugin-better-styled-components/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/eslint-plugin-better-styled-components/node_modules/requireindex": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz", + "integrity": "sha512-LBnkqsDE7BZKvqylbmn7lTIVdpx4K/QCduRATpO5R+wtPmky/a8pN1bO2D6wXppn1497AJF9mNjqAXr6bdl9jg==", + "dev": true, + "engines": { + "node": ">=0.10.5" + } + }, + "node_modules/eslint-plugin-better-styled-components/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/eslint-plugin-es": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz", diff --git a/front/package.json b/front/package.json index 031bb07f4..94e1ac4e1 100644 --- a/front/package.json +++ b/front/package.json @@ -115,6 +115,7 @@ "eslint-config-prettier": "^8.5.0", "eslint-config-react-app": "^7.0.1", "eslint-config-standard-with-typescript": "^23.0.0", + "eslint-plugin-better-styled-components": "^1.1.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-n": "^15.5.1", "eslint-plugin-prettier": "^4.2.1", diff --git a/front/src/modules/auth/components/RequireAuth.tsx b/front/src/modules/auth/components/RequireAuth.tsx index 997c965ca..d699b2bfe 100644 --- a/front/src/modules/auth/components/RequireAuth.tsx +++ b/front/src/modules/auth/components/RequireAuth.tsx @@ -6,11 +6,11 @@ import styled from '@emotion/styled'; import { hasAccessToken } from '../services/AuthService'; const EmptyContainer = styled.div` - display: flex; - justify-content: center; align-items: center; - width: 100%; + display: flex; height: 100%; + justify-content: center; + width: 100%; `; const fadeIn = keyframes` @@ -23,8 +23,8 @@ const fadeIn = keyframes` `; const FadeInStyle = styled.div` - opacity: 0; animation: ${fadeIn} 1s forwards; + opacity: 0; `; export function RequireAuth({ diff --git a/front/src/modules/comments/components/comments/CellCommentChip.tsx b/front/src/modules/comments/components/comments/CellCommentChip.tsx index 42a2f63cd..ff3630ec0 100644 --- a/front/src/modules/comments/components/comments/CellCommentChip.tsx +++ b/front/src/modules/comments/components/comments/CellCommentChip.tsx @@ -10,12 +10,12 @@ const StyledCellWrapper = styled.div` `; const StyledCommentChipContainer = styled.div` - position: relative; - right: 50px; - width: 50px; - display: flex; justify-content: flex-end; + position: relative; + + right: 50px; + width: 50px; `; export function CellCommentChip(props: CommentChipProps) { diff --git a/front/src/modules/comments/components/comments/CommentChip.tsx b/front/src/modules/comments/components/comments/CommentChip.tsx index 647566b6c..92eb185af 100644 --- a/front/src/modules/comments/components/comments/CommentChip.tsx +++ b/front/src/modules/comments/components/comments/CommentChip.tsx @@ -8,26 +8,26 @@ export type CommentChipProps = { }; const StyledChip = styled.div` - height: 26px; - max-width: 42px; - - padding-left: 4px; - padding-right: 4px; - - display: flex; align-items: center; - justify-content: center; + backdrop-filter: blur(6px); + + background: ${(props) => props.theme.primaryBackgroundTransparent}; + border-radius: ${(props) => props.theme.borderRadius}; + + color: ${(props) => props.theme.text30}; + cursor: pointer; + display: flex; flex-direction: row; gap: 4px; - background: ${(props) => props.theme.primaryBackgroundTransparent}; - backdrop-filter: blur(6px); + height: 26px; + justify-content: center; - border-radius: ${(props) => props.theme.borderRadius}; + max-width: 42px; - cursor: pointer; + padding-left: 4px; - color: ${(props) => props.theme.text30}; + padding-right: 4px; &:hover { background: ${(props) => props.theme.tertiaryBackground}; @@ -38,12 +38,12 @@ const StyledChip = styled.div` `; const StyledCount = styled.div` - display: flex; align-items: center; - justify-content: center; - + display: flex; font-size: 12px; + font-weight: 500; + justify-content: center; `; export function CommentChip({ count, onClick }: CommentChipProps) { diff --git a/front/src/modules/comments/components/comments/CommentHeader.tsx b/front/src/modules/comments/components/comments/CommentHeader.tsx index 7eb6f6745..f7a0073c7 100644 --- a/front/src/modules/comments/components/comments/CommentHeader.tsx +++ b/front/src/modules/comments/components/comments/CommentHeader.tsx @@ -14,49 +14,49 @@ type OwnProps = { }; const StyledContainer = styled.div` - display: flex; align-items: center; + display: flex; flex-direction: row; + gap: ${(props) => props.theme.spacing(1)}; + justify-content: flex-start; padding: ${(props) => props.theme.spacing(1)}; - - gap: ${(props) => props.theme.spacing(1)}; `; const StyledName = styled.div` + color: ${(props) => props.theme.text80}; font-size: 13px; font-weight: 400; - color: ${(props) => props.theme.text80}; + max-width: 160px; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; - max-width: 160px; `; const StyledDate = styled.div` + color: ${(props) => props.theme.text30}; font-size: 12px; font-weight: 400; - color: ${(props) => props.theme.text30}; - - padding-top: 1.5px; margin-left: ${(props) => props.theme.spacing(1)}; + + padding-top: 1.5px; `; const StyledTooltip = styled(Tooltip)` - padding: 8px; - - opacity: 1; - background-color: ${(props) => props.theme.primaryBackground}; + box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04); + + box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12); + color: ${(props) => props.theme.text100}; - box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12); - box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04); + opacity: 1; + padding: 8px; `; export function CommentHeader({ comment }: OwnProps) { diff --git a/front/src/modules/comments/components/comments/CommentThread.tsx b/front/src/modules/comments/components/comments/CommentThread.tsx index 3d48eeb8c..0043241ba 100644 --- a/front/src/modules/comments/components/comments/CommentThread.tsx +++ b/front/src/modules/comments/components/comments/CommentThread.tsx @@ -17,29 +17,29 @@ type OwnProps = { }; const StyledContainer = styled.div` - display: flex; align-items: flex-start; + display: flex; flex-direction: column; - justify-content: flex-start; - gap: ${(props) => props.theme.spacing(4)}; + + justify-content: flex-start; padding: ${(props) => props.theme.spacing(2)}; `; const StyledThreadItemListContainer = styled.div` - display: flex; - flex-direction: column-reverse; - align-items: flex-start; - justify-content: flex-start; + display: flex; + flex-direction: column-reverse; + gap: ${(props) => props.theme.spacing(4)}; + + justify-content: flex-start; max-height: 400px; overflow: auto; - width: 100%; - gap: ${(props) => props.theme.spacing(4)}; + width: 100%; `; export function CommentThread({ commentThread }: OwnProps) { diff --git a/front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx b/front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx index 1c6cb3505..6bebc7dc4 100644 --- a/front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx +++ b/front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx @@ -19,28 +19,28 @@ import { import { CommentThreadItem } from './CommentThreadItem'; const StyledContainer = styled.div` - display: flex; align-items: flex-start; + display: flex; flex-direction: column; + gap: ${(props) => props.theme.spacing(4)}; + justify-content: flex-start; max-height: calc(100% - 16px); - - gap: ${(props) => props.theme.spacing(4)}; padding: ${(props) => props.theme.spacing(2)}; `; const StyledThreadItemListContainer = styled.div` - display: flex; - flex-direction: column-reverse; - align-items: flex-start; - justify-content: flex-start; - - overflow: auto; - width: 100%; + display: flex; + flex-direction: column-reverse; gap: ${(props) => props.theme.spacing(4)}; + + justify-content: flex-start; + overflow: auto; + + width: 100%; `; export function CommentThreadCreateMode() { diff --git a/front/src/modules/comments/components/comments/CommentThreadItem.tsx b/front/src/modules/comments/components/comments/CommentThreadItem.tsx index a77b57972..67f423e8a 100644 --- a/front/src/modules/comments/components/comments/CommentThreadItem.tsx +++ b/front/src/modules/comments/components/comments/CommentThreadItem.tsx @@ -9,23 +9,23 @@ type OwnProps = { }; const StyledContainer = styled.div` + align-items: flex-start; display: flex; flex-direction: column; - align-items: flex-start; - justify-content: flex-start; gap: ${(props) => props.theme.spacing(1)}; + justify-content: flex-start; `; const StyledCommentBody = styled.div` + color: ${(props) => props.theme.text60}; font-size: ${(props) => props.theme.fontSizeMedium}; - line-height: ${(props) => props.theme.lineHeight}; - text-align: left; + line-height: ${(props) => props.theme.lineHeight}; + overflow-wrap: anywhere; + padding-left: 24px; - color: ${(props) => props.theme.text60}; - - overflow-wrap: anywhere; + text-align: left; `; export function CommentThreadItem({ comment }: OwnProps) { diff --git a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx b/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx index 99b6db2d5..5dbf67306 100644 --- a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx +++ b/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx @@ -15,19 +15,19 @@ export default meta; type Story = StoryObj; const TestCellContainer = styled.div` - display: flex; align-items: center; - justify-content: flex-start; - - min-width: 250px; - max-width: 250px; - - text-wrap: nowrap; - overflow: hidden; + background: ${(props) => props.theme.primaryBackground}; + display: flex; height: fit-content; + justify-content: flex-start; - background: ${(props) => props.theme.primaryBackground}; + max-width: 250px; + min-width: 250px; + + overflow: hidden; + + text-wrap: nowrap; `; const StyledFakeCellText = styled.div` diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx index d1037133b..3d1dd7984 100644 --- a/front/src/modules/companies/components/CompanyChip.tsx +++ b/front/src/modules/companies/components/CompanyChip.tsx @@ -7,13 +7,13 @@ export type CompanyChipPropsType = { }; const StyledContainer = styled.span` + align-items: center; background-color: ${(props) => props.theme.tertiaryBackground}; border-radius: ${(props) => props.theme.spacing(1)}; color: ${(props) => props.theme.text80}; display: inline-flex; - align-items: center; - padding: ${(props) => props.theme.spacing(1)}; gap: ${(props) => props.theme.spacing(1)}; + padding: ${(props) => props.theme.spacing(1)}; :hover { filter: brightness(95%); @@ -21,8 +21,8 @@ const StyledContainer = styled.span` img { height: 14px; - width: 14px; object-fit: cover; + width: 14px; } `; diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx index 367607b86..e44e7cece 100644 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ b/front/src/modules/people/components/EditablePeopleFullName.tsx @@ -16,8 +16,8 @@ type OwnProps = { }; const StyledDiv = styled.div` - display: flex; align-items: center; + display: flex; justify-content: space-between; width: 100%; `; diff --git a/front/src/modules/people/components/PersonChip.tsx b/front/src/modules/people/components/PersonChip.tsx index a6a8daee1..558e9d331 100644 --- a/front/src/modules/people/components/PersonChip.tsx +++ b/front/src/modules/people/components/PersonChip.tsx @@ -9,29 +9,29 @@ export type PersonChipPropsType = { }; const StyledContainer = styled.span` + align-items: center; background-color: ${(props) => props.theme.tertiaryBackground}; border-radius: ${(props) => props.theme.spacing(1)}; color: ${(props) => props.theme.text80}; display: inline-flex; - align-items: center; - padding: ${(props) => props.theme.spacing(1)}; gap: ${(props) => props.theme.spacing(1)}; + height: 12px; overflow: hidden; - white-space: nowrap; + padding: ${(props) => props.theme.spacing(1)}; :hover { filter: brightness(95%); } img { - height: 14px; - width: 14px; border-radius: 100%; + height: 14px; object-fit: cover; + width: 14px; } - height: 12px; + white-space: nowrap; `; export function PersonChip({ name, picture }: PersonChipPropsType) { diff --git a/front/src/modules/pipelines/components/PipelineChip.tsx b/front/src/modules/pipelines/components/PipelineChip.tsx index 222c1291a..9de2c298e 100644 --- a/front/src/modules/pipelines/components/PipelineChip.tsx +++ b/front/src/modules/pipelines/components/PipelineChip.tsx @@ -8,13 +8,13 @@ type OwnProps = { }; const StyledContainer = styled.span` + align-items: center; background-color: ${(props) => props.theme.tertiaryBackground}; border-radius: ${(props) => props.theme.spacing(1)}; color: ${(props) => props.theme.text80}; display: inline-flex; - align-items: center; - padding: ${(props) => props.theme.spacing(1)}; gap: ${(props) => props.theme.spacing(1)}; + padding: ${(props) => props.theme.spacing(1)}; :hover { filter: brightness(95%); diff --git a/front/src/modules/search/components/CommandMenuStyles.tsx b/front/src/modules/search/components/CommandMenuStyles.tsx index 752f2f4bd..e6a707ae4 100644 --- a/front/src/modules/search/components/CommandMenuStyles.tsx +++ b/front/src/modules/search/components/CommandMenuStyles.tsx @@ -2,61 +2,61 @@ import styled from '@emotion/styled'; import { Command } from 'cmdk'; export const StyledDialog = styled(Command.Dialog)` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 640px; - padding: 25px; - width: 100%; background: ${(props) => props.theme.primaryBackground}; border-radius: ${(props) => props.theme.borderRadius}; + box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09); + font-family: ${(props) => props.theme.fontFamily}; + left: 50%; + max-width: 640px; overflow: hidden; padding: 0; - font-family: ${(props) => props.theme.fontFamily}; - box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09); + padding: 25px; + position: fixed; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; `; export const StyledInput = styled(Command.Input)` - border: none; - width: 100%; - font-size: ${(props) => props.theme.fontSizeLarge}; - padding: ${(props) => props.theme.spacing(5)}; - outline: none; background: ${(props) => props.theme.primaryBackground}; - color: ${(props) => props.theme.text100}; + border: none; border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; border-radius: 0; caret-color: ${(props) => props.theme.blue}; + color: ${(props) => props.theme.text100}; + font-size: ${(props) => props.theme.fontSizeLarge}; margin: 0; + outline: none; + padding: ${(props) => props.theme.spacing(5)}; + width: 100%; `; export const StyledItem = styled(Command.Item)` - cursor: pointer; - height: 48px; - font-size: ${(props) => props.theme.fontSizeMedium}; - display: flex; align-items: center; - gap: ${(props) => props.theme.spacing(3)}; - padding: 0 ${(props) => props.theme.spacing(4)}; color: ${(props) => props.theme.text100}; - user-select: none; + cursor: pointer; + display: flex; + font-size: ${(props) => props.theme.fontSizeMedium}; + gap: ${(props) => props.theme.spacing(3)}; + height: 48px; + padding: 0 ${(props) => props.theme.spacing(4)}; + position: relative; transition: all 150ms ease; transition-property: none; - position: relative; + user-select: none; &:hover { background: ${(props) => props.theme.clickableElementBackgroundHover}; } &[data-selected='true'] { background: ${(props) => props.theme.secondaryBackground}; &:after { - content: ''; - position: absolute; - left: 0; - z-index: ${(props) => props.theme.lastLayerZIndex}; - width: 3px; - height: 100%; background: ${(props) => props.theme.blue}; + content: ''; + height: 100%; + left: 0; + position: absolute; + width: 3px; + z-index: ${(props) => props.theme.lastLayerZIndex}; } } &[data-disabled='true'] { @@ -64,41 +64,41 @@ export const StyledItem = styled(Command.Item)` cursor: not-allowed; } svg { - width: 16px; - height: 16px; color: ${(props) => props.theme.text80}; + height: 16px; + width: 16px; } `; export const StyledList = styled(Command.List)` + background: ${(props) => props.theme.secondaryBackground}; height: min(300px, var(--cmdk-list-height)); max-height: 400px; overflow: auto; overscroll-behavior: contain; transition: 100ms ease; transition-property: height; - background: ${(props) => props.theme.secondaryBackground}; `; export const StyledGroup = styled(Command.Group)` [cmdk-group-heading] { - user-select: none; - font-size: ${(props) => props.theme.fontSizeExtraSmall}; - color: ${(props) => props.theme.text30}; - padding: ${(props) => props.theme.spacing(2)}; - display: flex; align-items: center; + color: ${(props) => props.theme.text30}; + display: flex; + font-size: ${(props) => props.theme.fontSizeExtraSmall}; + padding: ${(props) => props.theme.spacing(2)}; + user-select: none; } `; export const StyledEmpty = styled(Command.Empty)` - font-size: ${(props) => props.theme.fontSizeMedium}; - display: flex; align-items: center; - justify-content: center; - height: 64px; - white-space: pre-wrap; color: ${(props) => props.theme.text30}; + display: flex; + font-size: ${(props) => props.theme.fontSizeMedium}; + height: 64px; + justify-content: center; + white-space: pre-wrap; `; export const StyledSeparator = styled(Command.Separator)``; diff --git a/front/src/modules/ui/components/board/BoardColumn.tsx b/front/src/modules/ui/components/board/BoardColumn.tsx index 4762327cb..31ac86cb1 100644 --- a/front/src/modules/ui/components/board/BoardColumn.tsx +++ b/front/src/modules/ui/components/board/BoardColumn.tsx @@ -3,20 +3,20 @@ import styled from '@emotion/styled'; import { DroppableProvided } from '@hello-pangea/dnd'; export const StyledColumn = styled.div` + background-color: ${({ theme }) => theme.primaryBackground}; display: flex; flex-direction: column; - width: 300px; - background-color: ${({ theme }) => theme.primaryBackground}; padding: ${({ theme }) => theme.spacing(2)}; + width: 300px; `; export const StyledColumnTitle = styled.h3` + color: ${({ color }) => color}; font-family: 'Inter'; + font-size: ${({ theme }) => theme.fontSizeMedium}; font-style: normal; font-weight: ${({ theme }) => theme.fontWeightMedium}; - font-size: ${({ theme }) => theme.fontSizeMedium}; line-height: ${({ theme }) => theme.lineHeight}; - color: ${({ color }) => color}; margin: 0; margin-bottom: ${({ theme }) => theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/board/BoardItem.tsx b/front/src/modules/ui/components/board/BoardItem.tsx index 3311e6e21..eae767140 100644 --- a/front/src/modules/ui/components/board/BoardItem.tsx +++ b/front/src/modules/ui/components/board/BoardItem.tsx @@ -5,9 +5,9 @@ const StyledCard = styled.div` background-color: ${({ theme }) => theme.secondaryBackground}; border: 1px solid ${({ theme }) => theme.quaternaryBackground}; border-radius: ${({ theme }) => theme.borderRadius}; - padding: ${({ theme }) => theme.spacing(2)}; - margin-bottom: ${({ theme }) => theme.spacing(2)}; box-shadow: ${({ theme }) => theme.boxShadow}; + margin-bottom: ${({ theme }) => theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(2)}; `; type BoardCardProps = { diff --git a/front/src/modules/ui/components/board/BoardNewButton.tsx b/front/src/modules/ui/components/board/BoardNewButton.tsx index ce5f042e2..9aef0fac5 100644 --- a/front/src/modules/ui/components/board/BoardNewButton.tsx +++ b/front/src/modules/ui/components/board/BoardNewButton.tsx @@ -3,17 +3,17 @@ import styled from '@emotion/styled'; import { IconPlus } from '@/ui/icons/index'; const StyledButton = styled.button` - display: flex; align-items: center; - justify-content: center; + align-self: baseline; background-color: ${({ theme }) => theme.primaryBackground}; - color: ${({ theme }) => theme.text40}; border: none; border-radius: ${({ theme }) => theme.borderRadius}; + color: ${({ theme }) => theme.text40}; cursor: pointer; - transition: background-color 0.2s ease-in-out; - align-self: baseline; + display: flex; gap: ${({ theme }) => theme.spacing(1)}; + justify-content: center; + transition: background-color 0.2s ease-in-out; &:hover { background-color: ${({ theme }) => theme.secondaryBackground}; diff --git a/front/src/modules/ui/components/buttons/IconButton.tsx b/front/src/modules/ui/components/buttons/IconButton.tsx index d01a8cef8..1de760c02 100644 --- a/front/src/modules/ui/components/buttons/IconButton.tsx +++ b/front/src/modules/ui/components/buttons/IconButton.tsx @@ -1,22 +1,22 @@ import styled from '@emotion/styled'; const StyledIconButton = styled.button` - display: flex; align-items: center; - justify-content: center; + background: ${(props) => props.theme.blue}; + border: none; - width: 20px; + border-radius: 50%; + color: ${(props) => props.theme.text0}; + + cursor: pointer; + display: flex; height: 20px; + justify-content: center; + padding: 0; - border: none; - border-radius: 50%; - transition: color 0.1s ease-in-out, background 0.1s ease-in-out; - - background: ${(props) => props.theme.blue}; - color: ${(props) => props.theme.text0}; - cursor: pointer; + width: 20px; &:disabled { background: ${(props) => props.theme.quaternaryBackground}; diff --git a/front/src/modules/ui/components/editable-cell/EditableCell.tsx b/front/src/modules/ui/components/editable-cell/EditableCell.tsx index 5a2de48c8..ecdfc5e82 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCell.tsx @@ -8,14 +8,14 @@ import { EditableCellDisplayMode } from './EditableCellDisplayMode'; import { EditableCellEditMode } from './EditableCellEditMode'; export const CellBaseContainer = styled.div` - position: relative; - box-sizing: border-box; - height: 32px; - display: flex; align-items: center; - width: 100%; + box-sizing: border-box; cursor: pointer; + display: flex; + height: 32px; + position: relative; user-select: none; + width: 100%; `; type OwnProps = { diff --git a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx index 4dfa2b750..c802f07ba 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx @@ -2,32 +2,32 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; export const EditableCellNormalModeOuterContainer = styled.div` - display: flex; align-items: center; - width: 100%; + display: flex; height: 100%; overflow: hidden; - padding-left: ${(props) => props.theme.spacing(2)}; + padding-right: ${(props) => props.theme.spacing(1)}; + width: 100%; &:hover { - background: ${(props) => props.theme.secondaryBackgroundTransparent}; + -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; -webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; - -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; - box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; - + background: ${(props) => props.theme.secondaryBackgroundTransparent}; border-radius: ${(props) => props.theme.borderRadius}; + + box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; } `; export const EditableCellNormalModeInnerContainer = styled.div` - display: flex; align-items: center; - width: 100%; + display: flex; height: 100%; overflow: hidden; + width: 100%; `; type OwnProps = { diff --git a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx index 22872d72d..496327ee9 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx @@ -10,21 +10,21 @@ import { overlayBackground } from '../../layout/styles/themes'; import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; export const EditableCellEditModeContainer = styled.div` - display: flex; align-items: center; - min-width: calc(100% + 20px); - min-height: 100%; - margin-left: -2px; - position: absolute; + border: 1px solid ${(props) => props.theme.primaryBorder}; + border-radius: 4px; + display: flex; left: ${(props) => props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; + margin-left: -2px; + min-height: 100%; + min-width: calc(100% + 20px); + position: absolute; + right: ${(props) => props.editModeHorizontalAlign === 'right' ? '0' : 'auto'}; top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')}; - - border: 1px solid ${(props) => props.theme.primaryBorder}; z-index: 1; - border-radius: 4px; ${overlayBackground} `; diff --git a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx index 22bd86f38..b0020cf38 100644 --- a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx +++ b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx @@ -1,17 +1,17 @@ import styled from '@emotion/styled'; export const HoverableMenuItem = styled.div` - position: relative; - box-sizing: border-box; - height: 100%; - width: 100%; - display: flex; align-items: center; - cursor: pointer; - user-select: none; - border-radius: 4px; background: rgba(0, 0, 0, 0); + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + display: flex; + height: 100%; + position: relative; transition: background 0.1s ease; + user-select: none; + width: 100%; &:hover { background: rgba(0, 0, 0, 0.04); diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index 9ba8b92a4..a8b36dd54 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx @@ -19,9 +19,9 @@ export type EditableChipProps = { // TODO: refactor const StyledInplaceInput = styled.input` - width: 100%; padding-left: ${(props) => props.theme.spacing(1)}; padding-right: ${(props) => props.theme.spacing(1)}; + width: 100%; ${textInputStyle} `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx index 8be8d04f6..2fce4f4de 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx @@ -13,8 +13,8 @@ export type EditableDateProps = { }; const StyledContainer = styled.div` - display: flex; align-items: center; + display: flex; margin: 0px ${(props) => props.theme.spacing(2)}; `; @@ -23,14 +23,14 @@ export type StyledCalendarContainerProps = { }; const StyledCalendarContainer = styled.div` - position: absolute; + background: ${(props) => props.theme.secondaryBackground}; border: 1px solid ${(props) => props.theme.primaryBorder}; border-radius: 8px; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09); - z-index: 1; left: -10px; + position: absolute; top: 10px; - background: ${(props) => props.theme.secondaryBackground}; + z-index: 1; `; export function EditableDate({ value, diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx index fbfcbf715..e5bb859bf 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx @@ -15,20 +15,20 @@ type OwnProps = { }; const StyledContainer = styled.div` + align-items: center; display: flex; justify-content: space-between; - align-items: center; & > input:last-child { - padding-left: ${(props) => props.theme.spacing(2)}; border-left: 1px solid ${(props) => props.theme.primaryBorder}; + padding-left: ${(props) => props.theme.spacing(2)}; } `; const StyledEditInplaceInput = styled.input` - width: 45%; height: 18px; margin: 0px ${(props) => props.theme.spacing(2)}; + width: 45%; ${textInputStyle} `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx index d43e4fb92..97448418f 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx @@ -19,8 +19,8 @@ type StyledEditModeProps = { // TODO: refactor const StyledEditInplaceInput = styled.input` - width: 100%; margin: 0px ${(props) => props.theme.spacing(2)}; + width: 100%; ${textInputStyle} `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx b/front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx index ac2b5026a..2c0713f42 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx @@ -22,29 +22,29 @@ const StyledEditModeContainer = styled.div` `; const StyledEditModeSelectedContainer = styled.div` - height: 31px; - display: flex; align-items: center; + display: flex; + height: 31px; padding-left: ${(props) => props.theme.spacing(2)}; padding-right: ${(props) => props.theme.spacing(1)}; `; const StyledEditModeSearchContainer = styled.div` - height: 32px; - display: flex; align-items: center; border-top: 1px solid ${(props) => props.theme.primaryBorder}; + display: flex; + height: 32px; padding-left: ${(props) => props.theme.spacing(1)}; padding-right: ${(props) => props.theme.spacing(1)}; `; const StyledEditModeCreateButtonContainer = styled.div` - height: 36px; - display: flex; align-items: center; border-top: 1px solid ${(props) => props.theme.primaryBorder}; - padding: ${(props) => props.theme.spacing(1)}; color: ${(props) => props.theme.text60}; + display: flex; + height: 36px; + padding: ${(props) => props.theme.spacing(1)}; `; const StyledEditModeSearchInput = styled.input` @@ -64,10 +64,10 @@ type StyledEditModeResultItemProps = { }; const StyledEditModeResultItem = styled.div` - height: 32px; - display: flex; align-items: center; cursor: pointer; + display: flex; + height: 32px; user-select: none; ${(props) => props.isSelected && @@ -77,8 +77,8 @@ const StyledEditModeResultItem = styled.div` `; const StyledCreateButtonIcon = styled.div` - color: ${(props) => props.theme.text100}; align-self: center; + color: ${(props) => props.theme.text100}; padding-top: 4px; `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx index be2dec9ff..0954e6a69 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx @@ -1,19 +1,19 @@ import styled from '@emotion/styled'; export const EditableRelationCreateButton = styled.button` - display: flex; align-items: center; + background: none; border: none; - font-size: ${(props) => props.theme.fontSizeMedium}; + border-radius: 4px; cursor: pointer; - user-select: none; - padding-top: ${(props) => props.theme.spacing(1)}; + display: flex; + font-family: 'Inter'; + font-size: ${(props) => props.theme.fontSizeMedium}; + gap: ${(props) => props.theme.spacing(2)}; + height: 31px; padding-bottom: ${(props) => props.theme.spacing(1)}; padding-left: ${(props) => props.theme.spacing(1)}; - font-family: 'Inter'; - border-radius: 4px; + padding-top: ${(props) => props.theme.spacing(1)}; + user-select: none; width: 100%; - height: 31px; - background: none; - gap: ${(props) => props.theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx index 9646b2b84..00bf0845a 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx @@ -18,8 +18,8 @@ type StyledEditModeProps = { // TODO: refactor const StyledInplaceInput = styled.input` - width: 100%; margin: 0px ${(props) => props.theme.spacing(2)}; + width: 100%; ${textInputStyle} `; diff --git a/front/src/modules/ui/components/form/Checkbox.tsx b/front/src/modules/ui/components/form/Checkbox.tsx index 86aee19bf..146260db1 100644 --- a/front/src/modules/ui/components/form/Checkbox.tsx +++ b/front/src/modules/ui/components/form/Checkbox.tsx @@ -10,26 +10,26 @@ type OwnProps = { }; const StyledContainer = styled.div` + align-items: center; display: flex; justify-content: center; - align-items: center; input[type='checkbox'] { accent-color: ${(props) => props.theme.blue}; - margin: 2px; - height: 14px; - width: 14px; cursor: pointer; + height: 14px; + margin: 2px; user-select: none; + width: 14px; } input[type='checkbox']::before { - content: ''; border: 1px solid ${(props) => props.theme.text40}; - width: 12px; - height: 12px; border-radius: 2px; + content: ''; display: block; + height: 12px; + width: 12px; } input[type='checkbox']:hover::before { diff --git a/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx b/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx index f53065cd4..12864cb49 100644 --- a/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx +++ b/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx @@ -22,22 +22,22 @@ const StyledContainer = styled.div` `; const StyledTextArea = styled(TextareaAutosize)` - width: 100%; - padding: 8px; - font-size: 13px; - font-family: inherit; - font-weight: 400; - line-height: 16px; + background: ${(props) => props.theme.tertiaryBackground}; border: none; border-radius: 5px; - background: ${(props) => props.theme.tertiaryBackground}; color: ${(props) => props.theme.text80}; + font-family: inherit; + font-size: 13px; + font-weight: 400; + line-height: 16px; overflow: auto; + padding: 8px; resize: none; + width: 100%; &:focus { - outline: none; border: none; + outline: none; } &::placeholder { @@ -48,11 +48,11 @@ const StyledTextArea = styled(TextareaAutosize)` // TODO: this messes with the layout, fix it const StyledBottomRightIconButton = styled.div` - width: 0px; - position: relative; - top: calc(100% - 26.5px); - right: 26px; height: 0; + position: relative; + right: 26px; + top: calc(100% - 26.5px); + width: 0px; `; export function AutosizeTextInput({ diff --git a/front/src/modules/ui/components/inputs/DoubleTextInput.tsx b/front/src/modules/ui/components/inputs/DoubleTextInput.tsx index 7c03f7bf3..9dfedab0d 100644 --- a/front/src/modules/ui/components/inputs/DoubleTextInput.tsx +++ b/front/src/modules/ui/components/inputs/DoubleTextInput.tsx @@ -12,19 +12,19 @@ type OwnProps = { }; const StyledContainer = styled.div` + align-items: center; display: flex; justify-content: space-between; - align-items: center; & > input:last-child { - padding-left: ${(props) => props.theme.spacing(2)}; border-left: 1px solid ${(props) => props.theme.primaryBorder}; + padding-left: ${(props) => props.theme.spacing(2)}; } `; const StyledEditInplaceInput = styled.input` - width: 45%; height: 18px; + width: 45%; ${textInputStyle} `; diff --git a/front/src/modules/ui/components/menu/DropdownMenu.tsx b/front/src/modules/ui/components/menu/DropdownMenu.tsx index 8b92bcf62..1b83a562e 100644 --- a/front/src/modules/ui/components/menu/DropdownMenu.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenu.tsx @@ -1,20 +1,20 @@ import styled from '@emotion/styled'; export const DropdownMenu = styled.div` - width: 200px; - height: fit-content; - - display: flex; - flex-direction: column; align-items: center; + backdrop-filter: blur(20px); background: ${(props) => props.theme.secondaryBackgroundTransparent}; - border: 1px solid ${(props) => props.theme.lightBorder}; - border-radius: calc(${(props) => props.theme.borderRadius} * 2); box-shadow: ${(props) => props.theme.modalBoxShadow}; - backdrop-filter: blur(20px); + display: flex; + + flex-direction: column; + + height: fit-content; + + width: 200px; `; diff --git a/front/src/modules/ui/components/menu/DropdownMenuButton.tsx b/front/src/modules/ui/components/menu/DropdownMenuButton.tsx index 38573c600..382bd8cc4 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuButton.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuButton.tsx @@ -6,25 +6,25 @@ export const DropdownMenuButton = styled.div` --horizontal-padding: ${(props) => props.theme.spacing(1.5)}; --vertical-padding: ${(props) => props.theme.spacing(2)}; - padding: var(--vertical-padding) var(--horizontal-padding); + align-items: center; - width: calc(100% - 2 * var(--horizontal-padding)); - height: calc(32px - 2 * var(--vertical-padding)); + border-radius: ${(props) => props.theme.borderRadius}; + color: ${(props) => props.theme.text60}; + cursor: pointer; display: flex; flex-direction: row; - align-items: center; + + font-size: ${(props) => props.theme.fontSizeSmall}; gap: ${(props) => props.theme.spacing(2)}; - border-radius: ${(props) => props.theme.borderRadius}; + height: calc(32px - 2 * var(--vertical-padding)); - cursor: pointer; - - user-select: none; + padding: var(--vertical-padding) var(--horizontal-padding); ${hoverBackground}; - color: ${(props) => props.theme.text60}; - font-size: ${(props) => props.theme.fontSizeSmall}; + user-select: none; + width: calc(100% - 2 * var(--horizontal-padding)); `; diff --git a/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx index 5e9aca79f..e1968d2d8 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx @@ -12,23 +12,23 @@ type Props = { }; const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)` - display: flex; align-items: center; + display: flex; justify-content: space-between; `; const StyledLeftContainer = styled.div` - display: flex; align-items: center; + display: flex; gap: ${(props) => props.theme.spacing(2)}; `; const StyledChildrenContainer = styled.div` - font-size: ${(props) => props.theme.fontSizeSmall}; + align-items: center; display: flex; - align-items: center; + font-size: ${(props) => props.theme.fontSizeSmall}; gap: ${(props) => props.theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/menu/DropdownMenuItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuItem.tsx index b34c73029..5d28a421a 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuItem.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuItem.tsx @@ -4,19 +4,19 @@ export const DropdownMenuItem = styled.div` --horizontal-padding: ${(props) => props.theme.spacing(1.5)}; --vertical-padding: ${(props) => props.theme.spacing(2)}; - padding: var(--vertical-padding) var(--horizontal-padding); + align-items: center; - width: calc(100% - 2 * var(--horizontal-padding)); - height: calc(32px - 2 * var(--vertical-padding)); + border-radius: ${(props) => props.theme.borderRadius}; + color: ${(props) => props.theme.text60}; display: flex; flex-direction: row; - align-items: center; + font-size: ${(props) => props.theme.fontSizeSmall}; gap: ${(props) => props.theme.spacing(2)}; - border-radius: ${(props) => props.theme.borderRadius}; + height: calc(32px - 2 * var(--vertical-padding)); - color: ${(props) => props.theme.text60}; - font-size: ${(props) => props.theme.fontSizeSmall}; + padding: var(--vertical-padding) var(--horizontal-padding); + width: calc(100% - 2 * var(--horizontal-padding)); `; diff --git a/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx b/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx index a9a109e84..1ef52b5a1 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx @@ -3,12 +3,12 @@ import styled from '@emotion/styled'; export const DropdownMenuItemContainer = styled.div` --padding: ${(props) => props.theme.spacing(1 / 2)}; - width: calc(100% - 2 * var(--padding)); - height: 100%; - - display: flex; - flex-direction: column; align-items: flex-start; - padding: var(--padding); + display: flex; + + flex-direction: column; gap: 2px; + height: 100%; + padding: var(--padding); + width: calc(100% - 2 * var(--padding)); `; diff --git a/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx b/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx index 976f70d56..5909d269a 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx @@ -7,23 +7,23 @@ export const DropdownMenuSearchContainer = styled.div` --horizontal-padding: ${(props) => props.theme.spacing(2)}; --vertical-padding: ${(props) => props.theme.spacing(1)}; - width: calc(100% - 2 * var(--horizontal-padding)); - height: calc(36px - 2 * var(--vertical-padding)); + align-items: center; + border-bottom: 1px solid ${(props) => props.theme.lightBorder}; display: flex; flex-direction: row; - align-items: center; + height: calc(36px - 2 * var(--vertical-padding)); padding: var(--vertical-padding) var(--horizontal-padding); - border-bottom: 1px solid ${(props) => props.theme.lightBorder}; + width: calc(100% - 2 * var(--horizontal-padding)); `; const StyledEditModeSearchInput = styled.input` - width: 100%; + font-size: ${(props) => props.theme.fontSizeSmall}; ${textInputStyle} - font-size: ${(props) => props.theme.fontSizeSmall}; + width: 100%; `; export function DropdownMenuSearch( diff --git a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx index 61543b8a2..9c20ba7b1 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx @@ -14,14 +14,14 @@ type Props = { const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)` ${hoverBackground}; - display: flex; align-items: center; + display: flex; justify-content: space-between; `; const StyledLeftContainer = styled.div` - display: flex; align-items: center; + display: flex; gap: ${(props) => props.theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx b/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx index 4262c2de1..ad3a1b920 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; export const DropdownMenuSeparator = styled.div` - width: 100%; + background-color: ${(props) => props.theme.mediumBorder}; height: 1px; - background-color: ${(props) => props.theme.mediumBorder}; + width: 100%; `; diff --git a/front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx b/front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx index 581ab992c..ac47d2da5 100644 --- a/front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx +++ b/front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx @@ -34,22 +34,22 @@ const avatarUrl = 'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4'; const FakeMenuContent = styled.div` - width: 100%; height: 400px; + width: 100%; `; const FakeBelowContainer = styled.div` - width: 300px; height: 600px; - position: relative; + + width: 300px; `; const MenuAbsolutePositionWrapper = styled.div` - width: fit-content; height: fit-content; - position: absolute; + + width: fit-content; `; const FakeMenuItemList = () => ( diff --git a/front/src/modules/ui/components/table/CheckboxCell.tsx b/front/src/modules/ui/components/table/CheckboxCell.tsx index 42ab35120..fd335e2e3 100644 --- a/front/src/modules/ui/components/table/CheckboxCell.tsx +++ b/front/src/modules/ui/components/table/CheckboxCell.tsx @@ -15,13 +15,13 @@ type OwnProps = { }; const StyledContainer = styled.div` - height: 32px; - - display: flex; align-items: center; - justify-content: center; cursor: pointer; + display: flex; + height: 32px; + + justify-content: center; `; export function CheckboxCell({ diff --git a/front/src/modules/ui/components/table/ColumnHead.tsx b/front/src/modules/ui/components/table/ColumnHead.tsx index 6aad4f5ca..ed8fd0e07 100644 --- a/front/src/modules/ui/components/table/ColumnHead.tsx +++ b/front/src/modules/ui/components/table/ColumnHead.tsx @@ -7,11 +7,11 @@ type OwnProps = { }; const StyledTitle = styled.div` + align-items: center; display: flex; flex-direction: row; - align-items: center; - height: ${(props) => props.theme.spacing(8)}; font-weight: 500; + height: ${(props) => props.theme.spacing(8)}; padding-left: ${(props) => props.theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx index f0115f66e..c5811feee 100644 --- a/front/src/modules/ui/components/table/EntityTable.tsx +++ b/front/src/modules/ui/components/table/EntityTable.tsx @@ -39,20 +39,20 @@ type OwnProps< }; const StyledTable = styled.table` - width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2); + border-collapse: collapse; border-radius: 4px; border-spacing: 0; - border-collapse: collapse; margin-left: ${(props) => props.theme.table.horizontalCellMargin}; margin-right: ${(props) => props.theme.table.horizontalCellMargin}; table-layout: fixed; + width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2); th { + border: 1px solid ${(props) => props.theme.tertiaryBackground}; border-collapse: collapse; color: ${(props) => props.theme.text40}; padding: 0; - border: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; :last-child { @@ -63,16 +63,16 @@ const StyledTable = styled.table` border-right-color: transparent; } :last-of-type { - width: 100%; min-width: 0; + width: 100%; } } td { + border: 1px solid ${(props) => props.theme.tertiaryBackground}; border-collapse: collapse; color: ${(props) => props.theme.text80}; padding: 0; - border: 1px solid ${(props) => props.theme.tertiaryBackground}; text-align: left; @@ -84,23 +84,23 @@ const StyledTable = styled.table` border-right-color: transparent; } :last-of-type { - width: 100%; min-width: 0; + width: 100%; } } `; const StyledTableWithHeader = styled.div` display: flex; - flex-direction: column; flex: 1; + flex-direction: column; width: 100%; `; const StyledTableScrollableContainer = styled.div` - overflow: auto; - height: 100%; flex: 1; + height: 100%; + overflow: auto; `; const StyledRow = styled.tr<{ selected: boolean }>` diff --git a/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx b/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx index 9025187e9..86dcb3864 100644 --- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx +++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx @@ -15,22 +15,22 @@ type StyledContainerProps = { }; const StyledContainer = styled.div` - display: flex; - position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; - z-index: 1; - height: 48px; - bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; - left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; - top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; - - background: ${(props) => props.theme.secondaryBackground}; align-items: center; + background: ${(props) => props.theme.secondaryBackground}; + border: 1px solid ${(props) => props.theme.primaryBorder}; + border-radius: 8px; + bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; + display: flex; + height: 48px; + + left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; padding-left: ${(props) => props.theme.spacing(2)}; padding-right: ${(props) => props.theme.spacing(2)}; - transform: translateX(-50%); + position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; + top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; - border-radius: 8px; - border: 1px solid ${(props) => props.theme.primaryBorder}; + transform: translateX(-50%); + z-index: 1; `; export function EntityTableActionBar({ children }: OwnProps) { 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 1e1872e92..1d44108c6 100644 --- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx @@ -13,16 +13,16 @@ type StyledButtonProps = { }; const StyledButton = styled.div` - display: flex; - cursor: pointer; - user-select: none; + border-radius: 4px; color: ${(props) => props.type === 'warning' ? props.theme.red : props.theme.text60}; + cursor: pointer; + display: flex; justify-content: center; padding: ${(props) => props.theme.spacing(2)}; - border-radius: 4px; transition: background 0.1s ease; + user-select: none; &:hover { background: ${(props) => props.theme.tertiaryBackground}; @@ -30,8 +30,8 @@ const StyledButton = styled.div` `; const StyledButtonLabel = styled.div` - margin-left: ${(props) => props.theme.spacing(2)}; font-weight: 500; + margin-left: ${(props) => props.theme.spacing(2)}; `; export function EntityTableActionBarButton({ diff --git a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx index 3ccbfe1df..07f0e35a0 100644 --- a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx +++ b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx @@ -31,18 +31,18 @@ type StyledDropdownButtonProps = { }; const StyledDropdownButton = styled.div` - display: flex; - cursor: pointer; - user-select: none; background: ${(props) => props.theme.primaryBackground}; + border-radius: 4px; color: ${(props) => (props.isActive ? props.theme.blue : 'none')}; - padding: ${(props) => props.theme.spacing(1)}; + cursor: pointer; + display: flex; + filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')}; - padding-right: ${(props) => props.theme.spacing(2)}; + padding: ${(props) => props.theme.spacing(1)}; padding-left: ${(props) => props.theme.spacing(2)}; - border-radius: 4px; - filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')}; + padding-right: ${(props) => props.theme.spacing(2)}; + user-select: none; &:hover { filter: brightness(0.95); @@ -50,19 +50,19 @@ const StyledDropdownButton = styled.div` `; const StyledDropdown = styled.ul` + --outer-border-radius: calc(var(--wraper-border-radius) - 2px); --wraper-border: 1px; --wraper-border-radius: 8px; - --outer-border-radius: calc(var(--wraper-border-radius) - 2px); - display: flex; - flex-direction: column; - position: absolute; - top: 14px; - right: 0; border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder}; border-radius: var(--wraper-border-radius); - padding: 0px; + display: flex; + flex-direction: column; min-width: 160px; + padding: 0px; + position: absolute; + right: 0; + top: 14px; ${overlayBackground} li { &:first-of-type { @@ -70,24 +70,24 @@ const StyledDropdown = styled.ul` border-top-right-radius: var(--outer-border-radius); } &:last-of-type { + border-bottom: 0; border-bottom-left-radius: var(--outer-border-radius); border-bottom-right-radius: var(--outer-border-radius); - border-bottom: 0; } } `; const StyledDropdownItem = styled.li` - display: flex; align-items: center; - width: calc(160px - ${(props) => props.theme.spacing(4)}); + border-radius: 2px; + color: ${(props) => props.theme.text60}; + cursor: pointer; + display: flex; + margin: 2px; padding: ${(props) => props.theme.spacing(2)} calc(${(props) => props.theme.spacing(2)} - 2px); - margin: 2px; - cursor: pointer; user-select: none; - color: ${(props) => props.theme.text60}; - border-radius: 2px; + width: calc(160px - ${(props) => props.theme.spacing(4)}); &:hover { background: rgba(0, 0, 0, 0.04); @@ -96,54 +96,54 @@ const StyledDropdownItem = styled.li` const StyledDropdownItemClipped = styled.span` overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; `; const StyledDropdownTopOption = styled.li` - display: flex; align-items: center; + border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; + color: ${(props) => props.theme.text80}; + cursor: pointer; + display: flex; + font-weight: ${(props) => props.theme.fontWeightMedium}; justify-content: space-between; padding: calc(${(props) => props.theme.spacing(2)} + 2px) calc(${(props) => props.theme.spacing(2)}); - cursor: pointer; - user-select: none; - color: ${(props) => props.theme.text80}; - font-weight: ${(props) => props.theme.fontWeightMedium}; &:hover { background: rgba(0, 0, 0, 0.04); } - border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; + user-select: none; `; const StyledIcon = styled.div` display: flex; + justify-content: center; margin-right: ${(props) => props.theme.spacing(1)}; min-width: ${(props) => props.theme.spacing(4)}; - justify-content: center; `; const StyledSearchField = styled.li` - display: flex; align-items: center; - justify-content: space-between; - - cursor: pointer; - user-select: none; - color: ${(props) => props.theme.text60}; - font-weight: ${(props) => props.theme.fontWeightMedium}; border-bottom: var(--wraper-border) solid ${(props) => props.theme.primaryBorder}; + color: ${(props) => props.theme.text60}; + cursor: pointer; + display: flex; + font-weight: ${(props) => props.theme.fontWeightMedium}; + justify-content: space-between; overflow: hidden; + + user-select: none; input { - height: 36px; - width: 100%; - padding: 8px; + border-radius: 8px; box-sizing: border-box; font-family: ${(props) => props.theme.fontFamily}; - border-radius: 8px; + height: 36px; + padding: 8px; + width: 100%; ${textInputStyle} 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 7cc902591..07ea6c31d 100644 --- a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx +++ b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx @@ -18,43 +18,43 @@ type OwnProps = { }; const StyledBar = styled.div` + align-items: center; + border-top: 1px solid ${(props) => props.theme.primaryBorder}; display: flex; flex-direction: row; - border-top: 1px solid ${(props) => props.theme.primaryBorder}; - align-items: center; - justify-content: space-between; height: 40px; + justify-content: space-between; `; const StyledChipcontainer = styled.div` + align-items: center; display: flex; flex-direction: row; - align-items: center; - justify-content: space-between; - height: 40px; - overflow-x: auto; - margin-left: ${(props) => props.theme.spacing(2)}; gap: ${(props) => props.theme.spacing(1)}; + height: 40px; + justify-content: space-between; + margin-left: ${(props) => props.theme.spacing(2)}; + overflow-x: auto; `; const StyledCancelButton = styled.button` - margin-left: auto; - border: none; background-color: inherit; + border: none; + color: ${(props) => props.theme.text60}; + cursor: pointer; + font-weight: 500; + margin-left: auto; + margin-right: ${(props) => props.theme.spacing(2)}; padding: ${(props) => { const horiz = props.theme.spacing(2); const vert = props.theme.spacing(1); return `${vert} ${horiz} ${vert} ${horiz}`; }}; - color: ${(props) => props.theme.text60}; - font-weight: 500; - margin-right: ${(props) => props.theme.spacing(2)}; - cursor: pointer; user-select: none; &:hover { - border-radius: ${(props) => props.theme.spacing(1)}; background-color: ${(props) => props.theme.tertiaryBackground}; + border-radius: ${(props) => props.theme.spacing(1)}; } `; 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 be16b97d7..f477d3a6c 100644 --- a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx +++ b/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx @@ -12,31 +12,31 @@ type OwnProps = { }; const StyledChip = styled.div` - border-radius: 50px; - display: flex; - flex-direction: row; + align-items: center; background-color: ${(props) => props.theme.blueHighTransparency}; border: 1px solid ${(props) => props.theme.blueLowTransparency}; + border-radius: 50px; color: ${(props) => props.theme.blue}; - padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)}; - font-size: ${(props) => props.theme.fontSizeSmall}; - align-items: center; + display: flex; + flex-direction: row; flex-shrink: 0; + font-size: ${(props) => props.theme.fontSizeSmall}; + padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)}; `; const StyledIcon = styled.div` - margin-right: ${(props) => props.theme.spacing(1)}; - display: flex; align-items: center; + display: flex; + margin-right: ${(props) => props.theme.spacing(1)}; `; const StyledDelete = styled.div` - margin-left: ${(props) => props.theme.spacing(2)}; - cursor: pointer; - user-select: none; - display: flex; align-items: center; + cursor: pointer; + display: flex; font-size: ${(props) => props.theme.fontSizeSmall}; + margin-left: ${(props) => props.theme.spacing(2)}; margin-top: 1px; + user-select: none; `; const StyledLabelKey = styled.div` 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 89356db2c..fb5741981 100644 --- a/front/src/modules/ui/components/table/table-header/TableHeader.tsx +++ b/front/src/modules/ui/components/table/table-header/TableHeader.tsx @@ -30,13 +30,13 @@ const StyledContainer = styled.div` `; const StyledTableHeader = styled.div` + align-items: center; + color: ${(props) => props.theme.text60}; display: flex; flex-direction: row; - align-items: center; - justify-content: space-between; - height: 40px; - color: ${(props) => props.theme.text60}; font-weight: 500; + height: 40px; + justify-content: space-between; padding-left: ${(props) => props.theme.spacing(3)}; padding-right: ${(props) => props.theme.spacing(2)}; `; diff --git a/front/src/modules/ui/layout/DefaultLayout.tsx b/front/src/modules/ui/layout/DefaultLayout.tsx index 769bb8c45..aecdf14db 100644 --- a/front/src/modules/ui/layout/DefaultLayout.tsx +++ b/front/src/modules/ui/layout/DefaultLayout.tsx @@ -9,20 +9,20 @@ import { isNavbarOpenedState } from './states/isNavbarOpenedState'; import { MOBILE_VIEWPORT } from './styles/themes'; const StyledLayout = styled.div` + background: ${(props) => props.theme.noisyBackground}; display: flex; flex-direction: row; - width: 100vw; height: 100vh; - background: ${(props) => props.theme.noisyBackground}; position: relative; + width: 100vw; `; const NAVBAR_WIDTH = '236px'; const MainContainer = styled.div` - overflow: hidden; display: flex; flex-direction: row; + overflow: hidden; width: ${() => useRecoilValue(isNavbarOpenedState) ? `(calc(100% - ${NAVBAR_WIDTH})` diff --git a/front/src/modules/ui/layout/Panel.tsx b/front/src/modules/ui/layout/Panel.tsx index 2fa1589d1..52a06cda1 100644 --- a/front/src/modules/ui/layout/Panel.tsx +++ b/front/src/modules/ui/layout/Panel.tsx @@ -2,10 +2,10 @@ import React from 'react'; import styled from '@emotion/styled'; const StyledPanel = styled.div` - display: flex; background: ${(props) => props.theme.primaryBackground}; - border-radius: 8px; border: 1px solid ${(props) => props.theme.primaryBorder}; + border-radius: 8px; + display: flex; width: 100%; `; diff --git a/front/src/modules/ui/layout/SecondaryLayout.tsx b/front/src/modules/ui/layout/SecondaryLayout.tsx index 84933568d..fa6c098ca 100644 --- a/front/src/modules/ui/layout/SecondaryLayout.tsx +++ b/front/src/modules/ui/layout/SecondaryLayout.tsx @@ -9,31 +9,31 @@ type OwnProps = { }; const StyledLayout = styled.div` + background: ${(props) => props.theme.noisyBackground}; display: flex; flex-direction: row; - width: 100vw; height: 100vh; - background: ${(props) => props.theme.noisyBackground}; position: relative; + width: 100vw; `; const MainContainer = styled.div` - overflow: hidden; display: flex; flex-direction: row; + overflow: hidden; width: 100%; `; const SubContainer = styled.div` + background: ${(props) => props.theme.primaryBackground}; + border: 1px solid ${(props) => props.theme.primaryBorder}; + border-radius: ${(props) => props.theme.spacing(2)}; display: flex; flex-direction: column; - background: ${(props) => props.theme.primaryBackground}; - border-radius: ${(props) => props.theme.spacing(2)}; - border: 1px solid ${(props) => props.theme.primaryBorder}; - padding: ${(props) => props.theme.spacing(2)}; margin: ${(props) => props.theme.spacing(4)}; - width: 100%; max-width: calc(100vw - 500px); padding: 32px; + padding: ${(props) => props.theme.spacing(2)}; + width: 100%; @media (max-width: ${MOBILE_VIEWPORT}px) { width: 100%; @@ -42,11 +42,11 @@ const SubContainer = styled.div` `; const SubSubContainer = styled.div` + color: ${(props) => props.theme.text100}; display: flex; - width: 350px; flex-direction: column; gap: 32px; - color: ${(props) => props.theme.text100}; + width: 350px; @media (max-width: ${MOBILE_VIEWPORT}px) { width: 100%; diff --git a/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx b/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx index 28e9bdd00..23ca8eb45 100644 --- a/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx +++ b/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx @@ -21,17 +21,17 @@ const StyledContainer = styled.div` `; const MainContainer = styled.div` + background: ${(props) => props.theme.noisyBackground}; display: flex; flex-direction: row; - width: calc(100% - ${(props) => props.theme.spacing(3)}); + gap: ${(props) => props.theme.spacing(2)}; height: calc( 100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} - ${(props) => props.theme.spacing(5)} ); - background: ${(props) => props.theme.noisyBackground}; - padding-right: ${(props) => props.theme.spacing(3)}; padding-bottom: ${(props) => props.theme.spacing(3)}; - gap: ${(props) => props.theme.spacing(2)}; + padding-right: ${(props) => props.theme.spacing(3)}; + width: calc(100% - ${(props) => props.theme.spacing(3)}); `; type LeftContainerProps = { @@ -40,6 +40,7 @@ type LeftContainerProps = { const LeftContainer = styled.div` display: flex; + position: relative; width: calc( 100% - ${(props) => @@ -47,7 +48,6 @@ const LeftContainer = styled.div` ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}` : '0px'} ); - position: relative; `; export function WithTopBarContainer({ diff --git a/front/src/modules/ui/layout/navbar/NavBackButton.tsx b/front/src/modules/ui/layout/navbar/NavBackButton.tsx index 0d8214836..db667a707 100644 --- a/front/src/modules/ui/layout/navbar/NavBackButton.tsx +++ b/front/src/modules/ui/layout/navbar/NavBackButton.tsx @@ -10,17 +10,17 @@ type OwnProps = { }; const IconAndButtonContainer = styled.button` + align-items: center; + background: inherit; + border: none; + color: ${(props) => props.theme.text60}; + cursor: pointer; display: flex; flex-direction: row; - align-items: center; - padding: ${(props) => props.theme.spacing(1)}; - gap: ${(props) => props.theme.spacing(1)}; font-size: ${(props) => props.theme.fontSizeLarge}; font-weight: ${(props) => props.theme.fontWeightSemibold}; - color: ${(props) => props.theme.text60}; - border: none; - background: inherit; - cursor: pointer; + gap: ${(props) => props.theme.spacing(1)}; + padding: ${(props) => props.theme.spacing(1)}; width: 100%; `; diff --git a/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx b/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx index 3db90d711..5b04d64b6 100644 --- a/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx +++ b/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx @@ -10,21 +10,21 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState'; import { MOBILE_VIEWPORT } from '../styles/themes'; const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>` - display: flex; align-items: center; - justify-content: center; - - width: 32px; - height: 32px; - - user-select: none; - border: 0; background: inherit; - - padding: 0; - cursor: pointer; + border: 0; color: ${(props) => props.theme.text30}; + cursor: pointer; + + display: flex; + height: 32px; + justify-content: center; + + padding: 0; + user-select: none; + + width: 32px; ${(props) => props.hideOnDesktop && diff --git a/front/src/modules/ui/layout/navbar/NavItem.tsx b/front/src/modules/ui/layout/navbar/NavItem.tsx index f29f97521..f2d338405 100644 --- a/front/src/modules/ui/layout/navbar/NavItem.tsx +++ b/front/src/modules/ui/layout/navbar/NavItem.tsx @@ -21,18 +21,10 @@ type StyledItemProps = { }; const StyledItem = styled.button` - display: flex; align-items: center; - border: none; - font-size: ${(props) => props.theme.fontSizeMedium}; - cursor: ${(props) => (props.soon ? 'default' : 'pointer')}; - pointer-events: ${(props) => (props.soon ? 'none' : 'auto')}; - user-select: none; background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')}; - padding-top: ${(props) => props.theme.spacing(1)}; - padding-bottom: ${(props) => props.theme.spacing(1)}; - padding-left: ${(props) => props.theme.spacing(1)}; - font-family: 'Inter'; + border: none; + border-radius: 4px; color: ${(props) => { if (props.active) { return props.theme.text100; @@ -45,12 +37,20 @@ const StyledItem = styled.button` } return props.theme.text60; }}; - border-radius: 4px; + cursor: ${(props) => (props.soon ? 'default' : 'pointer')}; + display: flex; + font-family: 'Inter'; + font-size: ${(props) => props.theme.fontSizeMedium}; + margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2); + padding-bottom: ${(props) => props.theme.spacing(1)}; + padding-left: ${(props) => props.theme.spacing(1)}; + padding-top: ${(props) => props.theme.spacing(1)}; + pointer-events: ${(props) => (props.soon ? 'none' : 'auto')}; :hover { background: rgba(0, 0, 0, 0.04); color: ${(props) => (props.danger ? props.theme.red : props.theme.text100)}; } - margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2); + user-select: none; @media (max-width: ${MOBILE_VIEWPORT}px) { font-size: ${(props) => props.theme.fontSizeLarge}; diff --git a/front/src/modules/ui/layout/navbar/NavTitle.tsx b/front/src/modules/ui/layout/navbar/NavTitle.tsx index 761b323f9..e7128e97c 100644 --- a/front/src/modules/ui/layout/navbar/NavTitle.tsx +++ b/front/src/modules/ui/layout/navbar/NavTitle.tsx @@ -5,14 +5,14 @@ type OwnProps = { }; const StyledTitle = styled.div` - display: flex; - text-transform: uppercase; color: ${(props) => props.theme.text30}; + display: flex; font-size: ${(props) => props.theme.fontSizeExtraSmall}; font-weight: 600; - padding-top: ${(props) => props.theme.spacing(8)}; padding-bottom: ${(props) => props.theme.spacing(2)}; padding-left: ${(props) => props.theme.spacing(1)}; + padding-top: ${(props) => props.theme.spacing(8)}; + text-transform: uppercase; `; function NavTitle({ label }: OwnProps) { diff --git a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx index 0c6c43a32..16dcf39a0 100644 --- a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx +++ b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx @@ -6,24 +6,24 @@ import { currentUserState } from '@/auth/states/currentUserState'; import NavCollapseButton from './NavCollapseButton'; const StyledContainer = styled.div` - display: flex; - justify-content: space-between; - height: 34px; align-items: center; - user-select: none; - border: 0; + align-self: flex-start; background: inherit; + border: 0; + display: flex; + height: 34px; + justify-content: space-between; + margin-left: ${(props) => props.theme.spacing(1)}; padding: ${(props) => props.theme.spacing(2)}; padding-top: ${(props) => props.theme.spacing(1)}; - margin-left: ${(props) => props.theme.spacing(1)}; - align-self: flex-start; + user-select: none; width: 100%; `; const LogoAndNameContainer = styled.div` - display: flex; align-items: center; cursor: pointer; + display: flex; `; type StyledLogoProps = { @@ -33,17 +33,17 @@ type StyledLogoProps = { const StyledLogo = styled.div` background: url(${(props) => props.logo}); background-size: cover; - width: 16px; - height: 16px; border-radius: 2px; + height: 16px; + width: 16px; `; const StyledName = styled.div` - margin-left: ${(props) => props.theme.spacing(1)}; - font-family: 'Inter'; - font-weight: 500; - font-size: ${(props) => props.theme.fontSizeLarge}; color: ${(props) => props.theme.text80}; + font-family: 'Inter'; + font-size: ${(props) => props.theme.fontSizeLarge}; + font-weight: 500; + margin-left: ${(props) => props.theme.spacing(1)}; `; function NavWorkspaceButton() { diff --git a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx index c1ca83779..21c06235d 100644 --- a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx +++ b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx @@ -21,10 +21,10 @@ const StyledNavbarContainer = styled.div<{ width: string }>` const NavbarSubContainer = styled.div` display: flex; - width: 160px; flex-direction: column; - margin-top: 41px; margin-left: auto; + margin-top: 41px; + width: 160px; @media (max-width: ${MOBILE_VIEWPORT}px) { width: 100%; diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerPage.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerPage.tsx index 852952e7f..e368e0abf 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerPage.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerPage.tsx @@ -3,6 +3,6 @@ import styled from '@emotion/styled'; export const RightDrawerPage = styled.div` display: flex; flex-direction: column; - width: 100%; height: 100%; + width: 100%; `; 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 81ec723f4..a6e56628a 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx @@ -3,16 +3,16 @@ import styled from '@emotion/styled'; import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton'; const StyledRightDrawerTopBar = styled.div` + align-items: center; + border-bottom: 1px solid ${(props) => props.theme.lightBorder}; + color: ${(props) => props.theme.text60}; display: flex; flex-direction: row; - min-height: 40px; - align-items: center; + font-size: 13px; justify-content: space-between; + min-height: 40px; padding-left: 8px; padding-right: 8px; - font-size: 13px; - color: ${(props) => props.theme.text60}; - border-bottom: 1px solid ${(props) => props.theme.lightBorder}; `; const StyledTopBarTitle = styled.div` diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx index 1f1cc9356..8acf05b1a 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx @@ -6,19 +6,19 @@ import { IconPlus } from '@/ui/icons/index'; import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState'; const StyledButton = styled.button` - height: 24px; - width: 24px; - border: 1px solid ${(props) => props.theme.lightBorder}; + align-items: center; background: none; + border: 1px solid ${(props) => props.theme.lightBorder}; + border-radius: 4px; cursor: pointer; display: flex; flex-direction: row; - align-items: center; + height: 24px; padding: 3px; - border-radius: 4px; - transition: ${(props) => props.theme.clickableElementBackgroundTransition}; + + width: 24px; &:hover { background: ${(props) => props.theme.clickableElementBackgroundHover}; } diff --git a/front/src/modules/ui/layout/styles/themes.ts b/front/src/modules/ui/layout/styles/themes.ts index efe6b9bd7..89fd0e63b 100644 --- a/front/src/modules/ui/layout/styles/themes.ts +++ b/front/src/modules/ui/layout/styles/themes.ts @@ -124,22 +124,22 @@ const darkThemeSpecific: typeof lightThemeSpecific = { export const overlayBackground = (props: any) => css` - background: ${props.theme.secondaryBackgroundTransparent}; backdrop-filter: blur(8px); + background: ${props.theme.secondaryBackgroundTransparent}; box-shadow: ${props.theme.modalBoxShadow}; `; export const textInputStyle = (props: any) => css` - border: none; - outline: none; background-color: transparent; + border: none; color: ${props.theme.text80}; + outline: none; &::placeholder, &::-webkit-input-placeholder { - font-family: ${props.theme.fontFamily}; color: ${props.theme.text30}; + font-family: ${props.theme.fontFamily}; font-weight: ${props.theme.fontWeightMedium}; } `; diff --git a/front/src/modules/ui/layout/top-bar/TopBar.tsx b/front/src/modules/ui/layout/top-bar/TopBar.tsx index 38389ab5c..8659bc6de 100644 --- a/front/src/modules/ui/layout/top-bar/TopBar.tsx +++ b/front/src/modules/ui/layout/top-bar/TopBar.tsx @@ -8,38 +8,38 @@ import NavCollapseButton from '../navbar/NavCollapseButton'; export const TOP_BAR_MIN_HEIGHT = '40px'; const TopBarContainer = styled.div` - display: flex; - flex-direction: row; - min-height: ${TOP_BAR_MIN_HEIGHT}; align-items: center; background: ${(props) => props.theme.noisyBackground}; - padding: ${(props) => props.theme.spacing(2)}; - font-size: 14px; color: ${(props) => props.theme.text80}; + display: flex; + flex-direction: row; + font-size: 14px; + min-height: ${TOP_BAR_MIN_HEIGHT}; + padding: ${(props) => props.theme.spacing(2)}; `; const TitleContainer = styled.div` - font-family: 'Inter'; - margin-left: 4px; - font-size: 14px; display: flex; + font-family: 'Inter'; + font-size: 14px; + margin-left: 4px; width: 100%; `; const AddButtonContainer = styled.div` - display: flex; - justify-self: flex-end; - flex-shrink: 0; - border: 1px solid ${(props) => props.theme.primaryBorder}; - width: 28px; - height: 28px; align-items: center; - justify-content: center; + border: 1px solid ${(props) => props.theme.primaryBorder}; border-radius: 4px; color: ${(props) => props.theme.text80}; cursor: pointer; - user-select: none; + display: flex; + flex-shrink: 0; + height: 28px; + justify-content: center; + justify-self: flex-end; margin-right: ${(props) => props.theme.spacing(1)}; + user-select: none; + width: 28px; `; type OwnProps = { diff --git a/front/src/modules/ui/layout/top-bar/TopTitle.tsx b/front/src/modules/ui/layout/top-bar/TopTitle.tsx index c87078bc2..a72c87dbd 100644 --- a/front/src/modules/ui/layout/top-bar/TopTitle.tsx +++ b/front/src/modules/ui/layout/top-bar/TopTitle.tsx @@ -3,15 +3,15 @@ import styled from '@emotion/styled'; import NavCollapseButton from '../navbar/NavCollapseButton'; const TitleAndCollapseContainer = styled.div` + align-items: center; display: flex; flex-direction: row; - align-items: center; `; const TitleContainer = styled.div` + display: flex; font-size: ${(props) => props.theme.fontSizeLarge}; font-weight: ${(props) => props.theme.fontWeightSemibold}; - display: flex; width: 100%; `; diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx index 5b8404934..fee7729d5 100644 --- a/front/src/modules/users/components/Avatar.tsx +++ b/front/src/modules/users/components/Avatar.tsx @@ -10,23 +10,23 @@ type OwnProps = { }; export const StyledAvatar = styled.div>` - width: ${(props) => props.size}px; - height: ${(props) => props.size}px; - border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')}; - background-image: url(${(props) => - isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'}); + align-items: center; background-color: ${(props) => !isNonEmptyString(props.avatarUrl) ? props.theme.tertiaryBackground : 'none'}; - background-repeat: no-repeat; + background-image: url(${(props) => + isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'}); background-position: center center; + background-repeat: no-repeat; background-size: cover; - + border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')}; display: flex; - align-items: center; + height: ${(props) => props.size}px; justify-content: center; + + width: ${(props) => props.size}px; `; type StyledPlaceholderLetterProps = { @@ -34,17 +34,17 @@ type StyledPlaceholderLetterProps = { }; export const StyledPlaceholderLetter = styled.div` - width: ${(props) => props.size}px; - height: ${(props) => props.size}px; - - font-size: 12px; - font-weight: 500; + align-items: center; + color: ${(props) => props.theme.text80}; display: flex; - align-items: center; + font-size: 12px; + + font-weight: 500; + height: ${(props) => props.size}px; justify-content: center; - color: ${(props) => props.theme.text80}; + width: ${(props) => props.size}px; `; export function Avatar({ diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 9ece1b03d..b4709b85c 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -29,8 +29,8 @@ import { availableSorts } from './people-sorts'; const StyledPeopleContainer = styled.div` display: flex; - width: 100%; height: 100%; + width: 100%; `; export function People() { diff --git a/front/src/testing/ComponentStorybookLayout.tsx b/front/src/testing/ComponentStorybookLayout.tsx index f7a0e1a79..18f0e1e35 100644 --- a/front/src/testing/ComponentStorybookLayout.tsx +++ b/front/src/testing/ComponentStorybookLayout.tsx @@ -1,15 +1,15 @@ import styled from '@emotion/styled'; const StyledLayout = styled.div` - display: flex; - flex-direction: row; - width: fit-content; - height: fit-content; - - padding: 20px; background: ${(props) => props.theme.primaryBackground}; border-radius: 5px; box-shadow: 0px 0px 2px; + display: flex; + + flex-direction: row; + height: fit-content; + padding: 20px; + width: fit-content; `; type OwnProps = { diff --git a/front/src/testing/FullHeightStorybookLayout.tsx b/front/src/testing/FullHeightStorybookLayout.tsx index 5c86a75ac..fb8937a86 100644 --- a/front/src/testing/FullHeightStorybookLayout.tsx +++ b/front/src/testing/FullHeightStorybookLayout.tsx @@ -3,8 +3,8 @@ import styled from '@emotion/styled'; const StyledLayout = styled.div` display: flex; flex-direction: row; - width: calc(100vw - 32px); height: calc(100vh - 32px); + width: calc(100vw - 32px); `; type OwnProps = {