bootstrap 5

Author: yann300

apps/quick-dapp/src/components/DeployPanel/theme.tsx

@@ -8,31 +8,6 @@ import React from 'react';
 export const themeMap: Record<string, any> = {
   Dark: { quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' },
   Light: { quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' },
-  Violet: { quality: 'light', url: 'assets/css/themes/remix-violet.css' },
-  Unicorn: { quality: 'light', url: 'assets/css/themes/remix-unicorn.css' },
-  Midcentury: {
-    quality: 'light',
-    url: 'assets/css/themes/remix-midcentury_hrzph3.css',
-  },
-  Black: { quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' },
-  Candy: { quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' },
-  HackerOwl: { quality: 'dark', url: 'assets/css/themes/remix-hacker_owl.css' },
-  Cerulean: {
-    quality: 'light',
-    url: 'assets/css/themes/bootstrap-cerulean.min.css',
-  },
-  Flatly: {
-    quality: 'light',
-    url: 'assets/css/themes/bootstrap-flatly.min.css',
-  },
-  Spacelab: {
-    quality: 'light',
-    url: 'assets/css/themes/bootstrap-spacelab.min.css',
-  },
-  Cyborg: {
-    quality: 'dark',
-    url: 'assets/css/themes/bootstrap-cyborg.min.css',
-  },
 };
 
 const CustomToggle = React.forwardRef(

apps/remix-ide/src/app/components/preload.tsx

@@ -135,7 +135,7 @@ export const Preload = (props: any) => {
           </div>
         ) : null}
         {error ? (
-          <div className="preload-info-container alert alert-danger text-left">
+          <div className="preload-info-container alert alert-danger text-start">
             An unknown error has occurred while loading the application.
             <br></br>
             Doing a hard refresh might fix this issue:<br></br>

apps/remix-ide/src/app/plugins/permission-handler-plugin.tsx

@@ -99,7 +99,7 @@ export class PermissionHandlerPlugin extends Plugin {
             <span onClick={()=>{}}>To change the permission go to </span>
             <span className='px-2' style={{ fontWeight: 'bolder' }}>Plugin Manager</span>
             <img alt="" id="permissionModalImagesFrom" src="assets/img/pluginManager.webp" style={{ height: '1rem', width: '1rem' }} />
-            <span className='pl-1' style={{ fontWeight: 'bolder' }}> / Permissions</span>
+            <span className='ps-1' style={{ fontWeight: 'bolder' }}> / Permissions</span>
           </div>
         </div>
         this.call('notification', 'toast', warnEl)

apps/remix-ide/src/app/plugins/remixGuide.tsx

@@ -149,8 +149,8 @@ export class RemixGuidePlugin extends ViewPlugin {
         </RemixUIGridView>
         { state.showVideo && <div
           data-id={`EnterModalDialogContainer-react`}
-          data-backdrop="static"
-          data-keyboard="false"
+          data-bs-backdrop="static"
+          data-bs-keyboard="false"
           className={"modal d-flex"}
           role="dialog"
           style={{ justifyContent: "center" }}

apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

@@ -90,7 +90,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
         id: 'TemplatesSelectionAiAlert',
         message: <div className='d-flex flex-row align-items-center'>
           <span><img src="../../../assets/img/remixai-logoDefault.webp" style={{ width: '50px', height: '50px' }} alt="Ai alert" /></span>
-          <p className='ml-2' style={{ fontSize: '1.1rem' }}>Your request is being processed. Please wait while I generate the workspace for you. It won't be long.</p>
+          <p className='ms-2' style={{ fontSize: '1.1rem' }}>Your request is being processed. Please wait while I generate the workspace for you. It won't be long.</p>
         </div>,
         title: 'Generating Workspace'
       }
@@ -311,7 +311,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                               className="btn btn-sm mr-2 border border-primary"
                             >
                               {isElectron() ?
-                                <><i className='fa fa-folder-open mr-1'></i>Create</> : 'Create'}
+                                <><i className='fa fa-folder-open me-1'></i>Create</> : 'Create'}
                             </span>
                           </CustomTooltip>}
                           {item.templateType && item.templateType.forceCreateNewWorkspace ? <></> : isElectron() ?
@@ -327,7 +327,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                                   onClick={async () => addToCurrentElectronFolder(item, template.name)}
                                   className="btn btn-sm border"
                                 >
-                                  <i className="fa fa-folder-plus mr-1" aria-hidden="true"></i>
+                                  <i className="fa fa-folder-plus me-1" aria-hidden="true"></i>
                                  Add here
                                 </span>
                               </CustomTooltip>
@@ -397,11 +397,11 @@ const createModalMessage = async (
         onInput={(e) => onChangeTemplateName((e.target as any).value)}
       />
       {templateGroup.hasOptions ? createOptionsModal(onChangeCheckBoxRefs, onChangeRadioRefs) : null}
-      <div className="d-flex py-2 align-items-center custom-control custom-checkbox">
+      <div className="d-flex py-2 align-items-center form-check">
         <input
           id="initGitRepository"
           data-id="initGitRepository"
-          className="form-check-input custom-control-input"
+          className="form-check-input form-check-input"
           type="checkbox"
           disabled={gitConfigNotSet}
           onChange={(e) => onChangeInitGit(e.target.value)}
@@ -410,7 +410,7 @@ const createModalMessage = async (
         <label
           htmlFor="initGitRepository"
           data-id="initGitRepositoryLabel"
-          className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
+          className="m-0 form-check-label form-check-label udapp_checkboxAlign"
           title={window._intl.formatMessage({ id: 'filePanel.initGitRepoTitle' })}
         >
           <FormattedMessage id="filePanel.initGitRepositoryLabel" />
@@ -441,9 +441,9 @@ const createOptionsModal = (
     </label>
     <div className="mb-2">
       {['mintable', 'burnable', 'pausable'].map((feature) => (
-        <div key={feature} className="d-flex ml-2 custom-control custom-checkbox">
-          <input className="custom-control-input" type="checkbox" name="feature" value={feature} id={feature} onChange={onChangeCheckBoxRefs} />
-          <label className="form-check-label custom-control-label" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
+        <div key={feature} className="d-flex ms-2 form-check">
+          <input className="form-check-input" type="checkbox" name="feature" value={feature} id={feature} onChange={onChangeCheckBoxRefs} />
+          <label className="form-check-label form-check-label" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
             <FormattedMessage id={`filePanel.${feature}`} />
           </label>
         </div>
@@ -455,9 +455,9 @@ const createOptionsModal = (
     </label>
     <div>
       {['transparent', 'uups'].map((type) => (
-        <div key={type} className="d-flex ml-2 custom-control custom-radio">
-          <input className="custom-control-input" type="radio" name="upgradeability" value={type} id={type} onChange={onChangeRadioRefs} />
-          <label className="form-check-label custom-control-label" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
+        <div key={type} className="d-flex ms-2 form-check">
+          <input className="form-check-input" type="radio" name="upgradeability" value={type} id={type} onChange={onChangeRadioRefs} />
+          <label className="form-check-label form-check-label" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
             {type.toUpperCase()}
           </label>
         </div>

apps/remix-ide/src/app/providers/custom-vm-fork-provider.tsx

@@ -40,7 +40,7 @@ export class CustomForkVMProvider extends BasicVMProvider {
             <label className="mt-3 mb-1">
               <FormattedMessage id="udapp.nodeUrl" />
             </label>
-            <input data-id="CustomForkNodeUrl" name="nodeUrl" type="text" className="border form-control border-right-0" />
+            <input data-id="CustomForkNodeUrl" name="nodeUrl" type="text" className="border form-control border-end-0" />
           </div>
           <div>
             <label className="mt-3 mb-1">
@@ -52,12 +52,12 @@ export class CustomForkVMProvider extends BasicVMProvider {
               type="text"
               defaultValue="latest"
               placeholder='block number or "latest"'
-              className="border form-control border-right-0"
+              className="border form-control border-end-0"
             />
           </div>
           <div>
             <label className="mt-3 mb-1">EVM</label>
-            <select data-id="CustomForkEvmType" name="evmType" defaultValue="merge" className="border form-control border-right-0">
+            <select data-id="CustomForkEvmType" name="evmType" defaultValue="merge" className="border form-control border-end-0">
               {Object.keys(Hardfork).map((value, index) => {
                 return (
                   <option value={Hardfork[value]} key={index}>

apps/remix-ide/src/app/providers/external-http-provider.tsx

@@ -21,7 +21,7 @@ export class ExternalHttpProvider extends AbstractProvider {
     const thePath = '<path/to/local/folder/for/test/chain>'
     return (
       <>
-        <div className="pr-1">
+        <div className="pe-1">
           <FormattedMessage
             id="udapp.externalHttpProviderText1"
             values={{

apps/remix-ide/src/app/providers/foundry-provider.tsx

@@ -22,10 +22,10 @@ export class FoundryProvider extends AbstractProvider {
       <div>
         {' '}
         <FormattedMessage id="udapp.foundryProviderText1" />
-        <div className="p-1 pl-3">
+        <div className="p-1 ps-3">
           <b>curl -L https://foundry.paradigm.xyz | bash</b>
         </div>
-        <div className="p-1 pl-3">
+        <div className="p-1 ps-3">
           <b>anvil</b>
         </div>
         <div className="pt-2 pb-4">

apps/remix-ide/src/app/providers/ganache-provider.tsx

@@ -22,10 +22,10 @@ export class GanacheProvider extends AbstractProvider {
       <div>
         {' '}
         <FormattedMessage id="udapp.ganacheProviderText1" />
-        <div className="p-1 pl-3">
+        <div className="p-1 ps-3">
           <b>yarn global add ganache</b>
         </div>
-        <div className="p-1 pl-3">
+        <div className="p-1 ps-3">
           <b>ganache</b>
         </div>
         <div className="pt-2 pb-4">

apps/remix-ide/src/app/providers/hardhat-provider.tsx

@@ -22,7 +22,7 @@ export class HardhatProvider extends AbstractProvider {
       <div>
         {' '}
         <FormattedMessage id="udapp.hardhatProviderText1" />
-        <div className="p-1 pl-3">
+        <div className="p-1 ps-3">
           <b>npx hardhat node</b>
         </div>
         <div className="pt-2 pb-4">