use stndrd media-query instead of custom class

Author: VasilyStrelyaev

packages/devextreme-cli/src/templates/nextjs/application/src/app/layout.tsx

@@ -4,7 +4,6 @@ import { usePathname } from 'next/navigation';
 import LoadPanel from 'devextreme-react/load-panel';
 import { AuthProvider, useAuth} from '../contexts/auth';
 import { NavigationProvider } from '../contexts/navigation';
-import { useScreenSizeClass } from '../utils/media-query';
 import { ThemeContext, useThemeContext} from "../theme";
 
 function Page({ children }) {
@@ -18,7 +17,6 @@ function Page({ children }) {
 }
 
 export default function RootLayout({ children }) {
-  const screenSizeClass = useScreenSizeClass();
   const themeContext = useThemeContext();
   const pathname  = usePathname ();
 
@@ -29,7 +27,7 @@ export default function RootLayout({ children }) {
         <ThemeContext.Provider value={themeContext}>
           <AuthProvider>
             <NavigationProvider>
-              <div className={`app ${screenSizeClass}`}>
+              <div className='app'>
                 <Page key={pathname}>{children}</Page>
               </div>
             </NavigationProvider>

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

@@ -6,7 +6,7 @@
   padding-bottom: 24px;
   margin: 0 40px;
 
-  .screen-x-small & {
+  @media (max-width: 599.99px) {
     margin: 0 20px;
   }
 }

packages/devextreme-cli/src/templates/nextjs/application/src/components/header/Header.scss

@@ -13,7 +13,7 @@ header {
 .dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {
   padding: 0 40px;
 
-  .screen-x-small & {
+  @media (max-width: 599.99px) {
     padding: 0 20px;
   }
 }

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

@@ -42,8 +42,10 @@ body {
     }
   }
 
-  .screen-x-small :not(.dx-card).content {
-    padding: 20px;
+  @media (max-width: 599.99px) {
+    :not(.dx-card).content {
+      padding: 20px;
+    }
   }
 
   .container {
@@ -68,7 +70,7 @@ body {
   .responsive-paddings {
     padding: 20px;
 
-    .screen-large & {
+    @media (min-width: 1280px) {
       padding: 40px;
     }
   }

packages/devextreme-cli/src/templates/nextjs/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss

@@ -6,7 +6,7 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   background-color: var(--base-bg);
 
-  .screen-x-small & {
+  @media (max-width: 599.99px) {
     padding-left: 20px;
   }
 

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

@@ -9,7 +9,7 @@
     flex-grow: 0;
     border-radius: 8px;
 
-    .screen-x-small & {
+    @media (max-width: 599.99px) {
       width: 100%;
       height: 100%;
       border-radius: 0;

packages/devextreme-cli/src/templates/nextjs/application/src/utils/media-query.tsx

@@ -19,24 +19,6 @@ export const useScreenSize = () => {
   return screenSize;
 };
 
-export const useScreenSizeClass = () => {
-  const screenSize = useScreenSize();
-
-  if (screenSize.isLarge) {
-    return 'screen-large';
-  }
-
-  if (screenSize.isMedium) {
-    return 'screen-medium';
-  }
-
-  if (screenSize.isSmall) {
-    return 'screen-small';
-  }
-
-  return 'screen-x-small';
-}
-
 let handlers<%=#isTypeScript%>: Handle[]<%=/isTypeScript%> = [];
 let xSmallMedia = false;
 let smallMedia = false;