From 4248a731f7f3d570c404d3211073ae2849fe52c4 Mon Sep 17 00:00:00 2001
From: Esther Lizardo <100808713+Esther-Lita@users.noreply.github.com>
Date: Mon, 30 Oct 2023 14:35:35 +0000
Subject: [PATCH] Error message styling

Improving the error message styling to optimise most users first look when misconfiguring App URL on Hanko Cloud

Commit Type: chore
---
 frontend/elements/example.css                      | 7 ++++---
 frontend/elements/src/components/error/styles.sass | 6 ++++--
 frontend/elements/src/components/icons/styles.sass | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/elements/example.css b/frontend/elements/example.css
index ce9d50b92..51eaeeede 100644
--- a/frontend/elements/example.css
+++ b/frontend/elements/example.css
@@ -249,7 +249,7 @@
 
 .hanko_exclamationMark {
     fill: var(--error-color, #e82020);
-    padding-right: 5px
+    padding-right: 1px 6px 0 4px
 }
 
 .hanko_loadingSpinnerWrapperIcon {
@@ -338,12 +338,13 @@
     border-width: var(--border-width, 1px);
     color: var(--error-color, #e82020);
     background: var(--background-color, white);
-    padding: .25rem;
+    padding: .50rem 1.5rem .50rem .50rem;
     margin: var(--item-margin, 0.5rem 0);
     min-height: var(--item-height, 42px);
     display: flex;
     align-items: center;
-    box-sizing: border-box
+    box-sizing: border-box;
+    line-height: 20px;
 }
 
 .hanko_errorMessage>span:first-child {
diff --git a/frontend/elements/src/components/error/styles.sass b/frontend/elements/src/components/error/styles.sass
index fa79132f4..c7c338907 100644
--- a/frontend/elements/src/components/error/styles.sass
+++ b/frontend/elements/src/components/error/styles.sass
@@ -8,14 +8,16 @@
   color: variables.$error-color
   background: variables.$background-color
 
-  padding: .25rem
+  padding: .50rem 1.5rem .50rem .50rem 
   margin: variables.$item-margin
   min-height: variables.$item-height
 
   display: flex
-  align-items: center
+  align-items: start
   box-sizing: border-box
 
+  line-height: 20px
+
   &>span:first-child
     display: inline-flex
 
diff --git a/frontend/elements/src/components/icons/styles.sass b/frontend/elements/src/components/icons/styles.sass
index 4fd72d6b1..78bbeb15a 100644
--- a/frontend/elements/src/components/icons/styles.sass
+++ b/frontend/elements/src/components/icons/styles.sass
@@ -35,7 +35,7 @@
 .exclamationMark
   @extend .icon
   fill: variables.$error-color
-  padding-right: 5px
+  padding: 1px 6px 0 4px
 
 // Loading Spinner Styles