From 704620e2f7c51ca6cb1d28fa1eeb8d0fdb3f64b3 Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 23 Aug 2022 17:17:11 +0200
Subject: [PATCH] More readable link styling in ErrorCards.

---
 frontend/src/App.vue                  |  2 +-
 frontend/src/components/ErrorCard.vue | 16 ++++++++++++++--
 frontend/src/scss/_variables.scss     |  6 +++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 264ebcc..a0ee679 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -50,7 +50,7 @@ a {
     }
 
     &:focus {
-        outline: 0.1em solid $link-hover-color;
+        outline: $link-focus-outline;
     }
 }
 
diff --git a/frontend/src/components/ErrorCard.vue b/frontend/src/components/ErrorCard.vue
index 491996e..967a63e 100644
--- a/frontend/src/components/ErrorCard.vue
+++ b/frontend/src/components/ErrorCard.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
+import { onMounted, ref } from "vue";
 
 const element = ref<HTMLElement>();
 
 function scrollIntoView() {
     element.value?.scrollIntoView({
         behavior: "smooth",
-        block: "nearest"
+        block: "nearest",
     });
 }
 
@@ -33,5 +33,17 @@ onMounted(scrollIntoView);
 
     background-color: $error-card-background-color;
     color: $error-card-color;
+
+    a {
+        color: $error-card-link-color;
+
+        &:hover {
+            color: $error-card-link-hover-color;
+        }
+
+        &:focus {
+            outline: $error-card-link-focus-outline;
+        }
+    }
 }
 </style>
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index 46d743d..a147576 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -75,7 +75,8 @@ $h2-margin: 0.5em 0;
 
 // Links
 $link-color: $variant-color-warning;
-$link-hover-color: $variant-color-warning;
+$link-hover-color: $link-color;
+$link-focus-outline: 0.1em solid $link-hover-color;
 
 // Form
 $label-font-weight: 600;
@@ -115,6 +116,9 @@ $error-card-border-radius: 0.5em;
 $error-card-font-weight: 600;
 $error-card-background-color: lighten($variant-color-danger, 10%);
 $error-card-color: $page-background-color;
+$error-card-link-color: darken($variant-color-danger, 30%);
+$error-card-link-hover-color: $error-card-link-color;
+$error-card-link-focus-outline: 0.1em solid $error-card-link-hover-color;
 
 // Node preview
 $node-preview-card-padding: 0.75em 1em;