[ee2a4] Add default jurisdiction and profile avatars

YourJustice-Live · May 21, 2022 · 98d4a28 · 98d4a28
1 parent 022d7bf
commit 98d4a28
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 27 deletions.
diff --git a/components/case/CaseCreateDialog.js b/components/case/CaseCreateDialog.js
@@ -28,7 +28,7 @@ import useJuridictionContract from 'hooks/contracts/useJurisdictionContract';
 import useJurisdiction from 'hooks/useJurisdiction';
 import useToasts from 'hooks/useToasts';
 import useWeb3Context from 'hooks/useWeb3Context';
-import { IconProfile, IconWallet } from 'icons';
+import { IconJurisdiction, IconProfile, IconWallet } from 'icons';
 import { capitalize } from 'lodash';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -556,12 +556,11 @@ export default function CaseCreateDialog({
                 sx={{
                   width: 22,
                   height: 22,
-                  bgcolor: 'primary.main',
                   fontSize: 14,
                 }}
                 src={jurisdiction.image}
               >
-                J
+                <IconJurisdiction width="22" height="22" />
               </Avatar>
               <Typography>{jurisdiction.name}</Typography>
             </Stack>

diff --git a/components/jurisdiction/JurisdictionCard.js b/components/jurisdiction/JurisdictionCard.js
@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import { Box } from '@mui/system';
 import { JURISDICTION_ROLE } from 'constants/contracts';
+import { IconJurisdiction } from 'icons';
 import NextLink from 'next/link';
 import { useEffect, useState } from 'react';
 
@@ -40,14 +41,13 @@ export default function JurisdictionCard({ jurisdiction }) {
                 <Avatar
                   sx={{
                     cursor: 'pointer',
-                    bgcolor: 'primary.main',
                     width: 82,
                     height: 82,
                     borderRadius: '16px',
                   }}
                   src={jurisdiction.image}
                 >
-                  J
+                  <IconJurisdiction width="82" height="82" />
                 </Avatar>
               </NextLink>
             </Box>

diff --git a/components/jurisdiction/JurisdictionMeta.js b/components/jurisdiction/JurisdictionMeta.js
@@ -19,7 +19,13 @@ import useDialogContext from 'hooks/useDialogContext';
 import useJurisdiction from 'hooks/useJurisdiction';
 import useToasts from 'hooks/useToasts';
 import useWeb3Context from 'hooks/useWeb3Context';
-import { IconFlag, IconPassport, IconPlus, IconProfile } from 'icons';
+import {
+  IconFlag,
+  IconJurisdiction,
+  IconPassport,
+  IconPlus,
+  IconProfile,
+} from 'icons';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { palette } from 'theme/palette';
@@ -106,14 +112,13 @@ function JurisdictionAvatar({ jurisdiction, sx }) {
     <Box sx={{ ...sx }}>
       <Avatar
         sx={{
-          bgcolor: 'primary.main',
           width: 164,
           height: 164,
           borderRadius: '24px',
         }}
         src={jurisdiction?.image}
       >
-        J
+        <IconJurisdiction width="164" height="164" />
       </Avatar>
     </Box>
   );

diff --git a/components/layout/Header/JurisdictionLink.js b/components/layout/Header/JurisdictionLink.js
@@ -1,6 +1,7 @@
 import { Avatar, Skeleton, Stack, Typography } from '@mui/material';
 import useJurisdiction from 'hooks/useJurisdiction';
 import useToasts from 'hooks/useToasts';
+import { IconJurisdiction } from 'icons';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -35,12 +36,11 @@ export default function JurisdictionLink() {
             sx={{
               width: 22,
               height: 22,
-              bgcolor: 'primary.main',
               fontSize: 14,
             }}
             src={jurisdiction.image}
           >
-            J
+            <IconJurisdiction width="22" height="22" />
           </Avatar>
           <Typography variant="h5" sx={{ fontWeight: 500 }}>
             {jurisdiction.name}

diff --git a/components/layout/Header/Navigation.js b/components/layout/Header/Navigation.js
@@ -18,6 +18,7 @@ import useDialogContext from 'hooks/useDialogContext';
 import useWeb3Context from 'hooks/useWeb3Context';
 import {
   IconHome,
+  IconMember,
   IconNotification,
   IconPlus,
   IconProfile,
@@ -179,10 +180,10 @@ export default function Navigation() {
           <IconButton onClick={handleOpenUserMenu} sx={{ ml: 1, p: '6px' }}>
             <Avatar
               src={accountProfile?.avatarNftUriImage}
-              sx={{ bgcolor: 'grey.50', width: 36, height: 36 }}
+              sx={{ width: 36, height: 36 }}
             >
               {account ? (
-                <IconProfile hexColor={palette.grey[600]} />
+                <IconMember width="36" height="36" />
               ) : (
                 <MenuOutlined sx={{ color: palette.grey[600] }} />
               )}

diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
@@ -9,9 +9,8 @@ import {
 } from '@mui/material';
 import { Box } from '@mui/system';
 import useWeb3Context from 'hooks/useWeb3Context';
-import { IconProfile } from 'icons';
+import { IconMember } from 'icons';
 import NextLink from 'next/link';
-import { palette } from 'theme/palette';
 import { formatAddress } from 'utils/formatters';
 
 /**
@@ -47,14 +46,13 @@ export function Sidebar() {
               <Box sx={{ mr: 1.5 }}>
                 <Avatar
                   sx={{
-                    bgcolor: 'grey.50',
                     width: 82,
                     height: 82,
                     borderRadius: '16px',
                   }}
                   src={accountProfile.avatarNftUriImage}
                 >
-                  <IconProfile hexColor={palette.grey[600]} />
+                  <IconMember width="82" height="82" />
                 </Avatar>
               </Box>
               {/* Profile details */}

diff --git a/components/profile/ProfileCard.js b/components/profile/ProfileCard.js
@@ -16,9 +16,8 @@ import {
 import CaseCreateDialog from 'components/case/CaseCreateDialog';
 import useDialogContext from 'hooks/useDialogContext';
 import useWeb3Context from 'hooks/useWeb3Context';
-import { IconProfile } from 'icons';
+import { IconMember } from 'icons';
 import NextLink from 'next/link';
-import { palette } from 'theme/palette';
 import { formatAddress } from 'utils/formatters';
 
 /**
@@ -52,15 +51,14 @@ export default function ProfileCard({ profile, jurisdiction }) {
                 <NextLink href={`/profile/${profile.account}`} passHref>
                   <Avatar
                     sx={{
-                      bgcolor: 'grey.50',
                       cursor: 'pointer',
                       width: 82,
                       height: 82,
                       borderRadius: '16px',
                     }}
                     src={profile.avatarNftUriImage}
                   >
-                    <IconProfile hexColor={palette.grey[600]} />
+                    <IconMember width="82" heigth="82" />
                   </Avatar>
                 </NextLink>
               </Box>

diff --git a/components/profile/ProfileCompactCard.js b/components/profile/ProfileCompactCard.js
@@ -1,9 +1,8 @@
 import { Avatar, Box, Link, Skeleton, Typography } from '@mui/material';
 import useProfile from 'hooks/useProfile';
 import useToasts from 'hooks/useToasts';
-import { IconProfile } from 'icons';
+import { IconMember } from 'icons';
 import { useEffect, useState } from 'react';
-import { palette } from 'theme/palette';
 import { formatAddress } from 'utils/formatters';
 
 /**
@@ -45,9 +44,9 @@ export default function ProfileCompactCard({
         <>
           <Avatar
             src={(profile || accountProfile).avatarNftUriImage}
-            sx={{ bgcolor: 'grey.50', width: 24, height: 24 }}
+            sx={{ width: 24, height: 24 }}
           >
-            <IconProfile hexColor={palette.grey[600]} size={14} />
+            <IconMember width="24" heigth="24" />
           </Avatar>
           <Typography variant="body2" sx={{ fontWeight: 'bold', ml: 1 }}>
             {disableLink ? (

diff --git a/components/profile/ProfileMeta.js b/components/profile/ProfileMeta.js
@@ -19,7 +19,7 @@ import {
 import { Box } from '@mui/system';
 import { PROFILE_TRAIT_TYPE } from 'constants/metadata';
 import useWeb3Context from 'hooks/useWeb3Context';
-import { IconProfile } from 'icons';
+import { IconMember, IconProfile } from 'icons';
 import NextLink from 'next/link';
 import { palette } from 'theme/palette';
 import { formatAddress } from 'utils/formatters';
@@ -124,14 +124,13 @@ function ProfileAvatar({ profile, sx }) {
     <Box sx={{ ...sx }}>
       <Avatar
         sx={{
-          bgcolor: 'grey.50',
           width: 164,
           height: 164,
           borderRadius: '24px',
         }}
         src={profile?.avatarNftUriData?.image}
       >
-        <IconProfile hexColor={palette.grey[600]} />
+        <IconMember width="164" height="164" />
       </Avatar>
     </Box>
   );

diff --git a/icons/index.js b/icons/index.js
@@ -21,7 +21,9 @@ export { default as IconEquality } from './svg/IconEquality.svg';
 export { default as IconFinancialPyramids } from './svg/IconFinancialPyramids.svg';
 export { default as IconGreatService } from './svg/IconGreatService.svg';
 export { default as IconIllegalCopy } from './svg/IconIllegalCopy.svg';
+export { default as IconJurisdiction } from './svg/IconJurisdiction.svg';
 export { default as IconLie } from './svg/IconLie.svg';
+export { default as IconMember } from './svg/IconMember.svg';
 export { default as IconNetworkingHelp } from './svg/IconNetworkingHelp.svg';
 export { default as IconPersonalityStealing } from './svg/IconPersonalityStealing.svg';
 export { default as IconRecommendations } from './svg/IconRecommendations.svg';

diff --git a/icons/svg/IconJurisdiction.svg b/icons/svg/IconJurisdiction.svg
diff --git a/icons/svg/IconMember.svg b/icons/svg/IconMember.svg