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

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;