💄 use tabler icon for everything

dxanh97 · Oct 14, 2024 · aaf79e6 · aaf79e6
1 parent c68de88
commit aaf79e6
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 47 deletions.
diff --git a/src/components/game-screen/EditablePlayerOrder.tsx b/src/components/game-screen/EditablePlayerOrder.tsx
@@ -2,6 +2,7 @@
 import { Avatar, Box, Button, Card, Group, Modal, Text } from '@mantine/core';
 import { useDisclosure, useListState } from '@mantine/hooks';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { IconGripVertical } from '@tabler/icons-react';
 
 import { useAppDispatch, useAppSelector } from '../../redux/store';
 import { selectGameById } from '../../redux/game.selector';
@@ -48,16 +49,23 @@ function EditablePlayerOrder(props: Props) {
                     {(draggableProvided) => (
                       <Card
                         {...draggableProvided.draggableProps}
-                        {...draggableProvided.dragHandleProps}
                         ref={draggableProvided.innerRef}
                         mb="sm"
                         p="xs"
                         shadow="sm"
                         withBorder
                       >
                         <Group>
-                          <Avatar name={item} color="initials" />
-                          <Text fw={800}>{item}</Text>
+                          <Group flex={1}>
+                            <Avatar name={item} color="initials" />
+                            <Text fw={800}>{item}</Text>
+                          </Group>
+                          <Box
+                            display="contents"
+                            {...draggableProvided.dragHandleProps}
+                          >
+                            <IconGripVertical />
+                          </Box>
                         </Group>
                       </Card>
                     )}

diff --git a/src/components/game-screen/RoundsList.tsx b/src/components/game-screen/RoundsList.tsx
@@ -10,7 +10,7 @@ import {
   Text,
 } from '@mantine/core';
 import { modals } from '@mantine/modals';
-import { IconTrashX } from '@tabler/icons-react';
+import { IconTrash } from '@tabler/icons-react';
 
 import { useAppDispatch, useAppSelector } from '../../redux/store';
 import { selectAllRoundsFromGameId } from '../../redux/round.selector';
@@ -70,7 +70,7 @@ function RoundsList(props: Props) {
                 <Text fw={800}>
                   {`#${rounds.length - i} - ${formatDate(timestamp)}`}
                 </Text>
-                <Group>
+                <Group gap="xs">
                   <EditRoundButton
                     roundId={round.id}
                     onSave={(statsMap) => onUpdateRound(round.id, statsMap)}
@@ -79,7 +79,7 @@ function RoundsList(props: Props) {
                     variant="subtle"
                     onClick={() => onDeleteRound(id)}
                   >
-                    <IconTrashX />
+                    <IconTrash />
                   </ActionIcon>
                 </Group>
               </Group>

diff --git a/src/components/shared/TopNav.tsx b/src/components/shared/TopNav.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { Button, Group, Text } from '@mantine/core';
 import { Link } from 'react-router-dom';
-import { IconArrowLeft } from '@tabler/icons-react';
+import { IconArrowLeft, IconPlayCardStar } from '@tabler/icons-react';
 
 interface Props {
   title: string;
@@ -12,10 +12,10 @@ function TopNav(props: PropsWithChildren<Props>) {
   const { title, isHome = false, children } = props;
 
   return (
-    <Group justify="space-between">
+    <Group justify="space-between" gap="xs">
       <Group>
         {isHome ? (
-          <Text fz="30px">📒</Text>
+          <IconPlayCardStar size={30} />
         ) : (
           <Button variant="transparent" p={0} component={Link} to="/">
             <IconArrowLeft />

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,12 +1,11 @@
-import { ActionIcon, Box, Card, Group, Input, Text } from '@mantine/core';
-import { useDebouncedCallback } from '@mantine/hooks';
+import { ActionIcon, Box, Card, Group, Text } from '@mantine/core';
 import { modals } from '@mantine/modals';
 import { useNavigate } from 'react-router-dom';
-import { IconEdit, IconTrashX } from '@tabler/icons-react';
+import { IconInfoSquareRounded, IconTrash } from '@tabler/icons-react';
 
 import { useAppDispatch, useAppSelector } from '../redux/store';
 import { selectAllGames } from '../redux/game.selector';
-import { deleteGame, updateGameName } from '../redux/game.slice';
+import { deleteGame } from '../redux/game.slice';
 import { formatDateTime } from '../utils/helpers';
 
 import TopNav from '../components/shared/TopNav';
@@ -33,42 +32,26 @@ function HomePage() {
     });
   };
 
-  const handleUpdateName = useDebouncedCallback((id: string, name: string) => {
-    dispatch(updateGameName({ id, name }));
-  }, 500);
-
   return (
     <Box>
       <TopNav isHome title="Sải Nhà Cố" />
 
       {allGames.length === 0 && <Empty emoji="👀" subTitle="Tạo game mới đê" />}
       {allGames.map((x) => (
-        <Card
-          key={x.id}
-          shadow="sm"
-          p="xs"
-          pt={0}
-          mt="sm"
-          radius="md"
-          withBorder
-        >
+        <Card key={x.id} shadow="sm" p="xs" mt="sm" radius="md" withBorder>
           <Group justify="space-between">
-            <Input
-              variant="unstyled"
-              defaultValue={x.name}
-              size="lg"
-              fw={800}
-              onChange={(e) => handleUpdateName(x.id, e.target.value)}
-            />
-            <Group>
+            <Text fw={800} fz={20}>
+              {x.name}
+            </Text>
+            <Group gap="xs">
               <ActionIcon
                 variant="subtle"
                 onClick={() => navigate(`/game/${x.id}`)}
               >
-                <IconEdit />
+                <IconInfoSquareRounded />
               </ActionIcon>
               <ActionIcon variant="subtle" onClick={() => onDeleteGame(x.id)}>
-                <IconTrashX />
+                <IconTrash />
               </ActionIcon>
             </Group>
           </Group>

diff --git a/src/redux/game.slice.ts b/src/redux/game.slice.ts
@@ -25,16 +25,6 @@ const gameSlice = createSlice({
       });
     },
     deleteGame: gameAdaptor.removeOne,
-    updateGameName: (
-      state,
-      action: PayloadAction<{ id: string; name: string }>,
-    ) => {
-      const { id, name } = action.payload;
-      gameAdaptor.updateOne(state, {
-        id,
-        changes: { name },
-      });
-    },
     updateGamePlayerNames: (
       state,
       action: PayloadAction<{ id: string; playerNames: string[] }>,
@@ -48,6 +38,6 @@ const gameSlice = createSlice({
   },
 });
 
-export const { createGame, deleteGame, updateGameName, updateGamePlayerNames } =
+export const { createGame, deleteGame, updateGamePlayerNames } =
   gameSlice.actions;
 export default gameSlice;