fix(app): subItem, settings container (#1214)

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/containers/application/Header/CurrentApp/ui/AppName/AppName.tsx

@@ -10,6 +10,7 @@ import styles from './AppName.module.scss';
 function AppName() {
   let { pathname } = useLocation();
   const isRobot = pathname.includes('@') || pathname.includes('neuron/');
+  const isOracle = pathname.includes('oracle');
 
   if (isRobot) {
     const pathnameArr = pathname.replace(/^\/|\/$/g, '').split('/');
@@ -20,6 +21,10 @@ function AppName() {
         : findItem;
   }
 
+  if (isOracle) {
+    pathname = routes.oracle.path;
+  }
+
   const value = findApp(getMenuItems(), pathname);
 
   const content = value[0]?.name || CHAIN_ID;

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

@@ -16,7 +16,7 @@ import { CHAIN_ID } from 'src/constants/config';
 const getMenuItems = () => {
   const listItemMenu = [
     {
-      name: 'My robot',
+      name: 'robot',
       icon: robot,
       to: '/robot',
       subItems: [
@@ -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',

src/utils/findApp.ts

@@ -10,8 +10,8 @@ const findApp = (menuItems: MenuItems, url: string) => {
     if (item.to === url) {
       acc.push(item);
     } else if (findSubItemFc(item.subItems, url).length !== 0) {
-      const findSubItem = findSubItemFc(item.subItems, url);
-      acc.push({ ...item, name: findSubItem[0].name });
+      // const findSubItem = findSubItemFc(item.subItems, url);
+      acc.push(item);
     }
     return acc;
   }, []);