diff --git a/new-ui/src/shared/components/Icon/Icon.tsx b/new-ui/src/shared/components/Icon/Icon.tsx index 73337ee7c..a43cd6401 100644 --- a/new-ui/src/shared/components/Icon/Icon.tsx +++ b/new-ui/src/shared/components/Icon/Icon.tsx @@ -61,6 +61,7 @@ import { IconFiltration } from './icons/IconFiltration'; import { IconGateway } from './icons/IconGateway'; import { IconGithub } from './icons/IconGithub'; import { IconGlobe } from './icons/IconGlobe'; +import { IconGlobeBlocked } from './icons/IconGlobeBlocked'; import { IconGroups } from './icons/IconGroups'; import { IconHamburger } from './icons/IconHamburger'; import { IconHelp } from './icons/IconHelp'; @@ -291,6 +292,8 @@ export const Icon = ({ return IconFileAdd; case 'globe': return IconGlobe; + case 'globe-blocked': + return IconGlobeBlocked; case 'help': return IconHelp; case 'access-settings': diff --git a/new-ui/src/shared/components/Icon/icon-types.ts b/new-ui/src/shared/components/Icon/icon-types.ts index e3cff9a34..0bb5f2ac6 100644 --- a/new-ui/src/shared/components/Icon/icon-types.ts +++ b/new-ui/src/shared/components/Icon/icon-types.ts @@ -38,6 +38,7 @@ export const IconKind = { PieChart: 'pie-chart', Notification: 'notification', Globe: 'globe', + GlobeBlocked: 'globe-blocked', Groups: 'groups', OpenInNewWindow: 'open-in-new-window', Users: 'users', diff --git a/new-ui/src/shared/components/Icon/icons/IconGlobeBlocked.tsx b/new-ui/src/shared/components/Icon/icons/IconGlobeBlocked.tsx new file mode 100644 index 000000000..c99baf29c --- /dev/null +++ b/new-ui/src/shared/components/Icon/icons/IconGlobeBlocked.tsx @@ -0,0 +1,54 @@ +import type { SVGProps } from 'react'; + +export const IconGlobeBlocked = (props: SVGProps) => { + return ( + + + + + + + + + + + ); +}; diff --git a/new-ui/src/shared/components/Icon/style.scss b/new-ui/src/shared/components/Icon/style.scss index 6a81db60d..bb973dd5d 100644 --- a/new-ui/src/shared/components/Icon/style.scss +++ b/new-ui/src/shared/components/Icon/style.scss @@ -39,3 +39,9 @@ .icon[style*='--icon-color'] svg circle { stroke: var(--icon-color); } + +.icon svg.stroke-icon path, +.icon[style*='--icon-color'] svg.stroke-icon path { + fill: none; + stroke: var(--icon-color, var(--c-white-100)); +} diff --git a/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/LocationCardPostureCheckFailView.tsx b/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/LocationCardPostureCheckFailView.tsx index a2cf7c52e..bdc59c1f3 100644 --- a/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/LocationCardPostureCheckFailView.tsx +++ b/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/LocationCardPostureCheckFailView.tsx @@ -1,5 +1,5 @@ import './style.scss'; -import { ThemeSpacing } from '../../../../types'; +import { ThemeSpacing, ThemeVariable } from '../../../../types'; import { Button } from '../../../Button/Button'; import { ButtonVariant } from '../../../Button/types'; import { Divider } from '../../../Divider/Divider'; @@ -17,22 +17,34 @@ export const LocationCardPostureCheckFailView = () => { setView(LocationCardViews.Default); }; + const postureErrors = postureError + ? postureError + .split(',') + .map((error) => error.trim()) + .filter(Boolean) + : ['Your device did not pass posture check.']; + return (
- + -

- {postureError ?? 'Your device did not pass posture check.'} -

+
+ {postureErrors.map((error) => ( +

+ {error} +

+ ))} +
-
); }; diff --git a/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/style.scss b/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/style.scss index c42ff8937..72b5f0ec0 100644 --- a/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/style.scss +++ b/new-ui/src/shared/components/LocationCard/views/LocationCardPostureCheckFailView/style.scss @@ -3,23 +3,32 @@ flex-direction: column; align-items: center; - .posture-warning-icon { + .posture-error-icon { display: block; - - svg path { - fill: var(--fg-white-70); - } + width: 48px; + height: 48px; } .location-card-view-header { align-items: center; + row-gap: var(--spacing-sm); text-align: center; > .title { - color: var(--fg-white-70); + font: var(--t-body-sm-600); + color: var(--fg-white-100); + } + + .posture-errors { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-xs); } p.error { + margin: 0; + font: var(--t-body-xs-400); color: var(--fg-white-70); } }