Small toast style changes (#4771)

app/assets/stylesheets/application.bootstrap.scss

 
-@import 'variables';
 @import 'bootstrap/scss/bootstrap';
 @import 'react-toastify/dist/ReactToastify';
+@import 'variables';
 
 @import 'helpers';
 @import 'rooms';

app/assets/stylesheets/variables.scss

@@ -24,3 +24,8 @@ $column-md-width: 150px;
 $column-lg-width: 325px;
 
 $input-max-width: 300px;
+
+:root {
+  --toastify-color-error: #dc3545;
+  --toastify-font-family: "Inter";
+}

app/javascript/App.jsx

@@ -29,6 +29,7 @@ export default function App() {
 
   document.documentElement.style.setProperty('--brand-color', brandColors.PrimaryColor);
   document.documentElement.style.setProperty('--brand-color-light', brandColors.PrimaryColorLight);
+  document.documentElement.style.setProperty('--toastify-color-success', brandColors.PrimaryColor);
 
   return (
     <>
@@ -39,6 +40,7 @@ export default function App() {
       <ToastContainer
         position="bottom-right"
         newestOnTop
+        autoClose={3000}
       />
       <Footer />
     </>