Tailwind 3 and Switch UI scaling from a base-10 to base-16

app/assets/javascripts/fontawesome.js

@@ -10,11 +10,13 @@ import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faAngleDown } from "@fortawesome/free-solid-svg-icons/faAngleDown";
 import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQuestion";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXMark";
 import { faTag } from "@fortawesome/free-solid-svg-icons/faTag";
 
@@ -25,11 +27,13 @@ let FontAwesomeIconLoader = () => {
     faArrowUpRightFromSquare,
     faPlus,
     faArrowRight,
+    faArrowLeft,
     faAngleDown,
     faCircleQuestion,
     faTriangleExclamation,
     faCircleExclamation,
     faInfoCircle,
+    faPaperPlane,
     faXmark,
     faTag,
   ]);

app/assets/javascripts/scheduler/App.js

@@ -28,9 +28,7 @@ export const App = () => {
         <ErrorMessage />
         <p className="messageTextStyle">{translate("select_date")}</p>
         <div className="schedule">
-          <div>
-            <Calendar />
-          </div>
+          <Calendar />
           <DateTime />
           <SetDateTime />
         </div>

app/assets/javascripts/scheduler/Calendar/YearMonth.js

@@ -61,7 +61,7 @@ export const YearMonth = () => {
         }}
         disabled={prevMonthEnabled(date, firstAvailableDate) ? false : true}
       >
-        ❮
+        <i aria-hidden="true" class="fa-solid fa-arrow-left"></i>
       </button>
       <div className="Nav--month">{dayjs(date).format("MMMM")}</div>
       <button
@@ -80,7 +80,7 @@ export const YearMonth = () => {
         }}
         disabled={nextMonthEnabled(date, lastAvailableDate) ? false : true}
       >
-        &#10095;
+        <i aria-hidden="true" class="fa-solid fa-arrow-right"></i>
       </button>
     </section>
   );

app/assets/javascripts/scheduler/Confirmation/Confirmation.js

@@ -13,18 +13,21 @@ export const Confirmation = () => {
     _24hr === "on" ? time : dayjs(date).format(translate("time_format"));
 
   return selected.length > 0 && time ? (
-    <div>
-      <div className="confirmation set">
+    <div className="confirmation set">
+      <i
+        aria-hidden="true"
+        class="confirmationIcon fa-xl fa-solid fa-paper-plane"
+      ></i>
+
+      <div className="confirmationMessage">
         <p>{translate("message_will_be_sent")}</p>
-        <p>
-          <strong>
+        <p className="confirmationTime">
+          <time datetime={date}>
             {translate("date_prefix")}
             {dayjs(date).format(translate("date_format"))} {translate("at")}{" "}
             {timeFormat}
-          </strong>
+          </time>
         </p>
-      </div>
-      <div>
         <p>{translate("cancel")}</p>
       </div>
     </div>