TOS Modal Update

boulder_base.libraries.yml

@@ -570,3 +570,11 @@ ucb-trusted-content-preview:
   css:
     theme:
       css/block/ucb-trusted-content-block.css : {weight: 5}
+
+ucb-tos-acceptance:
+  version: 1.x
+  js:
+    js/ucb-tos-acceptance.js: { }
+  css:
+    theme:
+      css/ucb-tos-acceptance.css: { weight: 5 }

css/ucb-tos-acceptance.css

@@ -0,0 +1,133 @@
+/* TOS Acceptance Modal Styles */
+.ucb-tos-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.ucb-tos-modal[hidden] {
+  display: none;
+}
+
+.ucb-tos-modal.ucb-tos-modal-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ucb-tos-modal-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.ucb-tos-modal-dialog {
+  position: relative;
+  z-index: 2;
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  transform: scale(0.9);
+  transition: transform 0.3s ease;
+}
+
+.ucb-tos-modal.ucb-tos-modal-visible .ucb-tos-modal-dialog {
+  transform: scale(1);
+}
+
+.ucb-tos-modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.ucb-tos-modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.ucb-tos-modal-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.ucb-tos-modal-body {
+  padding: 1.5rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ucb-tos-modal-body p {
+  margin-bottom: 1rem;
+}
+
+.ucb-tos-modal-body a {
+  color: #005fcc;
+  text-decoration: underline;
+}
+
+.ucb-tos-modal-body a:hover,
+.ucb-tos-modal-body a:focus {
+  color: #004499;
+}
+
+.ucb-tos-modal-footer {
+  padding: 1.5rem;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.ucb-tos-accept-button {
+  min-width: 120px;
+}
+
+.ucb-tos-accept-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Hide aria-live region visually but keep it accessible to screen readers */
+.ucb-tos-modal-live-region {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .ucb-tos-modal-dialog {
+    width: 95%;
+    max-height: 95vh;
+  }
+
+  .ucb-tos-modal-header,
+  .ucb-tos-modal-body,
+  .ucb-tos-modal-footer {
+    padding: 1rem;
+  }
+
+  .ucb-tos-modal-title {
+    font-size: 1.25rem;
+  }
+}