@pocketprep/ui-kit 3.8.3 → 3.8.5

package/lib/components/Modal/ModalContainer.vue

@@ -70,7 +70,9 @@ export default class ModalContainer extends Vue {
     
         // Reset focus to last element in modal so next tab will move it to top
         const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
-        const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
+        const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl
+            .querySelectorAll(focusableSelectors))
+            .filter(el => !('disabled' in el && el.disabled === true))
         if (modalFocusableEls.length) {
             modalFocusableEls[modalFocusableEls.length - 1]?.focus()
             modalFocusableEls[modalFocusableEls.length - 1]?.blur()
@@ -81,7 +83,7 @@ export default class ModalContainer extends Vue {
             if (this.modalNumber === this.numberOfModals()) { // Only focus on the last open panel
                 const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
                 const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
-                const hasCalendarClass = target 
+                const hasCalendarClass = target?.classList
                         && Array.from(target.classList).find(
                             c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
                         )

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -572,7 +572,7 @@ const handleClick = (event: MouseEvent) => {
         }
 
         &--review-mode#{&}--distractor {
-            color: $slate;
+            color: $ash;
 
             &--dark {
                 color: $fog;

package/lib/components/SidePanels/SidePanel.vue

@@ -193,7 +193,7 @@ export default class SidePanel extends Vue {
                 const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
                 const sidePanelContainerEl = this.$refs['sidepanelContainer'] as HTMLElement
                 const isFocusOutside = target && sidePanelContainerEl && !sidePanelContainerEl.contains(target)
-                const hasCalendarClass = target 
+                const hasCalendarClass = target?.classList
                                 && Array.from(target.classList).find(
                                     c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
                                 )

package/lib/components/Tags/Tag.vue

@@ -140,20 +140,20 @@ export default class Tag extends Vue {
     }
 
     &--active {
-        border: none;
+        border: 1px solid rgba($green, 0.6);
         background: $meadow;
-        color: $scifi-takeout;
+        color: $brand-black;
     }
 
     &--pending {
-        border: none;
+        border: 1px solid $banana-bread;
         background: $buttermilk;
-        color: $flat-brown;
+        color: $brand-black;
     }
 
     &--archived {
         background: $fog;
-        color: $pickled-bluewood;
+        color: $brand-black;
         border-radius: 3px;
         border: 1px solid rgba($pewter, 0.30);
 
@@ -165,27 +165,48 @@ export default class Tag extends Vue {
     }
 
     &--draft {
-        border: none;
+        border: 1px solid $banana-bread;
         background: $buttermilk;
         color: $brand-black;
+
+        &--dark {
+            background: rgba($banana-bread, 0.4);
+            border-color: rgba($buttermilk, 0.2);
+            color: $white;
+        }
     }
 
     &--available {
         border: none;
         background: $spectral-green;
         color: $white;
+
+        &--dark {
+            background: $scifi-takeout;
+        }
     }
 
     &--closed {
         border: 1px solid rgba($pewter, 0.3);
         background: none;
         color: $brand-black;
+
+        &--dark {
+            border-color: $slate;
+            color: $white;
+        }
     }
 
     &--upcoming {
-        border: none;
+        border: 1px solid rgba($spectral-green, 0.5);
         background: rgba($spectral-green, 0.2);
         color: $brand-black;
+
+        &--dark {
+            border-color: rgba($spectral-green, 0.8);
+            background: rgba($spectral-green, 0.5);
+            color: $white;
+        }
     }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.8.3",
+  "version": "3.8.5",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {