diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js index 26d7dbaaec..9ff0dea958 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js @@ -6,40 +6,56 @@ import { Base } from "@docspace/shared/themes"; import { mobile, tablet } from "@docspace/shared/utils/device"; import { RowContent } from "@docspace/shared/components/row-content"; +const marginStyles = css` + margin-left: -24px; + margin-right: -24px; + padding-left: 24px; + padding-right: 24px; + + @media ${tablet} { + margin-left: -16px; + margin-right: -16px; + padding-left: 16px; + padding-right: 16px; + } +`; + +const marginStylesGroupRowContainer = css` + margin-right: -48px !important; + + @media ${tablet} { + margin-right: -32px !important; + } +`; + export const GroupsRowContainer = styled(RowContainer)` - .row-selected + .row-wrapper:not(.row-selected), - .row-wrapper:not(.row-selected) + .row-selected, - .row-selected:first-child { + .row-selected + .row-wrapper:not(.row-selected) { .group-row { - border-top: ${({ theme }) => - `1px ${theme.filesSection.tableView.row.borderColor} solid`}; - margin: -3px -24px 0 -24px; - padding: 0 24px; - @media ${tablet} { - margin: -3px -16px 0 -16px; - padding: 0 16px; + ${marginStyles} + } + } + + .row-wrapper:not(.row-selected) + .row-selected { + .group-row { + ${marginStyles} + } + } + + .row-list-item:first-child { + .group-row { + border-top: 2px solid transparent; + } + + .row-selected { + .group-row { + border-top-color: ${(props) => + `${props.theme.filesSection.tableView.row.borderColor} !important`}; } } } - .row-selected:last-child { - .group-row { - border-bottom: ${({ theme }) => - `1px ${theme.filesSection.tableView.row.borderColor} solid`}; - margin: 0 -24px; - padding: 0 24px 1px 24px; - @media ${tablet} { - margin: 0 -16px; - padding: 0 16px 1px 16px; - } - &::after { - height: 0px; - } - } - } - .row-hotkey-border + .row-selected { - .group-row { - border-top: 1px solid #2da7db !important; - } + + .row-list-item { + margin-top: -1px; } `; @@ -61,18 +77,23 @@ export const GroupsRowWrapper = styled.div` position: relative; outline: none; background: none !important; + + ${(props) => + (props.isChecked || props.isActive) && marginStylesGroupRowContainer}; + + :hover { + ${marginStylesGroupRowContainer} + } } `; const checkedStyle = css` background: ${({ theme }) => theme.filesSection.rowView.checkedBackground}; margin-left: -24px; - margin-right: -24px; padding-left: 24px; padding-right: 24px; @media ${tablet} { margin-left: -16px; - margin-right: -16px; padding-left: 16px; padding-right: 16px; } @@ -83,15 +104,24 @@ export const GroupsRow = styled(Row)` &:hover { cursor: pointer; ${checkedStyle} - margin-top: -3px; - padding-bottom: 1px; - border-top: 1px - ${({ theme }) => theme.filesSection.tableView.row.borderColor} solid; - border-bottom: 1px - ${({ theme }) => theme.filesSection.tableView.row.borderColor} solid; } + + .row_content { + height: 58px; + } + + height: 59px; + + border-top: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + border-bottom: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + + box-sizing: border-box; + margin-top: -1px; + position: unset; - margin-top: -2px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); .styled-element { height: 32px; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js index ffd6539cb9..d0cc2764b4 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js @@ -68,7 +68,7 @@ const GroupsTableView = ({ hasMoreFiles={hasMoreGroups} itemCount={groupsFilterTotal} filesLength={groups.length} - itemHeight={49} + itemHeight={48} useReactWindow={!withPaging} > {groups.map((item, index) => ( diff --git a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js index 504aa04ce3..1b12cdee2d 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js @@ -58,12 +58,6 @@ export const GroupsTableContainer = styled(TableContainer)` } .table-row-selected + .table-row-selected { .table-row { - .table-container_group-title-cell, - .table-container_row-context-menu-wrapper { - margin-top: -1px; - border-image-slice: 1; - border-top: 1px solid; - } .table-container_group-title-cell { ${groupTitleCss} border-left: 0; //for Safari macOS @@ -86,11 +80,6 @@ export const GroupsTableContainer = styled(TableContainer)` .table-container_row-context-menu-wrapper { ${contextCss} } - .table-container_group-title-cell, - .table-container_row-context-menu-wrapper { - border-bottom: ${(props) => - `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; - } } } `; @@ -102,13 +91,27 @@ export const GroupsRowWrapper = styled.div` `; export const GroupsRow = styled(TableRow)` + .table-container_cell:not(.table-container_row-checkbox-wrapper) { + height: auto; + max-height: 48; + } + .table-container_cell { - height: 48px; - max-height: 48px; + border-top: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + margin-top: -1px; + background: ${(props) => (props.checked || props.isActive) && `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; } + + .table-container_row-context-menu-wrapper { + height: 49px !important; + max-height: none !important; + box-sizing: border-box; + } + .table-container_row-checkbox-wrapper { min-width: 48px; ${(props) => @@ -160,9 +163,6 @@ export const GroupsRow = styled(TableRow)` cursor: pointer; background: ${(props) => `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; - border-top: ${(props) => - `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; - margin-top: -1px; } .table-container_group-title-cell { ${(props) => diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js index 4910bf8696..134e53b114 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js @@ -27,50 +27,31 @@ const marginStyles = css` const StyledRowContainer = styled(RowContainer)` .row-selected + .row-wrapper:not(.row-selected) { .user-row { - border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; - margin-top: -3px; - ${marginStyles} } } .row-wrapper:not(.row-selected) + .row-selected { .user-row { - border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; - margin-top: -3px; - ${marginStyles} } } - .row-hotkey-border + .row-selected { + .row-list-item:first-child { .user-row { - border-top: 1px solid #2da7db !important; + border-top: 2px solid transparent; + } + + .row-selected { + .user-row { + border-top-color: ${(props) => + `${props.theme.filesSection.tableView.row.borderColor} !important`}; + } } } - .row-selected:last-child { - .user-row { - border-bottom: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; - padding-bottom: 1px; - - ${marginStyles} - } - .user-row::after { - height: 0px; - } - } - .row-selected:first-child { - .user-row { - border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; - margin-top: -3px; - - ${marginStyles} - } + .row-list-item { + margin-top: -1px; } `; diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js index 7e15149f62..456509b0c3 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js @@ -12,18 +12,24 @@ import { mobile, tablet } from "@docspace/shared/utils/device"; const marginStyles = css` margin-left: -24px; - margin-right: -24px; padding-left: 24px; padding-right: 24px; @media ${tablet} { margin-left: -16px; - margin-right: -16px; padding-left: 16px; padding-right: 16px; } `; +const marginStylesUserRowContainer = css` + margin-right: -48px !important; + + @media ${tablet} { + margin-right: -32px !important; + } +`; + const checkedStyle = css` background: ${(props) => props.theme.filesSection.rowView.checkedBackground}; ${marginStyles} @@ -49,6 +55,15 @@ const StyledWrapper = styled.div` outline: none; background: none !important; } + + .user-row-container { + ${(props) => + (props.checked || props.isActive) && marginStylesUserRowContainer}; + + :hover { + ${marginStylesUserRowContainer} + } + } `; StyledWrapper.defaultProps = { theme: Base }; @@ -56,23 +71,29 @@ StyledWrapper.defaultProps = { theme: Base }; const StyledSimpleUserRow = styled(Row)` ${(props) => (props.checked || props.isActive) && checkedStyle}; + .row_content { + height: 58px; + } + + height: 59px; + + border-top: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + border-bottom: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + + box-sizing: border-box; + margin-top: -1px; + ${!isMobile && css` :hover { cursor: pointer; ${checkedStyle} - - margin-top: -3px; - padding-bottom: 1px; - border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; - border-bottom: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; } `} position: unset; - margin-top: -2px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); .styled-element { @@ -119,8 +140,10 @@ const SimpleUserRow = (props) => { isChecked || isActive ? "row-selected" : "" }`} value={value} + checked={isChecked} + isActive={isActive} > -
+
+ `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + margin-top: -1px; + } + :hover { .table-container_cell { cursor: pointer; background: ${(props) => `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; - border-top: ${(props) => - `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; - margin-top: -1px; } .table-container_user-name-cell { @@ -66,10 +69,18 @@ const StyledPeopleRow = styled(TableRow)` } } - .table-container_cell { - height: 48px; - max-height: 48px; + .table-container_row-context-menu-wrapper { + height: 49px !important; + max-height: none !important; + box-sizing: border-box; + } + .table-container_cell:not(.table-container_row-checkbox-wrapper) { + height: auto; + max-height: 48; + } + + .table-container_cell { background: ${(props) => (props.checked || props.isActive) && `${props.theme.filesSection.tableView.row.backgroundActive} !important`};