Updated Result component so that it has the text centered by default

This commit is contained in:
Alejandro Celaya 2020-12-21 17:58:46 +01:00
parent b211a29fc5
commit 344f5e9b0d
8 changed files with 10 additions and 12 deletions

View file

@ -16,7 +16,7 @@ interface CreateServerProps extends RouterProps {
}
const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
<Result type={type} textCentered>
<Result type={type}>
{type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
{type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
</Result>

View file

@ -54,13 +54,13 @@ const DeleteShortUrlModal = (
/>
{hasThresholdError && (
<Result type="warning" textCentered small className="mt-2">
<Result type="warning" small className="mt-2">
{errorData?.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`}
{!errorData?.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'}
</Result>
)}
{hasErrorOtherThanThreshold && (
<Result type="error" textCentered small className="mt-2">
<Result type="error" small className="mt-2">
Something went wrong while deleting the URL :(
</Result>
)}

View file

@ -79,7 +79,7 @@ const EditMetaModal = (
/>
</FormGroup>
{error && (
<Result type="error" small textCentered className="mt-2">
<Result type="error" small className="mt-2">
Something went wrong while saving the metadata :(
</Result>
)}

View file

@ -35,7 +35,7 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor
/>
</FormGroup>
{error && (
<Result type="error" small textCentered className="mt-2">
<Result type="error" small className="mt-2">
Something went wrong while saving the long URL :(
</Result>
)}

View file

@ -33,7 +33,7 @@ const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
<ModalBody>
<TagsSelector tags={selectedTags} onChange={setSelectedTags} />
{shortUrlTags.error && (
<Result type="error" small textCentered className="mt-2">
<Result type="error" small className="mt-2">
Something went wrong while saving the tags :(
</Result>
)}

View file

@ -26,7 +26,7 @@ const DeleteTagConfirmModal = (
<ModalBody>
Are you sure you want to delete tag <b>{tag}</b>?
{tagDelete.error && (
<Result type="error" small textCentered className="mt-2">
<Result type="error" small className="mt-2">
Something went wrong while deleting the tag :(
</Result>
)}

View file

@ -56,7 +56,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
</div>
{tagEdit.error && (
<Result type="error" small textCentered className="mt-2">
<Result type="error" small className="mt-2">
Something went wrong while editing the tag :(
</Result>
)}

View file

@ -6,20 +6,18 @@ import { SimpleCard } from './SimpleCard';
interface ResultProps {
type: 'success' | 'error' | 'warning';
className?: string;
textCentered?: boolean;
small?: boolean;
}
export const Result: FC<ResultProps> = ({ children, type, className, textCentered = false, small = false }) => (
export const Result: FC<ResultProps> = ({ children, type, className, small = false }) => (
<Row className={className}>
<div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
<SimpleCard
className={classNames({
className={classNames('text-center', {
'bg-main': type === 'success',
'bg-danger': type === 'error',
'bg-warning': type === 'warning',
'text-white': type !== 'warning',
'text-center': textCentered,
})}
bodyClassName={classNames({ 'p-2': small })}
>