fix(app): subItem, settings container

Author: dimakorzhovnik

src/components/appMenu/SubMenu/SubMenu.module.scss

@@ -1,4 +1,4 @@
-$icon-size: 25px;
+$icon-size: 16px;
 
 .subMenu {
   // position: absolute;
@@ -24,7 +24,7 @@ $icon-size: 25px;
   gap: 7px;
   align-items: center;
   padding-left: 20px;
-  font-size: 18px;
+  font-size: 16px;
   // >div {
   //   align-items: center;
   //   flex-shrink: 0;

src/pages/Settings/Layout/Layout.module.scss

@@ -4,7 +4,7 @@ $size-columns: 200px;
 
 .wrapper {
   display: grid;
-  grid-template-columns: $size-columns minmax($size-columns, calc(62% - $size-columns));
+  grid-template-columns: $size-columns minmax($size-columns, 1fr);
   grid-template-rows: 1fr;
   justify-content: center;
 
@@ -25,6 +25,7 @@ $size-columns: 200px;
 
   > :nth-child(2) {
     left: -2px;
+    margin-right: -2px;
     position: relative;
     overflow-x: auto;
   }

src/pages/Settings/Layout/Layout.tsx

@@ -1,19 +1,22 @@
 import { Outlet } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import { MainContainer } from 'src/components';
 import SettingsMenu from './SettingsMenu/SettingsMenu';
 import styles from './Layout.module.scss';
 
 function Layout() {
   return (
-    <div className={styles.wrapper}>
-      <Helmet>
-        <title>setting | cyb</title>
-      </Helmet>
+    <MainContainer>
+      <div className={styles.wrapper}>
+        <Helmet>
+          <title>setting | cyb</title>
+        </Helmet>
 
-      <SettingsMenu />
+        <SettingsMenu />
 
-      <Outlet />
-    </div>
+        <Outlet />
+      </div>
+    </MainContainer>
   );
 }
 

src/utils/appsMenu/appsMenu.ts

@@ -39,7 +39,7 @@ const getMenuItems = () => {
         {
           name: 'Particles',
           to: '/particles',
-          icon: require('./images/horizontal-traffic-light.png'),
+          icon: require('./images/tag@2x.png'),
         },
         {
           name: 'Stats',