components done

This commit is contained in:
ronronscelestes 2021-11-17 17:51:17 +01:00
parent 6de3371e61
commit ced1fac45d
4 changed files with 16 additions and 16 deletions

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ModalHeader } from '@strapi/design-system/ModalLayout'; import { ModalHeader } from '@strapi/design-system/ModalLayout';
import { ButtonText } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Divider } from '@strapi/design-system/Divider'; import { Divider } from '@strapi/design-system/Divider';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -16,12 +16,12 @@ export const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
return ( return (
<> <>
<ModalHeader> <ModalHeader>
<ButtonText textColor="neutral800" as="h2" id="title"> <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
{formatMessage({ {formatMessage({
id: getTrad('header.actions.upload-assets'), id: getTrad('header.actions.upload-assets'),
defaultMessage: 'Upload assets', defaultMessage: 'Upload assets',
})} })}
</ButtonText> </Typography>
</ModalHeader> </ModalHeader>
<TabGroup <TabGroup

View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { H3 } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { useTracking } from '@strapi/helper-plugin'; import { useTracking } from '@strapi/helper-plugin';
import { ModalFooter } from '@strapi/design-system/ModalLayout'; import { ModalFooter } from '@strapi/design-system/ModalLayout';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
@ -89,12 +89,12 @@ export const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
</IconWrapper> </IconWrapper>
<Box paddingTop={3} paddingBottom={5}> <Box paddingTop={3} paddingBottom={5}>
<H3 textColor="neutral600" as="span"> <Typography variant="delta" textColor="neutral600" as="span">
{formatMessage({ {formatMessage({
id: getTrad('input.label'), id: getTrad('input.label'),
defaultMessage: 'Drag & Drop here or', defaultMessage: 'Drag & Drop here or',
})} })}
</H3> </Typography>
</Box> </Box>
<OpaqueBox <OpaqueBox

View File

@ -1,7 +1,7 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ModalHeader, ModalBody, ModalFooter } from '@strapi/design-system/ModalLayout'; import { ModalHeader, ModalBody, ModalFooter } from '@strapi/design-system/ModalLayout';
import { ButtonText, Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
@ -60,19 +60,19 @@ export const PendingAssetStep = ({
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<ModalHeader> <ModalHeader>
<ButtonText textColor="neutral800" as="h2" id="title"> <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
{formatMessage({ {formatMessage({
id: getTrad('header.actions.upload-assets'), id: getTrad('header.actions.upload-assets'),
defaultMessage: 'Upload assets', defaultMessage: 'Upload assets',
})} })}
</ButtonText> </Typography>
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Stack size={7}> <Stack size={7}>
<Flex justifyContent="space-between"> <Flex justifyContent="space-between">
<Stack size={0}> <Stack size={0}>
<Text small bold textColor="neutral800"> <Typography variant="pi" fontWeight="bold" textColor="neutral800">
{formatMessage( {formatMessage(
{ {
id: getTrad('list.assets.selected'), id: getTrad('list.assets.selected'),
@ -81,13 +81,13 @@ export const PendingAssetStep = ({
}, },
{ number: assets.length } { number: assets.length }
)} )}
</Text> </Typography>
<Text small textColor="neutral600"> <Typography variant="pi" textColor="neutral600">
{formatMessage({ {formatMessage({
id: getTrad('modal.upload-list.sub-header-subtitle'), id: getTrad('modal.upload-list.sub-header-subtitle'),
defaultMessage: 'Manage the assets before adding them to the Media Library', defaultMessage: 'Manage the assets before adding them to the Media Library',
})} })}
</Text> </Typography>
</Stack> </Stack>
<Button size="S" onClick={onClickAddAsset}> <Button size="S" onClick={onClickAddAsset}>
{formatMessage({ {formatMessage({

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import Cross from '@strapi/icons/Cross'; import Cross from '@strapi/icons/Cross';
import { Text } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex'; import { Flex } from '@strapi/design-system/Flex';
import { ProgressBar } from '@strapi/design-system/ProgressBar'; import { ProgressBar } from '@strapi/design-system/ProgressBar';
@ -57,12 +57,12 @@ export const UploadProgress = ({ onCancel, progress, error }) => {
</Box> </Box>
<CancelButton type="button" onClick={onCancel}> <CancelButton type="button" onClick={onCancel}>
<Text small as="span" textColor="neutral200"> <Typography variant="pi" as="span" textColor="neutral200">
{formatMessage({ {formatMessage({
id: 'app.components.Button.cancel', id: 'app.components.Button.cancel',
defaultMessage: 'Cancel', defaultMessage: 'Cancel',
})} })}
</Text> </Typography>
<Box as="span" paddingLeft={2} aria-hidden> <Box as="span" paddingLeft={2} aria-hidden>
<Cross /> <Cross />
</Box> </Box>