Merge pull request #873 from nidhi-kala/clearing-visual-regressions

Value component error icon
evidence-dev · May 16, 2023 · b768cf9 · b768cf9
2 parents d2e1a17 + 1ac6087
commit b768cf9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/afraid-planets-sip.md b/.changeset/afraid-planets-sip.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/components': patch
+---
+
+Error icon in value component is now vertically centered and color is white
diff --git a/sites/example-project/src/components/icons/HelpCircleIcon.svelte b/sites/example-project/src/components/icons/HelpCircleIcon.svelte
@@ -33,5 +33,6 @@
 	svg {
 		margin: auto;
 		display: block;
+		height: 100%;
 	}
 </style>
diff --git a/sites/example-project/src/components/viz/Value.svelte b/sites/example-project/src/components/viz/Value.svelte
@@ -85,7 +85,7 @@
 	<span class="error">
 		<span class="error-label">Error</span>
 		<span class="additional-info-icon">
-			<HelpCircleIcon height="18" width="18" verticalOffset="2" color="--grey-000" />
+			<HelpCircleIcon height="18" width="18" verticalOffset="1" color="--grey-100" />
 		</span>
 		<span class="error-msg">{error}</span>
 	</span>
@@ -117,7 +117,10 @@
 	}
 
 	.additional-info-icon {
-		display: inline;
+		display: flex;
+		align-items: center;
+		height: 100%;
+		width: 100%;
 		vertical-align: middle;
 		width: 14px;
 		color: white;