From 7e3d3f7e36a3ad715a665533d44e5b94afa20bf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Wed, 8 Oct 2025 15:07:54 +0200 Subject: [PATCH 1/2] fix info banner warning variant bg color --- webnext/src/shared/defguard-ui/components/InfoBanner/style.scss | 2 +- webnext/src/shared/defguard-ui/scss/_themes.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss b/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss index 39381448..589665bd 100644 --- a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss +++ b/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss @@ -27,7 +27,7 @@ } &.variant-warning { - --bg-color: var(--bg-warning); + --bg-color: var(--bg-warning-transparent); --color: var(--fg-attention); --icon-color: var(--fg-attention); } diff --git a/webnext/src/shared/defguard-ui/scss/_themes.scss b/webnext/src/shared/defguard-ui/scss/_themes.scss index 55f17925..ef13c12c 100644 --- a/webnext/src/shared/defguard-ui/scss/_themes.scss +++ b/webnext/src/shared/defguard-ui/scss/_themes.scss @@ -21,6 +21,7 @@ --bg-success: var(--c-green-500); --bg-warning: var(--c-orange-500); + --bg-warning-transparent: var(--c-orange-500-transparent); --border-action: var(--c-blue-500); --border-action-disabled: var(--c-blue-300); @@ -78,6 +79,7 @@ --bg-success: var(--c-green-500); --bg-warning: var(--c-orange-500); + --bg-warning-transparent: var(--c-orange-500-transparent); --border-action: var(--c-blue-500); --border-action-disabled: var(--c-blue-300); From bb40d574036b49e1673d365e82c4f0df2775c3e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Thu, 9 Oct 2025 12:21:22 +0200 Subject: [PATCH 2/2] fix info banner --- .../defguard-ui/components/Icon/Icon.tsx | 131 +++++++++++++++++- .../Icon/icons/IconAccessSettings.tsx | 19 +++ .../components/InfoBanner/style.scss | 1 - 3 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx diff --git a/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx b/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx index f658b92e..12003592 100644 --- a/webnext/src/shared/defguard-ui/components/Icon/Icon.tsx +++ b/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 = ({ icon: iconKind, @@ -131,8 +136,130 @@ export const Icon = ({ 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]); diff --git a/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx new file mode 100644 index 00000000..5cb508a0 --- /dev/null +++ b/webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx @@ -0,0 +1,19 @@ +import type { SVGProps } from 'react'; + +export const IconAccessSettings = (props: SVGProps) => { + return ( + + + + ); +}; diff --git a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss b/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss index 589665bd..4e662917 100644 --- a/webnext/src/shared/defguard-ui/components/InfoBanner/style.scss +++ b/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; }