Fix dialog and tooltip design

resources/scripts/components/elements/dialog/DialogIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
+import classNames from 'classnames';
+
+interface Props {
+    type: 'danger' | 'info' | 'success' | 'warning';
+    className?: string;
+}
+
+export default ({ type, className }: Props) => {
+    const [ Component, styles ] = (function (): [ (props: React.ComponentProps<'svg'>) => JSX.Element, string ] {
+        switch (type) {
+            case 'danger':
+                return [ ShieldExclamationIcon, 'bg-red-500 text-red-50' ];
+            case 'warning':
+                return [ ExclamationIcon, 'bg-yellow-600 text-yellow-50' ];
+            case 'success':
+                return [ CheckIcon, 'bg-green-600 text-green-50' ];
+            case 'info':
+                return [ InformationCircleIcon, 'bg-primary-500 text-primary-50' ];
+        }
+    })();
+
+    return (
+        <div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}>
+            <Component className={'w-6 h-6'}/>
+        </div>
+    );
+};