css whatever + pretty

front/components/DurationComponent.tsx

@@ -1,4 +1,4 @@
-import { Box, Icon, Text } from 'native-base';
+import { HStack, Icon, Text } from 'native-base';
 import { MaterialIcons } from '@expo/vector-icons';
 
 type DurationComponentProps = {
@@ -10,20 +10,26 @@ const DurationComponent = ({ length }: DurationComponentProps) => {
 	const seconds = Math.round(length - minutes * 60);
 
 	return (
-		<Box flexDirection={'row'} >
-			<Icon as={MaterialIcons} name="timer" color="coolGray.800" _dark={{
-		color: "warmGray.50"
-		}} />
+		<HStack space={3}>
+			<Icon
+				as={MaterialIcons}
+				name="timer"
+				size={'20px'}
+				color="coolGray.800"
+				_dark={{
+					color: 'warmGray.50',
+				}}
+			/>
 			<Text
 				style={{
 					flexShrink: 0,
 				}}
-				fontSize={'sm'}
+				fontSize={'16px'}
 			>
-				{`${minutes}'${seconds}` ?? '--\'--'}
+				{`${minutes}'${seconds}` ?? "--'--"}
 			</Text>
-		</Box>
+		</HStack>
 	);
 };
 
-export default DurationComponent;
+export default DurationComponent;

front/views/SongLobbyView.tsx

@@ -67,7 +67,7 @@ const SongLobbyView = (props: RouteProps<SongLobbyProps>) => {
 								}
 							/>
 						</Text>
-                        <DurationComponent length={songQuery.data?.details.length} />
+						<DurationComponent length={songQuery.data?.details.length} />
 						<TextButton
 							translate={{ translationKey: 'playBtn' }}
 							width="auto"