Update auth forms (#907)

* update Vue forms

* update React forms

* update Angular forms

* set legacy-peer-deps=true for github actions

* remove unused bootstrap tests

* update screenshots

* update screenshots

* fix test name

* update screenshots

* fix styles for single-card (Angular, Vue)

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

* update screenshots

* update screenshots + fix styles (vue, react)

* fix design issues

* update screenshots

* update screenshots

* fix styles for React

* update screenshots

* fix styles

Author: GoodDayForSurf

packages/devextreme-cli/src/templates/react/application/src/components/create-account-form/CreateAccountForm.scss

@@ -2,9 +2,8 @@
 
 .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 {
@@ -14,7 +13,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-cli/src/templates/react/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -92,12 +92,10 @@ export default function CreateAccountForm() {
             </span>
           </ButtonOptions>
         </ButtonItem>
-        <Item>
-          <div className={'login-link'}>
-            Have an account? <Link to={'/login'}>Sign In</Link>
-          </div>
-        </Item>
       </Form>
+      <div className={'login-link'}>
+        Have an account? <Link to={'/login'}>Sign In</Link>
+      </div>
     </form>
   );
 }

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

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

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

@@ -9,6 +9,7 @@ import Form, {
   EmailRule
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
+import Button from 'devextreme-react/button';
 import notify from 'devextreme/ui/notify';
 import { useAuth } from '../../contexts/auth';
 
@@ -78,19 +79,16 @@ export default function LoginForm() {
             </span>
           </ButtonOptions>
         </ButtonItem>
-        <Item>
-          <div className={'link'}>
-            <Link to={'/reset-password'}>Forgot password?</Link>
-          </div>
-        </Item>
-        <ButtonItem>
-          <ButtonOptions
-            text={'Create an account'}
-            width={'100%'}
-            onClick={onCreateAccountClick}
-          />
-        </ButtonItem>
       </Form>
+      <div className={'link'}>
+        <Link to={'/reset-password'}>Forgot password?</Link>
+      </div>
+      <Button
+        text={'Create an account'}
+        stylingMode={ 'outlined' }
+        width={'100%'}
+        onClick={onCreateAccountClick}
+      />
     </form>
   );
 }

packages/devextreme-cli/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.scss

@@ -2,12 +2,13 @@
 
 .reset-password-form {
   .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;
   }
 }

packages/devextreme-cli/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.tsx

@@ -64,12 +64,10 @@ export default function ResetPasswordForm() {
             </span>
           </ButtonOptions>
         </ButtonItem>
-        <Item>
-          <div className={'login-link'}>
-            Return to <Link to={'/login'}>Sign In</Link>
-          </div>
-        </Item>
       </Form>
+      <div className={'login-link'}>
+        Return to <Link to={'/login'}>Sign In</Link>
+      </div>
     </form>
   );
 }

packages/devextreme-cli/src/templates/react/application/src/dx-styles.scss

@@ -25,6 +25,7 @@ body {
     display: flex;
     height: 100%;
     width: 100%;
+    min-width: 320px;
   }
 
   .content {
@@ -37,10 +38,10 @@ body {
       margin: 0;
       line-height: 40px;
     }
+  }
 
-    .screen-x-small & {
-      padding: 20px;
-    }
+  .screen-x-small :not(.dx-card).content {
+    padding: 20px;
   }
 
   .container {

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,18 +22,22 @@
     }
 
     .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 {
         color: var(--base-text-color-alpha-7);
-        line-height: 18px;
+        line-height: 16px;
+        font-size: 12px;
+        margin-top: 32px;
+        text-align: center;
       }
     }
   }

packages/devextreme-cli/src/templates/vue-v3/application/src/App.vue

@@ -93,5 +93,6 @@ body {
   display: flex;
   height: 100%;
   width: 100%;
+  min-width: 320px;
 }
 </style>

packages/devextreme-cli/src/templates/vue-v3/application/src/dx-styles.scss

@@ -15,10 +15,10 @@ $side-panel-min-width: 60px;
       margin: 0;
       line-height: 40px;
     }
+  }
 
-    .screen-x-small & {
-      padding: 20px;
-    }
+  .screen-x-small :not(.dx-card).content {
+    padding: 20px;
   }
 
   .container {