commit 191f2cc7e058f7970c0c2bb896d7bfd8d884bf7f
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Tue May 2 10:55:40 2023 +0200

    re #10454: ItemView: ItemTabBar update

diff --git a/src/components/item/ItemTabBar.tsx b/src/components/item/ItemTabBar.tsx
index e4443a2..0335a6e 100644
--- a/src/components/item/ItemTabBar.tsx
+++ b/src/components/item/ItemTabBar.tsx
@@ -25,54 +25,52 @@ const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: C
                         </HStack>
                         <HStack marginRight={0}>
                             <Button variant="ghost" size="lg"
-                                onPress={() => onIndexChange(index-1)}
+                                onPress={() => onIndexChange(index - 1)}
                                 leftIcon={<ChevronLeftIcon size="lg" />}>
                             </Button>
                             <Button variant="ghost" size="lg"
-                                onPress={() => onIndexChange(index+1)}
+                                onPress={() => onIndexChange(index + 1)}
                                 leftIcon={<ChevronRightIcon size="lg" />}>
                             </Button>
                         </HStack>
                     </HStack>
                 </HStack>
-                <View h="12">
+                <View h="8">
                     <ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
                         {props.navigationState.routes.length > 1 ? (
-                            <HStack>
+                            <HStack borderBottomWidth={1} flex="1" borderColor="light.400">
                                 {props.navigationState.routes.map((route, i) => {
                                     return (
-                                        <Button
-                                            size="lg"
-                                            key={i}
-                                            variant={index == i ? "subtle" : "outline"}
-                                            rightIcon={
+                                        <Pressable key={i} onPress={() => { onIndexChange(i) }}>
+                                            <HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
                                                 <CircleIcon
+                                                    marginLeft="20%"
                                                     size="2"
                                                     color={CertaintyWithColors[concordances[i].cert].color}
                                                 />
-                                            }
-                                            onPress={() => {onIndexChange(i)}}
-                                        >
-                                            {concordances[i].id}
-                                        </Button>
+                                                <Text marginLeft="5%">
+                                                    {i == index ? <Text bold>{concordances[i].id}</Text> : concordances[i].id}
+
+                                                </Text>
+                                            </HStack>
+                                        </Pressable>
                                     );
                                 })}
                             </HStack>
                         ) : (
                             // One item only
-                            <Button
-                                flex="1"
-                                variant={"outline"}
-                                size="md"
-                                rightIcon={
-                                    <ChevronLeftIcon
-                                        size="2"
-                                        color={CertaintyWithColors[concordances[0].cert].color}
-                                    />
-                                }
-                            >
-                                {concordances[0].id}
-                            </Button>
+                            <Pressable onPress={() => { onIndexChange(0) }} width="100%">
+                                            <HStack alignItems={"center"} width="100%" borderColor="light.400" height="100%" borderBottomWidth={2}>
+                                                <CircleIcon
+                                                    marginLeft="42%"
+                                                    size="2"
+                                                    color={CertaintyWithColors[concordances[0].cert].color}
+                                                />
+                                                <Text marginLeft="2%">
+                                                    <Text bold>{concordances[0].id}</Text>
+                                                </Text>
+                                            </HStack>
+                                        </Pressable>
                         )}
                     </ScrollView>
                 </View>
diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index 4f89af4..92bd3da 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -61,42 +61,42 @@ const ItemDetail = (props: { item: Item }) => {
                                 <Card shadow="1" marginTop="5%" marginBottom="5%">
                                     {item.authorName &&
                                         <HStack>
-                                            <Text italic>
+                                            <Text italic  marginTop="2.5%">
                                                 <Text color="light.500">Author name: </Text>
                                                 {item.authorName}
                                             </Text>
                                         </HStack>}
                                     {item.title &&
                                         <HStack>
-                                            <Text italic>
+                                            <Text italic  marginTop="2.5%">
                                                 <Text color="light.500">Title: </Text>
                                                 {item.title}
                                             </Text>
                                         </HStack>}
                                     {item.institution &&
                                         <HStack>
-                                            <Text italic>
+                                            <Text italic  marginTop="2.5%">
                                                 <Text color="light.500">Institution: </Text>
                                                 {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
                                             </Text>
                                         </HStack>}
                                     {item.repository &&
                                         <HStack>
-                                            <Text italic>
+                                            <Text italic  marginTop="2.5%">
                                                 <Text color="light.500">Repository: </Text>
                                                 {item.repository}
                                             </Text>
                                         </HStack>}
                                     {item.provenance &&
                                         <HStack>
-                                            <Text italic>
+                                            <Text italic  marginTop="2.5%">
                                                 <Text color="light.500">Provenance: </Text>
                                                 {item.provenance}
                                             </Text>
                                         </HStack>}
                                     {item.description &&
                                         <HStack>
-                                            <Text italic>
+                                            <Text italic  marginTop ="2.5%">
                                                 <Text color="light.500">Description: </Text>
                                                 {item.description}
                                             </Text>
