Skip to content

fix info banner #192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 9, 2025
Merged

fix info banner #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e3d3f7
fix info banner warning variant bg color
filipslezaklab Oct 8, 2025
bb40d57
fix info banner
filipslezaklab Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 129 additions & 2 deletions webnext/src/shared/defguard-ui/components/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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]);

Expand Down
19 changes: 19 additions & 0 deletions webnext/src/shared/defguard-ui/components/Icon/icons/IconAccessSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
3 changes: 1 addition & 2 deletions webnext/src/shared/defguard-ui/components/InfoBanner/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -52,7 +52,6 @@
max-width: 100%;
overflow: hidden;
text-wrap: wrap;
text-wrap: balance;
text-align: left;
}

Expand Down
2 changes: 2 additions & 0 deletions webnext/src/shared/defguard-ui/scss/_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down