Front: Wrap IconButton

front/components/IconButton.tsx

@@ -0,0 +1,12 @@
+import { Box, Button } from "native-base";
+
+type IconButtonProps = {
+	icon: Parameters<typeof Button>[0]['leftIcon']
+} & Omit<Parameters<typeof Button>[0], 'leftIcon' | 'rightIcon'>;
+
+// Wrapper around Button for IconButton as Native's one sucks <3
+const IconButton = (props: IconButtonProps) => {
+	return <Box><Button {...props} leftIcon={props.icon} width='fit-content' rounded='sm'/></Box>
+}
+
+export default IconButton;

front/components/PartitionVisualizer/SlideView.tsx

@@ -8,6 +8,7 @@ import {
 	Button,
 	Icon,
 } from "native-base";
+import IconButton from "../IconButton";
 import { MotiView, useDynamicAnimation } from "moti";
 import { abs, Easing } from "react-native-reanimated";
 import React from "react";
@@ -97,8 +98,8 @@ const SlideView = ({ sources, speed, startAt }: ImgSlideViewProps) => {
 				</MotiView>
 			</Box>
 			<Button.Group margin={3}>
-				<Button
-					leftIcon={<Icon as={FontAwesome5} name="play" size="sm" />}
+				<IconButton
+					icon={<Icon as={FontAwesome5} name="play" size="sm" />}
 					onPress={() => {
 						animation.animateTo({
 							translateX: range(-totalWidth, 0, stepSize)
@@ -112,20 +113,20 @@ const SlideView = ({ sources, speed, startAt }: ImgSlideViewProps) => {
 						});
 					}}
 				/>
-				<Button
-					leftIcon={<Icon as={FontAwesome5} name="pause" size="sm" />}
+				<IconButton
+					icon={<Icon as={FontAwesome5} name="pause" size="sm" />}
 					onPress={() => {
 						animation.animateTo({});
 					}}
 				/>
-				<Button
-					leftIcon={
+				<IconButton
+					icon={
 						<Icon as={MaterialCommunityIcons} name="rewind-10" size="sm" />
 					}
 					onPress={() => jumpAt(-200, false)}
 				/>
-				<Button
-					leftIcon={
+				<IconButton
+					icon={
 						<Icon
 							as={MaterialCommunityIcons}
 							name="fast-forward-10"
@@ -134,8 +135,8 @@ const SlideView = ({ sources, speed, startAt }: ImgSlideViewProps) => {
 					}
 					onPress={() => jumpAt(200, false)}
 				/>
-				<Button
-					leftIcon={<Icon as={FontAwesome5} name="stop" size="sm" />}
+				<IconButton
+					icon={<Icon as={FontAwesome5} name="stop" size="sm" />}
 					onPress={() => {
 						stepCount = 0;
 						animation.animateTo({

front/views/PlayView.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SafeAreaView, Platform } from 'react-native';
 import * as ScreenOrientation from 'expo-screen-orientation';
-import {  Box, Center, Column, IconButton, Progress, Text, Row, View, useToast } from 'native-base';
+import {  Box, Center, Column, Progress, Text, Row, View, useToast, Icon } from 'native-base';
+import IconButton from '../components/IconButton';
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from '@react-navigation/native';
 import { useQuery, useQueryClient } from 'react-query';
@@ -162,14 +163,12 @@ const PlayView = () => {
 						<Text style={{ fontWeight: '700' }}>Rolling in the Deep</Text>
 					</Center>
 					<Row style={{ flex: 1, height: '100%', justifyContent: 'space-evenly', alignItems: 'center'  }}>
-						<IconButton size='sm' colorScheme='secondary' variant='solid'  _icon={{
-							as: Ionicons,
-							name: "play-back"
-						}}/>
-						<IconButton size='sm' variant='solid' _icon={{
-							as: Ionicons,
-							name: paused ? "play" : "pause"
-						}} onPress={() => { 
+						<IconButton size='sm' colorScheme='secondary' variant='solid' icon={
+							<Icon as={Ionicons} name={"play-back"}/>
+						}/>
+						<IconButton size='sm' variant='solid' icon={
+							<Icon as={Ionicons} name={paused ? "play" : "pause"}/>
+						} onPress={() => { 
 							if (paused) {
 								onResume();
 							} else {
@@ -177,10 +176,9 @@ const PlayView = () => {
 							}
 						}}/>
 						<Text>{timer.minutes}:{timer.seconds.toString().padStart(2, '0')}</Text>
-						<IconButton size='sm' colorScheme='coolGray' variant='solid' _icon={{
-							as: Ionicons,
-							name: "stop"
-						}} onPress={() => {
+						<IconButton size='sm' colorScheme='coolGray' variant='solid' icon={
+							<Icon as={Ionicons} name="stop"/>
+						} onPress={() => {
 							onEnd();
 							navigation.navigate('Score')
 						}}/>