diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx index 24a221539..fb8f06779 100644 --- a/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx +++ b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx @@ -2,7 +2,8 @@ import React from 'react'; import styled from 'styled-components'; import { ProjectPurchasesTable } from './ProjectPurchasesTable'; -import { DashboardContentTable } from '@/components'; +import { Box, DashboardContentTable } from '@/components'; +import { ProjectDetailHeader } from '../ProjectDetailsHeader'; /** * @@ -10,8 +11,11 @@ import { DashboardContentTable } from '@/components'; */ export default function ProjectPurchasesTableRoot() { return ( - - - + + + + + + ); } diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx index f0f1eaed6..765b3da00 100644 --- a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx +++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx @@ -16,6 +16,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions'; import withDialogActions from '@/containers/Dialog/withDialogActions'; import { compose } from '@/utils'; +import { DialogsName } from '@/constants/dialogs'; /** * Timesheet DataTable. @@ -39,11 +40,10 @@ function ProjectTimesheetsTableRoot({ const handleDeleteTimesheet = ({ id }) => { openAlert('project-timesheet-delete', { timesheetId: id }); }; - + // Handle edit timesheet. const handleEditTimesheet = ({ id }) => { openDialog('project-time-entry-form', { timesheetId: id, action: 'edit' }); }; - // Local storage memorizing columns widths. const [initialColumnsWidths, , handleColumnResizing] = useMemorizedColumnsWidths(TABLES.TIMESHEETS); @@ -87,33 +87,19 @@ const ProjectTimesheetDataTable = styled(DataTable)` .tbody { .tr .td { - padding: 0.4rem 0.8rem; + padding-top: 0.7rem; + padding-bottom: 0.7rem; + + &.td-name { + padding-left: 1rem; + } + &.td-actions{ + padding-right: 1rem; + } } - .avatar.td { - .cell-inner { - .avatar { - display: inline-block; - background: #adbcc9; - border-radius: 50%; - text-align: center; - font-weight: 400; - color: #fff; - - &[data-size='medium'] { - height: 30px; - width: 30px; - line-height: 30px; - font-size: 14px; - } - &[data-size='small'] { - height: 25px; - width: 25px; - line-height: 25px; - font-size: 12px; - } - } - } + .tr:last-of-type .td{ + border-bottom: 0; } } } diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx index f8442d511..702caf85e 100644 --- a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx +++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx @@ -30,22 +30,13 @@ export function ActionsMenu({ ); } -/** - * Avatar cell. - */ -export const AvatarCell = ({ row: { original }, size }) => ( - - {firstLettersArgs(original?.display_name, original?.task_name)} - -); - /** * Timesheet accessor. */ export const TimesheetAccessor = (timesheet) => ( - {timesheet.display_name} + {timesheet.customer_name} {timesheet.task_name} @@ -63,19 +54,19 @@ const TimesheetHeader = styled.div` flex-flow: wrap; `; const TimesheetTitle = styled.span` - font-weight: 500; - margin-right: 12px; - line-height: 1.5rem; + font-weight: 600; + margin-right: 8px; +`; +const TimesheetSubTitle = styled.span` + font-size: 13px; + opacity: 0.9; `; - -const TimesheetSubTitle = styled.span``; const TimesheetContent = styled.div` display: block; white-space: nowrap; font-size: 13px; - opacity: 0.75; - margin-bottom: 0.1rem; - line-height: 1.2rem; + color: #5D5E71; + margin-top: 0.25rem; `; const TimesheetDescription = styled.span` diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts index 491a17623..3da0dc434 100644 --- a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts +++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts @@ -9,16 +9,6 @@ import { AvatarCell, TimesheetAccessor } from './components'; export function useProjectTimesheetColumns() { return React.useMemo( () => [ - { - id: 'avatar', - Header: '', - Cell: AvatarCell, - className: 'avatar', - width: 45, - disableResizing: true, - disableSortBy: true, - clickable: true, - }, { id: 'name', Header: 'Header', diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx index c7106070a..f34ba14dc 100644 --- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx @@ -13,6 +13,7 @@ import { FTextArea, FieldRequiredHint, FormattedMessage as T, + Stack, } from '@/components'; import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider'; import { @@ -37,8 +38,25 @@ function ProjectTimeEntryFormFields() { return (
- {/*------------ Project -----------*/} - + + {/*------------ Date -----------*/} + + date.toLocaleString()} + popoverProps={{ + position: Position.BOTTOM, + minimal: true, + }} + /> + + + {/*------------ Project -----------*/} } @@ -51,55 +69,51 @@ function ProjectTimeEntryFormFields() { input={ProjectSelectButton} /> - - {/*------------ Task -----------*/} - } - labelInfo={} - className={classNames('form-group--select-list', Classes.FILL)} - > - - - {/*------------ Duration -----------*/} - } - > - - - {/*------------ Date -----------*/} - - date.toLocaleString()} - popoverProps={{ - position: Position.BOTTOM, - minimal: true, - }} - /> - - {/*------------ Description -----------*/} - - - + {/*------------ Task -----------*/} + } + labelInfo={} + className={classNames('form-group--select-list', Classes.FILL)} + > + + + + {/*------------ Duration -----------*/} + } + > + + + + {/*------------ Description -----------*/} + + + +
); } export default ProjectTimeEntryFormFields; + +const DurationInputGroup = styled(FInputGroup)` + .bp3-input { + width: 150px; + } +`; diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx index 080764f48..6aca6347f 100644 --- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx @@ -29,13 +29,10 @@ function ProjectTimeEntryFormFloatingActions({ return (
-