chore: use tailwindcss for styling

package.json

@@ -33,6 +33,7 @@
   "devDependencies": {
     "@electron/rebuild": "^4.0.4",
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -48,6 +49,7 @@
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
+    "tailwindcss": "^4.3.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"

src/ui/App.tsx

@@ -66,7 +66,7 @@ function App() {
         </Box>
 
       </AppShell.Navbar>
-      <AppShell.Main style={{ display: "flex", height: "100%" }}>
+      <AppShell.Main className="flex h-full">
         <WebsiteWrapper />
       </AppShell.Main>
       <AppShell.Aside>

src/ui/components/Header/Header.tsx

@@ -1,46 +1,30 @@
-import { Box, Title, Space, Group, Button, SimpleGrid, Flex, Divider, Center } from "@mantine/core"
+import { Title, Button, SimpleGrid, Flex, Box, Divider, Center } from "@mantine/core"
 import { useActivity } from "../../context/useActivity"
 import { Text } from "@mantine/core"
 
 export const Header = () => {
-
+  
   const { getActivityText, isDoingActivity, endActivity, verifyExercise } = useActivity()
 
-  return <SimpleGrid cols={3} p="md" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: '64px' }}>
+  return <SimpleGrid cols={3} p="md" className="flex items-center justify-between h-16">
     <Title order={4}> GitMastery </Title>
-    <Box >
-      {isDoingActivity && <Flex px="md" bg="gm-green" w="100%" h="100%" gap={"lg"} style={{
-        borderRadius: "24px",
-        paddingTop: "2px",
-        paddingBottom: "2px"
-
-      }}>
+    <Box>
+      {isDoingActivity && <Flex px="md" bg="gm-green" w="100%" h="100%" gap="lg" className="rounded-3xl py-0.5">
         <Center>
-
-          <Button size="sm" variant="subtle" c="white" onClick={() => endActivity()} >Quit</Button>
+          <Button size="sm" variant="subtle" c="white" onClick={() => endActivity()}>Quit</Button>
         </Center>
         <Divider orientation="vertical" />
         <Center>
-
           <Text c="white">
             {getActivityText()}
           </Text>
         </Center>
         <Divider orientation="vertical" />
         <Center>
-
-          <Button size="sm" variant="transparent" c="white"
-            onClick={() => {
-              verifyExercise({})
-            }}
-          >Check solution</Button>
+          <Button size="sm" variant="transparent" c="white" onClick={() => verifyExercise({})}>Check solution</Button>
         </Center>
-
       </Flex>}
-
     </Box>
-    <Box></Box>
+    <Box />
   </SimpleGrid>
-
-
-}
+}

src/ui/components/Navigation/ExerciseList.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Autocomplete, Box, Button, Flex, Modal, Select, Stack, Text } from "@mantine/core"
+import { ActionIcon, Box, Button, Flex, Select, Stack, Text } from "@mantine/core"
 import { IconCheck, IconPlus, IconX } from "@tabler/icons-react"
 import { buildExerciseUrl, buildLessonUrl, useWebContentsView } from "../../context/useWebContentsView"
 import { useExercises } from "../../hooks/query/useExercises";
@@ -236,24 +236,19 @@ export const ExerciseList = () => {
 
 
   return <>
-    <Stack w="100%">
-      <Flex justify={'space-between'} align={'center'} w="100%">
-
+    <Stack w="100%" gap="xs">
+      <Flex justify="space-between" align="center" w="100%">
         <Text variant="subheading" style={{ flexGrow: 1 }}> Lessons </Text>
         <ActionIcon size="xs">
           <IconPlus onClick={onAddSelectedClicked} />
         </ActionIcon>
       </Flex>
 
-      <Stack>
+      <Stack gap="xs">
         {downloadedExercises?.map(exerciseData => (
           <DownloadedExercise key={exerciseData?.exercise.identifier} exercise={exerciseData.exercise} status={exerciseData.status} />
         ))}
-
-
       </Stack>
-
-
     </Stack>
     {/* <Modal opened={opened} onClose={onModalClose} title="Add Exercises" centered>
 
@@ -279,57 +274,24 @@ export const DownloadedExercise = ({ exercise, status }: { exercise: Exercise, s
   const { navigate } = useWebContentsView();
   const { startExercise } = useActivity();
 
-  return <Flex style={{ width: "100%", alignItems: 'center' }}>
+  return <Flex w="100%" align="center">
     {statusMap[status as keyof typeof statusMap]()}
     <NavigationButton title={exercise.identifier} onClick={() => {
       navigate(buildExerciseUrl(exercise));
       startExercise(exercise);
-
     }} />
-  </Flex >
-}
-
-
-
-const InProgress = () => {
-  return <Box style={{
-    backgroundColor: "var(--mantine-color-yellow-5)",
-    borderRadius: "var(--mantine-radius-default)",
-    // padding: "var(--mantine-spacing-md)",
-    width: "12px",
-    height: '12px'
-  }}>
-
-  </Box>
+  </Flex>
 }
 
-const Correct = () => {
-  return <Box style={{
-    backgroundColor: "var(--mantine-color-green-5)",
-    borderRadius: "var(--mantine-radius-default)",
-    // padding: "var(--mantine-spacing-md)",
-    width: "12px",
-    height: '12px'
-  }}>
 
-  </Box>
-}
-
-const Incorrect = () => {
-  return <Box style={{
-    backgroundColor: "var(--mantine-color-red-5)",
-    borderRadius: "var(--mantine-radius-default)",
-    // padding: "var(--mantine-spacing-md)",
-    width: "12px",
-    height: '12px'
-  }}>
 
-  </Box>
-}
+const StatusDot = ({ color }: { color: string }) => (
+  <Box className={`w-3 h-3 rounded-(--mantine-radius-default) ${color}`} />
+)
 
-const statusMap = {
-  "correct": Correct,
-  "incorrect": Incorrect,
-  "in-progress": InProgress,
-  "not-started": InProgress,
+const statusMap: Record<ProgressState, () => ReturnType<typeof StatusDot>> = {
+  "correct": () => <StatusDot color="bg-(--mantine-color-green-5)" />,
+  "incorrect": () => <StatusDot color="bg-(--mantine-color-red-5)" />,
+  "in-progress": () => <StatusDot color="bg-(--mantine-color-yellow-5)" />,
+  "not-started": () => <StatusDot color="bg-(--mantine-color-yellow-5)" />,
 }

src/ui/components/Navigation/LeftBarWrapper.tsx

@@ -1,7 +1,7 @@
-import { Avatar, Box, Button, Divider, Flex, Group, Menu, Stack, Text, UnstyledButton } from "@mantine/core"
+import { Avatar, Box, Divider, Flex, Group, Menu, Stack, Text, UnstyledButton } from "@mantine/core"
 import { TourList } from "./TourList"
 import { ExerciseList } from "./ExerciseList"
-import { IconArrowsLeftRight, IconChevronRight, IconMessageCircle, IconPhoto, IconSearch, IconSettings, IconTrash } from "@tabler/icons-react"
+import { IconChevronRight, IconSettings } from "@tabler/icons-react"
 import { forwardRef } from "react"
 import { useLocalStorage } from "@mantine/hooks"
 
@@ -11,30 +11,19 @@ export const LeftBarWrapper = () => {
     key: 'onboarding-completed',
     defaultValue: false,
   })
-  return <Stack h="100%" >
+  return <Stack justify="space-between" h="100%">
     {/* Tours */}
-    <Stack style={{
-      overflowY: "scroll",
-
-    }}>
-
+    <Stack style={{ overflowY: "scroll" }}>
       <TourList />
-
       {/* Lessons (scrollable) */}
       <Flex flex={1}>
         <ExerciseList />
-
       </Flex>
-
     </Stack>
-    <Flex style={{ flexGrow: 1 }}>
-
-    </Flex>
 
     {/* User profile (fixed)*/}
     <Divider />
-    <Flex style={{ flexShrink: 0, }} w="100%">
-
+    <Flex style={{ flexShrink: 0 }} w="100%">
       <Menu shadow="md" width={200}>
         <Menu.Target>
           <UserButton
@@ -49,64 +38,36 @@ export const LeftBarWrapper = () => {
           <Menu.Item leftSection={<IconSettings size={14} />} onClick={() => setOnboardingCompleted(false)}>
             Setup GitMastery
           </Menu.Item>
-          {/* <Menu.Item leftSection={<IconSettings size={14} />} onClick={selectExePath}>
-            Set .exe path (Windows)
-          </Menu.Item> */}
-          {/* <Menu.Item leftSection={<IconMessageCircle size={14} />} onClick={selectSaveDir}>
-            Configure save location
-          </Menu.Item>
-          <Menu.Item leftSection={<IconMessageCircle size={14} />} onClick={setupGitMastery}>
-            Setup Git Mastery
-          </Menu.Item> */}
-
-          {/* <Menu.Divider />
-
-          <Menu.Label>Danger zone</Menu.Label>
-
-          <Menu.Item
-            color="red"
-            leftSection={<IconTrash size={14} />}
-          >
-            Reset progress
-          </Menu.Item> */}
         </Menu.Dropdown>
       </Menu>
-
     </Flex>
   </Stack>
 }
+
 interface UserButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   image: string;
   name: string;
   email: string;
   icon?: React.ReactNode;
 }
+
 const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
   ({ image, name, email, icon, ...others }: UserButtonProps, ref) => (
     <UnstyledButton
       ref={ref}
-      style={{
-        padding: '0px',
-        color: 'var(--mantine-color-text)',
-        borderRadius: 'var(--mantine-radius-sm)',
-        width: "100%"
-      }}
+      style={{ padding: 0, color: 'var(--mantine-color-text)', borderRadius: 'var(--mantine-radius-sm)', width: "100%" }}
       {...others}
-
     >
       <Group>
         <Avatar src={image} radius="xl" />
-
-        <div style={{ flex: 1 }}>
+        <Box style={{ flex: 1 }}>
           <Text size="sm" fw={500}>
             {name}
           </Text>
-
           <Text c="dimmed" size="xs">
             {email}
           </Text>
-        </div>
-
+        </Box>
         {icon || <IconChevronRight size={16} />}
       </Group>
     </UnstyledButton>