feat: mod % help tooltip

messages/en.json

@@ -17,5 +17,6 @@
     "sellWithoutPremium": "{num}% (sell without premium)",
     "sellOrderWithPremium": "{num}% (sell order with premium)",
     "sellOrderWithoutPremium": "{num}% (sell order without premium)",
-    "earningsAfterTax": "Earnings after tax"
+    "earningsAfterTax": "Earnings after tax",
+    "modifierPercentageTooltip": "Modifier percentage. A value of 20 will increase the product total by 20%. For example, if the product value is 100, the total will be 120."
 }

messages/es.json

@@ -17,5 +17,6 @@
     "sellWithoutPremium": "{num} % (vender sin premium)",
     "sellOrderWithPremium": "{num} % (orden de venta con premium)",
     "sellOrderWithoutPremium": "{num} % (orden de venta sin premium)",
-    "earningsAfterTax": "Ganancias tras impuestos"
+    "earningsAfterTax": "Ganancias tras impuestos",
+    "modifierPercentageTooltip": "Porcentaje de modificador. Un valor de 20 aumentará el total del producto en un 20%. Por ejemplo, si el valor del producto es 100, el total será 120."
 }

messages/fr.json

@@ -17,5 +17,6 @@
     "sellWithoutPremium": "{num} % (vendre sans premium)",
     "sellOrderWithPremium": "{num} % (ordre de vente avec premium)",
     "sellOrderWithoutPremium": "{num} % (ordre de vente sans premium)",
-    "earningsAfterTax": "Bénéfice après impôt"
+    "earningsAfterTax": "Bénéfice après impôt",
+    "modifierPercentageTooltip": "Pourcentage du modificateur. Une valeur de 20 augmentera le total du produit de 20 %. Par exemple, si la valeur du produit est de 100, le total sera de 120."
 }

src/pages/home/Home.jsx

@@ -591,7 +591,7 @@ export default observer(function Home() {
 
 					<Anchor href="https://github.com/Icaruk/albion-profit" target="_blank">
 						<Avatar variant="light">
-							<IconBrandGithub size={32} color="var(--mantine-color-dark-8)" />
+							<IconBrandGithub size={32} color="var(--mantine-color-dark-9)" />
 						</Avatar>
 					</Anchor>
 

src/pages/home/partials/ItemRow.jsx

@@ -1,13 +1,21 @@
 import { globalStore } from "@/mobx/rootStore";
 import * as m from "@/paraglide/messages.js";
-import { ActionIcon, Group, Image, NumberInput, Select, Stack, Tooltip } from "@mantine/core";
+import {
+	ActionIcon,
+	Group,
+	Image,
+	NumberInput,
+	Select,
+	Text,
+	ThemeIcon,
+	Tooltip,
+} from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
-import { IconClipboard, IconX } from "@tabler/icons-react";
+import { IconClipboard, IconHammer, IconHelp, IconX } from "@tabler/icons-react";
 import { observer } from "mobx-react-lite";
 import { memo, useMemo } from "react";
 import { albionData } from "../../../data/items";
-import { IconHammer } from "@tabler/icons-react";
 
 export const ItemRow = observer(
 	({
@@ -154,13 +162,24 @@ export const ItemRow = observer(
 				/>
 				{item?.type === "product" && (
 					<NumberInput
-						label="Mod. %"
+						label={
+							<Group wrap="nowrap" gap="xxxs">
+								<Text size="sm" fw="500">
+									Mod. %
+								</Text>
+								<Tooltip w={200} multiline label={m.modifierPercentageTooltip()}>
+									<ThemeIcon size="sm" variant="transparent" color="gray.5">
+										<IconHelp />
+									</ThemeIcon>
+								</Tooltip>
+							</Group>
+						}
 						allowNegative={true}
 						allowDecimal={false}
 						thousandSeparator="."
 						decimalSeparator=","
 						hideControls
-						w={64}
+						w={100}
 						value={item?.modifierPercentage}
 						onChange={(val) => handleChange("modifierPercentage", val)}
 					/>

src/theme.js

@@ -1,3 +1,13 @@
-import { createTheme } from "@mantine/core";
+import { createTheme, rem } from "@mantine/core";
 
-export const theme = createTheme({});
+export const theme = createTheme({
+	spacing: {
+		xxxs: rem(6),
+		xxs: rem(8),
+		xs: rem(10),
+		sm: rem(12),
+		md: rem(16),
+		lg: rem(20),
+		xl: rem(32),
+	},
+});