Design feedback fix

src/react/components/MetamaskAvatar.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Jazzicon from "react-jazzicon/dist/Jazzicon"
+import { Row } from "./Row"
+import { jsNumberForAddress } from "react-jazzicon"
+import { LittleMetamaskIcon } from "../icons/LittleMetamaskIcon"
+import { Column } from "./Column"
+import { useSoulnames } from "../hooks/useSoulnames"
+import { useMetamask } from "../hooks/useMetamask"
+
+export const MetamaskAvatar = () => {
+    const { account } = useMetamask();
+
+    const { soulnames, isLoading: isLoadingSoulname } = useSoulnames(account)
+
+    let shortAccount = account ? `${account.slice(0, 18)}...${account.slice(-4)}` : null;
+
+    return <Row className="metamask-account">
+        <Row style={{
+            position: 'relative',
+            width: 40,
+        }}>
+            <Jazzicon diameter={30} seed={jsNumberForAddress(account ?? '')} />
+            <LittleMetamaskIcon width={24} height={24} style={{
+                position: 'absolute',
+                top: 0,
+                left: -8,
+            }} />
+        </Row>
+
+        <Column style={{ justifyContent: 'center' }}>
+            {!isLoadingSoulname && <p>{soulnames?.[0]?.name ?? ""}</p>}
+            <p style={{ fontWeight: 400 }}>{shortAccount}</p>
+        </Column>
+    </Row>
+}

src/react/features/Dashboard/Dashboard.tsx

@@ -7,12 +7,16 @@ import IntroPage from './IntroPage';
 
 export const Dashboard = () => {
   const { account, isLoading } = useDashboardContext()
-  
+
   return (
     <div className='dashboard'>
       <Sidebar />
-      {account && <Content />}
+      {account &&
+        <div className='content-wrapper'>
+          <Content />
+        </div>}
       {!isLoading && !account && (
+
         <div className='content'>
           <Header />
           <IntroPage />

src/react/features/Dashboard/Header.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '../../components/Button';
 import { useDashboardContext } from '../../contexts/DashboardContextProvider';
 import { Row } from '../../components/Row';
+import { MetamaskAvatar } from '../../components/MetamaskAvatar';
 
 export const Header = () => {
 
@@ -15,7 +16,7 @@ export const Header = () => {
   return (
     <header className='dashboard-header'>
       <h1>Dashboard</h1>
-      {account && <Row className='account-container'><img src="/icons/wallet-connected.png" alt="wallet-connected" />{shortAccount}</Row>}
+      {account && <MetamaskAvatar />}
       {!account && <Button className='btn-connect' onClick={initiateConnection}>Connect wallet</Button>}
     </header>
   )

src/react/features/Popup/MetamaskConnectButton.tsx

@@ -6,11 +6,10 @@ import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 import { LittleMetamaskIcon } from '../../icons/LittleMetamaskIcon';
 import { Column } from '../../components/Column';
 import { useSoulnames } from '../../hooks/useSoulnames';
+import { MetamaskAvatar } from '../../components/MetamaskAvatar';
 
 export const MetamaskConnectButton = () => {
     const { initiateConnection, account } = useMetamask();
-    const { soulnames, isLoading: isLoadingSoulname } = useSoulnames(account)
-
 
     const [buttonText, buttonColor] = useMemo(() => {
         if (account) return ["Connected to MetaMask", "#28A745"]
@@ -19,28 +18,9 @@ export const MetamaskConnectButton = () => {
     }, [account])
 
 
-    let shortAccount = account ? `${account.slice(0, 18)}...${account.slice(-4)}` : null;
-
 
     if (account) {
-        return <Row className="metamask-account">
-            <Row style={{
-                position: 'relative',
-                width: 40,
-            }}>
-                <Jazzicon diameter={30} seed={jsNumberForAddress(account ?? '')} />
-                <LittleMetamaskIcon width={24} height={24} style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: -8,
-                }} />
-            </Row>
-
-            <Column style={{ justifyContent: 'center' }}>
-                {!isLoadingSoulname && <p>{soulnames?.[0]?.name ?? ""}</p>}
-                <p style={{ fontWeight: 400 }}>{shortAccount}</p>
-            </Column>
-        </Row>
+        return <MetamaskAvatar />
 
     }
 

src/react/features/Popup/Popup.tsx

@@ -14,7 +14,7 @@ import { useMetamask } from '../../hooks/useMetamask';
 export const Popup = () => {
 
     const { account, isLoading: isMetamaskLoading } = useMetamask();
-    const metrics = useMetrics(account);
+    const metrics = useMetrics(account ?? "0x");
     const { isLoading, newPoints, points } = metrics
     const loading = isLoading || isMetamaskLoading;
 
@@ -66,8 +66,8 @@ export const Popup = () => {
 
                         </Row>
 
-                        <Column style={{ alignItems: 'flex-end', width: 190, gap: spacingSmall }}>
-                            {account && <p className='note-text' style={{ fontSize: 14 }}><span className={newPoints?.surfPoints ? "positive-value-text" : ""}>{newPoints?.surfPoints ? "+" : ""}{newPoints?.surfPoints ?? 0}</span> new points</p>}
+                        <Column style={{ alignItems: 'flex-end', width: 240, gap: spacingSmall }}>
+                            {account && <p className='note-text' style={{ fontSize: 14  }}><span className={newPoints?.surfPoints ? "positive-value-text" : ""}>{newPoints?.surfPoints ? "+" : ""}{newPoints?.surfPoints ?? 0}</span> new points</p>}
                             <Row style={{ width: '100%', justifyContent: 'flex-end' }}>
                                 {account && <EnableTracking />}
                             </Row>

src/react/features/Popup/styles.scss

@@ -45,14 +45,13 @@
   padding: var(--spacing-small) var(--spacing-xlarge);
   border-radius: 50px;
 
-
   p:first-of-type {
     font-weight: bold;
     font-size: 14;
   }
 
-p:nth-of-type(2) {
-  font-weight: normal;
-  font-size: 12;
-}
+  p:nth-of-type(2) {
+    font-weight: normal;
+    font-size: 12;
+  }
 }

src/react/styles/_dashboard.scss

@@ -5,11 +5,18 @@
   flex-direction: row;
   min-height: 100vh;
 
-  .content {
+  .content-wrapper {
     width: 100%;
-    padding: var(--spacing-large) var(--spacing-3xlarge);
-  }
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 
+    .content {
+      width: 100%;
+      max-width: 1480px;
+      padding: var(--spacing-large) var(--spacing-3xlarge);
+    }
+  }
   .dashboard-header {
     padding-left: var(--spacing-xlarge);
     margin-bottom: var(--spacing-4xlarge);
@@ -19,6 +26,23 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+
+    .metamask-account {
+      background-color: var(--color-card-background);
+      padding: var(--spacing-small) var(--spacing-xlarge);
+      border-radius: 50px;
+
+      p:first-of-type {
+        font-weight: bold;
+        font-size: 14;
+      }
+
+      p:nth-of-type(2) {
+        font-weight: normal;
+        font-size: 12;
+        color: var(--color-font-light-gray);
+      }
+    }
   }
 }
 

src/react/styles/_popup.scss

@@ -146,3 +146,4 @@ input:focus + .slider {
   margin-right: 10px;
 }
 
+

src/react/styles/globals.scss

@@ -50,7 +50,7 @@
   --color-font-light-gray: #838383;
   --color-font-lighter-gray: #d6d6d6;
   --color-skeleton: rgba(255, 255, 255, 0.1);
-  --color-button-light: #DCDCDC;
+  --color-button-light: #dcdcdc;
 
   --color-disabled: #dedede;
 
@@ -139,3 +139,5 @@ h6 {
 .logo-invert {
   filter: invert(1);
 }
+
+