@pocketprep/ui-kit 3.4.12 → 3.4.14

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

@@ -136,34 +136,12 @@ export default class DropdownExplanation extends Vue {
     }
 
     &__toggle-dropdown-explanation-img-description {
-        margin-top: 12px;
-        margin-bottom: 20px;
+        margin-top: 14px;
+        margin-bottom: 16px;
 
         &--open {
-            margin-bottom: 6px;
-        }
-
-        &--tablet-portrait {
-            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference {
-                margin-bottom: 4px;
-            }
-
-            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open {
-                margin-bottom: 6px;
-            }
-        }
-
-        &--mobile {
             margin-top: 16px;
-            margin-bottom: 16px;
-
-            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference {
-                margin-bottom: 7px;
-            }
-
-            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open {
-                margin-bottom: 4px;
-            }
+            margin-bottom: 6px;
         }
     }
 
@@ -200,16 +178,12 @@ export default class DropdownExplanation extends Vue {
         color: $ash;
         font-size: 15px;
         line-height: 22px;
-        margin-bottom: 20px;
+        margin-bottom: 16px;
 
         &--dark {
             color: $fog;
         }
 
-        &--mobile {
-            margin-bottom: 16px;
-        }
-
         p {
             margin: 0;
         }

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

@@ -261,15 +261,13 @@ export default class Explanation extends Vue {
     }
 
     &__toggle-explanation-img-description {
-        margin-top: 24px;
+        margin-top: 14px;
+        margin-bottom: 16px;
 
         &--open {
+            margin-top: 16px;
             margin-bottom: 6px;
         }
-
-        &--tablet-landscape {
-            margin-top: 12px;
-        }
     }
 
     &__explanation-img-description {
@@ -279,7 +277,7 @@ export default class Explanation extends Vue {
         font-weight: 500;
         letter-spacing: -0.2px;
         line-height: 22px;
-        margin-bottom: 24px;
+        margin-bottom: 16px;
 
         &--dark {
             color: $fog;

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

@@ -178,11 +178,7 @@ export default class PassageAndImage extends Vue {
 
     &__toggle-passage-image-description {
         margin-top: 16px;
-        margin-bottom: 8px;
-
-        &--tablet-landscape {
-            margin-top: 12px;
-        }
+        margin-bottom: 6px;
     }
 
     &__toggle-passage-image-description-text {

package/lib/components/Quiz/Question.vue

@@ -42,6 +42,7 @@
                     :quiz-length="quizLength"
                     :quiz-mode="quizMode"
                     :question-number="questionNumber"
+                    :is-correct="isCorrect"
                     :is-dark-mode="isDarkMode"
                     :context-icon-type="contextIconType"
                     :show-answers="showAnswers"
@@ -944,8 +945,8 @@ export default class Question extends Vue {
                     if (dropdownExplanationComp) {
                         const dropdownEl = dropdownExplanationComp[0] as ComponentPublicInstance | undefined 
                         const mobileImgDropdownImgDescription = 
-                            // eslint-disable-next-line max-len
-                            dropdownEl?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
+                        // eslint-disable-next-line max-len
+                        dropdownEl?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
 
                         if (mobileImgDropdownImgDescription?.offsetParent) {
                             mobileImgDropdownImgDescription.focus()
@@ -1457,101 +1458,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__correct-icon {
-        position: absolute;
-        top: 12px;
-        right: 15px;
-        width: 22px;
-        height: 22px;
-        color: $cadaverous;
-
-        &--dark {
-            color: $jungle-green;
-        }
-
-        &--review-mode {
-            top: 11px;
-        }
-    }
-
-    &__incorrect-icon {
-        position: absolute;
-        top: 12px;
-        right: 10px;
-        width: 22px;
-        height: 22px;
-        color: $pepper;
-
-        &--mcr {
-            top: 11px;
-        }
-
-        &--dark {
-            color: $rosa;
-        }
-    }
-
-    &__choice-stats-pct {
-        position: absolute;
-        top: 50%;
-        right: 10px;
-        transform: translateY(-50%);
-        color: $ash;
-        font-size: 15.5px;
-        letter-spacing: -0.2px;
-        line-height: 19px;
-        font-weight: 600;
-        transition: 0.1s right ease;
-
-        &--dark {
-            color: $fog;
-        }
-
-        &--big {
-            right: 15px;
-        }
-    }
-
-    &__choice-stats-bar {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 12px;
-        box-sizing: border-box;
-        background-color: $fog;
-        border-radius: 0 0 5px 5px;
-        overflow: hidden;
-
-        &--dark {
-            background-color: $ash;
-        }
-    }
-
-    &__choice-stats-bar-fill {
-        background-color: $slate-01;
-        height: 100%;
-
-        &--dark {
-            background-color: $pewter;
-        }
-
-        &--correct {
-            background-color: $cadaverous;
-
-            &--dark {
-                background-color: $jungle-green;
-            }
-        }
-
-        &--incorrect {
-            background-color: $pepper;
-
-            &--dark {
-                background-color: $rosa;
-            }
-        }
-    }
-
     &__motivational-moment {
         position: absolute;
         right: -150px;

package/package.json

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