feat: change icons (#147)

daeuniverse · Jul 10, 2023 · 9c297b3 · 9c297b3
1 parent e64285c
commit 9c297b3
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -15,6 +15,7 @@ export const Section = ({
   title,
   icon,
   bordered,
+  iconPlus,
   onCreate,
   actions,
   highlight,
@@ -23,6 +24,7 @@ export const Section = ({
   title: string
   icon?: React.ReactNode
   bordered?: boolean
+  iconPlus?: React.ReactNode
   onCreate: () => void
   actions?: React.ReactNode
   highlight?: boolean
@@ -47,9 +49,7 @@ export const Section = ({
         <Group>
           {actions}
 
-          <ActionIcon onClick={onCreate}>
-            <IconPlus />
-          </ActionIcon>
+          <ActionIcon onClick={onCreate}>{iconPlus || <IconPlus />}</ActionIcon>
         </Group>
       </Group>
 

diff --git a/src/components/SimpleCard.tsx b/src/components/SimpleCard.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon, Card, Group, Indicator, Modal, Title, UnstyledButton } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { modals } from '@mantine/modals'
-import { IconDetails, IconTrash } from '@tabler/icons-react'
+import { IconEye, IconTrash } from '@tabler/icons-react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -38,7 +38,7 @@ export const SimpleCard = ({
                 {actions}
 
                 <ActionIcon size="xs" onClick={openDetailsModal}>
-                  <IconDetails />
+                  <IconEye />
                 </ActionIcon>
 
                 {!selected && onRemove && (

diff --git a/src/components/UpdateSubscriptionAction.tsx b/src/components/UpdateSubscriptionAction.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon } from '@mantine/core'
-import { IconDownload } from '@tabler/icons-react'
+import { IconRefresh } from '@tabler/icons-react'
 
 import { useUpdateSubscriptionsMutation } from '~/apis'
 
@@ -12,7 +12,7 @@ export const UpdateSubscriptionAction = ({ id, loading }: { id: string; loading?
       size="xs"
       onClick={() => updateSubscriptionsMutation.mutate([id])}
     >
-      <IconDownload />
+      <IconRefresh />
     </ActionIcon>
   )
 }
diff --git a/src/pages/Orchestrate/Node.tsx b/src/pages/Orchestrate/Node.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Spoiler, Text, useMantineTheme } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { IconCloud, IconDetails, IconFileImport } from '@tabler/icons-react'
+import { IconCloud, IconCloudPlus, IconEye, IconFileImport } from '@tabler/icons-react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -30,9 +30,10 @@ export const NodeResource = () => {
     <Section
       title={t('node')}
       icon={<IconCloud />}
-      onCreate={openConfigureNodeFormModal}
+      iconPlus={<IconCloudPlus />}
+      onCreate={openImportNodeFormModal}
       actions={
-        <ActionIcon onClick={openImportNodeFormModal}>
+        <ActionIcon onClick={openConfigureNodeFormModal}>
           <IconFileImport />
         </ActionIcon>
       }
@@ -61,7 +62,7 @@ export const NodeResource = () => {
                 openQRCodeModal()
               }}
             >
-              <IconDetails />
+              <IconEye />
             </ActionIcon>
           }
           onRemove={() => removeNodesMutation.mutate([id])}

diff --git a/src/pages/Orchestrate/Subscription.tsx b/src/pages/Orchestrate/Subscription.tsx
@@ -1,6 +1,6 @@
 import { Accordion, ActionIcon, Group, Spoiler, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { IconCloudComputing, IconDetails, IconDownload } from '@tabler/icons-react'
+import { IconCloudComputing, IconCloudPlus, IconDownload, IconEye } from '@tabler/icons-react'
 import dayjs from 'dayjs'
 import { Fragment, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,6 +37,7 @@ export const SubscriptionResource = () => {
     <Section
       title={t('subscription')}
       icon={<IconCloudComputing />}
+      iconPlus={<IconCloudPlus />}
       onCreate={openImportSubscriptionFormModal}
       bordered
       actions={
@@ -72,7 +73,7 @@ export const SubscriptionResource = () => {
                   openQRCodeModal()
                 }}
               >
-                <IconDetails />
+                <IconEye />
               </ActionIcon>
               <UpdateSubscriptionAction id={subscriptionID} loading={updateSubscriptionsMutation.isLoading} />
             </Fragment>