fix: use correct height for badge

oae · Feb 7, 2023 · 1ffdcae · 1ffdcae
1 parent b79254c
commit 1ffdcae
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 16 deletions.
diff --git a/src/components/addManga/steps/reviewStep.tsx b/src/components/addManga/steps/reviewStep.tsx
@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Badge,
+  Box,
   createStyles,
   Divider,
   Grid,
@@ -188,7 +189,7 @@ export function ReviewStep({ form }: { form: UseFormReturnType<FormType> }) {
                   <Tooltip label={genre} key={genre}>
                     <div style={{ maxWidth: 100 }}>
                       <Badge color="indigo" variant="light" size="xs" fullWidth>
-                        {genre}
+                        <Box className="h-3">{genre}</Box>
                       </Badge>
                     </div>
                   </Tooltip>
@@ -204,7 +205,7 @@ export function ReviewStep({ form }: { form: UseFormReturnType<FormType> }) {
                   <Tooltip label={tag} key={tag}>
                     <div style={{ maxWidth: 100 }}>
                       <Badge color="violet" variant="light" size="xs" fullWidth>
-                        {tag}
+                        <Box className="h-3">{tag}</Box>
                       </Badge>
                     </div>
                   </Tooltip>

diff --git a/src/components/mangaCard.tsx b/src/components/mangaCard.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, createStyles, Paper, Skeleton, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Box, createStyles, Paper, Skeleton, Title, Tooltip } from '@mantine/core';
 import { Prisma } from '@prisma/client';
 import { IconEdit, IconExclamationMark, IconRefresh, IconX } from '@tabler/icons-react';
 import { contrastColor } from 'contrast-color';
@@ -214,7 +214,7 @@ export function MangaCard({ manga, onRemove, onUpdate, onRefresh, onClick }: Man
           className={classes.badge}
           size="xs"
         >
-          {manga.source}
+          <Box className="h-3">{manga.source}</Box>
         </Badge>
         <Title order={5} className={classes.title}>
           {manga.title}

diff --git a/src/components/mangaDetail.tsx b/src/components/mangaDetail.tsx
@@ -1,4 +1,4 @@
-import { Badge, createStyles, Divider, Grid, Group, Image, Spoiler, Text, Title } from '@mantine/core';
+import { Badge, Box, createStyles, Divider, Grid, Group, Image, Spoiler, Text, Title } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { Prisma } from '@prisma/client';
 import { IconExternalLink } from '@tabler/icons-react';
@@ -97,7 +97,7 @@ export function MangaDetail({ manga }: { manga: MangaWithMetadataAndChapters })
           <Group spacing={0}>
             {manga.metadata.synonyms.map((synonym) => (
               <Badge key={synonym} color="gray" variant="filled" size="xs" m={2}>
-                {synonym}
+                <Box className="h-3">{synonym}</Box>
               </Badge>
             ))}
           </Group>
@@ -110,7 +110,7 @@ export function MangaDetail({ manga }: { manga: MangaWithMetadataAndChapters })
           >
             Checking{' '}
             <Badge component="span" color="blue" variant="filled" size="xs">
-              {getCronLabel(manga.interval)}
+              <Box className="h-3">{getCronLabel(manga.interval)}</Box>
             </Badge>{' '}
             from{' '}
             <Badge
@@ -120,7 +120,7 @@ export function MangaDetail({ manga }: { manga: MangaWithMetadataAndChapters })
               size="xs"
               sx={{ backgroundColor: stc(manga.source), color: contrastColor({ bgColor: stc(manga.source) }) }}
             >
-              {manga.source}
+              <Box className="h-3">{manga.source}</Box>
             </Badge>
           </Group>
           <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Status" />
@@ -134,15 +134,15 @@ export function MangaDetail({ manga }: { manga: MangaWithMetadataAndChapters })
           <Group spacing={0}>
             {manga.metadata.genres.map((genre) => (
               <Badge key={genre} color="indigo" variant="light" size="xs" m={2}>
-                {genre}
+                <Box className="h-3">{genre}</Box>
               </Badge>
             ))}
           </Group>
           <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Tags" />
           <Group spacing={0}>
             {manga.metadata.tags.map((tag) => (
               <Badge key={tag} color="violet" variant="light" size="xs" m={2}>
-                {tag}
+                <Box className="h-3">{tag}</Box>
               </Badge>
             ))}
           </Group>

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -132,12 +132,22 @@ function HistoryItem({ chapter }: { chapter: HistoryItemType }) {
       </Text>
       <SimpleGrid cols={2} mt={4}>
         <Tooltip label={time}>
-          <Badge variant="light" size="xs" color="cyan" leftSection={<IconClock size={12} />}>
-            {time}
+          <Badge
+            variant="light"
+            size="xs"
+            color="cyan"
+            leftSection={<IconClock className="flex justify-center align-middle" size={12} />}
+          >
+            <Box className="h-3">{time}</Box>
           </Badge>
         </Tooltip>
-        <Badge variant="light" size="xs" color="violet" leftSection={<IconFileReport size={12} />}>
-          {prettyBytes(chapter.size)}
+        <Badge
+          variant="light"
+          size="xs"
+          color="violet"
+          leftSection={<IconFileReport className="flex justify-center align-middle" size={12} />}
+        >
+          <Box className="h-3">{prettyBytes(chapter.size)}</Box>
         </Badge>
       </SimpleGrid>
     </>

diff --git a/src/components/updateManga.tsx b/src/components/updateManga.tsx
@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Badge,
+  Box,
   Button,
   Code,
   createStyles,
@@ -290,7 +291,7 @@ function UpdateModalContent({
                 <Tooltip label={genre} key={genre}>
                   <div style={{ maxWidth: 100 }}>
                     <Badge color="indigo" variant="light" size="xs" fullWidth>
-                      {genre}
+                      <Box className="h-3">{genre}</Box>
                     </Badge>
                   </div>
                 </Tooltip>
@@ -306,7 +307,7 @@ function UpdateModalContent({
                 <Tooltip label={tag} key={tag}>
                   <div style={{ maxWidth: 100 }}>
                     <Badge color="violet" variant="light" size="xs" fullWidth>
-                      {tag}
+                      <Box className="h-3">{tag}</Box>
                     </Badge>
                   </div>
                 </Tooltip>