feat: add dashboard link and icons to profile menu

MetaFam · Dec 26, 2021 · f661dca · f661dca
1 parent 7ee77db
commit f661dca
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 4 deletions.
diff --git a/packages/design-system/src/icons/Dashboard.tsx b/packages/design-system/src/icons/Dashboard.tsx
@@ -0,0 +1,15 @@
+import { createIcon } from '@chakra-ui/icons';
+import * as React from 'react';
+
+export const Dashboard = createIcon({
+  displayName: 'Dashboard',
+  path: (
+    <g>
+      <path d="M57,12H7a3.00328,3.00328,0,0,0-3,3V49a3.00327,3.00327,0,0,0,3,3H57a3.00327,3.00327,0,0,0,3-3V15A3.00328,3.00328,0,0,0,57,12ZM6,15a1.00127,1.00127,0,0,1,1-1H57a1.00127,1.00127,0,0,1,1,1v3H6ZM58,49a1.00126,1.00126,0,0,1-1,1H7a1.00126,1.00126,0,0,1-1-1V20H58Z" />
+      <path d="M55.0098 15H55a1.00491 1.00491 0 1 0 .0098 0zM51 15h-.0098A1.00491 1.00491 0 1 0 51 15zM47.0049 15h-.0098a1.00491 1.00491 0 1 0 .0098 0zM9 24h7a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2zM9 28h7a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2zM9 32h7a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2zM9 36h7a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2zM39 34h8.8188a.99938.99938 0 0 0 .9834-1.18069 11.95632 11.95632 0 0 0-3.0557-6.0119L46.6255 25H51a1 1 0 0 0 0-2H46a1.00007 1.00007 0 0 0-.8994.56251l-.8999 1.8499a11.916 11.916 0 0 0-5.02-2.2146A.99939.99939 0 0 0 38 24.18121V33A1.0001 1.0001 0 0 0 39 34zm1-8.542A10.06564 10.06564 0 0 1 46.542 32H40zM55 25h.0098A1.00491 1.00491 0 1 0 55 25z" />
+      <path d="M55 26H52a1 1 0 0 0 0 2h3a1 1 0 0 0 0-2zM27.5703 42.56251L26.3843 45H22.0098a1 1 0 0 0 0 2h5a1.00005 1.00005 0 0 0 .8994-.56249l1.1844-2.4337a11.97973 11.97973 0 0 0 19.7086-6.8231A.9994.9994 0 0 0 47.8188 36H36V24.18121a.99939.99939 0 0 0-1.1807-.9834 11.985 11.985 0 0 0-7.1864 19.2829A.926.926 0 0 0 27.5703 42.56251zM34 25.45651V37a1.0001 1.0001 0 0 0 1 1H46.5435A10.00237 10.00237 0 1 1 34 25.45651zM18.0098 47a1 1 0 0 0 0-2H18a1 1 0 0 0 .0098 2z" />
+      <path d="M18.0098,44h3a1,1,0,0,0,0-2h-3a1,1,0,0,0,0,2Z" />
+    </g>
+  ),
+  viewBox: '0 0 64 64',
+});
diff --git a/packages/design-system/src/icons/LogOut.tsx b/packages/design-system/src/icons/LogOut.tsx
@@ -0,0 +1,17 @@
+import { createIcon } from '@chakra-ui/icons';
+import * as React from 'react';
+
+export const LogOut = createIcon({
+  displayName: 'LogOut',
+  path: (
+    <g>
+      <g>
+        <path d="m2 12 5 4v-3h9v-2H7V8z" />
+      </g>
+      <g>
+        <path d="M13.001 2.999a8.938 8.938 0 0 0-6.364 2.637L8.051 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051 2.051 3.08 2.051 4.95-.729 3.628-2.051 4.95-3.08 2.051-4.95 2.051-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637c1.7-1.699 2.637-3.959 2.637-6.364s-.937-4.665-2.637-6.364a8.938 8.938 0 0 0-6.364-2.637z" />
+      </g>
+    </g>
+  ),
+  viewBox: '0 0 24 24',
+});
diff --git a/packages/design-system/src/icons/Profile.tsx b/packages/design-system/src/icons/Profile.tsx
@@ -0,0 +1,27 @@
+import { createIcon } from '@chakra-ui/icons';
+import * as React from 'react';
+
+export const Profile = createIcon({
+  displayName: 'Profile',
+  path: (
+    <g>
+      <g>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M16 9C16 11.2091 14.2091 13 12 13C9.79086 13 8 11.2091 8 9C8 6.79086 9.79086 5 12 5C14.2091 5 16 6.79086 16 9ZM14 9C14 10.1046 13.1046 11 12 11C10.8954 11 10 10.1046 10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9Z"
+          fill="currentColor"
+        />
+      </g>
+      <g>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 14.0902 3.71255 16.014 4.90798 17.5417C6.55245 15.3889 9.14627 14 12.0645 14C14.9448 14 17.5092 15.3531 19.1565 17.4583C20.313 15.9443 21 14.0524 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12ZM12 21C9.84977 21 7.87565 20.2459 6.32767 18.9878C7.59352 17.1812 9.69106 16 12.0645 16C14.4084 16 16.4833 17.1521 17.7538 18.9209C16.1939 20.2191 14.1881 21 12 21Z"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  ),
+  viewBox: '0 0 24 24',
+});
diff --git a/packages/design-system/src/icons/index.ts b/packages/design-system/src/icons/index.ts
@@ -1,3 +1,6 @@
 export { BrightIdIcon } from './BrightIdIcon';
+export { Dashboard } from './Dashboard';
 export { DropDownIcon } from './DropDownIcon';
 export { Icon3box } from './Icon3box';
+export { LogOut } from './LogOut';
+export { Profile } from './Profile';
diff --git a/packages/web/components/MegaMenu.tsx b/packages/web/components/MegaMenu.tsx
@@ -6,15 +6,18 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  Dashboard,
   Flex,
   HamburgerIcon,
   Icon,
   Link,
+  LogOut,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
   MetaButton,
+  Profile,
   SimpleGrid,
   Spinner,
   Stack,
@@ -404,9 +407,24 @@ const PlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
             href={`/player/${player.username}`}
             _hover={{ textDecoration: 'none' }}
           >
-            <MenuItem>View Profile</MenuItem>
+            <MenuItem>
+              <Profile w={4} h={4} mr={4} /> View Profile
+            </MenuItem>
           </MetaLink>
-          <MenuItem onClick={disconnect}>Disconnect</MenuItem>
+          <MetaLink
+            color="black"
+            href={'/dashboard'}
+            _hover={{ textDecoration: 'none' }}
+          >
+            <MenuItem>
+              <Dashboard w={4} h={4} mr={4} color="red.500" />
+              Dashboard
+            </MenuItem>
+          </MetaLink>
+          <MenuItem onClick={disconnect}>
+            <LogOut w={4} h={4} mr={4} />
+            Disconnect
+          </MenuItem>
         </MenuList>
       </Menu>
     </Flex>

diff --git a/packages/web/components/PlayerStatsBar.tsx b/packages/web/components/PlayerStatsBar.tsx
@@ -1,12 +1,15 @@
 import {
   Avatar,
   Badge,
+  Dashboard,
   Flex,
   Image,
+  LogOut,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
+  Profile,
   Stack,
   Text,
 } from '@metafam/ds';
@@ -70,9 +73,24 @@ const PlayerStats = () => {
                   href={`/player/${getPlayerName(user.player)}`}
                   _hover={{ textDecoration: 'none' }}
                 >
-                  <MenuItem>View Profile</MenuItem>
+                  <MenuItem>
+                    <Profile w={4} h={4} mr={4} /> View Profile
+                  </MenuItem>
                 </MetaLink>
-                <MenuItem onClick={disconnect}>Disconnect</MenuItem>
+                <MetaLink
+                  color="black"
+                  href={'/dashboard'}
+                  _hover={{ textDecoration: 'none' }}
+                >
+                  <MenuItem>
+                    <Dashboard w={4} h={4} mr={4} color="red.500" />
+                    Dashboard
+                  </MenuItem>
+                </MetaLink>
+                <MenuItem onClick={disconnect}>
+                  <LogOut w={4} h={4} mr={4} />
+                  Disconnect
+                </MenuItem>
               </MenuList>
             </Menu>
             <Stack my={2} ml={2}>