update Angular forms

Author: GoodDayForSurf

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/single-card/single-card.component.scss

@@ -32,7 +32,10 @@
 
       .description {
         color: var(--base-text-color-alpha-7);
-        line-height: 18px;
+        line-height: 16px;
+        font-size: 12px;
+        margin-top: 32px;
+        text-align: center;
       }
     }
   }

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.html

@@ -34,23 +34,20 @@
       </dxo-button-options>
     </dxi-item>
 
-    <dxi-item>
-      <div class="login-link">
-        Have an account? <a routerLink="/login">Sign In</a>
-      </div>
-    </dxi-item>
-
     <ng-container *dxTemplate="let item of 'createAccountTemplate'">
       <div>
         <span class="dx-button-text">
           <ng-container *ngIf="loading; else notLoading">
             <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
           </ng-container>
-  
+
           <ng-template #notLoading>Create a new account</ng-template>
         </span>
       </div>
     </ng-container>
 
   </dx-form>
+  <div class="login-link">
+    Have an account? <a routerLink="/login">Sign In</a>
+  </div>
 </form>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/create-account-form/create-account-form.component.scss

@@ -1,8 +1,7 @@
 .create-account-form {
   .policy-info {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
 
     a {
@@ -12,7 +11,9 @@
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    padding: 6px 0 32px 0;
+    border-bottom: 1px solid var(--border-color);
   }
 }

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.html

@@ -24,16 +24,6 @@
       </dxo-button-options>
     </dxi-item>
 
-    <dxi-item>
-      <div class="link">
-        <a routerLink="/reset-password">Forgot password?</a>
-      </div>
-    </dxi-item>
-
-    <dxi-item itemType="button">
-      <dxo-button-options text="Create an account" width="100%" [onClick]="onCreateAccountClick"></dxo-button-options>
-    </dxi-item>
-
     <ng-container *dxTemplate="let item of 'signInTemplate'">
       <div>
         <span class="dx-button-text">
@@ -46,4 +36,8 @@
     </ng-container>
 
   </dx-form>
+  <div class="link">
+    <a routerLink="/reset-password">Forgot password?</a>
+  </div>
+  <dx-button text="Create an account" width="100%"  (click)="onCreateAccountClick()"></dx-button>
 </form>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.scss

@@ -1,16 +1,12 @@
 .login-form {
   .link {
     text-align: center;
-    font-size: 16px;
+    font-size: 12px;
     font-style: normal;
-
-    a {
-      text-decoration: none;
-    }
+    margin: 6px 0 50px;
   }
 
   ::ng-deep .form-text {
-    margin: 10px 0;
     color: var(--base-text-color-alpha-7);
   }
 }

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/login-form/login-form.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, NgModule } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { DxFormModule } from 'devextreme-angular/ui/form';
+import { DxButtonModule } from 'devextreme-angular/ui/button';
 import { DxLoadIndicatorModule } from 'devextreme-angular/ui/load-indicator';
 import notify from 'devextreme/ui/notify';
 import { AuthService } from '../../services';
@@ -40,6 +41,7 @@ export class LoginFormComponent {
     CommonModule,
     RouterModule,
     DxFormModule,
+    DxButtonModule,
     DxLoadIndicatorModule
   ],
   declarations: [ LoginFormComponent ],

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.html

@@ -13,11 +13,6 @@
         [elementAttr]="{ class: 'submit-button' }">
       </dxo-button-options>
     </dxi-item>
-    <dxi-item>
-      <div class="login-link">
-        Return to <a routerLink="/login">Sign In</a>
-      </div>
-    </dxi-item>
 
     <ng-container *dxTemplate="let item of 'resetPasswordTemplate'">
       <div>
@@ -31,4 +26,7 @@
     </ng-container>
 
   </dx-form>
+  <div class="login-link">
+    Return to <a routerLink="/login">Sign In</a>
+  </div>
 </form>

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/reset-password-form/reset-password-form.component.scss

@@ -1,11 +1,12 @@
 .reset-password-form {
   ::ng-deep .submit-button {
-    margin-top: 10px;
+    margin-top: 18px;
   }
 
   .login-link {
     color: var(--base-accent);
-    font-size: 16px;
+    font-size: 12px;
     text-align: center;
+    margin-top: 6px;
   }
 }