feat: add cover bg and tooltips for stats

apps/trading/client-pages/team/team.tsx

@@ -1,3 +1,10 @@
+import {
+  useState,
+  type ReactNode,
+  type ButtonHTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from 'react';
 import {
   TradingButton as Button,
   Indicator,
@@ -9,68 +16,83 @@ import {
   TradingDropdownTrigger,
   VegaIcon,
   VegaIconNames,
+  Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import {
-  useState,
-  type ReactNode,
-  type ButtonHTMLAttributes,
-  type TdHTMLAttributes,
-  type ThHTMLAttributes,
-} from 'react';
+import BigNumber from 'bignumber.js';
 
 export const Team = () => {
   const [showGames, setShowGames] = useState(true);
   return (
-    <div className="flex flex-col gap-4 lg:gap-6 container p-4 mx-auto">
-      <header className="flex gap-2 lg:gap-4 pt-5 lg:pt-10">
-        <div className="rounded-full w-14 h-14 lg:w-[112px] lg:h-[112px] bg-gray-500 shrink-0" />
-        <div className="flex flex-col items-start gap-1 lg:gap-3">
-          <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
-            Vega Maxis long team name here
-          </h1>
-          <JoinButton joined={true} />
-        </div>
-      </header>
-      <StatSection>
-        <StatList>
-          <Stat value={24} label={'Rank'} />
-          <Stat value={486} label={'Members'} />
-          <Stat value={7} label={'Total games'} />
-        </StatList>
-        <StatSectionSeparator />
-        <StatList>
-          <Stat value={'4.76K'} label={'Total volume'} />
-          <Stat value={'15.2K'} label={'Rewards paid'} />
-          <Stat value={'10K'} label={'PnL'} />
-        </StatList>
-      </StatSection>
-      <StatSection>
-        <dl>
-          <dt className="text-muted">Favorite game</dt>
-          <dd>TODO:</dd>
-        </dl>
-        <StatSectionSeparator />
-        <dl>
-          <dt className="text-muted">Last 5 game results</dt>
-          <dd className="flex gap-1">
-            {new Array(4).fill(null).map((_, i) => {
-              return <Pill key={i}>{i}Th</Pill>;
-            })}
-          </dd>
-        </dl>
-      </StatSection>
-      <section>
-        <div className="flex gap-4 lg:gap-8 mb-4 border-b border-default">
-          <ToggleButton active={showGames} onClick={() => setShowGames(true)}>
-            Games (7)
-          </ToggleButton>
-          <ToggleButton active={!showGames} onClick={() => setShowGames(false)}>
-            Members (486)
-          </ToggleButton>
-        </div>
-        {showGames ? <Games /> : <Members />}
-      </section>
+    <div className="relative">
+      <div className="absolute top-0 left-0 w-full h-[40%] -z-10 bg-[40%_0px] bg-[length:1440px] bg-no-repeat bg-local bg-[url(/cover.png)]">
+        <div className="absolute top-o left-0 w-full h-full bg-gradient-to-t from-white dark:from-black to-transparent from-20% to-60%" />
+      </div>
+      <div className="flex flex-col gap-4 lg:gap-6 container p-4 mx-auto">
+        <header className="flex gap-2 lg:gap-4 pt-5 lg:pt-10">
+          <div className="rounded-full w-14 h-14 lg:w-[112px] lg:h-[112px] bg-vega-clight-700 dark:bg-vega-cdark-700 shrink-0" />
+          <div className="flex flex-col items-start gap-1 lg:gap-3">
+            <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
+              Vega Maxis long team name here
+            </h1>
+            <JoinButton joined={true} />
+          </div>
+        </header>
+        <StatSection>
+          <StatList>
+            <Stat value={24} label={'Rank'} tooltip={'My rank description'} />
+            <Stat value={486} label={'Members'} />
+            <Stat
+              value={7}
+              label={'Total games'}
+              tooltip={'My games description'}
+            />
+          </StatList>
+          <StatSectionSeparator />
+          <StatList>
+            <Stat value={'4.76K'} label={'Total volume'} />
+            <Stat
+              value={'15.2K'}
+              label={'Rewards paid'}
+              tooltip={'My rewards paid description'}
+            />
+            <Stat
+              value={'10K'}
+              label={<PnlLabel value={'-100'} />}
+              tooltip={'PnL description'}
+            />
+          </StatList>
+        </StatSection>
+        <StatSection>
+          <dl>
+            <dt className="text-muted text-sm">Favorite game</dt>
+            <dd>TODO:</dd>
+          </dl>
+          <StatSectionSeparator />
+          <dl>
+            <dt className="text-muted text-sm">Last 5 game results</dt>
+            <dd className="flex gap-1">
+              {new Array(4).fill(null).map((_, i) => {
+                return <Pill key={i}>{i}Th</Pill>;
+              })}
+            </dd>
+          </dl>
+        </StatSection>
+        <section>
+          <div className="flex gap-4 lg:gap-8 mb-4 border-b border-default">
+            <ToggleButton active={showGames} onClick={() => setShowGames(true)}>
+              Games (7)
+            </ToggleButton>
+            <ToggleButton
+              active={!showGames}
+              onClick={() => setShowGames(false)}
+            >
+              Members (486)
+            </ToggleButton>
+          </div>
+          {showGames ? <Games /> : <Members />}
+        </section>
+      </div>
     </div>
   );
 };
@@ -122,11 +144,30 @@ const StatList = ({ children }: { children: ReactNode }) => {
   return <dl className="flex gap-4 lg:gap-8">{children}</dl>;
 };
 
-const Stat = ({ value, label }: { value: ReactNode; label: ReactNode }) => {
+const Stat = ({
+  value,
+  label,
+  tooltip,
+}: {
+  value: ReactNode;
+  label: ReactNode;
+  tooltip?: string;
+}) => {
   return (
     <div>
       <dd className="text-3xl lg:text-4xl">{value}</dd>
-      <dt className="text-muted">{label}</dt>
+      <dt className="text-sm text-muted">
+        {tooltip ? (
+          <Tooltip description={tooltip} underline={false}>
+            <span className="flex items-center gap-2">
+              {label}
+              <VegaIcon name={VegaIconNames.INFO} size={12} />
+            </span>
+          </Tooltip>
+        ) : (
+          label
+        )}
+      </dt>
     </div>
   );
 };
@@ -174,10 +215,13 @@ const JoinButton = ({ joined }: { joined: boolean }) => {
   const [open, setOpen] = useState(false);
   if (joined) {
     return (
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3">
         <Button intent={Intent.None} disabled={true}>
           <span className="flex items-center gap-2">
-            Joined <VegaIcon name={VegaIconNames.TICK} />
+            Joined{' '}
+            <span className="text-vega-green">
+              <VegaIcon name={VegaIconNames.TICK} />
+            </span>
           </span>
         </Button>
         <TradingDropdown
@@ -201,3 +245,21 @@ const JoinButton = ({ joined }: { joined: boolean }) => {
 
   return <Button intent={Intent.Primary}>Join this team</Button>;
 };
+
+const PnlLabel = ({ value }: { value: string }) => {
+  const isUp = new BigNumber(value).isGreaterThan(0);
+  return (
+    <span>
+      PnL{' '}
+      <span
+        className={classNames({
+          'text-market-green-550 dark:text-market-green': isUp,
+          'text-market-red': !isUp,
+        })}
+      >
+        {isUp ? '+' : ''}
+        {value.toString()}%
+      </span>
+    </span>
+  );
+};