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

Author: dxvladislavvolkov

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/home/home.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/profile/profile.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/react/sample-pages/tasks/tasks.tsx

@@ -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/App.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/components/app-footer.vue

@@ -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 {