From ca563cf8fbc9bf886c93edb715f611c4f5fa8120 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 5 May 2022 15:40:28 -0600
Subject: [PATCH] Use the same style for webcomponent validation messages as
 legacy messages, update both to latest webcomponent style.

---
 .../Et2InputWidget/Et2InputWidget.ts          | 13 ---------
 api/templates/default/etemplate2.css          | 29 +++++++------------
 2 files changed, 11 insertions(+), 31 deletions(-)

diff --git a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
index 767f7d6a04..8cf685aef9 100644
--- a/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
+++ b/api/js/etemplate/Et2InputWidget/Et2InputWidget.ts
@@ -57,19 +57,6 @@ const Et2InputWidgetMixin = (superclass) =>
 				.input-group__container > .input-group__input ::slotted(.form-control) {
 					width: 100%;
 				}
-				/* Validation error styles */
-				::slotted(lion-validation-feedback[type]) {
-					position: absolute;
-					padding: 5px 1ex;
-					background-color: white;
-					border: 1px solid;
-					border-color: var(--primary-color);
-					z-index: 1;
-				}
-				::slotted(lion-validation-feedback[type=error])
-				{
-					border-color: red;
-				}
 				`
 			];
 		}
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 6e63fdcc33..80ad4ea9c3 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -246,7 +246,6 @@ label.et2_label.et2_label_empty > * {
 #msg,
 .message {
     color: red;
-    font-style: italic;
 }
 
 input.et2_url {
@@ -2025,33 +2024,27 @@ table.et2_grid tbody.ui-sortable:not(.ui-sortable-disabled) > tr:not(.th) {
  * Message styles
  */
 /* Style used for a generic message (such as success messages or validation errors) */
-div.message {
+div.message, lion-validation-feedback[type] {
     display: block;
-    border: 1px solid gray;
-    padding: 3px 3px 3px 22px;
-    margin: 5px 0px 5px 0px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    background-repeat: no-repeat;
-    background-position: 3px center;
+    border: 1px solid;
+    border-color: var(--primary-color, gray);
+    background-color: white;
+    padding: 5px 1ex;
+    margin: 0px;
     clear: left;
     max-width: 500px;
 }
 
-div.message.floating {
-    display: inline-block;
-    margin: 0px 5px 0px 5px;
+div.message.floating, lion-validation-feedback[type] {
+    position: absolute;
+    margin: 0px;
+    z-index: 1;
 }
 
-.message.validation_error {
+.message.validation_error, lion-validation-feedback[type="error"] {
     color: #a93030;
-    font-style: italic;
-    background-color: #f3d4d0;
     border-color: #a93030;
-    background-image: url(images/error.png);
     background-repeat: no-repeat;
-    padding-left: 20px;
 }
 
 .message.success {