simplify native query error design (#23244)

frontend/src/metabase/query_builder/components/VisualizationError.jsx

@@ -9,6 +9,7 @@ import cx from "classnames";
 import MetabaseSettings from "metabase/lib/settings";
 import ErrorMessage from "metabase/components/ErrorMessage";
 import ErrorDetails from "metabase/components/ErrorDetails/ErrorDetails";
+import Icon from "metabase/components/Icon";
 import {
   QueryError,
   QueryErrorIcon,
@@ -144,9 +145,7 @@ class VisualizationError extends Component {
       return (
         <QueryError className={className}>
           <QueryErrorIcon>
-            <svg viewBox="0 0 32 32" width="64" height="64" fill="currentcolor">
-              <path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z " />
-            </svg>
+            <Icon name="warning" size="40" />
           </QueryErrorIcon>
           <QueryErrorMessage>{processedError}</QueryErrorMessage>
         </QueryError>

frontend/src/metabase/query_builder/components/VisualizationError.styled.jsx

@@ -12,10 +12,7 @@ export const QueryError = styled.div`
 
 export const QueryErrorIcon = styled.div`
   color: ${color("error")};
-  padding: ${space(3)};
-  margin-bottom: ${space(3)};
-  border: 0.25rem solid ${color("accent3")};
-  border-radius: 50%;
+  margin-bottom: ${space(2)};
 `;
 
 export const QueryErrorMessage = styled.div`