fix styles for single-card (React) and "create account" button set stylingMode=outlined

Author: GoodDayForSurf

packages/devextreme-cli/src/templates/react/application/src/components/login-form/LoginForm.tsx

@@ -85,6 +85,7 @@ export default function LoginForm() {
       </div>
       <Button
         text={'Create an account'}
+        stylingMode={ 'outlined' }
         width={'100%'}
         onClick={onCreateAccountClick}
       />

packages/devextreme-cli/src/templates/react/application/src/layouts/single-card/single-card.scss

@@ -5,10 +5,11 @@
   height: 100%;
 
   .dx-card {
-    width: 330px;
+    width: 360px;
     margin: auto auto;
-    padding: 40px;
+    padding: 24px;
     flex-grow: 0;
+    border-radius: 8px;
 
     .screen-x-small & {
       width: 100%;
@@ -21,13 +22,14 @@
     }
 
     .header {
-      margin-bottom: 30px;
+      margin: 24px 0;
 
       .title {
         color: var(--base-text-color);
-        line-height: 28px;
         font-weight: 500;
         font-size: 24px;
+        text-align: center;
+        line-height: 24px;
       }
 
       .description {
@@ -37,7 +39,6 @@
         margin-top: 32px;
         text-align: center;
       }
-
     }
   }
 }

packages/devextreme-cli/src/templates/vue-v3/application/src/views/login-form.vue

@@ -48,6 +48,7 @@
     </div>
     <dx-button
       text="Create an account"
+      stylingMode="outlined"
       width="100%"
       @click="onCreateAccountClick"
     />

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

@@ -39,5 +39,5 @@
   <div class="link">
     <a routerLink="/reset-password">Forgot password?</a>
   </div>
-  <dx-button text="Create an account" width="100%"  (click)="onCreateAccountClick()"></dx-button>
+  <dx-button stylingMode="outlined" text="Create an account" width="100%"  (click)="onCreateAccountClick()"></dx-button>
 </form>