icon updates

duopaul · Jan 4, 2023 · bddb465 · bddb465
1 parent 6c43449
commit bddb465
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@chakra-ui/react": "^2.4.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@pathwright/pathicons": "^0.3.0",
     "framer-motion": "^6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.js b/src/App.js
@@ -11,17 +11,19 @@ import {
   Button,
   theme,
   useDisclosure,
+  Icon,
   Drawer,DrawerBody,DrawerFooter, DrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton,
   Tabs, TabList, TabPanels, Tab, TabPanel,
 } from '@chakra-ui/react';
-import {
-  EditIcon,
-  ViewIcon,
-  HamburgerIcon,
-  ArrowUpIcon,
-  ChatIcon,
-  StarIcon,
-} from '@chakra-ui/icons';
+
+import { 
+  TextReadingIcon,
+  VideoIcon,
+  CheckDashIcon,
+  InboxInIcon,
+  ChatBubblesIcon,
+  Edit2Icon,
+} from '@pathwright/pathicons';
 
 
 // Step Group Component 
@@ -38,11 +40,11 @@ const StepGroup = (props) => (
 
 // Step Action Icons
 const iconMap = {
-  read: <EditIcon />,
-  watch: <ViewIcon />,
-  todo: <HamburgerIcon />,
-  submit: <ArrowUpIcon />,
-  discuss: <ChatIcon />,
+  read: TextReadingIcon,
+  watch: VideoIcon,
+  todo: CheckDashIcon,
+  submit: InboxInIcon,
+  discuss: ChatBubblesIcon,
 };
 
 // Step Component
@@ -51,7 +53,7 @@ const Step = ({ action, title }) => {
     <Box w="100%">
       <Link href="#" isExternal>
         <Box display="Flex" alignItems="center" backgroundColor="white" p="2" shadow="base">
-          {iconMap[action]}
+          <Icon as={iconMap[action]} />
           <Text ml="2" fontSize="md">
             {title}
           </Text>
@@ -73,14 +75,14 @@ const Toolbar = () => {
 
       <Box color="white" align="center" p="3" borderBottom="white" _hover={{ bg: "gray.500", cursor: "pointer", transition: "all 0.2s" }}>
         <Link ref={designPanelRef} onClick={onOpen}>
-        <EditIcon boxSize={8}/>
+        <Icon as={Edit2Icon}/>
         <Text fontSize="sm">Design</Text>
         </Link>
       </Box>
 
       <Box color="white" align="center" p="3" _hover={{ bg: "gray.500", cursor: "pointer", transition: "all 0.3s" }}>
         <Link>
-        <ChatIcon boxSize={8}/>
+        <Icon as={ChatBubblesIcon}/>
         <Text fontSize="sm">Community</Text>
         </Link>
       </Box>
@@ -98,15 +100,15 @@ const Toolbar = () => {
             <Tabs>
               <TabList>
                 <Tab>
-                 <StarIcon />
+
                   Style
                 </Tab>
                 <Tab>
-                  <StarIcon />
+
                   Settings
                 </Tab>
                 <Tab>
-                  <StarIcon />
+
                   Publish
                 </Tab>
               </TabList>

diff --git a/yarn.lock b/yarn.lock
@@ -2498,6 +2498,15 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pathwright/pathicons@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@pathwright/pathicons/-/pathicons-0.3.0.tgz#4aeb3feac6b04f30a6ae6a5f3ac9b513abdc43cd"
+  integrity sha512-3HxQM2PL5qM8Pln0nG7U00h+CymRD0nyR8WVKbtfydxd6eC25Roa622U0m8uFM9N6PvzTatq2Ro1+BOlCYXPrw==
+  dependencies:
+    prop-types "^15.8.1"
+    react "^18.2.0"
+    react-dom "^18.2.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"