fix(robot): header swap info (#1287)

src/pages/robot/Layout/RobotHeader/RobotHeader.module.scss

@@ -17,81 +17,36 @@
 
 .content {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 75px 1fr;
   align-items: center;
   justify-items: center;
   padding: 8px;
 
-  .level {
-    display: grid;
-    justify-items: center;
-    gap: 15px;
-
-    &Value {
-      font-size: 20px;
-    }
-
-    &Time {
-      font-size: 16px;
-    }
-  }
-
+  .level,
   .addressName {
     display: grid;
-    gap: 15px;
-
-    .name {
-      color: #1fcbff;
-      font-size: 16px;
-      font-weight: 400;
-      padding: unset;
-    }
-  }
-
-
-  >img {
-    height: 75px;
-    width: 75px;
-  }
-
-  >div {
-    text-align: center;
+    grid-template-rows: 1fr 1fr;
+    justify-items: center;
+    gap: 12px;
+    font-size: 16px;
+    font-weight: 400;
   }
 
-}
-
-.inner {
-  display: grid;
-  align-items: center;
-  grid-template-columns: repeat(3, 1fr);
-  column-gap: 10px;
-
   .name {
-    color: #1fcbff;
-    font-size: 30px;
+    color: #ffffff;
+    font-size: 20px;
     font-weight: 400;
-    margin-bottom: 15px;
   }
-
-  .keys {
-    margin-top: 10px;
-
-    img {
-      height: 42px;
-      width: 42px;
-    }
-
-    &:hover {
-      opacity: 0.7;
-    }
+  .name span {
+    color: var(--grayscale-dark);
   }
 
-  >img {
-    height: 112px;
-    width: 112px;
+  img {
+    height: 75px;
+    width: 75px;
   }
 
-  >div {
+  > div {
     text-align: center;
   }
-}
+}

src/pages/robot/Layout/RobotHeader/RobotHeader.tsx

@@ -6,26 +6,32 @@ import { useRobotContext } from '../../robot.context';
 import FirstTx from './ui/FirstTx/FirstTx';
 import Level from './ui/Level/Level';
 import TabsNotOwner from './ui/TabsNotOwner/TabsNotOwner';
+import AdviserHoverWrapper from 'src/features/adviser/AdviserHoverWrapper/AdviserHoverWrapper';
 
 function RobotHeader({ menuCounts }) {
   const { address, passport, isOwner } = useRobotContext();
-
-  const avatar = passport?.extension?.avatar;
-  const nickname = passport?.extension?.nickname;
+  const { avatar, nickname } = passport?.extension || {};
 
   return (
     <header className={styles.wrapper}>
       <Display noPadding color="blue">
         <div className={styles.content}>
           <div className={styles.level}>
-            <Level value={menuCounts} />
-            {address && <FirstTx address={address} />}
+            {nickname && (
+              <h3 className={styles.name}>
+                {nickname}
+                <span>.moon</span>
+              </h3>
+            )}
+
+            <AdviserHoverWrapper adviserContent="the level increases based on your stats, such as sigma, karma, brain, and others">
+              <Level value={menuCounts} />
+            </AdviserHoverWrapper>
           </div>
           <AvataImgIpfs addressCyber={address} cidAvatar={avatar} />
-
           <div className={styles.addressName}>
-            {nickname && <h3 className={styles.name}>{nickname}</h3>}
             <MusicalAddress address={address} />
+            <FirstTx address={address} />
           </div>
         </div>
         {!isOwner && <TabsNotOwner menuCounts={menuCounts} />}

src/pages/robot/Layout/RobotHeader/ui/Level/Level.module.scss

@@ -0,0 +1,6 @@
+.text {
+  color: var(--grayscale-dark);
+}
+.value {
+  color: var(--blue-light);
+}

src/pages/robot/Layout/RobotHeader/ui/Level/Level.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import BigNumber from 'bignumber.js';
 import { Dots } from 'src/components';
 import getPrefixNumber from 'src/utils/getPrefixNumber';
+import styles from './Level.module.scss';
 
 const POWER = 1000;
 
@@ -33,7 +34,11 @@ function Level({ value }: { value: Props }) {
     }, 0);
   }, [value]);
 
-  return <span>level {level}</span>;
+  return (
+    <span className={styles.text}>
+      level <span className={styles.value}>{level}</span>
+    </span>
+  );
 }
 
 export default Level;