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' }) => ( 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 === '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.'} {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
</Result> </Result>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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