fix info banner (#192)

* fix info banner warning variant bg color

* fix info banner

Author: filipslezaklab

webnext/src/shared/defguard-ui/components/Icon/Icon.tsx

@@ -2,6 +2,7 @@ import { type CSSProperties, type Ref, useMemo } from 'react';
 import type { IconKindValue } from './icon-types';
 import './style.scss';
 import type { Direction } from '../../types';
+import { IconAccessSettings } from './icons/IconAccessSettings';
 import { IconAndroid } from './icons/IconAndroid';
 import { IconApple } from './icons/IconApple';
 import { IconAppStore } from './icons/IconAppstore';
@@ -61,6 +62,10 @@ const mapRotation = (kind: IconKindValue, direction: Direction): number => {
   return 0;
 };
 
+const EmptyIcon = () => {
+  return null;
+};
+
 // Color should be set by css bcs some icons have different structures like 'loader'
 export const Icon = <T extends IconKindValue>({
   icon: iconKind,
@@ -131,8 +136,130 @@ export const Icon = <T extends IconKindValue>({
         return IconGlobe;
       case 'help':
         return IconHelp;
-      default:
-        throw Error(`Unimplemented icon kind: ${iconKind}`);
+      case 'access-settings':
+        return IconAccessSettings;
+      case 'activity':
+        return EmptyIcon;
+      case 'activity-notes':
+        return EmptyIcon;
+      case 'add-user':
+        return EmptyIcon;
+      case 'analytics':
+        return EmptyIcon;
+      case 'archive':
+        return EmptyIcon;
+      case 'attention':
+        return EmptyIcon;
+      case 'check':
+        return EmptyIcon;
+      case 'clear':
+        return EmptyIcon;
+      case 'code':
+        return EmptyIcon;
+      case 'collapse':
+        return EmptyIcon;
+      case 'credit-card':
+        return EmptyIcon;
+      case 'date':
+        return EmptyIcon;
+      case 'delete':
+        return EmptyIcon;
+      case 'deploy':
+        return EmptyIcon;
+      case 'devices':
+        return EmptyIcon;
+      case 'devices-active':
+        return EmptyIcon;
+      case 'download':
+        return EmptyIcon;
+      case 'edit':
+        return EmptyIcon;
+      case 'enter':
+        return EmptyIcon;
+      case 'expand':
+        return EmptyIcon;
+      case 'filter':
+        return EmptyIcon;
+      case 'gateway':
+        return EmptyIcon;
+      case 'gift':
+        return EmptyIcon;
+      case 'github':
+        return EmptyIcon;
+      case 'groups':
+        return EmptyIcon;
+      case 'hamburger':
+        return EmptyIcon;
+      case 'info-filled':
+        return EmptyIcon;
+      case 'info-outlined':
+        return EmptyIcon;
+      case 'location':
+        return EmptyIcon;
+      case 'location-preview':
+        return EmptyIcon;
+      case 'location-tracking':
+        return EmptyIcon;
+      case 'logout':
+        return EmptyIcon;
+      case 'mail':
+        return EmptyIcon;
+      case 'manage-keys':
+        return EmptyIcon;
+      case 'menu':
+        return EmptyIcon;
+      case 'minus-circle':
+        return EmptyIcon;
+      case 'navigation-collapse':
+        return EmptyIcon;
+      case 'navigation-uncollapse':
+        return EmptyIcon;
+      case 'notification':
+        return EmptyIcon;
+      case 'one-time-password':
+        return EmptyIcon;
+      case 'openid':
+        return EmptyIcon;
+      case 'pdf':
+        return EmptyIcon;
+      case 'pie-chart':
+        return EmptyIcon;
+      case 'plus-circle':
+        return EmptyIcon;
+      case 'profile':
+        return EmptyIcon;
+      case 'protection':
+        return EmptyIcon;
+      case 'qr':
+        return EmptyIcon;
+      case 'search':
+        return EmptyIcon;
+      case 'servers':
+        return EmptyIcon;
+      case 'settings':
+        return EmptyIcon;
+      case 'sort':
+        return EmptyIcon;
+      case 'status-attention':
+        return EmptyIcon;
+      case 'status-available':
+        return EmptyIcon;
+      case 'status-important':
+        return EmptyIcon;
+      case 'support':
+        return EmptyIcon;
+      case 'transactions':
+        return EmptyIcon;
+      case 'user':
+        return EmptyIcon;
+      case 'user-active':
+        return EmptyIcon;
+      case 'users':
+        return EmptyIcon;
+      case 'webhooks':
+        return EmptyIcon;
+      case 'yubi-keys':
+        return EmptyIcon;
     }
   }, [iconKind]);
 

webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+export const IconAccessSettings = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M17.5288 12.985V12.475C17.5288 11.265 16.5388 10.275 15.3288 10.275H14.8788C13.6688 10.275 12.6788 11.265 12.6788 12.475V12.985C12.1788 13.255 11.8388 13.775 11.8388 14.375V16.465C11.8388 17.345 12.5488 18.055 13.4288 18.055H16.7788C17.6588 18.055 18.3688 17.345 18.3688 16.465V14.375C18.3688 13.775 18.0288 13.255 17.5288 12.985ZM14.8788 11.775H15.3288C15.7188 11.775 16.0288 12.085 16.0288 12.475V12.785H14.1788V12.475C14.1788 12.085 14.4888 11.775 14.8788 11.775ZM16.8688 16.475C16.8688 16.475 16.8288 16.565 16.7788 16.565H13.4288C13.4288 16.565 13.3388 16.525 13.3388 16.475V14.385C13.3388 14.385 13.3788 14.295 13.4288 14.295H16.7788C16.7788 14.295 16.8688 14.335 16.8688 14.385V16.475ZM10.1888 16.125L10.9888 17.395C10.6488 17.615 10.3388 17.785 10.0888 17.915C9.96877 18.005 9.80877 18.055 9.64877 18.055C9.50877 18.055 9.37877 18.015 9.25877 17.945C7.75877 17.165 5.63877 15.685 4.03877 13.025C1.99877 9.635 1.90877 6.325 2.03877 4.655C2.06877 4.265 2.38877 3.965 2.76877 3.965C3.97877 3.945 5.16877 3.755 6.32877 3.405C7.35877 3.095 8.33877 2.655 9.26877 2.105C9.49877 1.965 9.78877 1.965 10.0288 2.105C10.9688 2.645 11.9688 3.075 13.0088 3.385C14.1588 3.735 15.3588 3.935 16.5688 3.985C16.9488 4.005 17.2688 4.305 17.2888 4.685C17.3888 6.275 17.2188 7.925 16.7988 9.465L15.3488 9.075C15.6688 7.905 15.8188 6.665 15.8088 5.445C14.7188 5.355 13.6288 5.145 12.5788 4.835C11.5688 4.535 10.5988 4.135 9.66877 3.635C8.74877 4.145 7.77877 4.565 6.77877 4.865C5.71877 5.185 4.62877 5.385 3.51877 5.465C3.49877 6.945 3.73877 9.605 5.34877 12.285C6.66877 14.465 8.36877 15.755 9.66877 16.485C9.82877 16.395 10.0188 16.285 10.2088 16.165L10.1888 16.125Z"
+        fill="#7E8794"
+      />
+    </svg>
+  );
+};

webnext/src/shared/defguard-ui/components/InfoBanner/style.scss

@@ -52,7 +52,6 @@
         max-width: 100%;
         overflow: hidden;
         text-wrap: wrap;
-        text-wrap: balance;
         text-align: left;
       }