feat: review icons and windows text

Author: peterpeterparker

src/components/hero/hero.tsx

@@ -1,6 +1,6 @@
-import { Component, ComponentInterface, h, Host } from '@stencil/core';
-import {IconFingerPrint} from '../../icons/fingerprint';
+import {Component, ComponentInterface, h, Host} from '@stencil/core';
 import {IconLock} from '../../icons/lock';
+import {IconPerson} from '../../icons/person';
 import i18n from '../../stores/i18n.store';
 
 @Component({
@@ -16,11 +16,11 @@ export class Hero implements ComponentInterface {
         <h2>{i18n.state.hero.title}</h2>
 
         <div>
-          <IconLock />
+          <IconPerson />
           <p innerHTML={i18n.state.hero.authentication}></p>
         </div>
         <div>
-          <IconFingerPrint />
+          <IconLock />
           <p innerHTML={i18n.state.hero.password_less}></p>
         </div>
       </Host>

src/components/requirements/requirements.tsx

@@ -1,7 +1,7 @@
 import {Component, h, Host} from '@stencil/core';
 import {IconDevices} from '../../icons/devices';
-import {IconSmartphone} from '../../icons/smartphone';
 import i18n from '../../stores/i18n.store';
+import {IconFingerPrint} from '../../icons/fingerprint';
 
 @Component({
   tag: 'what-is-ii-requirements',
@@ -16,13 +16,14 @@ export class Requirements {
         <h2>{i18n.state.requirements.title}</h2>
 
         <div>
-          <IconDevices />
+          <IconFingerPrint />
           <p>{i18n.state.requirements.biometrics}</p>
         </div>
         <div>
-          <IconSmartphone />
+          <IconDevices />
           <p innerHTML={i18n.state.requirements.android}></p>
           <p innerHTML={i18n.state.requirements.ios}></p>
+          <p innerHTML={i18n.state.requirements.windows}></p>
         </div>
       </Host>
     );

src/i18n/en.ts

@@ -13,7 +13,8 @@ export const en: I18n = {
     title: 'Devices and Requirements',
     biometrics: 'If your device does not support biometric identification (Face ID, Windows Hello, etc) you can use a security key (YubiKey) or a Ledger to authenticate.',
     android: '<strong>Android</strong> - Works on Chrome with biometrics or other authentication hardware.',
-    ios: '<strong>iOS</strong> - Works on any up-to-date device with Face/Touch ID.'
+    ios: '<strong>Apple</strong> - Works on any up-to-date device with Face/Touch ID.',
+    windows: '<strong>Windows</strong> - Works on any up-to-date device supporting Windows Hello.'
   },
   anchor: {
     title: "Creating an Identity Anchor",

src/icons/person.tsx

@@ -0,0 +1,14 @@
+import {FunctionalComponent, h} from '@stencil/core';
+
+// Source: https://fonts.google.com/icons?selected=Material%20Icons%3Aperson%3A
+export const IconPerson: FunctionalComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="#000000">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+  </svg>
+);

src/types/i18n.ts

@@ -11,6 +11,7 @@ export interface I18nRequirements {
   biometrics: string;
   android: string;
   ios: string;
+  windows: string;
 }
 
 export interface I18nAnchor {