Move all icons to the new framework

assets/icons/bookmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Bookmark</title><path d="M352 48H160a48 48 0 00-48 48v368l144-128 144 128V96a48 48 0 00-48-48z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

assets/icons/boost.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M272 416c17.7 0 32-14.3 32-32s-14.3-32-32-32H160c-17.7 0-32-14.3-32-32V192h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 128c0 53 43 96 96 96H272zM304 96c-17.7 0-32 14.3-32 32s14.3 32 32 32l112 0c17.7 0 32 14.3 32 32l0 128H416c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0V192c0-53-43-96-96-96L304 96z"/></svg>

assets/icons/checkbox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Checkbox</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"/><rect x="64" y="64" width="384" height="384" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>

assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Close</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>

assets/icons/create.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Create</title><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"/></svg>

assets/icons/ellipsis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Ellipsis Horizontal</title><circle cx="256" cy="256" r="32" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><circle cx="416" cy="256" r="32" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><circle cx="96" cy="256" r="32" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>

assets/icons/hashtag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128h95.1l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L357.8 128H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H347.1L325.8 320H384c17.7 0 32 14.3 32 32s-14.3 32-32 32H315.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7H155.1l-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L90.2 384H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l21.3-128H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h68.9l11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320h95.1l21.3-128H187.1z"/></svg>

assets/icons/heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Heart</title><path d="M352.92 80C288 80 256 144 256 144s-32-64-96.92-64c-52.76 0-94.54 44.14-95.08 96.81-1.1 109.33 86.73 187.08 183 252.42a16 16 0 0018 0c96.26-65.34 184.09-143.09 183-252.42-.54-52.67-42.32-96.81-95.08-96.81z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

assets/icons/lock-closed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Lock Closed</title><path d="M336 208v-95a80 80 0 00-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

assets/icons/lock-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Lock Open</title><path d="M336 112a80 80 0 00-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

assets/icons/paper-plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Paper Plane</title><path d="M53.12 199.94l400-151.39a8 8 0 0110.33 10.33l-151.39 400a8 8 0 01-15-.34l-67.4-166.09a16 16 0 00-10.11-10.11L53.46 215a8 8 0 01-.34-15.06zM460 52L227 285" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

assets/icons/planet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Planet</title><path d="M413.48 284.46c58.87 47.24 91.61 89 80.31 108.55-17.85 30.85-138.78-5.48-270.1-81.15S.37 149.84 18.21 119c11.16-19.28 62.58-12.32 131.64 14.09" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><circle cx="256" cy="256" r="160" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>

assets/icons/square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Square</title><path d="M416 448H96a32.09 32.09 0 01-32-32V96a32.09 32.09 0 0132-32h320a32.09 32.09 0 0132 32v320a32.09 32.09 0 01-32 32z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

src/components/context-menu.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Dimensions, View, Image } from "react-native";
-import { Ionicons } from '@expo/vector-icons';
 import {
     Menu,
     MenuOptions,
@@ -9,6 +8,8 @@ import {
     renderers
 } from "react-native-popup-menu";
 
+import Icon from "src/components/icons.js";
+
 const { SlideInMenu } = renderers;
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
@@ -34,10 +35,8 @@ const ContextMenu = (props) => {
         <View style = { props.containerStyle }>
             <Menu renderer = { SlideInMenu }>
                 <MenuTrigger>
-                    <Ionicons
+                    <Icon name = "ellipsis"
-                        name = "ellipsis-horizontal"
+                        size = { props.size ? props.size : 24 }/>
-                        size = { props.size ? props.size : 24 }
-                        color = { props.colour ? props.colour : "#666" } />
                 </MenuTrigger>
                 <MenuOptions customStyles = { optionsStyles }>
                     { props.children }

src/components/icons.js

@@ -6,6 +6,9 @@ import { Image, StyleSheet } from "react-native";
  * this map. If a new icon is added, then it must be added to this array
  */
 const images = {
+  ellipsis: {
+    black: require("assets/icons/ellipsis-black-64px.png"),
+  },
   feed: {
     black: require("assets/icons/feed-black-64px.png"),
     grey: require("assets/icons/feed-grey-64px.png"),
@@ -26,12 +29,63 @@ const images = {
     black: require("assets/icons/person-black-64px.png"),
     grey: require("assets/icons/person-grey-64px.png"),
   },
+  hashtag: {
+    black: require("assets/icons/hashtag-black-64px.png"),
+    grey: require("assets/icons/hashtag-grey-64px.png"),
+  },
+  planet: {
+    black: require("assets/icons/planet-black-64px.png"),
+    grey: require("assets/icons/planet-grey-64px.png"),
+  },
+  square: {
+    black: require("assets/icons/square-black-64px.png"),
+  },
+  checkbox: {
+    black: require("assets/icons/checkbox-black-64px.png"),
+  },
+  "lock-closed": {
+    black: require("assets/icons/lock-closed-black-64px.png"),
+    grey: require("assets/icons/lock-closed-grey-64px.png"),
+  },
+  "lock-open": {
+    black: require("assets/icons/lock-open-black-64px.png"),
+    grey: require("assets/icons/lock-open-grey-64px.png"),
+  },
+  heart: {
+    black: require("assets/icons/heart-black-64px.png"),
+    grey: require("assets/icons/heart-grey-64px.png"),
+  },
+  bookmark: {
+    black: require("assets/icons/bookmark-black-64px.png"),
+    grey: require("assets/icons/bookmark-grey-64px.png"),
+  },
+  boost: {
+    black: require("assets/icons/boost-black-64px.png"),
+    grey: require("assets/icons/boost-grey-64px.png"),
+  },
+  create: {
+    black: require("assets/icons/create-black-64px.png"),
+  },
+  close: {
+    black: require("assets/icons/close-black-64px.png"),
+  },
 };
 
 const Icon = ({name, size, focused = true}) => {
   if (images[name] === undefined) {
     console.error(`Icon "${name}" is not recognized`);
-    return <></>
+    return <></>;
+  }
+
+  // Warn the programmer if their chosen icon colour hasn't been rendered
+  if (focused && images[name].black === undefined) {
+    console.error(`There exists no focused version of icon "${name}"`);
+    return <></>;
+  }
+
+  if (!focused && images[name].grey === undefined) {
+    console.error(`There exists no unfocused version of icon "${name}"`);
+    return <></>;
   }
 
   const styles = StyleSheet.create({

src/components/moderate-menu.js

@@ -7,9 +7,9 @@ import {
     MenuTrigger,
     renderers
 } from "react-native-popup-menu";
-import { Ionicons } from "@expo/vector-icons";
 
 const { SlideInMenu } = renderers;
+import Icon from "src/components/icons.js";
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
 
@@ -34,10 +34,7 @@ const ModerateMenu = (props) => {
         <View style = { props.containerStyle }>
             <Menu renderer = { SlideInMenu }>
                 <MenuTrigger>
-                    <Ionicons
+                    <Icon name = "ellipsis"/>
-                        name = "ellipsis-horizontal"
-                        color = "#000"
-                        style = { props.triggerStyle }/>
                 </MenuTrigger>
                 <MenuOptions customStyles = { optionsStyles }>
                     <MenuOption text="Hide" />

src/components/pages/direct.js

@@ -12,9 +12,7 @@ import {
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as requests from "src/requests";
-
+import Icon from "src/components/icons.js";
-import { Ionicons } from "@expo/vector-icons";
-
 import ModerateMenu from "src/components/moderate-menu.js";
 
 const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
@@ -159,7 +157,7 @@ const Direct = ({ navigation }) => {
                         <TouchableOpacity
                               style = { styles.form.compose }
                               onPress = { () => { navigation.navigate("Compose") } }>
-                            <Ionicons name = "md-create" size = { 24 } color = "black"/>
+                            <Icon name = "create" size = { 24 }/>
                         </TouchableOpacity>
                     </View>
                     <>

src/components/pages/direct/conversation.js

@@ -11,8 +11,7 @@ import {
 } from "react-native";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
-
+import Icon from "src/components/icons.js";
-import { Ionicons } from "@expo/vector-icons";
 
 import {
     Menu,
@@ -70,10 +69,7 @@ const ConversationContainer = (props) => (
             <TouchableOpacity
                   style = { styles.send.button }
                   onPress = { props.onSubmit }>
-                <Ionicons
+                <Icon name="paper-plane" size={24}/>
-                    name = "paper-plane-outline"
-                    size = { 24 }
-                    color = "black" />
             </TouchableOpacity>
         </View>
     </SafeAreaView>

src/components/pages/discover.js

@@ -10,11 +10,11 @@ import {
 
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
 
-import { Ionicons } from "@expo/vector-icons";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import * as requests from "src/requests";
 
+import Icon from "src/components/icons.js";
 import PagedGrid from "src/components/posts/paged-grid";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
@@ -32,11 +32,11 @@ const Discover = (props) => {
     const [ routes ] = useState([
         {
             key: "local",
-            icon: "md-home",
+            icon: "feed",
         },
         {
             key: "federated",
-            icon: "md-planet",
+            icon: "planet",
         },
     ]);
 
@@ -139,11 +139,11 @@ const Discover = (props) => {
             style = { styles.tabBar.tab } />
     );
 
-    const renderIcon = ({ route, color }) => (
+    const renderIcon = ({ route, focused }) => (
-        <Ionicons
+        <Icon
             name = { route.icon }
             size = { 24 }
-            color = { color } />
+            focused = { focused } />
     );
 
     return (
@@ -159,7 +159,7 @@ const Discover = (props) => {
                             }/>
                         <TouchableOpacity
                               style = { styles.form.submit }>
-                              <Ionicons name="search" size={24} color="black" />
+                              <Icon name="search" size={24} color="black" />
                         </TouchableOpacity>
                     </View>
                     <TabView

src/components/pages/discover/search.js

@@ -8,11 +8,11 @@ import {
     Image,
 } from "react-native";
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
-import { Ionicons, FontAwesome5 } from '@expo/vector-icons';
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import * as requests from "src/requests";
 import { StatusBarSpace } from "src/interface/rendering";
+import Icon from "src/components/icons.js";
 
 import { TouchableOpacity } from "react-native-gesture-handler";
 
@@ -113,7 +113,7 @@ const Search = ({navigation}) => {
     const [ routes ] = useState([
         {
             key: "accounts",
-            icon: "user-alt",
+            icon: "profile",
         },
         {
             key: "hashtags",
@@ -152,11 +152,11 @@ const Search = ({navigation}) => {
             style = { styles.tabBar.tab } />
     );
 
-    const renderIcon = ({ route, color }) => (
+    const renderIcon = ({ route, focused }) => (
-        <FontAwesome5
+        <Icon
             name = { route.icon }
             size = { 24 }
-            color = { color } />
+            focused = { focused }/>
     );
 
     return (
@@ -183,7 +183,7 @@ const Search = ({navigation}) => {
                         <TouchableOpacity
                               onPress = { _handleSearch }
                               style = { styles.form.submit }>
-                              <Ionicons name="search" size={24} color="black" />
+                              <Icon name="search" size={24}/>
                         </TouchableOpacity>
                     </View>
                     { state.results

src/components/pages/feed.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { ScrollView, Dimensions, View, Image, Text } from "react-native";
-import { Ionicons } from '@expo/vector-icons';
 
 import TimelineView from "src/components/posts/timeline-view";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
@@ -81,10 +80,8 @@ const Feed = (props) => {
                     : styles.interruption.topBorder
               }>
                 <View style = { styles.interruption.inner }>
-                    <Ionicons
+                    <Image style = {{ width: 150, height: 150 }}
-                        name="ios-checkmark-circle-outline"
+                        source = { require("assets/images/checkmark-circle.png") }/>
-                        size= { 150 }
-                        color="black" />
 
                     <Text style = { styles.interruption.header }>
                         You're all caught up.

src/components/pages/profile/settings.js

@@ -10,11 +10,11 @@ import {
     TouchableOpacity,
     Dimensions,
 } from "react-native";
-import { FontAwesome } from '@expo/vector-icons';
 import mime from "mime";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as requests from "src/requests";
+import Icon from "src/components/icons.js";
 
 import * as ImagePicker from 'expo-image-picker';
 
@@ -190,8 +190,8 @@ const Settings = (props) => {
                             <View style = { styles.check.container }>
                                 <>
                                     { !state.locked
-                                        ? <FontAwesome name="square-o" size={24} color="black" />
+                                        ? <Icon name="square" size={24}/>
-                                        : <FontAwesome name="check-square-o" size={24} color="black" />
+                                        : <Icon name="checkbox" size={24}/>
                                     }
                                 </>
                                 <Text style = { styles.check.label }>

src/components/pages/publish.js

@@ -7,7 +7,6 @@ import {
     Text,
     TextInput,
 } from "react-native";
-import { Ionicons } from '@expo/vector-icons';
 
 import { getAutoHeight } from "src/interface/rendering";
 import { TouchableOpacity } from "react-native-gesture-handler";
@@ -16,6 +15,7 @@ import mime from "mime";
 import * as ImagePicker from 'expo-image-picker';
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as requests from "src/requests";
+import Icon from "src/components/icons.js";
 
 const Publish = ({ navigation }) => {
     const [ state, setState ] = useState({
@@ -105,7 +105,7 @@ const Publish = ({ navigation }) => {
     };
 
     const Selector = (props) => {
-        const color = props.active == props.visibility ? "black" : "#888";
+        const color = props.active == props.visibility ? "black" : "#666";
 
         return (
             <TouchableOpacity
@@ -114,9 +114,9 @@ const Publish = ({ navigation }) => {
                       () => setState({ ...state, visibility: props.visibility })
                   }>
                 <View style = { styles.form.option.inner }>
-                    <Ionicons
+                    <Icon
                         name = { props.icon }
-                        color = { color }
+                        focused = { props.active }
                         size={24} />
                     <Text style = { { color } }>
                         &nbsp;
@@ -155,17 +155,17 @@ const Publish = ({ navigation }) => {
                 <Selector
                     visibility = "public"
                     active = { state.visibility }
-                    icon = "globe-outline"
+                    icon = "planet"
                     message = "Anyone can see this post" />
                 <Selector
                     visibility = "unlisted"
                     active = { state.visibility }
-                    icon = "lock-open-outline"
+                    icon = "lock-open"
                     message = "Keep this post off public timelines" />
                 <Selector
                     visibility = "private"
                     active = { state.visibility }
-                    icon = "lock-closed-outline"
+                    icon = "lock-closed"
                     message = "Only share this with my followers" />
 
                 <TouchableOpacity

src/components/pages/view-comments.js

@@ -7,7 +7,6 @@ import {
     TextInput,
     Text
 } from "react-native";
-import { Ionicons } from '@expo/vector-icons';
 import { ScrollView } from "react-native-gesture-handler";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
@@ -17,6 +16,7 @@ import {
     timeToAge,
     StatusBarSpace
 } from "src/interface/rendering";
+import Icon from "src/components/icons.js";
 import { activeOrNot } from "src/interface/interactions";
 
 import TimelineView from "src/components/posts/timeline-view";
@@ -169,7 +169,7 @@ const Comment = (props) => {
                             {
                                 timeToAge(
                                     Date.now(),
-                                    (new Date(props.data.created_at)).getTime()
+                                    (new Date(proIconcreated_at)).getTime()
                                 )
                             }
                         </Text>
@@ -189,18 +189,15 @@ const Comment = (props) => {
                     </TouchableOpacity>
                     <TouchableOpacity
                           onPress = { props.onFavouriteFactory(props.data) }>
-                        <Ionicons
+                        <Icon
-                            name = { activeOrNot(props.data.favourited, packs.favourited) }
+                            name = { "heart" }
-                            size = { 15 }
+                            focused = { props.data.favourited }
-                            style = { styles.action }/>
+                            size = { 15 }/>
                     </TouchableOpacity>
                     <View style = { { paddingLeft: 10, } }>
                         <Menu renderer = { SlideInMenu }>
                             <MenuTrigger>
-                                <Ionicons
+                                <Icon name="ellipsis" size={18}/>
-                                    name="ellipsis-horizontal"
-                                    size={18}
-                                    color="#666" />
                             </MenuTrigger>
                             <MenuOptions customStyles = { menuOptionsStyles }>
                                 { props.profile.acct == props.data.account.acct
@@ -444,7 +441,7 @@ const ViewComments = (props) => {
                             { state.inReplyTo.id != postData.id
                                 ? <TouchableOpacity onPress = { _handleCancelSubReply }>
                                     <View style = { styles.form.inReplyTo.container }>
-                                        <Ionicons name="close" size={24} color="#666" />
+                                        <Icon name="close" size={24}/>
                                         <Text style = { styles.form.inReplyTo.message }>
                                             &nbsp;Replying to&nbsp;
                                             <Text style = { styles.bold }>
@@ -468,10 +465,7 @@ const ViewComments = (props) => {
                                 onChangeText = { c => setState({...state, reply: c }) }/>
                             <View style = { styles.submitContainer }>
                                 <TouchableOpacity onPress = { _handleSubmitReply }>
-                                    <Ionicons
+                                    <Icon name="paper-plane" size={30}/>
-                                        name = "paper-plane-outline"
-                                        color = "black"
-                                        size = { 30 }/>
                                 </TouchableOpacity>
                             </View>
                         </View>

src/components/posts/post-action-bar.js

@@ -6,8 +6,6 @@ import {
     Dimensions,
     TouchableOpacity
 } from "react-native";
-import { FontAwesome } from "@expo/vector-icons";
-import { activeOrNot } from "src/interface/interactions";
 
 const PostAction = (props) => {
     return (
@@ -15,48 +13,29 @@ const PostAction = (props) => {
               onPress = { props.onPress }>
             <View style = { { marginLeft: SCREEN_WIDTH / 20 } }>
                 <FontAwesome
-                    name = { activeOrNot(props.active, props.pack) }
+                    name = { props.icon }
                     size = { 24 }
-                    color = {
+                    focused = { props.active }/>
-                        activeOrNot(props.active, {
-                            active: "#000",
-                            inactive: "#888",
-                        })
-                    }/>
             </View>
         </TouchableOpacity>
     )
 }
 
 const PostActionBar = (props) => {
-    const icons = {
-        heart: {
-            active: "heart",
-            inactive: "heart-o",
-        },
-        reblog: {
-            active: "retweet",
-            inactive: "retweet",
-        },
-        bookmark: {
-            active: "bookmark",
-            inactive: "bookmark-o",
-        }
-    }
     return (
         <View style = { styles.flexContainer }>
             <PostAction
-                pack = { icons.heart }
+                icon = { "heart" }
                 active = { props.favourited }
                 onPress = { props.onFavourite } />
 
             <PostAction
-                pack = { icons.reblog }
+                icon = { "boost" }
                 active = { props.reblogged }
                 onPress = { props.onReblog }/>
 
             <PostAction
-                pack = { icons.bookmark }
+                icon = { "bookmark" }
                 active = { props.bookmarked }
                 onPress = { props.onBookmark } />
         </View>