update designs for first page. rename components and files

apps/web/src/app/oss-routing.module.ts

@@ -39,9 +39,9 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { VaultIcons } from "@bitwarden/vault";
 
 import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap";
+import { NewDeviceVerificationNoticePageOneComponent } from "../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component";
 import { flagEnabled, Flags } from "../utils/flags";
 
-import { NewDeviceVerificationNoticeComponent } from "./../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component";
 import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component";
 import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
@@ -649,7 +649,7 @@ const routes: Routes = [
     children: [
       {
         path: "",
-        component: NewDeviceVerificationNoticeComponent,
+        component: NewDeviceVerificationNoticePageOneComponent,
         data: {
           pageIcon: VaultIcons.ExclamationTriangle,
           pageTitle: {

libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html

@@ -0,0 +1,29 @@
+<form #form (ngSubmit)="submit()">
+  <p class="tw-text-center" bitTypography="body1">
+    {{ "newDeviceVerificationNoticeContentPage1" | i18n }}
+  </p>
+
+  <div
+    class="tw-flex tw-flex-col tw-items-center tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-pb-2"
+  >
+    <p bitTypography="body2" class="text-muted tw-w-9/12">{{ formMessage }}</p>
+
+    <div class="radio-group tw-w-9/12">
+      <input type="radio" class="radio" id="option_A" />
+      <label class="unstyled">
+        {{ "newDeviceVerificationNoticePage1OptionA" | i18n }}
+      </label>
+    </div>
+
+    <div class="radio-group tw-w-9/12">
+      <input type="radio" class="radio" id="option_A" />
+      <label class="unstyled">
+        {{ "newDeviceVerificationNoticePage1OptionB" | i18n }}
+      </label>
+    </div>
+  </div>
+
+  <button bitButton type="submit" buttonType="primary" class="tw-w-full tw-mt-4">
+    {{ "continue" | i18n }}
+  </button>
+</form>

libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts

@@ -3,15 +3,15 @@ import { Component, OnInit } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { TypographyModule } from "@bitwarden/components";
+import { ButtonModule, TypographyModule } from "@bitwarden/components";
 
 @Component({
   standalone: true,
-  selector: "app-new-device-verification-notice",
-  templateUrl: "./new-device-verification-notice.component.html",
-  imports: [CommonModule, JslibModule, TypographyModule],
+  selector: "app-new-device-verification-notice-page-one",
+  templateUrl: "./new-device-verification-notice-page-one.component.html",
+  imports: [CommonModule, JslibModule, TypographyModule, ButtonModule],
 })
-export class NewDeviceVerificationNoticeComponent implements OnInit {
+export class NewDeviceVerificationNoticePageOneComponent implements OnInit {
   formMessage: string;
   constructor(private i18nService: I18nService) {}
 

libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html

@@ -1,19 +0,0 @@
-<form #form (ngSubmit)="submit()">
-  <p bitTypography="body1">{{ "newDeviceVerificationNoticeContentPage1" | i18n }}</p>
-
-  <p bitTypography="body2" class="text-muted">{{ formMessage }}</p>
-
-  <div class="radio-group">
-    <input type="radio" class="radio" id="option_A" />
-    <label class="unstyled">
-      {{ "newDeviceVerificationNoticePage1OptionA" | i18n }}
-    </label>
-  </div>
-
-  <div class="radio-group">
-    <input type="radio" class="radio" id="option_A" />
-    <label class="unstyled">
-      {{ "newDeviceVerificationNoticePage1OptionB" | i18n }}
-    </label>
-  </div>
-</form>