refactored colors and text styles

src/components/FocusableIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image, ImageSourcePropType } from 'react-native';
-import { primary } from '../styles/colors';
+import colors from '../styles/colors';
 
 export type FocusableIconProps = {
   focused: boolean,
@@ -20,7 +20,7 @@ const FocusableIcon: React.FC<FocusableIconProps> = (props) => {
       style={{ 
         height: props.height,
         width: props.width,
-        tintColor: props.focused ? primary.focused : primary.blurred,
+        tintColor: props.focused ? colors.text.primary : colors.text.secondary,
       }}
       source={props.focused ? props.focusedSource : props.source}
     />

src/components/common/BottomTabBar.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text, View, Image, Pressable } from 'react-native';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import textStyles from '../../styles/text';
+import colors from '../../styles/colors';
 
 const icons: {[key: string]: any} = {
   home: {
@@ -26,7 +27,7 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
   return (
     <View style={{
       height: 54,
-      backgroundColor: '#383838',
+      backgroundColor: colors.gradient.high,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-around',
@@ -70,13 +71,12 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
               style={{
                 height: 24,
                 width: 24,
-                tintColor: isFocused ? 'white' : '#a0a0a0',
+                tintColor: isFocused ? colors.text.primary : colors.text.secondary,
               }}
             />
             <Text style={{
               ...textStyles.small,
-              color: isFocused ? 'white' : '#a0a0a0',
-              fontFamily: isFocused ? 'Ubuntu-Medium' : 'Ubuntu-Light',
+              color: isFocused ? colors.text.primary : colors.text.secondary,
             }}>
               {label}
             </Text>

src/components/common/TopTabBar.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { MaterialTopTabBarProps } from '@react-navigation/material-top-tabs';
-import { primary } from '../../styles/colors';
-import text from '../../styles/text';
+import colors from '../../styles/colors';
+import textStyles from '../../styles/text';
 
 const TopTabBar: React.FC<MaterialTopTabBarProps> = ({ state, descriptors }) => {
   return (
     <View style={{
-      height: 48,
-      backgroundColor: '#383838',
+      backgroundColor: colors.gradient.high,
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-around',
+      justifyContent: 'space-evenly',
     }}>
       {state.routes.map((route, index) => {
         const { options } = descriptors[route.key];
@@ -23,24 +22,21 @@ const TopTabBar: React.FC<MaterialTopTabBarProps> = ({ state, descriptors }) =>
             : route.name;
         
         const isFocused = state.index === index;
-        const fontFamily = isFocused ? 'Ubuntu-Regular' : 'Ubuntu-Light';
-        const color = isFocused ? primary.focused : primary.blurred;
-        const borderBottomColor = isFocused ? primary.focused : '#383838';
+        const color = isFocused ? colors.text.primary : colors.text.secondary;
+        const borderBottomColor = isFocused ? colors.accent : colors.gradient.high;
 
         return (
-          <View style={{
+          <View key={route.key} style={{
             borderBottomColor,
-            borderBottomWidth: 2,
-            borderBottomLeftRadius: 2,
-            borderBottomEndRadius: 2,
-            paddingBottom: 5,
+            borderBottomWidth: 1.5,
+            paddingVertical: 8,
             width: 100,
+            height: 38,
             justifyContent: 'center',
-            flexDirection: 'row',
+            alignItems: 'center', 
           }}>
             <Text style={{
-              ...text.header,
-              fontFamily, color
+              ...textStyles.header, color,
             }}>{label}</Text>
           </View>
         );

src/components/common/TopTabContainer.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import LinearGradient from 'react-native-linear-gradient';
+import colors from '../../styles/colors';
 
 const TopTabContainer: React.FC<{}> = ({ children }) => (
   <LinearGradient
-    colors={['#383838', '#000000']}
-    // colors={['#395266', '#06172d']}
-    // start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}}
-    locations={[0.05,0.75]}
+    colors={[colors.gradient.high, colors.gradient.mid, colors.gradient.low]}
+    locations={[0.03,0.3,0.7]}
     style={{
       flex: 1,
     }}

src/components/library/ArtistsTab.tsx

@@ -3,14 +3,13 @@ import { Text, View, Image, FlatList } from 'react-native';
 import { Artist } from '../../models/music';
 import { useRecoilValue } from 'recoil';
 import { artistsState } from '../../state/artists';
-import text from '../../styles/text';
+import textStyles from '../../styles/text';
 import TopTabContainer from '../common/TopTabContainer';
 
 const ArtistItem: React.FC<{ item: Artist } > = ({ item }) => (
   <View style={{
     flexDirection: 'row',
     alignItems: 'center',
-    // height: 56,
     marginVertical: 6,
     marginLeft: 6,
   }}>
@@ -19,11 +18,10 @@ const ArtistItem: React.FC<{ item: Artist } > = ({ item }) => (
       style={{
         width: 56,
         height: 56,
-        // tintColor: 'white',
       }}
     />
     <Text style={{
-      ...text.regular,
+      ...textStyles.paragraph,
       marginLeft: 12,
     }}>{item.name}</Text>
   </View>

src/styles/colors.ts

@@ -1,6 +1,12 @@
-import { StyleSheet } from "react-native";
-
-export const primary = {
-  focused: '#fff',
-  blurred: '#bababa',
+export default {
+  text: {
+    primary: '#ffffff',
+    secondary: '#999999',
+  },
+  gradient: {
+    high: '#2d2d2d',
+    mid: '#191919',
+    low: '#000000',
+  },
+  accent: '#c260e5',
 }

src/styles/text.ts

@@ -1,27 +1,24 @@
-import { StyleSheet, TextStyle } from "react-native";
+import { TextStyle } from "react-native";
+import colors from './colors';
 
-const regular: TextStyle = {
+const paragraph: TextStyle = {
   fontFamily: 'Ubuntu-Light',
-  fontSize: 18,
-  color: '#fff',
+  fontSize: 16,
+  color: colors.text.primary,
 };
 
 const header: TextStyle = {
-  ...regular,
-  fontSize: 22,
+  ...paragraph,
+  fontSize: 18,
 };
 
 const small: TextStyle = {
-  ...regular,
+  ...paragraph,
   fontSize: 11,
 };
 
-export type TextStyles = {
-  [key: string]: TextStyle,
-}
-
 export default {
-  regular,
+  paragraph,
   header,
   small,
 };