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

View File

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

View File

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

View File

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