Update icons to phospher icons

decentdao · Apr 24, 2024 · 81bf40d · 81bf40d
1 parent bb3b95b
commit 81bf40d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 37 deletions.
diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx
@@ -1,4 +1,5 @@
-import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react';
+import { Box, Hide, Text } from '@chakra-ui/react';
+import { Icon as PhospherIcon } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { NavigationTooltip } from './NavigationTooltip';
 
@@ -8,7 +9,7 @@ interface INavigationLink {
   href: string;
   testId: string;
   routeKey?: string;
-  Icon: ComponentWithAs<'svg', IconProps>;
+  Icon: PhospherIcon;
   closeDrawer?: () => void;
 }
 
@@ -41,7 +42,7 @@ export function NavigationExternalLink({
           _hover={{ color: 'gold.500-hover', cursor: 'pointer' }}
           my={3}
         >
-          <Icon boxSize="1.5rem" />
+          <Icon size="1.5rem" />
           <Hide above="md">
             <Text textStyle="text-md-mono-medium">{t(tooltipKey)}</Text>
           </Hide>

diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx
@@ -1,4 +1,5 @@
-import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react';
+import { Box, Hide, Text } from '@chakra-ui/react';
+import { Icon as PhospherIcon } from '@phosphor-icons/react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useMatch } from 'react-router-dom';
@@ -9,7 +10,7 @@ interface INavigationLink {
   labelKey: string;
   tooltipKey?: string;
   testId: string;
-  Icon: ComponentWithAs<'svg', IconProps>;
+  Icon: PhospherIcon;
   target?: string;
   rel?: string;
   closeDrawer?: () => void;
@@ -55,16 +56,7 @@ export function NavigationLink({
           my={3}
           {...activeColors()}
         >
-          <Icon
-            boxSize="1.5rem"
-            sx={{
-              'g path': {
-                transitionProperty: 'all',
-                transitionDuration: '300ms',
-                transitionTimingFunction: 'ease-out',
-              },
-            }}
-          />
+          <Icon size={'1.5rem'} />
           <Hide above="md">
             <Text textStyle="text-md-mono-medium">{t(labelKey)}</Text>
           </Hide>

diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx
@@ -1,14 +1,15 @@
 import { Box, Flex } from '@chakra-ui/react';
+// import { SupportQuestion, Discord, Documents } from '@decent-org/fractal-ui';
 import {
-  Home,
-  Tree,
-  Proposals,
-  Treasury,
-  SupportQuestion,
-  Discord,
-  Documents,
-  Templates,
-} from '@decent-org/fractal-ui';
+  House,
+  GitFork,
+  Scroll,
+  Coins,
+  SquaresFour,
+  Question,
+  DiscordLogo,
+  BookOpen,
+} from '@phosphor-icons/react';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url';
 import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher';
@@ -43,23 +44,23 @@ function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) {
           ariaLabelKey="ariaLabelFAQ"
           tooltipKey="faq"
           testId="navigationExternal-faq"
-          Icon={SupportQuestion}
+          Icon={Question}
           closeDrawer={closeDrawer}
         />
         <NavigationExternalLink
           href={URL_DISCORD}
           ariaLabelKey="ariaLabelDiscord"
           tooltipKey="discord"
           testId="navigationExternal-discord"
-          Icon={Discord}
+          Icon={DiscordLogo}
           closeDrawer={closeDrawer}
         />
         <NavigationExternalLink
           href={URL_DOCS}
           ariaLabelKey="ariaLabelDocumentation"
           tooltipKey="documentation"
           testId="navigationExternal-documentation"
-          Icon={Documents}
+          Icon={BookOpen}
           closeDrawer={closeDrawer}
         />
       </Flex>
@@ -113,35 +114,35 @@ export function NavigationLinks({
             href={DAO_ROUTES.dao.relative(addressPrefix, address)}
             labelKey="home"
             testId="navigation-daoHomeLink"
-            Icon={Home}
+            Icon={House}
             closeDrawer={closeDrawer}
           />
           <NavigationLink
             href={DAO_ROUTES.hierarchy.relative(addressPrefix, address)}
             labelKey="nodes"
             testId="navigation-hierarchy"
-            Icon={Tree}
+            Icon={GitFork}
             closeDrawer={closeDrawer}
           />
           <NavigationLink
             href={DAO_ROUTES.proposals.relative(addressPrefix, address)}
             labelKey="proposals"
             testId="navigation-proposalsLink"
-            Icon={Proposals}
+            Icon={Scroll}
             closeDrawer={closeDrawer}
           />
           <NavigationLink
             href={DAO_ROUTES.treasury.relative(addressPrefix, address)}
             labelKey="treasury"
             testId="navigation-treasuryLink"
-            Icon={Treasury}
+            Icon={Coins}
             closeDrawer={closeDrawer}
           />
           <NavigationLink
             href={DAO_ROUTES.proposalTemplates.relative(addressPrefix, address)}
             labelKey="proposalTemplates"
             testId="navigation-proposalTemplatesLink"
-            Icon={Templates}
+            Icon={SquaresFour}
             closeDrawer={closeDrawer}
           />
         </Flex>

diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx
@@ -1,5 +1,5 @@
 import { Box, Center, Hide, Text } from '@chakra-ui/react';
-import { Globe } from '@decent-org/fractal-ui';
+import { GlobeSimple } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { OptionMenu } from '../components/ui/menus/OptionMenu';
 import { supportedLanguages } from '.';
@@ -25,10 +25,7 @@ export function LanguageSwitcher() {
             alignItems="center"
             my={3}
           >
-            <Globe
-              boxSize={6}
-              minWidth="auto"
-            />
+            <GlobeSimple size="1.5rem" />
             <Hide above="md">
               <Text textStyle="text-md-mono-medium">{t(i18n.language.slice(0, 2))}</Text>
             </Hide>