Update content part of apps (according to design) (#897)

* Update content part of apps (according to design)

* Fix react lint

* Fix schematics tests

* Add new line

* Update image snapshots

* Wrap slot element inside layout components

* Revert code styles

packages/devextreme-cli/src/templates/react/application/src/components/footer/Footer.scss

@@ -6,4 +6,9 @@
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 20px;
   padding-bottom: 24px;
+  margin: 0 40px;
+
+  .screen-x-small & {
+    margin: 0 20px;
+  }
 }

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

@@ -26,11 +26,11 @@ body {
   .content {
     line-height: 1.5;
     flex-grow: 1;
+    padding: 40px;
 
     h2 {
       font-size: 30px;
-      margin-top: 20px;
-      margin-bottom: 20px;
+      margin: 0;
     }
   }
 
@@ -46,8 +46,6 @@ body {
   }
 
   .content-block {
-    margin-left: 40px;
-    margin-right: 40px;
     margin-top: 20px;
   }
 }
@@ -56,9 +54,8 @@ body {
   height: calc(100% - 56px)
 }
 
-.screen-x-small .content-block {
-  margin-left: 20px;
-  margin-right: 20px;
+.screen-x-small .content {
+  padding: 20px;
 }
 
 .responsive-paddings {

packages/devextreme-cli/src/templates/react/page/page.tsx

@@ -3,7 +3,7 @@ import './<%=pageName%>.scss';
 
 export default () => (
   <React.Fragment>
-    <h2 className={'content-block'}><%=title%></h2>
+    <h2><%=title%></h2>
     <div className={'content-block'}>
       <div className={'dx-card responsive-paddings'}>
         Put your content here

packages/devextreme-cli/src/templates/react/sample-pages/home/home.scss

@@ -1,24 +1,23 @@
 .logos-container {
-  margin: 20px 0 40px 0;
-  text-align: center;
+  margin: 0 0 40px 0;
+
   svg {
     display: inline-block;
   }
 }
 
 .devextreme-logo {
-  width: 200px;
-  height: 34px;
-  margin-bottom: 19px;
+  width: 255px;
+  height: 60px;
 }
 
 .react-logo {
   width: 184px;
-  height: 68px;
+  height: 60px;
 }
 
 .plus {
-  margin: 23px 10px;
+  margin: 20px;
   width: 22px;
   height: 22px;
 }
@@ -27,6 +26,7 @@
   svg {
     width: 100%;
     display: block;
+
     &.plus {
       margin: 0;
     }

packages/devextreme-cli/src/templates/react/sample-pages/profile/profile.tsx

@@ -21,7 +21,7 @@ export default function Profile() {
 
   return (
     <React.Fragment>
-      <h2 className={'content-block'}>Profile</h2>
+      <h2>Profile</h2>
 
       <div className={'content-block dx-card responsive-paddings'}>
         <div className={'form-avatar'}>

packages/devextreme-cli/src/templates/react/sample-pages/tasks/tasks.tsx

@@ -11,10 +11,10 @@ import DataGrid, {
 export default function Task() {
   return (
     <React.Fragment>
-      <h2 className={'content-block'}>Tasks</h2>
+      <h2>Tasks</h2>
 
       <DataGrid
-        className={'dx-card wide-card'}
+        className={'dx-card content-block'}
         dataSource={dataSource<%=#isTypeScript%> as any<%=/isTypeScript%>}
         showBorders={false}
         focusedRowEnabled={true}

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

@@ -7,9 +7,7 @@
         :is-x-small="screen.getScreenSizeInfo.isXSmall"
         :is-large="screen.getScreenSizeInfo.isLarge"
       >
-      <div class="content">
         <router-view></router-view>
-      </div>
         <template #footer>
           <app-footer />
         </template>

packages/devextreme-cli/src/templates/vue-v3/application/src/components/app-footer.vue

@@ -17,5 +17,10 @@
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 20px;
   padding-bottom: 24px;
+  margin: 0 40px;
+
+  .screen-x-small & {
+    margin: 0 20px;
+  }
 }
 </style>

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

@@ -1,11 +1,15 @@
 .content {
   line-height: 1.5;
   flex-grow: 1;
+  padding: 40px;
 
   h2 {
     font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: 0;
+  }
+
+  .screen-x-small & {
+    padding: 20px;
   }
 }
 
@@ -25,14 +29,7 @@
 }
 
 .content-block {
-  margin-left: 40px;
-  margin-right: 40px;
   margin-top: 20px;
-
-  .screen-x-small & {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
 }
 
 .responsive-paddings {

packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue

@@ -18,7 +18,9 @@
           :toggle-menu-func="toggleMenu"
         />
         <dx-scroll-view ref="scrollViewRef" class="layout-body with-footer">
-          <slot />
+          <div class="content">
+            <slot />
+          </div>
           <slot name="footer" />
         </dx-scroll-view>
       </div>

packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-outer-toolbar.vue

@@ -19,7 +19,9 @@
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
       <dx-scroll-view ref="scrollViewRef" class="with-footer">
-        <slot />
+        <div class="content">
+          <slot />
+        </div>
         <slot name="footer" />
       </dx-scroll-view>
       <template #menuTemplate>

packages/devextreme-cli/src/templates/vue-v3/page/page.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="content-block"><%=title%></h2>
+    <h2><%=title%></h2>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         Put your content here

packages/devextreme-cli/src/templates/vue-v3/sample-pages/profile-page.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="content-block">Profile</h2>
+    <h2>Profile</h2>
 
     <div class="content-block dx-card responsive-paddings">
       <div class="form-avatar">

packages/devextreme-cli/src/templates/vue-v3/sample-pages/tasks-page.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <h2 class="content-block">Tasks</h2>
+    <h2>Tasks</h2>
 
     <dx-data-grid
-      class="dx-card wide-card"
+      class="dx-card content-block"
       :data-source="dataSourceConfig"
       :focused-row-index="0"
       :show-borders="false"

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

@@ -6,4 +6,9 @@
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 20px;
   padding-bottom: 24px;
+  margin: 0 40px;
+
+  .screen-x-small & {
+    margin: 0 20px;
+  }
 }

packages/devextreme-schematics/src/add-layout/files/src/dx-styles.scss

@@ -11,11 +11,15 @@ html, body {
 .content {
   line-height: 1.5;
   flex-grow: 1;
+  padding: 40px;
 
   h2 {
     font-size: 30px;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: 0;
+  }
+
+  .screen-x-small & {
+    padding: 20px;
   }
 }
 
@@ -35,14 +39,7 @@ html, body {
 }
 
 .content-block {
-  margin-left: 40px;
-  margin-right: 40px;
   margin-top: 20px;
-
-  .screen-x-small & {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
 }
 
 .responsive-paddings {