fix(interface): vertically symmetrical widgets (#1288)

src/components/IconsNumber/IconsNumber.module.scss

@@ -17,3 +17,11 @@
 .tooltipWrapper {
   white-space: nowrap;
 }
+
+.hydrogenPlaceholder {
+  display: flex;
+  width: 30px;
+  height: 20px;
+  justify-content: center;
+  align-items: center;
+}

src/components/IconsNumber/IconsNumber.tsx

@@ -62,9 +62,11 @@ export default function IconsNumber({ value, type, isVertical }: Props) {
     return el;
   });
 
+  const numberStyle = type === 'hydrogen' ? styles.hydrogenPlaceholder : '';
+
   return (
     <span className={styles.wrapper}>
-      {number}
+      <span className={numberStyle}>{number}</span>
       <Tooltip
         tooltip={
           <span className={styles.tooltipWrapper}>

src/components/sideButtonLink/SideButtonLink.module.scss

@@ -1,59 +1,59 @@
 .main {
   display: flex;
-  position: fixed;
+  justify-content: center;
+  align-items: center;
   z-index: 3;
-  top: 45%;
-  transform: translateY(-50%);
-  padding: 40px 10px;
+  padding: 10px 10px;
   backdrop-filter: blur(15px);
-  border-radius: 50px;
 
   > span {
     font-size: 14px;
-    margin-top: 5px;
     color: white;
 
     &:last-of-type {
-      margin-top: 4px;
       font-size: 16px;
     }
   }
 
   &:hover {
     transition: all 0.3s;
-    background-color: var(--green-light);
+    background-color: #74ff00;
 
     span {
-      color: var(--green-light);
+      color: #74ff00;
     }
   }
 }
 
 .sense {
   flex-direction: column;
-  padding-left: 3px;
+  border-radius: 0px 15px 15px 0px;
   background: linear-gradient(
     to right,
-    black 90%,
+    black 93%,
     rgba(255, 255, 255, 0.5) 100%
   );
 
   &:hover {
-    padding-right: 30px;
+    padding-right: 20px;
   }
 }
 
+.sense div {
+  display: flex;
+  flex-direction: column;
+  margin-right: 5px;
+}
+
 .hydrogen {
-  right: 0;
-  align-items: center;
   background: linear-gradient(
     to left,
-    black 90%,
+    black 93%,
     rgba(255, 255, 255, 0.5) 100%
   );
-
+  border-radius: 15px 0px 0px 15px;
   &:hover {
-    padding-left: 30px;
+    padding-left: 20px;
   }
 }
 

src/features/sense/ui/SenseButton/SenseButton.module.scss

@@ -1,34 +1,12 @@
-.senseBtn {
+.wrapper {
   display: flex;
-  flex-direction: column;
-  padding-left: 3px;
-  padding: 40px 10px;
-  background: linear-gradient(
-    to right,
-    black 90%,
-    rgb(255, 255, 255, 0.5) 100%
-  );
-  backdrop-filter: blur(15px);
-  border-radius: 50px;
-
-  > span {
-    font-size: 14px;
-    margin-top: 5px;
-    color: white;
-
-    &:last-of-type {
-      margin-top: 4px;
-      font-size: 16px;
-    }
-  }
-
-  &:hover {
-    transition: all 0.3s;
-    padding-right: 30px;
+  align-items: center;
+}
 
-    background-color: var(--green-light);
-    span {
-      color: var(--green-light);
-    }
-  }
+.sensePlaceholder {
+  display: flex;
+  width: 30px;
+  height: 20px;
+  justify-content: center;
+  align-items: center;
 }

src/features/sense/ui/SenseButton/SenseButton.tsx

@@ -3,15 +3,30 @@ import { Tooltip } from 'src/components';
 import { useAppSelector } from 'src/redux/hooks';
 import { selectUnreadCounts } from '../../redux/sense.redux';
 import SideButtonLink from 'src/components/sideButtonLink/SideButtonLink';
+import styles from './SenseButton.module.scss';
 
 function SenseButton() {
+  // TODO: transfer logic to IconsNumber
   const { particles, neurons } = useAppSelector(selectUnreadCounts);
-  const total = particles + neurons;
+  const notificationCount = particles + neurons;
+
+  const notificationCountStr =
+    typeof notificationCount === 'number' ? notificationCount.toString() : '';
+  const firstThreedigits = notificationCountStr.slice(0, 3) || '0';
+  const hiddenPartCount =
+    notificationCountStr.length > 3 ? notificationCountStr.length - 3 : 1;
 
   return (
     <SideButtonLink to={routes.robot.routes.sense.path} buttonType="sense">
       <Tooltip tooltip="sense notifications">
-        <span>{total || ''} 🧬</span>
+        <span className={styles.wrapper}>
+          <div>
+            {Array.from({ length: hiddenPartCount }).map((_, index) => (
+              <span key={index}>🧬</span>
+            ))}
+          </div>
+          <span className={styles.sensePlaceholder}>{firstThreedigits}</span>
+        </span>
       </Tooltip>
     </SideButtonLink>
   );

src/layouts/Main.module.scss

@@ -29,3 +29,11 @@
     }
   }
 }
+.widgetWrapper {
+  z-index: 3;
+  display: inline-flex;
+  position: fixed;
+  justify-content: space-between;
+  width: 100%;
+  top: 45%;
+}

src/layouts/Main.tsx

@@ -64,10 +64,10 @@ function MainLayout({ children }: { children: JSX.Element }) {
       <Header />
 
       {currentAddress && !isMobile && (
-        <>
-          {CHAIN_ID === Networks.BOSTROM && !isMobile && <SenseButton />}
+        <div className={styles.widgetWrapper}>
+          {CHAIN_ID === Networks.BOSTROM && <SenseButton />}
           <SideHydrogenBtn />
-        </>
+        </div>
       )}
 
       {children}