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 1/5] 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
 

From 6c3c5840a51b1c2b79735ffb8f6fe006879815da Mon Sep 17 00:00:00 2001
From: Esther Lizardo <100808713+Esther-Lita@users.noreply.github.com>
Date: Mon, 30 Oct 2023 14:54:38 +0000
Subject: [PATCH 2/5] Update example.css

changed the "align-items" property to  "start" in the frontend/elements/example.css file

Commit Type: chore
---
 frontend/elements/example.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/elements/example.css b/frontend/elements/example.css
index 51eaeeede..978706ea6 100644
--- a/frontend/elements/example.css
+++ b/frontend/elements/example.css
@@ -342,7 +342,7 @@
     margin: var(--item-margin, 0.5rem 0);
     min-height: var(--item-height, 42px);
     display: flex;
-    align-items: center;
+    align-items: start;
     box-sizing: border-box;
     line-height: 20px;
 }

From f18726ff17f40769ecfa314f42c26134af0d381a Mon Sep 17 00:00:00 2001
From: Esther Lizardo <100808713+Esther-Lita@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:18:44 +0000
Subject: [PATCH 3/5] Updated

---
 frontend/elements/example.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/elements/example.css b/frontend/elements/example.css
index 978706ea6..42585c88d 100644
--- a/frontend/elements/example.css
+++ b/frontend/elements/example.css
@@ -249,7 +249,7 @@
 
 .hanko_exclamationMark {
     fill: var(--error-color, #e82020);
-    padding-right: 1px 6px 0 4px
+    padding: 1px 6px 0 4px
 }
 
 .hanko_loadingSpinnerWrapperIcon {

From 777c086b1edc67fdf7218fc1408b60720c0a5465 Mon Sep 17 00:00:00 2001
From: Esther Lizardo <100808713+Esther-Lita@users.noreply.github.com>
Date: Mon, 6 Nov 2023 16:04:21 +0000
Subject: [PATCH 4/5] Update frontend/elements/src/components/error/styles.sass

Commit Type: chore

Co-authored-by: bjoern-m <56024829+bjoern-m@users.noreply.github.com>
---
 frontend/elements/src/components/error/styles.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/elements/src/components/error/styles.sass b/frontend/elements/src/components/error/styles.sass
index c7c338907..0c518cc2c 100644
--- a/frontend/elements/src/components/error/styles.sass
+++ b/frontend/elements/src/components/error/styles.sass
@@ -8,7 +8,7 @@
   color: variables.$error-color
   background: variables.$background-color
 
-  padding: .50rem 1.5rem .50rem .50rem 
+  padding: .5rem
   margin: variables.$item-margin
   min-height: variables.$item-height
 

From 83e0768eb8fdd0e8c0a51fcc69004a9399aaf747 Mon Sep 17 00:00:00 2001
From: Esther Lizardo <100808713+Esther-Lita@users.noreply.github.com>
Date: Mon, 6 Nov 2023 16:04:34 +0000
Subject: [PATCH 5/5] Update frontend/elements/src/components/error/styles.sass

Commit Type: chore

Co-authored-by: bjoern-m <56024829+bjoern-m@users.noreply.github.com>
---
 frontend/elements/src/components/error/styles.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/elements/src/components/error/styles.sass b/frontend/elements/src/components/error/styles.sass
index 0c518cc2c..914690b93 100644
--- a/frontend/elements/src/components/error/styles.sass
+++ b/frontend/elements/src/components/error/styles.sass
@@ -16,7 +16,7 @@
   align-items: start
   box-sizing: border-box
 
-  line-height: 20px
+  line-height: 1.4
 
   &>span:first-child
     display: inline-flex