fix(adviser): rank presence and usability (#1223)

cybercongress · Jul 31, 2024 · 1b8896b · 1b8896b
1 parent 42cdc37
commit 1b8896b
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 182 deletions.
diff --git a/src/components/Rank/QuestionBtn/QuestionBtn.module.scss b/src/components/Rank/QuestionBtn/QuestionBtn.module.scss
@@ -8,4 +8,8 @@
   justify-content: center;
   width: 16px;
   height: 16px;
+
+  &:hover {
+    opacity: 0.8;
+  }
 }
diff --git a/src/components/Rank/rank.tsx b/src/components/Rank/rank.tsx
@@ -1,115 +1,47 @@
-import { Pane, Text } from '@cybercongress/gravity';
-import { Copy } from '../ui/copy';
-import Tooltip from '../tooltip/tooltip';
-import { LinkWindow } from '../link/link';
-import { trimString, exponentialToDecimal } from '../../utils/utils';
-import { getRankGrade } from 'src/utils/search/utils';
-import styles from './Rank.module.scss';
-import { routes } from 'src/routes';
 import { Link } from 'react-router-dom';
 import QuestionBtn from './QuestionBtn/QuestionBtn';
 
-function GradeTooltipContent({ grade, hash, color, rank }) {
-  return (
-    // <Pane paddingX={15} paddingY={15}>
-    //   <Pane marginBottom={12}>
-    //     <Text color="#ffff">
-    //       Answer rank for{' '}
-    //       {hash && (
-    //         <Pane display="inline-flex" alignItems="center">
-    //           {trimString(hash, 5, 5)} <Copy text={hash} />
-    //         </Pane>
-    //       )}{' '}
-    //       is {rank}
-    //     </Text>
-    //   </Pane>
-    //   <Pane display="flex" marginBottom={12}>
-    //     <Text color="#ffff">
-    //       Answers between &nbsp;
-    //       {exponentialToDecimal(parseFloat(grade.from).toPrecision(3))}
-    //       &nbsp; and &nbsp;
-    //       {exponentialToDecimal(parseFloat(grade.to).toPrecision(3))}
-    //       &nbsp; recieve grade
-    //       <Pane
-    //         className={styles.rank}
-    //         style={{ display: 'inline-flex' }}
-    //         marginLeft="5px"
-    //         backgroundColor={color}
-    //       >
-    //         {grade.value}
-    //       </Pane>
-    //     </Text>
-    // </Pane>
-    <Pane>
-      <Text color="#ffff">
-        More about{' '}
-        {/* <LinkWindow to="https://ipfs.io/ipfs/QmceNpj6HfS81PcCaQXrFMQf7LR5FTLkdG9sbSRNy3UXoZ">
-        </LinkWindow> */}
-        <Link
-          to={routes.oracle.ask.getLink(
-            'QmWQyWPCHE2hfEaJy8sTVQtKgW4EAaCLGMc33sMkodmRZ3'
-          )}
-        >
-          cyber~Rank
-        </Link>
-      </Text>
-    </Pane>
-    // </Pane>
-  );
-}
-
-const gradeColorRank = (rank) => {
-  let rankGradeColor = '#546e7a';
+// const gradeColorRank = (rank) => {
+//   let rankGradeColor = '#546e7a';
 
-  switch (rank) {
-    case 1:
-      rankGradeColor = '#ff3d00';
-      break;
-    case 2:
-      rankGradeColor = '#ff9100';
-      break;
-    case 3:
-      rankGradeColor = '#ffea00';
-      break;
-    case 4:
-      rankGradeColor = '#64dd17';
-      break;
-    case 5:
-      rankGradeColor = '#00b0ff';
-      break;
-    case 6:
-      rankGradeColor = '#304ffe';
-      break;
-    case 7:
-      rankGradeColor = '#d500f9';
-      break;
-    default:
-      rankGradeColor = '#546e7a';
-      break;
-  }
+//   switch (rank) {
+//     case 1:
+//       rankGradeColor = '#ff3d00';
+//       break;
+//     case 2:
+//       rankGradeColor = '#ff9100';
+//       break;
+//     case 3:
+//       rankGradeColor = '#ffea00';
+//       break;
+//     case 4:
+//       rankGradeColor = '#64dd17';
+//       break;
+//     case 5:
+//       rankGradeColor = '#00b0ff';
+//       break;
+//     case 6:
+//       rankGradeColor = '#304ffe';
+//       break;
+//     case 7:
+//       rankGradeColor = '#d500f9';
+//       break;
+//     default:
+//       rankGradeColor = '#546e7a';
+//       break;
+//   }
 
-  return rankGradeColor;
-};
+//   return rankGradeColor;
+// };
 
 function Rank({ rank, hash, ...props }) {
-  const gradeValue = getRankGrade(rank);
-  const color = gradeColorRank(gradeValue.value);
+  // const gradeValue = getRankGrade(rank);
+  // const color = gradeColorRank(gradeValue.value);
 
   return (
-    <Tooltip
-      placement="bottom"
-      strategy="fixed"
-      tooltip={
-        <GradeTooltipContent
-          grade={gradeValue}
-          hash={hash}
-          color={color}
-          rank={rank}
-        />
-      }
-    >
+    <Link to="https://docs.cyb.ai/#/page/cyberank" replace target="_blank">
       <QuestionBtn {...props} />
-    </Tooltip>
+    </Link>
   );
 }
 

diff --git a/src/containers/ipfs/components/AdviserMeta/AdviserMeta.module.scss b/src/containers/ipfs/components/AdviserMeta/AdviserMeta.module.scss
@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     display: block;
     text-align: center;
 
@@ -22,24 +22,22 @@
   .left {
     display: flex;
     gap: 7px;
-    align-items: center;
+    align-items: baseline;
 
     span:first-of-type {
-      color: rgba(255, 255, 255, 0.5);
+      color: rgb(255 255 255 / 50%);
       font-size: 14px;
     }
 
     .rank {
       display: flex;
       align-items: center;
       gap: 5px;
-
-      color: rgba(221, 255, 255, 0.38);
-
+      color: rgb(221 255 255 / 38%);
       font-size: 14px;
 
       .number {
-        color: #f62bfd;
+        color: white;
         line-height: 23px;
       }
     }
@@ -61,8 +59,10 @@
     justify-content: flex-end;
     gap: 14px;
 
-    button {
-      opacity: 0.35;
+    a {
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 }
diff --git a/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx b/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx
@@ -1,9 +1,11 @@
 import { Rank, Account } from 'src/components';
 import { timeSince, formatCurrency } from 'src/utils/utils';
+import useRank from 'src/features/cyberlinks/rank/useRank';
+import { Link } from 'react-router-dom';
+import { routes } from 'src/routes';
 import useGetCreator from '../../hooks/useGetCreator';
 import { PREFIXES } from '../metaInfo';
 import styles from './AdviserMeta.module.scss';
-import useRank from 'src/features/cyberlinks/rank/useRank';
 
 type Props = {
   cid: string;
@@ -22,7 +24,6 @@ function AdviserMeta({ cid, type, size }: Props) {
 
         {!!rank && (
           <div className={styles.rank}>
-            <span>with rank</span>
             <span className={styles.number}>
               {rank.toLocaleString().replaceAll(',', ' ')}
             </span>
@@ -42,7 +43,7 @@ function AdviserMeta({ cid, type, size }: Props) {
         <span>
           🟥 {size ? formatCurrency(size, 'B', 0, PREFIXES) : 'unknown'}
         </span>
-        <button disabled>🌓</button>
+        <Link to={routes.robot.routes.soul.path}>🌓</Link>
       </div>
     </div>
   );

diff --git a/src/containers/ipfs/hooks/useGetDiscussion.ts b/src/containers/ipfs/hooks/useGetDiscussion.ts
@@ -26,8 +26,6 @@ function useGetLinks(
     where.neuron = { _eq: neuron };
   }
 
-  console.log('search neuron:', neuron);
-
   // always no next page when skip
   const [hasNextPage, setHasNextPage] = useState(!skip);
   const [isInitialLoading, setIsInitialLoading] = useState(true);

diff --git a/src/features/adviser/Adviser/Adviser.module.scss b/src/features/adviser/Adviser/Adviser.module.scss
@@ -11,6 +11,7 @@ $animation-time: 2.3s;
   overflow: hidden;
   position: relative;
   min-height: 26px;
+  cursor: pointer;
 
   --color-r: 0;
   --color-b: 0;
@@ -28,6 +29,7 @@ $animation-time: 2.3s;
       --color-b: 92;
       --color-g: 0;
     }
+
     &green {
       --color-r: 122;
       --color-b: 250;
@@ -47,7 +49,7 @@ $animation-time: 2.3s;
     }
   }
 
-  &:disabled {
+  &.disabled {
     cursor: unset;
 
     &::before {
@@ -62,21 +64,18 @@ $animation-time: 2.3s;
   // background
   &::before {
     content: '';
-
     position: absolute;
     left: 0;
     filter: blur(10px);
     z-index: -1;
-
     width: 100%;
     height: 100%;
-
     background: linear-gradient(
       to right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(var(--color-r), var(--color-b), var(--color-g), 0.13) 40%,
-      rgba(var(--color-r), var(--color-b), var(--color-g), 0.13) 60%,
-      rgba(0, 0, 0, 0) 100%
+      rgb(0 0 0 / 0%) 0%,
+      rgb(var(--color-r) var(--color-b) var(--color-g) / 13%) 40%,
+      rgb(var(--color-r) var(--color-b) var(--color-g) / 13%) 60%,
+      rgb(0 0 0 / 0%) 100%
     );
 
     @keyframes pulseBg {
@@ -86,11 +85,12 @@ $animation-time: 2.3s;
         filter: blur(7px);
       }
     }
+
     animation: pulseBg $animation-time infinite alternate;
   }
 
   &.open,
-  &:disabled {
+  &.disabled {
     &::before,
     .summary {
       animation-name: none;
@@ -103,7 +103,7 @@ $animation-time: 2.3s;
     transition: all 0.7s;
   }
 
-  @media (max-width: 480px) {
+  @media (width <= 480px) {
     min-width: unset;
   }
 }
@@ -119,30 +119,28 @@ $animation-time: 2.3s;
 
   @keyframes pulse {
     0% {
-      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+      box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
       opacity: 0.2;
     }
+
     100% {
-      box-shadow: 0px 0px 10px 2px
-        rgb(var(--color-r), var(--color-b), var(--color-g));
+      box-shadow: 0 0 10px 2px rgb(var(--color-r) var(--color-b) var(--color-g));
     }
   }
 
   // dot
   &::before {
     content: '';
+
     $size: 4px;
-    background-color: #fff;
 
+    background-color: #fff;
     border-radius: 50%;
     transition: all 1s;
     opacity: 1;
-
     animation: pulse $animation-time infinite alternate;
-
     width: $size;
     height: $size;
-
     position: absolute;
     top: calc(50% - $size / 2);
     left: calc(50% - $size / 2);
@@ -158,19 +156,19 @@ $animation-time: 2.3s;
     }
   }
 
-  .wrapper:disabled & {
+  .wrapper.disabled & {
     &::before {
       animation: none;
       opacity: 0.35;
+
       // background-color: rgba(#fff, 0.5);
     }
   }
 }
 
 .content {
   text-align: center;
-  text-shadow: 0px 0px 5px
-    rgba(var(--color-r), var(--color-b), var(--color-g), 0.7);
+  text-shadow: 0 0 5px rgb(var(--color-r) var(--color-b) var(--color-g) / 70%);
   line-height: 26px;
   overflow: hidden;
   height: 0;