Error message styling

Improving the error message styling to optimise most users first look when misconfiguring App URL on Hanko Cloud Commit Type: chore
teamhanko · Oct 30, 2023 · 4248a73 · 4248a73
1 parent 25b6725
commit 4248a73
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -35,7 +35,7 @@
 .exclamationMark
   @extend .icon
   fill: variables.$error-color
-  padding-right: 5px
+  padding: 1px 6px 0 4px
 
 // Loading Spinner Styles