Tweak arrow colors

exercism · Jan 15, 2025 · d5fce3d · d5fce3d
1 parent df14b39
commit d5fce3d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/app/css/bootcamp/components/editor-information-tooltip.css b/app/css/bootcamp/components/editor-information-tooltip.css
@@ -18,13 +18,27 @@
         @apply mb-10;
     }
 
+    .tooltip-arrow {
+        width: 0;
+        height: 0;
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-right: 10px solid;
+
+        content: "";
+        position: absolute;
+        top: 6px;
+        left: -10px;
+    }
+
     &.description {
         @apply py-16 px-20;
-        @apply bg-white text-primary-blue;
+        @apply bg-white text-primary-blue border-2 border-blue-500;
 
         filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));
+
         .tooltip-arrow {
-            @apply bg-white;
+            border-right-color: rgb(59 130 246);
         }
     }
 
@@ -33,22 +47,21 @@
 
         filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));
 
-        .tooltip-arrow {
-            @apply bg-white border-2 border-red-500;
-        }
-
         h2 {
             @apply text-darkRed;
             @apply font-semibold;
             @apply py-8 px-20;
             @apply relative z-tooltip-content bg-red-100;
-            @apply rounded-t-8;
+            @apply rounded-t-[6px];
         }
         .content {
             @apply text-textColor1;
             @apply pt-10 px-20 pb-12;
             @apply relative z-tooltip-content bg-white;
             @apply rounded-b-8;
         }
+        .tooltip-arrow {
+            border-right-color: rgb(239 68 68);
+        }
     }
 }
diff --git a/...otcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts b/...otcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
@@ -76,11 +76,7 @@ export class InformationWidget extends WidgetType {
   private createArrow() {
     if (!this.tooltip) return
     this.arrowElement = document.createElement('div')
-    const arrowSize = '16px'
-    this.arrowElement.style.width = arrowSize
-    this.arrowElement.style.height = arrowSize
     this.arrowElement.classList.add('tooltip-arrow')
-    this.arrowElement.style.position = 'absolute'
     this.tooltip.appendChild(this.arrowElement)
   }
 
@@ -126,9 +122,7 @@ export class InformationWidget extends WidgetType {
       })
 
       Object.assign(this.arrowElement!.style, {
-        left: `${-this.arrowElement!.offsetWidth / 2}px`,
         top: arrow?.y != null ? `${arrow.y}px` : '',
-        transform: 'rotate(45deg)',
       })
     })
   }