more profile

elizaOS · Nov 5, 2024 · 85cecf4 · 85cecf4
1 parent f111efb
commit 85cecf4
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 3 deletions.
diff --git a/src/components/LeaderboardPartners.tsx b/src/components/LeaderboardPartners.tsx
@@ -146,7 +146,7 @@ const LeaderboardPartners: FC = () => {
                     className={styles.trustScoreImage}
                   />
                   <span className={styles.tooltip}>
-                  AI Marc is Calculating Your Trust
+                  AI Marc is Calculating Trust
                   </span>
                 </div>
               ) : (

diff --git a/src/components/ProfileTotals.module.css b/src/components/ProfileTotals.module.css
@@ -265,3 +265,50 @@
     }
 }
 
+.tooltipContainer {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tooltip {
+    visibility: hidden;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 14px;
+    white-space: nowrap;
+    z-index: 100;
+    margin-bottom: 8px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.tooltipContainer:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
+.tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
+}
+
+.trustScoreImage {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+}
+
diff --git a/src/components/ProfileTotals.tsx b/src/components/ProfileTotals.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from 'next';
 import { useCallback, useEffect, useState } from 'react';
 import { useWallet } from '@solana/wallet-adapter-react';
 import styles from './ProfileTotals.module.css';
+import Image from 'next/image';
 
 type View = 'profile' | 'holdings';
 
@@ -108,7 +109,24 @@ const ProfileTotals: NextPage<ProfileTotalsProps> = ({ onViewChange = () => {} }
 
   const renderMetricItem = (value: React.ReactNode, label: string) => (
     <div className={styles.metricItem}>
-      <div className={styles.metricValue}>{value}</div>
+      <div className={styles.metricValue}>
+        {label === 'TRUST SCORE' && value === '0.0' ? (
+          <div className={styles.tooltipContainer}>
+            <Image 
+              src="/null.svg"
+              alt="Null trust score"
+              width={20}
+              height={20}
+              className={styles.trustScoreImage}
+            />
+            <span className={styles.tooltip}>
+              AI Marc is Calculating Your Trust
+            </span>
+          </div>
+        ) : (
+          value
+        )}
+      </div>
       <div className={styles.metricLabel}>{label}</div>
     </div>
   );

diff --git a/src/views/profile/index.module.css b/src/views/profile/index.module.css
@@ -15,6 +15,15 @@
     box-sizing: border-box;
 }
 
+.title {
+  font-size: 34px;
+  line-height: 42px;
+  font-weight: 600;
+  color: #242424;
+  font-weight: bold;
+  margin-bottom: 24px;
+}
+
 @media (max-width: 768px) {
     .container {
         width: 100vw;

diff --git a/src/views/profile/index.tsx b/src/views/profile/index.tsx
@@ -24,7 +24,7 @@ const ProfileView: FC = () => {
   return (
     <div className={`${styles.container} text-left`}>
       <div className="flex flex-col items-center">
-        <h1 className="font-display text-2xl mt-4 mx-4 text-black" style={{ fontFamily: 'SF Compact Rounded, sans-serif', marginBottom: '24px' }}>Profile</h1>
+        <h1 className={`${styles.title} font-display font-bold text-2xl mt-4 mx-6 text-black`}>Profile</h1>
         {status === 'loading' ? (
           <div className="w-20 h-20 rounded-full bg-gray-200 animate-pulse" />
         ) : session?.user?.image ? (