💄 use tabler icons

dxanh97 · Oct 13, 2024 · c68de88 · c68de88
1 parent d8bb2d2
commit c68de88
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 42 deletions.
diff --git a/src/components/game-screen/EditRoundButton.tsx b/src/components/game-screen/EditRoundButton.tsx
@@ -11,15 +11,14 @@ import {
 } from '@mantine/core';
 import { Carousel } from '@mantine/carousel';
 import { useDisclosure, useMap } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
 
 import { selectRoundById } from '../../redux/round.selector';
 import { useAppSelector } from '../../redux/store';
 import { selectGameById } from '../../redux/game.selector';
 
 import { formatNumber, getColor, getSum } from '../../utils/helpers';
 
-import EmojiButton from '../shared/EmojiButton';
-
 interface Props {
   roundId: string;
   onSave: (result: Map<string, number>) => void;
@@ -143,7 +142,9 @@ function EditRoundButton(props: Props) {
         </Button>
       </Modal>
 
-      <EmojiButton emoji="📝" onClick={open} />
+      <ActionIcon variant="subtle" onClick={open}>
+        <IconEdit />
+      </ActionIcon>
     </>
   );
 }

diff --git a/src/components/game-screen/RoundsList.tsx b/src/components/game-screen/RoundsList.tsx
@@ -1,4 +1,5 @@
 import {
+  ActionIcon,
   Avatar,
   Box,
   Card,
@@ -9,6 +10,7 @@ import {
   Text,
 } from '@mantine/core';
 import { modals } from '@mantine/modals';
+import { IconTrashX } from '@tabler/icons-react';
 
 import { useAppDispatch, useAppSelector } from '../../redux/store';
 import { selectAllRoundsFromGameId } from '../../redux/round.selector';
@@ -17,7 +19,6 @@ import { deleteRound, updateRound } from '../../redux/round.slice';
 import { formatNumber, getColor } from '../../utils/helpers';
 
 import Empty from '../shared/Empty';
-import EmojiButton from '../shared/EmojiButton';
 import EditRoundButton from './EditRoundButton';
 
 interface Props {
@@ -64,17 +65,22 @@ function RoundsList(props: Props) {
         const { id, stats, timestamp } = round;
         return (
           <Box key={id} mt="md">
-            <Card shadow="sm" p="xs" py={0} radius="md" withBorder>
+            <Card shadow="sm" p="xs" pt="xs" pb={0} radius="md" withBorder>
               <Group justify="space-between">
-                <Text c="dimmed">
+                <Text fw={800}>
                   {`#${rounds.length - i} - ${formatDate(timestamp)}`}
                 </Text>
                 <Group>
                   <EditRoundButton
                     roundId={round.id}
                     onSave={(statsMap) => onUpdateRound(round.id, statsMap)}
                   />
-                  <EmojiButton emoji="🗑️" onClick={() => onDeleteRound(id)} />
+                  <ActionIcon
+                    variant="subtle"
+                    onClick={() => onDeleteRound(id)}
+                  >
+                    <IconTrashX />
+                  </ActionIcon>
                 </Group>
               </Group>
               <ScrollArea>

diff --git a/src/components/shared/AddActionButton.tsx b/src/components/shared/AddActionButton.tsx
@@ -1,5 +1,6 @@
 import { MouseEventHandler } from 'react';
-import { ActionIcon, Text, useComputedColorScheme } from '@mantine/core';
+import { ActionIcon, useComputedColorScheme } from '@mantine/core';
+import { IconPlus } from '@tabler/icons-react';
 
 interface Props {
   onClick: MouseEventHandler<HTMLButtonElement>;
@@ -19,9 +20,7 @@ function AddActionButton(props: Props) {
       right={20}
       onClick={onClick}
     >
-      <Text fz="xl" lh={0}>
-        ➕
-      </Text>
+      <IconPlus />
     </ActionIcon>
   );
 }

diff --git a/src/components/shared/EmojiButton.tsx b/src/components/shared/EmojiButton.tsx
diff --git a/src/components/shared/PlayerAvatars.tsx b/src/components/shared/PlayerAvatars.tsx
@@ -8,6 +8,7 @@ function PlayerAvatars(props: Props) {
   const { playerNames } = props;
   const displayedPlayers = playerNames.slice(0, 3);
   const hiddenPlayers = playerNames.slice(3);
+
   return (
     <Tooltip.Group openDelay={300} closeDelay={100}>
       <Avatar.Group spacing="sm">

diff --git a/src/components/shared/TopNav.tsx b/src/components/shared/TopNav.tsx
@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { Group, Text } from '@mantine/core';
+import { Button, Group, Text } from '@mantine/core';
 import { Link } from 'react-router-dom';
+import { IconArrowLeft } from '@tabler/icons-react';
 
 interface Props {
   title: string;
@@ -11,16 +12,14 @@ function TopNav(props: PropsWithChildren<Props>) {
   const { title, isHome = false, children } = props;
 
   return (
-    <Group justify="space-between" align="center">
+    <Group justify="space-between">
       <Group>
         {isHome ? (
           <Text fz="30px">📒</Text>
         ) : (
-          <Link to="/">
-            <Text fz="30px" style={{ textShadow: '1px 1px 2px white' }}>
-              🔙
-            </Text>
-          </Link>
+          <Button variant="transparent" p={0} component={Link} to="/">
+            <IconArrowLeft />
+          </Button>
         )}
         <Text size="xl" fw={800}>
           {title}

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,7 +1,8 @@
-import { Box, Card, Group, Input, Text } from '@mantine/core';
+import { ActionIcon, Box, Card, Group, Input, Text } from '@mantine/core';
 import { useDebouncedCallback } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useNavigate } from 'react-router-dom';
+import { IconEdit, IconTrashX } from '@tabler/icons-react';
 
 import { useAppDispatch, useAppSelector } from '../redux/store';
 import { selectAllGames } from '../redux/game.selector';
@@ -12,7 +13,6 @@ import TopNav from '../components/shared/TopNav';
 import Empty from '../components/shared/Empty';
 import PlayerAvatars from '../components/shared/PlayerAvatars';
 import AddActionButton from '../components/shared/AddActionButton';
-import EmojiButton from '../components/shared/EmojiButton';
 
 function HomePage() {
   const navigate = useNavigate();
@@ -61,11 +61,15 @@ function HomePage() {
               onChange={(e) => handleUpdateName(x.id, e.target.value)}
             />
             <Group>
-              <EmojiButton
-                emoji="📝"
+              <ActionIcon
+                variant="subtle"
                 onClick={() => navigate(`/game/${x.id}`)}
-              />
-              <EmojiButton emoji="🗑️" onClick={() => onDeleteGame(x.id)} />
+              >
+                <IconEdit />
+              </ActionIcon>
+              <ActionIcon variant="subtle" onClick={() => onDeleteGame(x.id)}>
+                <IconTrashX />
+              </ActionIcon>
             </Group>
           </Group>
           <Text c="dimmed">{formatDateTime(x.timestamp)}</Text>