Updated margin, padding and alignment classes to the new bootstrap 5 approach

This commit is contained in:
Alejandro Celaya 2022-03-05 13:26:28 +01:00
parent ce871fe2a2
commit e5a84b1505
35 changed files with 55 additions and 55 deletions

View file

@ -24,8 +24,8 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forc
<h4 className="mb-4">This app has just been updated!</h4>
<p className="mb-0">
Restart it to enjoy the new features.
<Button disabled={isUpdating} className="ml-2" color="secondary" size="sm" onClick={update}>
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ml-1" /></>}
<Button disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
{isUpdating && <>Restarting...</>}
</Button>
</p>

View file

@ -46,14 +46,14 @@ const Home = ({ servers }: HomeProps) => {
<div className="p-4 text-center">
<p className="mb-5">This application will help you manage your Shlink servers.</p>
<p>
<Link to="/server/create" className="btn btn-outline-primary btn-lg mr-2">
<FontAwesomeIcon icon={faPlus} /> <span className="ml-1">Add a server</span>
<Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
<FontAwesomeIcon icon={faPlus} /> <span className="ms-1">Add a server</span>
</Link>
</p>
<p className="mb-0 mt-5">
<ExternalLink href="https://shlink.io/documentation">
<small>
<span className="mr-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
<span className="me-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
</small>
</ExternalLink>
</p>

View file

@ -29,7 +29,7 @@ const MainHeader = (ServersDropdown: FC) => () => {
</NavbarToggler>
<Collapse navbar isOpen={isOpen}>
<Nav navbar className="ml-auto">
<Nav navbar className="ms-auto">
<NavItem>
<NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
<FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings

View file

@ -63,7 +63,7 @@ export const DomainRow: FC<DomainRowProps> = (
<td className="responsive-table__cell text-lg-center" data-th="Status">
<DomainStatusIcon status={status} />
</td>
<td className="responsive-table__cell text-right">
<td className="responsive-table__cell text-end">
<span id={!canEditDomain ? 'defaultDomainBtn' : undefined}>
<Button outline size="sm" disabled={!canEditDomain} onClick={!canEditDomain ? undefined : toggle}>
<FontAwesomeIcon fixedWidth icon={!canEditDomain ? forbiddenIcon : editIcon} />

View file

@ -60,7 +60,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
onClick={() => onChange(domain)}
>
{domain}
{isDefault && <span className="float-right text-muted">default</span>}
{isDefault && <span className="float-end text-muted">default</span>}
</DropdownItem>
))}
<DropdownItem divider />

View file

@ -42,20 +42,20 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
<ModalBody>
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
<InfoTooltip className="mr-2" placement="bottom">
<InfoTooltip className="me-2" placement="bottom">
Visitors accessing the base url, as in <b>https://{domain.domain}/</b>, will be redirected to this URL.
</InfoTooltip>
Base URL
</FormGroup>
<FormGroup value={regular404Redirect} onChange={setRegular404Redirect}>
<InfoTooltip className="mr-2" placement="bottom">
<InfoTooltip className="me-2" placement="bottom">
Visitors accessing a url not matching a short URL pattern, as in <b>https://{domain.domain}/???/[...]</b>,
will be redirected to this URL.
</InfoTooltip>
Regular 404
</FormGroup>
<FormGroup value={invalidShortUrlRedirect} isLast onChange={setInvalidShortUrlRedirect}>
<InfoTooltip className="mr-2" placement="bottom">
<InfoTooltip className="me-2" placement="bottom">
Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be
redirected to this URL.
</InfoTooltip>

View file

@ -61,7 +61,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
{!hasServers &&
<ImportServersBtn tooltipPlacement="top" onImport={setServersImported} onImportError={setErrorImporting} />}
{hasServers && <Button outline onClick={goBack}>Cancel</Button>}
<Button outline color="primary" className="ml-2">Create server</Button>
<Button outline color="primary" className="ms-2">Create server</Button>
</ServerForm>
{serversImported && <ImportResult type="success" />}

View file

@ -29,7 +29,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
initialValues={selectedServer}
onSubmit={handleSubmit}
>
<Button outline className="mr-2" onClick={goBack}>Cancel</Button>
<Button outline className="me-2" onClick={goBack}>Cancel</Button>
<Button outline color="primary">Save</Button>
</ServerForm>
</NoMenuLayout>

View file

@ -45,7 +45,7 @@ export const ManageServers = (
<div className="col-md-6 d-flex d-md-block mb-2 mb-md-0">
<ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn>
{allServers.length > 0 && (
<Button outline className="ml-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
<Button outline className="ms-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
<FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
</Button>
)}

View file

@ -31,7 +31,7 @@ export const ManageServersRow = (
<Link to={`/server/${server.id}`}>{server.name}</Link>
</th>
<td className="responsive-table__cell" data-th="Base URL">{server.url}</td>
<td className="responsive-table__cell text-right">
<td className="responsive-table__cell text-end">
<ManageServersRowDropdown server={server} />
</td>
</tr>

View file

@ -86,7 +86,7 @@ export const Overview = (
<CardHeader>
<span className="d-sm-none">Create a short URL</span>
<h5 className="d-none d-sm-inline">Create a short URL</h5>
<Link className="float-right" to={`/server/${serverId}/create-short-url`}>Advanced options &raquo;</Link>
<Link className="float-end" to={`/server/${serverId}/create-short-url`}>Advanced options &raquo;</Link>
</CardHeader>
<CardBody>
<CreateShortUrl basicMode />
@ -96,7 +96,7 @@ export const Overview = (
<CardHeader>
<span className="d-sm-none">Recently created URLs</span>
<h5 className="d-none d-sm-inline">Recently created URLs</h5>
<Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
<Link className="float-end" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
</CardHeader>
<CardBody>
<ShortUrlsTable

View file

@ -17,7 +17,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
if (isEmpty(serversList)) {
return (
<DropdownItem tag={Link} to="/server/create">
<FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add a server</span>
<FontAwesomeIcon icon={plusIcon} /> <span className="ms-1">Add a server</span>
</DropdownItem>
);
}
@ -31,7 +31,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
))}
<DropdownItem divider />
<DropdownItem tag={Link} to="/manage-servers">
<FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Manage servers</span>
<FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Manage servers</span>
</DropdownItem>
</>
);
@ -40,7 +40,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
return (
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
<FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Servers</span>
<FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Servers</span>
</DropdownToggle>
<DropdownMenu right>{renderServers()}</DropdownMenu>
</UncontrolledDropdown>

View file

@ -34,7 +34,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
<FormGroup value={apiKey} onChange={setApiKey}>API key</FormGroup>
</SimpleCard>
<div className="text-right">{children}</div>
<div className="text-end">{children}</div>
</form>
);
};

View file

@ -88,7 +88,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
<header className="mb-3">
<Card body>
<h2 className="d-sm-flex justify-content-between align-items-center mb-0">
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
<Button color="link" size="lg" className="p-0 me-3" onClick={goBack}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
<span className="text-center">

View file

@ -189,7 +189,7 @@ export const ShortUrlForm = (
<p>
<Checkbox
inline
className="mr-2"
className="me-2"
checked={shortUrlData.findIfExists}
onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
>

View file

@ -67,7 +67,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => ({ selectedSer
{selectedTags.length > 0 && (
<h4 className="mt-3">
{canChangeTagsMode && selectedTags.length > 1 && (
<div className="float-right ml-2 mt-1">
<div className="float-end ms-2 mt-1">
<TooltipToggleSwitch
checked={tagsMode === 'all'}
tooltip={{ placement: 'left' }}
@ -77,7 +77,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => ({ selectedSer
</TooltipToggleSwitch>
</div>
)}
<FontAwesomeIcon icon={tagsIcon} className="short-urls-filtering-bar__tags-icon mr-1" />
<FontAwesomeIcon icon={tagsIcon} className="short-urls-filtering-bar__tags-icon me-1" />
{selectedTags.map((tag) =>
<Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
</h4>

View file

@ -28,7 +28,7 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
if (error) {
return (
<Result type="error" className="mt-3">
{canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
{canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
<ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while creating the URL :(" />
</Result>
);
@ -42,7 +42,7 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
return (
<Result type="success" className="mt-3">
{canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-right pointer" onClick={resetCreateShortUrl} />}
{canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
<b>Great!</b> The short URL is <b>{shortUrl}</b>
<CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>

View file

@ -106,7 +106,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<Vers
color="primary"
onClick={async () => imageDownloader.saveImage(qrCodeUrl, `${shortCode}-qr-code.${format}`)}
>
Download <FontAwesomeIcon icon={downloadIcon} className="ml-1" />
Download <FontAwesomeIcon icon={downloadIcon} className="ms-1" />
</Button>
</div>
</ForServerVersion>

View file

@ -12,7 +12,7 @@ export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
{ children, infoTooltip, checked, onChange },
) => (
<p>
<Checkbox inline checked={checked} className={infoTooltip ? 'mr-2' : ''} onChange={onChange}>
<Checkbox inline checked={checked} className={infoTooltip ? 'me-2' : ''} onChange={onChange}>
{children}
</Checkbox>
{infoTooltip && <InfoTooltip placement="right">{infoTooltip}</InfoTooltip>}

View file

@ -64,14 +64,14 @@ const TagCard = (
to={`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag.tag)}`}
className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center mb-1"
>
<span className="text-ellipsis"><FontAwesomeIcon icon={faLink} className="mr-2" />Short URLs</span>
<span className="text-ellipsis"><FontAwesomeIcon icon={faLink} className="me-2" />Short URLs</span>
<b>{prettify(tag.shortUrls)}</b>
</Link>
<Link
to={`/server/${serverId}/tag/${tag.tag}/visits`}
className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center"
>
<span className="text-ellipsis"><FontAwesomeIcon icon={faEye} className="mr-2" />Visits</span>
<span className="text-ellipsis"><FontAwesomeIcon icon={faEye} className="me-2" />Visits</span>
<b>{prettify(tag.visits)}</b>
</Link>
</CardBody>

View file

@ -14,10 +14,10 @@ interface TagsModeDropdownProps {
export const TagsModeDropdown: FC<TagsModeDropdownProps> = ({ mode, onChange, renderTitle }) => (
<DropdownBtn text={renderTitle?.(mode) ?? `Display mode: ${mode}`}>
<DropdownItem active={mode === 'cards'} onClick={() => onChange('cards')}>
<FontAwesomeIcon icon={cardsIcon} fixedWidth className="mr-1" /> Cards
<FontAwesomeIcon icon={cardsIcon} fixedWidth className="me-1" /> Cards
</DropdownItem>
<DropdownItem active={mode === 'list'} onClick={() => onChange('list')}>
<FontAwesomeIcon icon={listIcon} fixedWidth className="mr-1" /> List
<FontAwesomeIcon icon={listIcon} fixedWidth className="me-1" /> List
</DropdownItem>
</DropdownBtn>
);

View file

@ -44,10 +44,10 @@ export const TagsTableRow = (
<td className="responsive-table__cell text-lg-right">
<DropdownBtnMenu toggle={toggleDropdown} isOpen={isDropdownOpen}>
<DropdownItem onClick={toggleEdit}>
<FontAwesomeIcon icon={editIcon} fixedWidth className="mr-1" /> Edit
<FontAwesomeIcon icon={editIcon} fixedWidth className="me-1" /> Edit
</DropdownItem>
<DropdownItem onClick={toggleDelete}>
<FontAwesomeIcon icon={deleteIcon} fixedWidth className="mr-1" /> Delete
<FontAwesomeIcon icon={deleteIcon} fixedWidth className="me-1" /> Delete
</DropdownItem>
</DropdownBtnMenu>
</td>

View file

@ -11,6 +11,6 @@ interface CopyToClipboardIconProps {
export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
<CopyToClipboard text={text} onCopy={onCopy}>
<FontAwesomeIcon icon={copyIcon} className="ml-2 copy-to-clipboard-icon" />
<FontAwesomeIcon icon={copyIcon} className="ms-2 copy-to-clipboard-icon" />
</CopyToClipboard>
);

View file

@ -42,7 +42,7 @@ const Message: FC<MessageProps> = ({ className, children, loading = false, type
<Card className={getClassForType(type)} body>
<h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
{loading && <FontAwesomeIcon icon={preloader} spin />}
{loading && <span className="ml-2">{children ?? 'Loading...'}</span>}
{loading && <span className="ms-2">{children ?? 'Loading...'}</span>}
{!loading && children}
</h3>
</Card>

View file

@ -9,7 +9,7 @@ interface TableOrderIconProps<T> {
}
export function TableOrderIcon<T extends string = string>(
{ currentOrder, field, className = 'ml-1' }: TableOrderIconProps<T>,
{ currentOrder, field, className = 'ms-1' }: TableOrderIconProps<T>,
) {
if (!currentOrder.dir || currentOrder.field !== field) {
return null;

View file

@ -15,7 +15,7 @@ const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeaderP
const visitsStatsTitle = (
<span className="d-flex align-items-center justify-content-center">
<span className="mr-2">Visits for</span>
<span className="me-2">Visits for</span>
<Tag text={tag} colorGenerator={colorGenerator} />
</span>
);

View file

@ -17,13 +17,13 @@ const VisitsHeader: FC<VisitsHeaderProps> = ({ visits, goBack, shortUrl, childre
<header>
<Card body>
<h2 className="d-flex justify-content-between align-items-center mb-0">
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
<Button color="link" size="lg" className="p-0 me-3" onClick={goBack}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
<span className="text-center d-none d-sm-block">
<small>{title}</small>
</span>
<span className="badge badge-main ml-3">
<span className="badge badge-main ms-3">
Visits:{' '}
<ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
</span>

View file

@ -147,7 +147,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
{Object.values(sections).map(({ title, icon, subPath }, index) => (
<NavPillItem key={index} to={buildSectionUrl(subPath)} replace>
<FontAwesomeIcon icon={icon} />
<span className="ml-2 d-none d-sm-inline">{title}</span>
<span className="ms-2 d-none d-sm-inline">{title}</span>
</NavPillItem>
))}
</NavPills>
@ -289,7 +289,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
/>
</div>
<VisitsFilterDropdown
className="ml-0 ml-md-2 mt-3 mt-md-0"
className="ms-0 ms-md-2 mt-3 mt-md-0"
isOrphanVisits={isOrphanVisits}
botsSupported={botsSupported}
selected={visitsFilter}
@ -303,7 +303,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
<Button
outline
disabled={highlightedVisits.length === 0}
className="btn-md-block mr-2"
className="btn-md-block me-2"
onClick={() => setSelectedVisits([])}
>
Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}

View file

@ -232,7 +232,7 @@ const LineChartCard = (
<Card>
<CardHeader>
{title}
<div className="float-right">
<div className="float-end">
<UncontrolledDropdown>
<DropdownToggle caret color="link" className="btn-sm p-0">
Group by
@ -246,7 +246,7 @@ const LineChartCard = (
</DropdownMenu>
</UncontrolledDropdown>
</div>
<div className="float-right mr-2">
<div className="float-end me-2">
<ToggleSwitch checked={skipNoVisits} onChange={toggleSkipNoVisits}>
<small>Skip dates with no visits</small>
</ToggleSwitch>

View file

@ -95,7 +95,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
const computeTitle = () => (
<>
{title}
<div className="float-right">
<div className="float-end">
<OrderingDropdown
isButton={false}
right
@ -108,9 +108,9 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
/>
</div>
{withPagination && Object.keys(stats).length > 50 && (
<div className="float-right">
<div className="float-end">
<PaginationDropdown
toggleClassName="btn-sm p-0 mr-3"
toggleClassName="btn-sm p-0 me-3"
ranges={[ 50, 100, 200, 500 ]}
value={itemsPerPage}
setValue={(itemsPerPage) => {
@ -121,7 +121,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
</div>
)}
{extraHeaderContent && (
<div className="float-right">
<div className="float-end">
{extraHeaderContent(pagination ? activeCities : undefined)}
</div>
)}

View file

@ -26,7 +26,7 @@ export const VisitsFilterDropdown = (
const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
return (
<DropdownBtn text="Filters" dropdownClassName={className} className="mr-3" right minWidth={250}>
<DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
{botsSupported && (
<>
<DropdownItem header>Bots:</DropdownItem>

View file

@ -54,7 +54,7 @@ describe('<DomainSelector />', () => {
});
it.each([
[ 0, 'default.com<span class="float-right text-muted">default</span>' ],
[ 0, 'default.com<span class="float-end text-muted">default</span>' ],
[ 1, 'foo.com' ],
[ 2, 'bar.com' ],
])('shows expected content on every item', (index, expectedContent) => {

View file

@ -6,7 +6,7 @@ import { InfoTooltip } from '../../../src/utils/InfoTooltip';
describe('<ShortUrlFormCheckboxGroup />', () => {
it.each([
[ undefined, '', 0 ],
[ 'This is the tooltip', 'mr-2', 1 ],
[ 'This is the tooltip', 'me-2', 1 ],
])('renders tooltip only when provided', (infoTooltip, expectedClassName, expectedAmountOfTooltips) => {
const wrapper = shallow(<ShortUrlFormCheckboxGroup infoTooltip={infoTooltip} />);
const checkbox = wrapper.find(Checkbox);

View file

@ -22,6 +22,6 @@ describe('<CopyToClipboardIcon />', () => {
expect(copyToClipboard.prop('onCopy')).toEqual(onCopy);
expect(icon).toHaveLength(1);
expect(icon.prop('icon')).toEqual(copyIcon);
expect(icon.prop('className')).toEqual('ml-2 copy-to-clipboard-icon');
expect(icon.prop('className')).toEqual('ms-2 copy-to-clipboard-icon');
});
});

View file

@ -36,7 +36,7 @@ describe('<TableOrderIcon />', () => {
});
it.each([
[ undefined, 'ml-1' ],
[ undefined, 'ms-1' ],
[ 'foo', 'foo' ],
[ 'bar', 'bar' ],
])('renders expected classname', (className, expectedClassName) => {