fix(HowToUse): fix component bugs

rudnovd · Apr 15, 2023 · 5615f93 · 5615f93
1 parent 0419d6f
commit 5615f93
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 24 deletions.
diff --git a/src/components/DamageCalculator.vue b/src/components/DamageCalculator.vue
@@ -262,8 +262,6 @@ export default defineComponent({
   grid-template-rows: minmax(50vh, 1fr) 1fr;
   grid-template-columns: 100%;
   box-shadow: 0 0 3px rgba(170, 170, 170, 0.5);
-  content-visibility: auto;
-  contain-intrinsic-size: 80vh;
 
   @include media-large {
     grid-template-rows: minmax(80vh, auto) 1fr;

diff --git a/src/components/HowToUse.vue b/src/components/HowToUse.vue
@@ -81,30 +81,19 @@ export default defineComponent({
         }
 
         const elementStyles = getComputedStyle(element)
-        // if (!elementStyles.position.length || elementStyles.position === 'static') {
-        //   element.style.setProperty('position', 'relative')
-        // }
         element.style.setProperty('z-index', '1001')
 
-        if (elementStyles.backgroundColor === 'rgba(0, 0, 0, 0)') {
+        if (
+          elementStyles.backgroundColor === 'rgb(21, 21, 21)' ||
+          elementStyles.backgroundColor === 'rgba(0, 0, 0, 0)'
+        ) {
           element.style.setProperty('background-color', 'rgba(255, 255, 255, 1)')
+          element.style.setProperty('color', 'rgba(0, 0, 0, 1)')
+        } else if (elementStyles.backgroundColor === 'rgb(255, 255, 255)') {
+          element.style.setProperty('background-color', 'rgba(0, 0, 0, 0.5)')
+          element.style.setProperty('color', 'rgba(255, 255, 255, 1)')
         }
 
-        // if (target.insertBackground) {
-        //   const tourBackgroundElement = document.createElement('div')
-        //   tourBackgroundElement.className = 'tour-background-from'
-        //   tourBackgroundElement.style.cssText = `
-        //     position: absolute;
-        //     top: 0;
-        //     left: 0;
-        //     z-index: 1000;
-        //     width: 100%;
-        //     height: 100%;
-        //     background: rgba(0, 0, 0, 0.5);
-        //   `
-        //   element.append(tourBackgroundElement)
-        // }
-
         if (target.eventTriggerNode) {
           const eventTriggerNode = document.querySelector(target.eventTriggerNode) as HTMLElement
           if (!eventTriggerNode) return
@@ -119,13 +108,11 @@ export default defineComponent({
         if (!element) return
         element.style.setProperty('z-index', '')
         element.style.setProperty('background-color', '')
+        element.style.setProperty('color', 'unset')
       })
     }
 
     watch(step, (newStep) => {
-      // const tourBackgroundFromContainers = document.querySelectorAll('.tour-background-from')
-      // tourBackgroundFromContainers.forEach((element) => element.remove())
-
       if (newStep > props.steps.length - 1) {
         isStarted.value = false
       } else {
@@ -200,4 +187,9 @@ export default defineComponent({
   top: 32px;
   right: 32px;
 }
+
+:deep(.cross-first-line),
+:deep(.cross-second-line) {
+  opacity: 1;
+}
 </style>
diff --git a/src/components/SelectUnitModal.vue b/src/components/SelectUnitModal.vue
@@ -190,6 +190,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
+  background-color: var(--color-bg-deep);
 }
 
 .search-units {