Posture errors layout (#909)

Author: j-chmielewski

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 = <T extends IconKindValue>({
         return IconFileAdd;
       case 'globe':
         return IconGlobe;
+      case 'globe-blocked':
+        return IconGlobeBlocked;
       case 'help':
         return IconHelp;
       case 'access-settings':

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',

new-ui/src/shared/components/Icon/icons/IconGlobeBlocked.tsx

@@ -0,0 +1,54 @@
+import type { SVGProps } from 'react';
+
+export const IconGlobeBlocked = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      className="stroke-icon"
+      width="26"
+      height="24"
+      viewBox="0 0 26 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g opacity="0.5">
+        <path
+          d="M13.9422 22.659C13.3299 22.7681 12.7176 22.8149 12.0739 22.8149C6.06058 22.8149 1.17773 17.965 1.17773 11.9923C1.17773 6.01958 6.06058 1.16968 12.0739 1.16968C17.6632 1.16968 22.2635 5.34901 22.8915 10.7291"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.0735 22.8149C9.51436 22.8149 7.44189 17.965 7.44189 11.9923C7.44189 6.01958 9.51436 1.16968 12.0735 1.16968C14.1931 1.16968 15.983 4.5225 16.5325 9.0917"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.7015 16.0468C12.3404 16.0468 11.9636 16.0468 11.5867 16.0468C7.0493 15.9688 3.43819 14.8928 1.16162 14.0195"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M22.9696 7.9375C20.6145 8.84198 16.6266 10.0428 11.5867 9.96479C7.0493 9.88682 3.43819 8.81079 1.16162 7.9375"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M20.2379 22.8304C22.7698 22.8304 24.8224 20.7916 24.8224 18.2768C24.8224 15.7619 22.7698 13.7231 20.2379 13.7231C17.7059 13.7231 15.6533 15.7619 15.6533 18.2768C15.6533 20.7916 17.7059 22.8304 20.2379 22.8304Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M17.0508 15.1111L23.3624 21.3957"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};

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));
+}

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 (
     <div className="location-card-posture-check-fail-view">
       <Divider spacing={ThemeSpacing.Md} />
-      <Icon className="posture-warning-icon" icon={IconKind.WarningFilled} size={48} />
+      <Icon
+        className="posture-error-icon"
+        icon={IconKind.GlobeBlocked}
+        size={48}
+        staticColor={ThemeVariable.FgWhite70}
+      />
       <SizedBox height={ThemeSpacing.Md} />
       <LocationViewHeader title="Posture check failed">
-        <p className="error">
-          {postureError ?? 'Your device did not pass posture check.'}
-        </p>
+        <div className="posture-errors">
+          {postureErrors.map((error) => (
+            <p className="error" key={error}>
+              {error}
+            </p>
+          ))}
+        </div>
       </LocationViewHeader>
       <SizedBox height={ThemeSpacing.Xl} />
-      <Button
-        text="Try again"
-        variant={ButtonVariant.Secondary}
-        onClick={backToLocation}
-      />
+      <Button text="Got it" variant={ButtonVariant.Secondary} onClick={backToLocation} />
     </div>
   );
 };

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);
     }
   }