From d786171e94b54c6c534ed62eb9e653e9101ac0c1 Mon Sep 17 00:00:00 2001
From: Tom Aarsen <37621491+tomaarsen@users.noreply.github.com>
Date: Tue, 7 Feb 2023 11:59:04 +0100
Subject: [PATCH] style: Rely on box-shadow to provide the secondary underline
 (#2283)

Closes #2282

Hello!

# Description

See #2282 for more details. Note that this change replaces the existing
underline with a new one, and the new one is slightly differently
aligned! I'd like for someone to approve this design change.
This screenshot shows the before (above) and after (below):

![image](https://user-images.githubusercontent.com/37621491/216601388-42133013-fd44-485c-9ae8-bf52d5ad603a.png)

Furthermore, I'm unsure about the removal of
```html
    &.excluded :deep() {
      .highlight__content {
        &:after {
          content: none;
        }
      }
    }
```
and I'd like to point out that there are [various other
places](https://github.com/argilla-io/argilla/search?q=highlight__content)
that modify `highlight__content` or `highlight__content::after`, which
may need to be updated as well. If possible, someone with more
experience of the codebase can have a look at this.

**Type of change**

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] Documentation update

**How Has This Been Tested**

(Please describe the tests that you ran to verify your changes. And
ideally, reference `tests`)

- [X] Merely a visual inspection.

**Checklist**

- [x] I have merged the original branch into my forked branch
- [x] follows the style guidelines of this project
- [x] I did a self-review of my code
- [x] My changes generate no new warnings

- Tom Aarsen
---
 .../token-classifier/results/TextSpanStatic.vue  | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
index fa55d41c41..3f1543e498 100755
--- a/frontend/components/token-classifier/results/TextSpanStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -193,14 +193,7 @@ $hue: 360;
       padding-bottom: 3px;
       border-bottom: 5px solid $rcolor;
       position: relative;
-      &:after {
-        content: "";
-        border-top: 1px solid darken($rcolor, 50%);
-        position: absolute;
-        top: 26px;
-        left: 0;
-        right: 0;
-      }
+      box-shadow: 0px 1px 0px darken($rcolor, 50%);
     }
     &.annotation :deep(.highlight__tooltip:after) {
       border-color: $rcolor transparent transparent transparent;
@@ -208,13 +201,6 @@ $hue: 360;
     &.prediction :deep(.highlight__tooltip:after) {
       border-color: transparent transparent $rcolor transparent;
     }
-    &.excluded :deep() {
-      .highlight__content {
-        &:after {
-          content: none;
-        }
-      }
-    }
     &.active,
     &.tag:hover {
       border: 2px solid darken($rcolor, 50%);