Merge remote-tracking branch 'origin/main' into bhw/css-modules

.github/pull_request_template.md

@@ -1,3 +1,5 @@
 **Asana task**: [title](url)
 
 Description
+
+- [ ] For features with a design/UX component, deployed branch to dev-green and let product know it's ready for review.

Dockerfile

@@ -34,9 +34,7 @@ RUN apk add --no-cache --update curl
 
 WORKDIR /root
 
-RUN curl https://truststore.pki.rds.amazonaws.com/global/global-bundle.pem \
-    -o aws-cert-bundle.pem
-RUN echo "ed2b625ceeca0ebacf413972c33acbeb65a6c6b94d0c6434f1bb006cd4904ede  aws-cert-bundle.pem" | sha256sum -c -
+RUN curl https://truststore.pki.rds.amazonaws.com/global/global-bundle.pem -o aws-cert-bundle.pem
 
 # add frontend assets compiled in node container, required by phx.digest
 COPY --from=assets-builder /root/priv/static ./priv/static

assets/css/dashboard/filter-group.scss

@@ -0,0 +1,23 @@
+.filter-group {
+  width: 200px;
+
+  .header {
+    font-size: 16px;
+    margin-bottom: 8px;
+    line-height: 24px;
+  }
+
+  .button-group {
+    .filter-button {
+      height: 38px;
+      min-width: 200px;
+      color: $text-secondary;
+      background-color: $cool-gray-20;
+    }
+
+    .selected {
+      color: #ffffff;
+      background: #d9d9d93d;
+    }
+  }
+}

assets/css/dashboard/new-pa-message/associate-alert-page.scss

@@ -11,6 +11,7 @@
 .associate-alert-page-header {
   padding-right: 48px;
   max-width: 1380px;
+  height: 48px;
 
   &__cancel {
     flex: none;
@@ -33,40 +34,16 @@
 .associate-alert-page-body {
   flex-wrap: nowrap;
   padding-right: 48px;
+  margin-top: 40px;
 }
 
 .associate-alert-filter-selection {
-  flex: none;
-  font-size: 20px;
-  width: 200px;
-  padding: 0px 12px;
-  margin-top: 40px;
-
-  &__label {
-    margin-bottom: 8px;
-  }
-
-  &__button-group {
-    margin-bottom: 48px;
-  }
-
-  &__selected {
-    color: #ffffff !important;
-    background: #d9d9d93d !important;
-  }
-
-  button {
-    text-align: left;
-    height: 38px;
-    min-width: 200px;
-    color: $text-secondary;
-    background-color: $cool-gray-20;
-    border: none;
-  }
+  max-width: 200px;
+  padding: 0;
 }
 
 .associate-alert-table {
-  margin: 40px;
+  margin: 0 40px;
   max-width: 1096px;
 
   th,

assets/css/dashboard/new-pa-message/static-template-page.scss

@@ -0,0 +1,93 @@
+.static-template-page {
+  padding: 24px 48px;
+
+  .header-container {
+    padding-right: 48px;
+    max-width: 1380px;
+    max-height: 48px;
+    margin-bottom: 40px;
+
+    .header,
+    .cancel-button-col,
+    .cancel-button {
+      height: 48px;
+    }
+
+    .cancel-button-col {
+      flex: none;
+      width: 100px;
+
+      .cancel-button {
+        color: $text-link-primary;
+        text-decoration: none;
+
+        &:hover {
+          color: $text-link-primary;
+          background-color: $cool-gray-15;
+        }
+      }
+    }
+  }
+
+  .static-template-page-body {
+    .filter-group-col {
+      max-width: 200px;
+      margin-right: 48px;
+    }
+
+    .static-template-table-container {
+      max-width: 1096px;
+
+      .table-header {
+        font-size: 32px;
+      }
+
+      .static-template-table {
+        width: 100%;
+
+        .header-row {
+          height: 55px;
+          vertical-align: bottom;
+          border-bottom: 1px solid $border-primary;
+
+          .message-column-header {
+            padding-bottom: 8px;
+            padding-left: 16px;
+          }
+        }
+
+        .template-row {
+          background-color: $cool-gray-15;
+          border-bottom: 1px solid $divider-secondary;
+
+          .title {
+            font-weight: 700;
+          }
+
+          .message-cell {
+            padding: 8px 16px;
+
+            .message {
+              white-space: pre-line;
+            }
+          }
+
+          .select-button-cell {
+            vertical-align: top;
+            padding: 16px 38px 0 16px;
+
+            .select-button {
+              padding: 0;
+              color: $text-secondary;
+            }
+          }
+
+          &:hover {
+            background-color: $cool-gray-20;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

assets/css/dashboard/pa-messages-page.scss

@@ -16,7 +16,6 @@
   padding-right: 0px;
   display: flex;
   flex-direction: column;
-  gap: 48px;
 
   .add-new-button,
   .system-log-link {
@@ -44,7 +43,7 @@
 
   .system-log-link {
     text-decoration: none;
-    margin-top: 8px;
+    margin-top: 16px;
     color: $text-secondary;
     .link-text {
       text-decoration: underline;
@@ -56,12 +55,7 @@
   section {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-
-    header {
-      font-size: 16px;
-      line-height: 24px;
-    }
+    margin-bottom: 48px;
   }
 }
 
@@ -98,6 +92,11 @@
 
   &__message {
     width: 586px;
+
+    a {
+      color: $text-primary;
+      text-decoration: none;
+    }
   }
 
   &__interval {
@@ -108,11 +107,6 @@
     width: 110px;
   }
 
-  &__text {
-    color: $text-primary;
-    text-decoration: none;
-  }
-
   &__start-end {
     width: 200px;
     padding-right: 0px;

assets/css/error-modal.scss

@@ -0,0 +1,40 @@
+.modal.error-modal {
+  color: $text-primary;
+  .modal-dialog {
+    margin-top: 362px;
+  }
+
+  .modal-content {
+    background-color: $cool-gray-20;
+
+    .modal-header {
+      border-bottom: none;
+
+      .btn-close:hover {
+        background-color: transparent;
+      }
+    }
+
+    .modal-footer {
+      background-color: $cool-gray-20;
+      border-top: none;
+      height: 62px;
+      padding: 0 12px 0 0;
+
+      .btn {
+        height: 38px;
+      }
+
+      .error-modal__refresh-button {
+        background-color: $button-primary;
+        color: $button-secondary;
+      }
+
+      .error-modal__cancel-button {
+        background-color: $cool-gray-20;
+        color: #c1e4ff;
+        border: transparent;
+      }
+    }
+  }
+}

assets/css/pa-messages.module.scss

@@ -62,12 +62,13 @@
   color: $text-error;
 }
 
-.associateAlertButton {
+.associateButton {
   @include flat-button;
   --bs-btn-color: #{$text-link-primary};
+  --bs-btn-line-height: 0.8;
+  text-decoration: none;
   font-size: 20px;
   font-weight: 500;
-  padding-left: 0;
 }
 
 .copyTextButton {

assets/css/screenplay.scss

@@ -43,8 +43,11 @@ $form-feedback-invalid-color: $text-error;
 @import "sort-label.scss";
 @import "search-bar.scss";
 @import "dashboard/picker.scss";
+@import "error-modal.scss";
 @import "dashboard/toast.scss";
 @import "dashboard/kebab-menu.scss";
+@import "dashboard/filter-group.scss";
+@import "dashboard/new-pa-message/static-template-page.scss";
 
 html {
   font-size: 16px;

assets/css/variables.scss

@@ -68,3 +68,5 @@ $text-button-blue-hover-color: #c1e4ff14;
 $text-button-grey-hover-color: #f8f9fa14;
 $alert-yellow: #ffdd00;
 $accessibility-blue: #165c96;
+
+$divider-secondary: #495057;