fix(app): to dev styles (#1200)

Author: dimakorzhovnik

src/components/appMenu/CircularMenu.tsx

@@ -10,6 +10,8 @@ declare module 'react' {
   interface CSSProperties {
     '--diameter'?: string;
     '--delta'?: string;
+    '--icon-size'?: string;
+    '--button-size'?: string;
   }
 }
 
@@ -19,6 +21,9 @@ function CircularMenu({ circleSize }) {
   const linkChunks = _.chunk(itemsMenu(), chunkSize);
   const location = useLocation();
 
+  const buttonSize = Math.min(circleSize * 0.15, 38);
+  const iconSize = buttonSize - 8;
+
   const calculateDiameter = (index, circleSize) => {
     const menuCircleDiameter = circleSize / 2 + 40 * (index + 1) - 10;
     const nextLevelMenuAngle = index === 1 ? 11 : 0;
@@ -68,6 +73,8 @@ function CircularMenu({ circleSize }) {
               style={{
                 '--diameter': `${menuCircleDiameter}px`,
                 '--delta': `${nextLevelMenuAngle}deg`,
+                '--icon-size': `${iconSize}px`,
+                '--button-size': `${buttonSize}px`,
               }}
             >
               {chunk.map((item, index) => {

src/components/appMenu/CircularMenuItem.module.scss

@@ -5,8 +5,8 @@
   opacity: 1;
   background-color: #101010;
   border-radius: 50%;
-  width: 38px;
-  height: 38px;
+  width: var(--button-size, 38px);
+  height: var(--button-size, 38px);
   justify-content: center;
   align-items: center;
   display: flex;
@@ -30,8 +30,8 @@
 }
 
 .icon {
-  width: 30px;
-  height: 30px;
+  width: var(--icon-size, 30px);
+  height: var(--icon-size, 30px);
   object-fit: fill;
   border-radius: 50%;
   justify-content: center;

src/components/appMenu/MobileMenu.module.scss

@@ -21,6 +21,9 @@
 
   &.open {
     pointer-events: auto;
+    background: #0000008c;
+    backdrop-filter: blur(7px);
+    z-index: 2;
   }
 }
 

src/containers/application/Header/Commander/Commander.module.scss

@@ -1,6 +1,4 @@
 .wrapper {
-  width: 100%;
-  
   width: 62%;
   transform: translate(-50%, -80%);
   background: rgb(0 0 0 / 79%);
@@ -9,6 +7,13 @@
   position: absolute;
   top: 50%;
   z-index: 1;
+  // width left and right sideBar , gap and paddings 
+  max-width: calc(100vw - 200px - 300px - 100px);
+
+  @media (max-width: 540px) {
+    width: 40%;
+    max-width: unset;
+  }
 }
 
 .input {

src/containers/application/Header/CurrentApp/CurrentApp.tsx

@@ -19,7 +19,7 @@ function CurrentApp() {
   const location = useLocation();
   const address = useAppSelector(selectCurrentAddress);
   const { passport } = usePassportByAddress(address);
-  const [openMenu, setOpenMenu] = useState(true);
+  const [openMenu, setOpenMenu] = useState(false);
 
   const getRoute = useMemo(() => {
     const { pathname } = location;

src/containers/application/Header/Header.module.scss

@@ -5,7 +5,7 @@
   top: 0;
   padding: 15px;
   padding-bottom: 0;
-  z-index: 3;
+  z-index: 4;
 
   &::before {
     content: '';

src/containers/application/Header/SwitchAccount/SwitchAccount.module.scss

@@ -35,11 +35,17 @@
   align-items: center;
   height: 105px;
 
+  @media (max-width: 540px) {
+    grid-template-columns: 1fr 60px;
+    gap: 10px;
+    height: 60px;
+  }
+
   .noAccount {
     color: var(--primary-color);
   }
 
-  & + & {
+  &+& {
     margin-top: -30px;
   }
 
@@ -123,6 +129,7 @@
 
   &True {
     width: 100%;
+
     &::before {
       @include before-Avatar;
       box-shadow: 0px 0px 20px #1fcbff66;
@@ -143,4 +150,4 @@
     width: 60px;
     height: 60px;
   }
-}
+}

src/containers/application/Header/SwitchAccount/SwitchAccount.tsx

@@ -153,18 +153,13 @@ function SwitchAccount() {
 
   return (
     <div style={{ position: 'relative', fontSize: '20px' }} ref={containerRef}>
-      <div
-        className={styles.containerSwichAccount}
-        style={{
-          gridTemplateColumns: !mediaQuery ? '1fr' : '1fr 105px',
-        }}
-      >
-        {!useGetAddress && (
+      <div className={styles.containerSwichAccount}>
+        {(!useGetAddress || !mediaQuery) && (
           <Link
             className={networkStyles.btnContainerText}
             to={routes.settings.path}
           >
-            Settings
+            {mediaQuery ? 'Settings' : '⚙️'}
           </Link>
         )}
         {mediaQuery && useGetAddress && (

src/features/adviser/AdviserContainer.module.scss

@@ -13,6 +13,11 @@
 
   display: flex;
   justify-content: center;
+
+  @media (max-width: 540px) {
+    margin-top: unset;
+    
+  }
 }
 
 .blurWrapper {

src/layouts/Main.module.scss

@@ -22,5 +22,9 @@
     display: flex;
     position: fixed;
     right: 1vw;
+
+    @media (max-width: 540px) {
+      right: 2vw;
+    }
   }
 }