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

src/common/AppUpdateBanner.tsx

@@ -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}>
+        <Button disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
-          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ml-1" /></>}
+          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
           {isUpdating && <>Restarting...</>}
         </Button>
       </p>

src/common/Home.tsx

@@ -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">
+                    <Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
-                      <FontAwesomeIcon icon={faPlus} /> <span className="ml-1">Add a server</span>
+                      <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>

src/common/MainHeader.tsx

@@ -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

src/domains/DomainRow.tsx

@@ -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} />

src/domains/DomainSelector.tsx

@@ -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 />

src/domains/helpers/EditDomainRedirectsModal.tsx

@@ -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>

src/servers/CreateServer.tsx

@@ -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" />}

src/servers/EditServer.tsx

@@ -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>

src/servers/ManageServers.tsx

@@ -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>
           )}

src/servers/ManageServersRow.tsx

@@ -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>

src/servers/Overview.tsx

@@ -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

src/servers/ServersDropdown.tsx

@@ -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>

src/servers/helpers/ServerForm.tsx

@@ -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>
   );
 };

src/short-urls/EditShortUrl.tsx

@@ -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">

src/short-urls/ShortUrlForm.tsx

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

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -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>

src/short-urls/helpers/CreateShortUrlResult.tsx

@@ -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}>

src/short-urls/helpers/QrCodeModal.tsx

@@ -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>

src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx

@@ -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>}

src/tags/TagCard.tsx

@@ -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>

src/tags/TagsModeDropdown.tsx

@@ -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>
 );

src/tags/TagsTableRow.tsx

@@ -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>

src/utils/CopyToClipboardIcon.tsx

@@ -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>
 );

src/utils/Message.tsx

@@ -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>

src/utils/table/TableOrderIcon.tsx

@@ -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;

src/visits/TagVisitsHeader.tsx

@@ -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>
   );

src/visits/VisitsHeader.tsx

@@ -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>

src/visits/VisitsStats.tsx

@@ -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)})</>}

src/visits/charts/LineChartCard.tsx

@@ -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>

src/visits/charts/SortableBarChartCard.tsx

@@ -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>
       )}

src/visits/helpers/VisitsFilterDropdown.tsx

@@ -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>

test/domains/DomainSelector.test.tsx

@@ -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) => {

test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx

@@ -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);

test/utils/CopyToClipboardIcon.test.tsx

@@ -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');
   });
 });

test/utils/table/TableOrderIcon.test.tsx

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