From d5fce3d94ff733040629b5ec5caa988ca0e7fd2b Mon Sep 17 00:00:00 2001
From: Jeremy Walker <jez.walker@gmail.com>
Date: Wed, 15 Jan 2025 13:54:46 +0000
Subject: [PATCH] Tweak arrow colors

---
 .../components/editor-information-tooltip.css | 27 ++++++++++++++-----
 .../information-widget.ts                     |  6 -----
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/css/bootcamp/components/editor-information-tooltip.css b/app/css/bootcamp/components/editor-information-tooltip.css
index e369f763b8..726c9899ca 100644
--- 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,16 +47,12 @@
 
         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;
@@ -50,5 +60,8 @@
             @apply relative z-tooltip-content bg-white;
             @apply rounded-b-8;
         }
+        .tooltip-arrow {
+            border-right-color: rgb(239 68 68);
+        }
     }
 }
diff --git a/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts b/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
index 2d7410474d..34c105d798 100644
--- a/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
+++ b/app/javascript/components/bootcamp/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)',
       })
     })
   }