Add rowHeight constant

This commit is contained in:
bulby97 2021-08-25 22:01:47 +02:00
parent 863540ee79
commit 1188d8023e
5 changed files with 16 additions and 8 deletions

View File

@ -5,9 +5,10 @@ import { useIntl } from 'react-intl';
import styled from 'styled-components'; import styled from 'styled-components';
import ConditionsSelect from '../ConditionsSelect'; import ConditionsSelect from '../ConditionsSelect';
import { rowHeight } from '../../Permissions/utils/constants';
const RowWrapper = styled(Row)` const RowWrapper = styled(Row)`
height: ${52 / 16}rem; height: ${rowHeight};
`; `;
const ActionRow = ({ const ActionRow = ({

View File

@ -9,7 +9,7 @@ import { usePermissionsDataManager } from '../../../../hooks';
import ConditionsButton from '../../ConditionsButton'; import ConditionsButton from '../../ConditionsButton';
import ConditionsModal from '../../ConditionsModal'; import ConditionsModal from '../../ConditionsModal';
import HiddenAction from '../../HiddenAction'; import HiddenAction from '../../HiddenAction';
import { cellWidth } from '../../Permissions/utils/constants'; import { cellWidth, rowHeight } from '../../Permissions/utils/constants';
import RowLabelWithCheckbox from '../../RowLabelWithCheckbox'; import RowLabelWithCheckbox from '../../RowLabelWithCheckbox';
import { getCheckboxState } from '../../utils'; import { getCheckboxState } from '../../utils';
import generateCheckboxesActions from './utils/generateCheckboxesActions'; import generateCheckboxesActions from './utils/generateCheckboxesActions';
@ -34,7 +34,7 @@ const activeRowStyle = (theme, isActive, isClicked) => `
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
height: ${52 / 16}rem; height: ${rowHeight};
background-color: ${({ isGrey, theme }) => background-color: ${({ isGrey, theme }) =>
isGrey ? theme.colors.neutral100 : theme.colors.neutral0}; isGrey ? theme.colors.neutral100 : theme.colors.neutral0};
border: 1px solid transparent; border: 1px solid transparent;

View File

@ -6,7 +6,7 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { usePermissionsDataManager } from '../../../../../hooks'; import { usePermissionsDataManager } from '../../../../../hooks';
import HiddenAction from '../../../HiddenAction'; import HiddenAction from '../../../HiddenAction';
import { cellWidth } from '../../../Permissions/utils/constants'; import { cellWidth, rowHeight } from '../../../Permissions/utils/constants';
import RequiredSign from '../../../RequiredSign'; import RequiredSign from '../../../RequiredSign';
import RowLabelWithCheckbox from '../../../RowLabelWithCheckbox'; import RowLabelWithCheckbox from '../../../RowLabelWithCheckbox';
import { getCheckboxState } from '../../../utils'; import { getCheckboxState } from '../../../utils';
@ -21,7 +21,7 @@ const Cell = styled(Row)`
`; `;
const Wrapper = styled(Row)` const Wrapper = styled(Row)`
height: ${52 / 16}rem; height: ${rowHeight};
flex: 1; flex: 1;
${({ isCollapsable, theme }) => ${({ isCollapsable, theme }) =>

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { Row, TableLabel } from '@strapi/parts'; import { Row, TableLabel } from '@strapi/parts';
import styled from 'styled-components'; import styled from 'styled-components';
import { cellWidth, firstRowWidth } from '../../../Permissions/utils/constants'; import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants';
const HeaderLabel = styled(Row)` const HeaderLabel = styled(Row)`
width: ${cellWidth}; width: ${cellWidth};
@ -11,7 +11,7 @@ const HeaderLabel = styled(Row)`
`; `;
const PropertyLabelWrapper = styled(Row)` const PropertyLabelWrapper = styled(Row)`
width: ${firstRowWidth}; width: ${firstRowWidth};
height: ${52 / 16}rem; height: ${rowHeight};
flex-shrink: 0; flex-shrink: 0;
`; `;

View File

@ -235,7 +235,14 @@ const CreatePage = () => {
/> />
</Box> </Box>
) : ( ) : (
<Row alignItems="center" justifyContent="center" padding={11}> <Row
alignItems="center"
justifyContent="center"
padding={11}
background="neutral0"
shadow="filterShadow"
hasRadius
>
<Loader /> <Loader />
</Row> </Row>
)} )}