update React forms

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,15 @@ 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'}
+        width={'100%'}
+        onClick={onCreateAccountClick}
+      />
     </form>
   );
 }

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

@@ -2,7 +2,7 @@
 
 .reset-password-form {
   .submit-button {
-    margin-top: 10px;
+    margin-top: 18px;
   }
 
   .login-link {

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/layouts/single-card/single-card.scss

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