diff --git a/front/src/modules/command-menu/components/CommandMenuStyles.tsx b/front/src/modules/command-menu/components/CommandMenuStyles.tsx index 89ed89383..bef2b483a 100644 --- a/front/src/modules/command-menu/components/CommandMenuStyles.tsx +++ b/front/src/modules/command-menu/components/CommandMenuStyles.tsx @@ -36,7 +36,7 @@ export const StyledInput = styled(Command.Input)` export const StyledMenuItem = styled(Command.Item)` align-items: center; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme }) => theme.font.color.primary}; cursor: pointer; display: flex; @@ -122,14 +122,14 @@ export const StyledIconAndLabelContainer = styled.div` export const StyledIconContainer = styled.div` align-items: center; background: ${({ theme }) => theme.background.transparent.light}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme }) => theme.font.color.secondary}; display: flex; padding: ${({ theme }) => theme.spacing(1)}; `; export const StyledShortCut = styled.div` background-color: ${({ theme }) => theme.background.transparent.light}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme }) => theme.font.color.light}; margin-left: ${({ theme }) => theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)}; diff --git a/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx b/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx index 4978f619e..ae087ace0 100644 --- a/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx +++ b/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx @@ -46,7 +46,7 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) { initialContent: commentThread.body ? JSON.parse(commentThread.body) : undefined, - editorDOMAttributes: { class: 'editor-edit-mode' }, + editorDOMAttributes: { class: 'editor' }, onEditorContentChange: (editor) => { debounceOnChange(JSON.stringify(editor.topLevelBlocks) ?? ''); }, diff --git a/front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx b/front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx index e416f8510..0e4d68a2f 100644 --- a/front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx +++ b/front/src/modules/comments/components/comment-thread/CommentThreadComments.tsx @@ -41,6 +41,13 @@ const StyledCommentActionBar = styled.div` width: calc(${({ theme }) => theme.rightDrawerWidth} - 48px - 24px); `; +const StyledThreadCommentTitle = styled.div` + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.xs}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; + text-transform: uppercase; +`; + export function CommentThreadComments({ commentThread }: OwnProps) { const [createCommentMutation] = useCreateCommentMutation(); const currentUser = useRecoilValue(currentUserState); @@ -69,11 +76,14 @@ export function CommentThreadComments({ commentThread }: OwnProps) { return ( <> {commentThread?.comments.length > 0 && ( - - {commentThread?.comments?.map((comment, index) => ( - - ))} - + <> + + Comments + {commentThread?.comments?.map((comment, index) => ( + + ))} + + )} diff --git a/front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx b/front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx index 38b69a704..a4f5746a9 100644 --- a/front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx +++ b/front/src/modules/comments/components/comment-thread/CommentThreadTypeDropdown.tsx @@ -6,7 +6,7 @@ import { IconNotes } from '@/ui/icons/index'; export function CommentThreadTypeDropdown() { const options: DropdownOptionType[] = [ - { label: 'Notes', icon: }, + { label: 'Note', icon: }, // { label: 'Call', icon: }, ]; diff --git a/front/src/modules/comments/components/right-drawer/CommentThread.tsx b/front/src/modules/comments/components/right-drawer/CommentThread.tsx index 500a0e458..a216f352d 100644 --- a/front/src/modules/comments/components/right-drawer/CommentThread.tsx +++ b/front/src/modules/comments/components/right-drawer/CommentThread.tsx @@ -22,11 +22,21 @@ import { CommentThreadActionBar } from './CommentThreadActionBar'; import '@blocknote/core/style.css'; const StyledContainer = styled.div` - align-items: flex-start; + box-sizing: border-box; display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(4)}; + height: 100%; + justify-content: space-between; + overflow-y: auto; +`; +const StyledUpperPartContainer = styled.div` + align-items: flex-start; + box-sizing: border-box; + display: flex; + flex-direction: column; + + gap: ${({ theme }) => theme.spacing(4)}; justify-content: flex-start; `; @@ -59,7 +69,7 @@ const StyledEditableTitleInput = styled.input` line-height: ${({ theme }) => theme.text.lineHeight.md}; outline: none; width: calc(100% - ${({ theme }) => theme.spacing(2)}); - :placeholder { + &::placeholder { color: ${({ theme }) => theme.font.color.light}; } `; @@ -133,39 +143,42 @@ export function CommentThread({ return ( - - - - - - { - setTitle(event.target.value); - debounceUpdateTitle(event.target.value); - }} - value={title ?? ''} - /> - - } - value={ - - } - label="Relations" + + + + + + + { + setTitle(event.target.value); + debounceUpdateTitle(event.target.value); + }} + value={title ?? ''} /> - - - + + } + value={ + + } + label="Relations" + /> + + + + + {showComment && ( - + } onClick={deleteCommentThread} + variant="tertiary" /> ); diff --git a/front/src/modules/comments/components/right-drawer/RightDrawerTimeline.tsx b/front/src/modules/comments/components/right-drawer/RightDrawerTimeline.tsx index fd6a220cf..52b36be41 100644 --- a/front/src/modules/comments/components/right-drawer/RightDrawerTimeline.tsx +++ b/front/src/modules/comments/components/right-drawer/RightDrawerTimeline.tsx @@ -19,7 +19,7 @@ export function RightDrawerTimeline() { return ( - + {commentableEntityArray.map((commentableEntity) => ( theme.font.color.secondary}; @@ -131,7 +131,7 @@ const StyledCard = styled.div` align-self: stretch; background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; flex-direction: column; gap: 12px; diff --git a/front/src/modules/people/components/PersonChip.tsx b/front/src/modules/people/components/PersonChip.tsx index 012bb145a..e7d0d7d3f 100644 --- a/front/src/modules/people/components/PersonChip.tsx +++ b/front/src/modules/people/components/PersonChip.tsx @@ -26,7 +26,7 @@ const baseStyle = ({ theme }: { theme: Theme }) => ` filter: brightness(95%); } img { - border-radius: 100%; + border-radius: ${theme.border.radius.rounded}; height: 14px; object-fit: cover; width: 14px; diff --git a/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx b/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx index 254f26fe4..e1c614b5e 100644 --- a/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx +++ b/front/src/modules/pipeline-progress/components/CompanyBoardCard.tsx @@ -14,7 +14,7 @@ const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => selected ? theme.selectedCard : theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; box-shadow: ${({ theme }) => theme.boxShadow.light}; color: ${({ theme }) => theme.font.color.primary}; &:hover { diff --git a/front/src/modules/ui/components/action-bar/ActionBar.tsx b/front/src/modules/ui/components/action-bar/ActionBar.tsx index 0ef79b4cf..106d8bff8 100644 --- a/front/src/modules/ui/components/action-bar/ActionBar.tsx +++ b/front/src/modules/ui/components/action-bar/ActionBar.tsx @@ -18,7 +18,7 @@ const StyledContainer = styled.div` align-items: center; background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; box-shadow: ${({ theme }) => theme.boxShadow.strong}; display: flex; diff --git a/front/src/modules/ui/components/buttons/Button.tsx b/front/src/modules/ui/components/buttons/Button.tsx index a203c72e9..e4999fa04 100644 --- a/front/src/modules/ui/components/buttons/Button.tsx +++ b/front/src/modules/ui/components/buttons/Button.tsx @@ -45,11 +45,11 @@ const StyledButton = styled.button< return 'transparent'; } }}; - border: ${({ theme, variant }) => { + border-color: ${({ theme, variant }) => { switch (variant) { case 'primary': case 'secondary': - return `1px solid ${theme.background.transparent.medium}`; + return `${theme.background.transparent.medium}`; case 'tertiary': default: return 'none'; @@ -67,6 +67,17 @@ const StyledButton = styled.button< return '4px'; } }}; + border-style: solid; + border-width: ${({ theme, variant, position }) => { + switch (variant) { + case 'primary': + case 'secondary': + return position === 'middle' ? `1px 0 1px 0` : `1px`; + case 'tertiary': + default: + return '0'; + } + }}; box-shadow: ${({ theme, variant }) => { switch (variant) { case 'primary': diff --git a/front/src/modules/ui/components/buttons/ButtonGroup.tsx b/front/src/modules/ui/components/buttons/ButtonGroup.tsx index 4028d8b0f..a295a04a6 100644 --- a/front/src/modules/ui/components/buttons/ButtonGroup.tsx +++ b/front/src/modules/ui/components/buttons/ButtonGroup.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { ButtonPosition, ButtonProps } from './Button'; const StyledButtonGroupContainer = styled.div` - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; display: flex; `; diff --git a/front/src/modules/ui/components/buttons/DropdownButton.tsx b/front/src/modules/ui/components/buttons/DropdownButton.tsx index dad76d90f..753796527 100644 --- a/front/src/modules/ui/components/buttons/DropdownButton.tsx +++ b/front/src/modules/ui/components/buttons/DropdownButton.tsx @@ -19,7 +19,7 @@ const StyledButton = styled.button` align-items: center; background: ${({ theme }) => theme.background.tertiary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme }) => theme.font.color.secondary}; display: flex; font-size: ${({ theme }) => theme.font.size.md}; diff --git a/front/src/modules/ui/components/buttons/MainButton.tsx b/front/src/modules/ui/components/buttons/MainButton.tsx index 114239084..28bef874b 100644 --- a/front/src/modules/ui/components/buttons/MainButton.tsx +++ b/front/src/modules/ui/components/buttons/MainButton.tsx @@ -32,7 +32,7 @@ const StyledButton = styled.button>` } }}; border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; box-shadow: ${({ theme }) => theme.boxShadow.light}; color: ${({ theme, variant, disabled }) => { if (disabled) { diff --git a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx index b753f80d8..33888c329 100644 --- a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx +++ b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; export const HoverableMenuItem = styled.div` align-items: center; background: ${({ theme }) => theme.background.primary}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; box-sizing: border-box; cursor: pointer; display: flex; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx index ca1a67bb4..7c1d22ca0 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx @@ -4,7 +4,7 @@ export const EditableCellRelationCreateButton = styled.button` align-items: center; background: none; border: none; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; cursor: pointer; display: flex; font-family: 'Inter'; diff --git a/front/src/modules/ui/components/editor/BlockEditor.tsx b/front/src/modules/ui/components/editor/BlockEditor.tsx index 48ef628b4..f86f85eb2 100644 --- a/front/src/modules/ui/components/editor/BlockEditor.tsx +++ b/front/src/modules/ui/components/editor/BlockEditor.tsx @@ -9,11 +9,11 @@ interface BlockEditorProps { const StyledEditor = styled.div` min-height: 200px; width: 100%; - & .editor-create-mode, - .editor-edit-mode { + & .editor { background: ${({ theme }) => theme.background.primary}; + font-size: 13px; } - & .editor-create-mode [class^='_inlineContent']:before { + & .editor [class^='_inlineContent']:before { color: ${({ theme }) => theme.font.color.tertiary}; font-style: normal !important; } diff --git a/front/src/modules/ui/components/form/Checkbox.tsx b/front/src/modules/ui/components/form/Checkbox.tsx index 04bcf4a5d..1997fbc6f 100644 --- a/front/src/modules/ui/components/form/Checkbox.tsx +++ b/front/src/modules/ui/components/form/Checkbox.tsx @@ -25,7 +25,7 @@ const StyledContainer = styled.div` input[type='checkbox']::before { border: 1px solid ${({ theme }) => theme.font.color.tertiary}; - border-radius: 2px; + border-radius: ${({ theme }) => theme.border.radius.xs}; content: ''; display: block; height: 12px; diff --git a/front/src/modules/ui/components/form/DatePicker.tsx b/front/src/modules/ui/components/form/DatePicker.tsx index 575827aa7..013be77d4 100644 --- a/front/src/modules/ui/components/form/DatePicker.tsx +++ b/front/src/modules/ui/components/form/DatePicker.tsx @@ -56,7 +56,7 @@ const StyledContainer = styled.div` & .react-datepicker__month-dropdown-container, & .react-datepicker__year-dropdown-container { text-align: left; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; margin-left: ${({ theme }) => theme.spacing(1)}; margin-right: 0; padding: ${({ theme }) => theme.spacing(2)}; @@ -121,7 +121,7 @@ const StyledContainer = styled.div` padding: ${({ theme }) => theme.spacing(2)} calc(${({ theme }) => theme.spacing(2)} - 2px); width: calc(100% - ${({ theme }) => theme.spacing(4)}); - border-radius: 2px; + border-radius: ${({ theme }) => theme.border.radius.xs}; color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; margin: 2px; @@ -169,7 +169,7 @@ const StyledContainer = styled.div` & .react-datepicker__navigation--previous, & .react-datepicker__navigation--next { height: 34px; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; padding-top: 6px; &:hover { background: ${({ theme }) => theme.background.transparent.light}; diff --git a/front/src/modules/ui/components/inputs/TextInput.tsx b/front/src/modules/ui/components/inputs/TextInput.tsx index 45388080b..3248e048b 100644 --- a/front/src/modules/ui/components/inputs/TextInput.tsx +++ b/front/src/modules/ui/components/inputs/TextInput.tsx @@ -26,7 +26,7 @@ const StyledLabel = styled.span` const StyledInput = styled.input<{ fullWidth: boolean }>` background-color: ${({ theme }) => theme.background.tertiary}; border: none; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme }) => theme.font.color.primary}; font-family: ${({ theme }) => theme.font.family}; diff --git a/front/src/modules/ui/components/modal/Modal.tsx b/front/src/modules/ui/components/modal/Modal.tsx index 4b06190f1..aacad0d0f 100644 --- a/front/src/modules/ui/components/modal/Modal.tsx +++ b/front/src/modules/ui/components/modal/Modal.tsx @@ -4,7 +4,7 @@ import { motion } from 'framer-motion'; const ModalDiv = styled(motion.div)` background: ${({ theme }) => theme.background.primary}; - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; z-index: 10000; // should be higher than Backdrop's z-index `; diff --git a/front/src/modules/ui/components/property-box/PropertyBox.tsx b/front/src/modules/ui/components/property-box/PropertyBox.tsx index 5df6d9373..288e548c8 100644 --- a/front/src/modules/ui/components/property-box/PropertyBox.tsx +++ b/front/src/modules/ui/components/property-box/PropertyBox.tsx @@ -4,7 +4,7 @@ const StyledPropertyBoxContainer = styled.div` align-self: stretch; background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(2)}; diff --git a/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx b/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx index eabee861b..f7fda7720 100644 --- a/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx +++ b/front/src/modules/ui/components/property-box/PropertyBoxItem.tsx @@ -2,8 +2,10 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; const StyledPropertyBoxItem = styled.div` + align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(2)}; + height: 32px; `; const StyledIconContainer = styled.div` diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx index ed459ed70..6c87e0602 100644 --- a/front/src/modules/ui/components/table/EntityTable.tsx +++ b/front/src/modules/ui/components/table/EntityTable.tsx @@ -35,7 +35,7 @@ type OwnProps = { const StyledTable = styled.table` border-collapse: collapse; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; border-spacing: 0; margin-left: ${({ theme }) => theme.table.horizontalCellMargin}; margin-right: ${({ theme }) => theme.table.horizontalCellMargin}; 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 24c15c838..911995198 100644 --- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx @@ -13,7 +13,7 @@ type StyledButtonProps = { }; const StyledButton = styled.div` - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => props.type === 'warning' ? props.theme.color.red 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 66befd5d7..f7dbe89bc 100644 --- a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx +++ b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx @@ -32,7 +32,7 @@ type StyledDropdownButtonProps = { const StyledDropdownButton = styled.div` background: ${({ theme }) => theme.background.primary}; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')}; cursor: pointer; display: flex; @@ -52,7 +52,7 @@ const StyledDropdownButton = styled.div` const StyledDropdown = styled.ul` --outer-border-radius: calc(var(--wraper-border-radius) - 2px); --wraper-border: 1px; - --wraper-border-radius: 8px; + --wraper-border-radius: ${({ theme }) => theme.border.radius.md}; border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light}; border-radius: var(--wraper-border-radius); @@ -79,7 +79,7 @@ const StyledDropdown = styled.ul` const StyledDropdownItem = styled.li` align-items: center; - border-radius: 2px; + border-radius: ${({ theme }) => theme.border.radius.xs}; color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; display: flex; @@ -139,7 +139,7 @@ const StyledSearchField = styled.li` user-select: none; input { - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; box-sizing: border-box; font-family: ${({ theme }) => theme.font.family}; height: 36px; diff --git a/front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx b/front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx index c1e212e35..11f32a99e 100644 --- a/front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx +++ b/front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx @@ -17,7 +17,7 @@ export type StyledCalendarContainerProps = { const StyledCalendarContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; box-shadow: ${({ theme }) => theme.boxShadow.strong}; left: -10px; position: absolute; diff --git a/front/src/modules/ui/layout/Panel.tsx b/front/src/modules/ui/layout/Panel.tsx index 63e07e834..b970f58dc 100644 --- a/front/src/modules/ui/layout/Panel.tsx +++ b/front/src/modules/ui/layout/Panel.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; const StyledPanel = styled.div` background: ${({ theme }) => theme.background.primary}; border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: 8px; + border-radius: ${({ theme }) => theme.border.radius.md}; display: flex; flex-direction: row; height: 100%; diff --git a/front/src/modules/ui/layout/navbar/NavItem.tsx b/front/src/modules/ui/layout/navbar/NavItem.tsx index 186c4a7c5..f733e7756 100644 --- a/front/src/modules/ui/layout/navbar/NavItem.tsx +++ b/front/src/modules/ui/layout/navbar/NavItem.tsx @@ -25,7 +25,7 @@ const StyledItem = styled.button` background: ${(props) => props.active ? props.theme.background.transparent.light : 'inherit'}; border: none; - border-radius: 4px; + border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => { if (props.active) { return props.theme.font.color.primary; diff --git a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx index 1c266b98c..e85f14c9b 100644 --- a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx +++ b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx @@ -33,7 +33,7 @@ type StyledLogoProps = { const StyledLogo = styled.div` background: url(${(props) => props.logo}); background-size: cover; - border-radius: 2px; + border-radius: ${({ theme }) => theme.border.radius.xs}; height: 16px; width: 16px; `; diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx index 53136df76..86c069c06 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx @@ -3,7 +3,9 @@ import styled from '@emotion/styled'; export const RightDrawerBody = styled.div` display: flex; flex-direction: column; - height: calc(100vh - ${({ theme }) => theme.spacing(10)}); + height: calc( + 100vh - ${({ theme }) => theme.spacing(14)} - 1px + ); // (-1 for border) overflow: auto; position: relative; `; 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 d9ce8a2c9..973015add 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx +++ b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx @@ -6,13 +6,14 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton'; const StyledRightDrawerTopBar = styled.div` align-items: center; + background: ${({ theme }) => theme.background.secondary}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; color: ${({ theme }) => theme.font.color.secondary}; display: flex; flex-direction: row; font-size: ${({ theme }) => theme.font.size.md}; + height: 56px; justify-content: space-between; - min-height: 40px; padding-left: 8px; padding-right: 8px; `; @@ -24,7 +25,7 @@ const StyledTopBarTitle = styled.div` `; type OwnProps = { - title: string | null | undefined; + title?: string | null | undefined; onSave?: () => void; }; @@ -36,7 +37,7 @@ export function RightDrawerTopBar({ title, onSave }: OwnProps) { {title} - {onSave &&