Unify the color palette

12 files changed, 152 insertions, 86 deletions

diff --git a/src/view/com/feed/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx
index a63fb7a2c..7c54abf49 100644
--- a/src/view/com/feed/FeedItem.tsx
+++ b/src/view/com/feed/FeedItem.tsx
@@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {bsky, AdxUri} from '@adxp/mock-api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedViewItemModel} from '../../../state/models/feed-view'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 import {useStores} from '../../../state'
@@ -45,7 +45,7 @@ export const FeedItem = observer(function FeedItem({
       {item.repostedBy && (
         <View style={styles.repostedBy}>
           <FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
-          <Text style={[s.gray, s.bold, s.f13]}>
+          <Text style={[s.gray4, s.bold, s.f13]}>
             Reposted by {item.repostedBy.displayName}
           </Text>
         </View>
@@ -65,11 +65,11 @@ export const FeedItem = observer(function FeedItem({
               {item.author.displayName}
             </Text>
             <Text
-              style={[styles.metaItem, s.f14, s.gray]}
+              style={[styles.metaItem, s.f14, s.gray5]}
               onPress={onPressAuthor}>
               @{item.author.name}
             </Text>
-            <Text style={[styles.metaItem, s.f14, s.gray]}>
+            <Text style={[styles.metaItem, s.f14, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
           </View>
@@ -96,7 +96,7 @@ export const FeedItem = observer(function FeedItem({
               />
               <Text
                 style={
-                  item.myState.hasReposted ? [s.bold, s.green] : undefined
+                  item.myState.hasReposted ? [s.bold, s.green3] : undefined
                 }>
                 {item.repostCount}
               </Text>
@@ -108,7 +108,8 @@ export const FeedItem = observer(function FeedItem({
                 }
                 icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
               />
-              <Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
+              <Text
+                style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
                 {item.likeCount}
               </Text>
             </TouchableOpacity>
@@ -134,7 +135,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     margin: 2,
     marginBottom: 0,
-    backgroundColor: '#fff',
+    backgroundColor: colors.white,
     padding: 10,
   },
   repostedBy: {
@@ -143,7 +144,7 @@ const styles = StyleSheet.create({
   },
   repostedByIcon: {
     marginRight: 2,
-    color: 'gray',
+    color: colors.gray4,
   },
   layout: {
     flexDirection: 'row',
@@ -184,14 +185,14 @@ const styles = StyleSheet.create({
   },
   ctrlIcon: {
     marginRight: 5,
-    color: 'gray',
+    color: colors.gray5,
   },
   ctrlIconReposted: {
     marginRight: 5,
-    color: 'green',
+    color: colors.green3,
   },
   ctrlIconLiked: {
     marginRight: 5,
-    color: 'red',
+    color: colors.pink3,
   },
 })
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 00bf6f48a..02c8c0cc7 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {AdxUri} from '@adxp/mock-api'
 import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
 import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 import {PostText} from '../post/PostText'
@@ -69,12 +69,12 @@ export const FeedItem = observer(function FeedItem({
               {item.author.displayName}
             </Text>
             <Text style={[styles.metaItem, s.f14]}>{action}</Text>
-            <Text style={[styles.metaItem, s.f14, s.gray]}>
+            <Text style={[styles.metaItem, s.f14, s.gray5]}>
               {ago(item.indexedAt)}
             </Text>
           </View>
           {item.isLike || item.isRepost ? (
-            <PostText uri={item.subjectUri} style={[s.gray]} />
+            <PostText uri={item.subjectUri} style={[s.gray5]} />
           ) : (
             <></>
           )}
@@ -93,7 +93,7 @@ export const FeedItem = observer(function FeedItem({
 
 const styles = StyleSheet.create({
   outer: {
-    backgroundColor: '#fff',
+    backgroundColor: colors.white,
     padding: 10,
     paddingBottom: 0,
   },
diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx
index 9b5810b3b..d6d1e7e84 100644
--- a/src/view/com/post-thread/PostLikedBy.tsx
+++ b/src/view/com/post-thread/PostLikedBy.tsx
@@ -14,7 +14,7 @@ import {
   LikedByViewItemModel,
 } from '../../../state/models/liked-by-view'
 import {useStores} from '../../../state'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 
 export const PostLikedBy = observer(function PostLikedBy({uri}: {uri: string}) {
@@ -88,7 +88,7 @@ const LikedByItem = ({item}: {item: LikedByViewItemModel}) => {
         </View>
         <View style={styles.layoutContent}>
           <Text style={[s.f15, s.bold]}>{item.displayName}</Text>
-          <Text style={[s.f14, s.gray]}>@{item.name}</Text>
+          <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
     </TouchableOpacity>
@@ -97,9 +97,8 @@ const LikedByItem = ({item}: {item: LikedByViewItemModel}) => {
 
 const styles = StyleSheet.create({
   outer: {
-    borderTopWidth: 1,
-    borderTopColor: '#e8e8e8',
-    backgroundColor: '#fff',
+    marginTop: 1,
+    backgroundColor: colors.white,
   },
   layout: {
     flexDirection: 'row',
diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx
index 967e03940..0c2236770 100644
--- a/src/view/com/post-thread/PostRepostedBy.tsx
+++ b/src/view/com/post-thread/PostRepostedBy.tsx
@@ -14,7 +14,7 @@ import {
   RepostedByViewItemModel,
 } from '../../../state/models/reposted-by-view'
 import {useStores} from '../../../state'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 
 export const PostRepostedBy = observer(function PostRepostedBy({
@@ -94,7 +94,7 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
         </View>
         <View style={styles.layoutContent}>
           <Text style={[s.f15, s.bold]}>{item.displayName}</Text>
-          <Text style={[s.f14, s.gray]}>@{item.name}</Text>
+          <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
     </TouchableOpacity>
@@ -103,9 +103,8 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
 
 const styles = StyleSheet.create({
   outer: {
-    borderTopWidth: 1,
-    borderTopColor: '#e8e8e8',
-    backgroundColor: '#fff',
+    marginTop: 1,
+    backgroundColor: colors.white,
   },
   layout: {
     flexDirection: 'row',
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 5430c8ef5..46d7816c6 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {bsky, AdxUri} from '@adxp/mock-api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 import {useStores} from '../../../state'
@@ -81,11 +81,11 @@ export const PostThreadItem = observer(function PostThreadItem({
               {item.author.displayName}
             </Text>
             <Text
-              style={[styles.metaItem, s.f14, s.gray]}
+              style={[styles.metaItem, s.f14, s.gray5]}
               onPress={onPressAuthor}>
               @{item.author.name}
             </Text>
-            <Text style={[styles.metaItem, s.f14, s.gray]}>
+            <Text style={[styles.metaItem, s.f14, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
           </View>
@@ -102,7 +102,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             <View style={styles.expandedInfo}>
               {item.repostCount ? (
                 <Text
-                  style={[styles.expandedInfoItem, s.gray, s.semiBold]}
+                  style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
                   onPress={onPressReposts}>
                   <Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
                   {pluralize(item.repostCount, 'repost')}
@@ -112,7 +112,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               )}
               {item.likeCount ? (
                 <Text
-                  style={[styles.expandedInfoItem, s.gray, s.semiBold]}
+                  style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
                   onPress={onPressLikes}>
                   <Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
                   {pluralize(item.likeCount, 'like')}
@@ -144,7 +144,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               />
               <Text
                 style={
-                  item.myState.hasReposted ? [s.bold, s.green] : undefined
+                  item.myState.hasReposted ? [s.bold, s.green3] : undefined
                 }>
                 {item.repostCount}
               </Text>
@@ -156,7 +156,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                 }
                 icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
               />
-              <Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
+              <Text
+                style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
                 {item.likeCount}
               </Text>
             </TouchableOpacity>
@@ -177,16 +178,15 @@ export const PostThreadItem = observer(function PostThreadItem({
 
 const styles = StyleSheet.create({
   outer: {
-    borderTopWidth: 1,
-    borderTopColor: '#e8e8e8',
-    backgroundColor: '#fff',
+    marginTop: 1,
+    backgroundColor: colors.white,
   },
   layout: {
     flexDirection: 'row',
   },
   replyBar: {
     width: 5,
-    backgroundColor: 'gray',
+    backgroundColor: colors.gray2,
     marginRight: 2,
   },
   layoutAvi: {
@@ -222,7 +222,7 @@ const styles = StyleSheet.create({
   expandedInfo: {
     flexDirection: 'row',
     padding: 10,
-    borderColor: '#e8e8e8',
+    borderColor: colors.gray2,
     borderTopWidth: 1,
     borderBottomWidth: 1,
     marginTop: 5,
@@ -243,14 +243,14 @@ const styles = StyleSheet.create({
   },
   ctrlIcon: {
     marginRight: 5,
-    color: 'gray',
+    color: colors.gray5,
   },
   ctrlIconReposted: {
     marginRight: 5,
-    color: 'green',
+    color: colors.green3,
   },
   ctrlIconLiked: {
     marginRight: 5,
-    color: 'red',
+    color: colors.pink3,
   },
 })
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 3369db518..a8d0dfd0e 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -12,7 +12,7 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewModel} from '../../../state/models/post-thread-view'
 import {useStores} from '../../../state'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {ago} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 
@@ -92,11 +92,11 @@ export const Post = observer(function Post({uri}: {uri: string}) {
               {item.author.displayName}
             </Text>
             <Text
-              style={[styles.metaItem, s.f14, s.gray]}
+              style={[styles.metaItem, s.f14, s.gray5]}
               onPress={onPressAuthor}>
               @{item.author.name}
             </Text>
-            <Text style={[styles.metaItem, s.f14, s.gray]}>
+            <Text style={[styles.metaItem, s.f14, s.gray5]}>
               &middot; {ago(item.indexedAt)}
             </Text>
           </View>
@@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
               />
               <Text
                 style={
-                  item.myState.hasReposted ? [s.bold, s.green] : undefined
+                  item.myState.hasReposted ? [s.bold, s.green3] : undefined
                 }>
                 {item.repostCount}
               </Text>
@@ -135,7 +135,8 @@ export const Post = observer(function Post({uri}: {uri: string}) {
                 }
                 icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
               />
-              <Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
+              <Text
+                style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
                 {item.likeCount}
               </Text>
             </TouchableOpacity>
@@ -154,10 +155,9 @@ export const Post = observer(function Post({uri}: {uri: string}) {
 
 const styles = StyleSheet.create({
   outer: {
-    borderWidth: 1,
-    borderColor: '#e8e8e8',
+    marginTop: 1,
     borderRadius: 4,
-    backgroundColor: '#fff',
+    backgroundColor: colors.white,
     padding: 10,
   },
   layout: {
@@ -198,14 +198,14 @@ const styles = StyleSheet.create({
   },
   ctrlIcon: {
     marginRight: 5,
-    color: 'gray',
+    color: colors.gray5,
   },
   ctrlIconReposted: {
     marginRight: 5,
-    color: 'green',
+    color: colors.green3,
   },
   ctrlIconLiked: {
     marginRight: 5,
-    color: 'red',
+    color: colors.pink3,
   },
 })
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index 33d0c8d55..9a701a9ca 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -14,7 +14,7 @@ import {
   FollowerItem,
 } from '../../../state/models/user-followers-view'
 import {useStores} from '../../../state'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 
 export const ProfileFollowers = observer(function ProfileFollowers({
@@ -92,7 +92,7 @@ const User = ({item}: {item: FollowerItem}) => {
         </View>
         <View style={styles.layoutContent}>
           <Text style={[s.f15, s.bold]}>{item.displayName}</Text>
-          <Text style={[s.f14, s.gray]}>@{item.name}</Text>
+          <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
     </TouchableOpacity>
@@ -101,9 +101,8 @@ const User = ({item}: {item: FollowerItem}) => {
 
 const styles = StyleSheet.create({
   outer: {
-    borderTopWidth: 1,
-    borderTopColor: '#e8e8e8',
-    backgroundColor: '#fff',
+    marginTop: 1,
+    backgroundColor: colors.white,
   },
   layout: {
     flexDirection: 'row',
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index 62ed7f1c3..1945d1618 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -14,7 +14,7 @@ import {
   FollowItem,
 } from '../../../state/models/user-follows-view'
 import {useStores} from '../../../state'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 
 export const ProfileFollows = observer(function ProfileFollows({
@@ -92,7 +92,7 @@ const User = ({item}: {item: FollowItem}) => {
         </View>
         <View style={styles.layoutContent}>
           <Text style={[s.f15, s.bold]}>{item.displayName}</Text>
-          <Text style={[s.f14, s.gray]}>@{item.name}</Text>
+          <Text style={[s.f14, s.gray5]}>@{item.name}</Text>
         </View>
       </View>
     </TouchableOpacity>
@@ -101,9 +101,8 @@ const User = ({item}: {item: FollowItem}) => {
 
 const styles = StyleSheet.create({
   outer: {
-    borderTopWidth: 1,
-    borderTopColor: '#e8e8e8',
-    backgroundColor: '#fff',
+    marginTop: 1,
+    backgroundColor: colors.white,
   },
   layout: {
     flexDirection: 'row',
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 0769a0077..4ad84b32a 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -12,7 +12,7 @@ import {
 import {ProfileViewModel} from '../../../state/models/profile-view'
 import {useStores} from '../../../state'
 import {pluralize} from '../../lib/strings'
-import {s} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {AVIS} from '../../lib/assets'
 import Toast from '../util/Toast'
 
@@ -89,7 +89,7 @@ export const ProfileHeader = observer(function ProfileHeader({
       <Image style={styles.avi} source={AVIS[view.name] || AVIS['alice.com']} />
       <View style={[styles.nameLine, s.mb2]}>
         <Text style={[s.bold, s.f18, s.mr2]}>{view.displayName}</Text>
-        <Text style={[s.gray]}>@{view.name}</Text>
+        <Text style={[s.gray5]}>@{view.name}</Text>
       </View>
       {view.description && (
         <Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
@@ -99,17 +99,17 @@ export const ProfileHeader = observer(function ProfileHeader({
           style={[s.flexRow, s.mr10]}
           onPress={onPressFollowers}>
           <Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
-          <Text style={s.gray}>
+          <Text style={s.gray5}>
             {pluralize(view.followersCount, 'follower')}
           </Text>
         </TouchableOpacity>
         <TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressFollows}>
           <Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
-          <Text style={s.gray}>following</Text>
+          <Text style={s.gray5}>following</Text>
         </TouchableOpacity>
         <View style={[s.flexRow, s.mr10]}>
           <Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
-          <Text style={s.gray}>{pluralize(view.postsCount, 'post')}</Text>
+          <Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
         </View>
       </View>
       <View>
@@ -124,10 +124,10 @@ export const ProfileHeader = observer(function ProfileHeader({
 
 const styles = StyleSheet.create({
   outer: {
-    backgroundColor: '#fff',
+    backgroundColor: colors.white,
     padding: 10,
     borderBottomWidth: 1,
-    borderColor: '#eee',
+    borderColor: colors.gray2,
   },
   avi: {
     width: 60,
diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts
index 01e02a296..236ba67ca 100644
--- a/src/view/lib/styles.ts
+++ b/src/view/lib/styles.ts
@@ -1,5 +1,41 @@
 import {StyleSheet} from 'react-native'
 
+// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
+export const colors = {
+  white: '#ffffff',
+  black: '#000000',
+
+  gray1: '#f8f3f3',
+  gray2: '#e4e2e2',
+  gray3: '#c1b9b9',
+  gray4: '#968d8d',
+  gray5: '#645454',
+
+  blue1: '#8bc7fd',
+  blue2: '#52acfe',
+  blue3: '#0085ff',
+  blue4: '#0062bd',
+  blue5: '#034581',
+
+  pink1: '#f8ccff',
+  pink2: '#e966ff',
+  pink3: '#db00ff',
+  pink4: '#a601c1',
+  pink5: '#570066',
+
+  purple1: '#ebdbff',
+  purple2: '#ba85ff',
+  purple3: '#9747ff',
+  purple4: '#6d00fa',
+  purple5: '#380080',
+
+  green1: '#c1ffb8',
+  green2: '#27f406',
+  green3: '#20bc07',
+  green4: '#148203',
+  green5: '#082b03',
+}
+
 export const s = StyleSheet.create({
   // font weights
   fw600: {fontWeight: '600'},
@@ -31,13 +67,6 @@ export const s = StyleSheet.create({
   ['lh18-1']: {lineHeight: 18},
   ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
 
-  // colors
-  black: {color: 'black'},
-  gray: {color: 'gray'},
-  blue: {color: '#006bf7'},
-  green: {color: 'green'},
-  red: {color: 'red'},
-
   // margins
   mr2: {marginRight: 2},
   mr5: {marginRight: 5},
@@ -82,4 +111,38 @@ export const s = StyleSheet.create({
   textLeft: {textAlign: 'left'},
   textCenter: {textAlign: 'center'},
   textRight: {textAlign: 'right'},
+
+  // colors
+  white: {color: colors.white},
+  black: {color: colors.black},
+
+  gray1: {color: colors.gray1},
+  gray2: {color: colors.gray2},
+  gray3: {color: colors.gray3},
+  gray4: {color: colors.gray4},
+  gray5: {color: colors.gray5},
+
+  blue1: {color: colors.blue1},
+  blue2: {color: colors.blue2},
+  blue3: {color: colors.blue3},
+  blue4: {color: colors.blue4},
+  blue5: {color: colors.blue5},
+
+  pink1: {color: colors.pink1},
+  pink2: {color: colors.pink2},
+  pink3: {color: colors.pink3},
+  pink4: {color: colors.pink4},
+  pink5: {color: colors.pink5},
+
+  purple1: {color: colors.purple1},
+  purple2: {color: colors.purple2},
+  purple3: {color: colors.purple3},
+  purple4: {color: colors.purple4},
+  purple5: {color: colors.purple5},
+
+  green1: {color: colors.green1},
+  green2: {color: colors.green2},
+  green3: {color: colors.green3},
+  green4: {color: colors.green4},
+  green5: {color: colors.green5},
 })
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 7b0098c51..c53de0807 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -16,6 +16,7 @@ import {NavigationModel} from '../../../state/models/navigation'
 import {match, MatchResult} from '../../routes'
 import {TabsSelectorModal} from './tabs-selector'
 import {createBackMenu, createForwardMenu} from './history-menu'
+import {colors} from '../../lib/styles'
 
 const Location = ({icon, title}: {icon: IconProp; title?: string}) => {
   return (
@@ -99,7 +100,7 @@ export const MobileShell: React.FC = observer(() => {
           {screenRenderDesc.screens.map(({Com, params, key, activityState}) => (
             <Screen
               key={key}
-              style={{backgroundColor: '#fff'}}
+              style={styles.screen}
               activityState={activityState}>
               <Com params={params} />
             </Screen>
@@ -177,11 +178,14 @@ const styles = StyleSheet.create({
   innerContainer: {
     flex: 1,
   },
+  screen: {
+    backgroundColor: colors.gray1,
+  },
   topBar: {
     flexDirection: 'row',
-    backgroundColor: '#fff',
+    backgroundColor: colors.white,
     borderBottomWidth: 1,
-    borderBottomColor: '#ccc',
+    borderBottomColor: colors.gray2,
     paddingLeft: 10,
     paddingRight: 10,
     paddingTop: 40,
@@ -198,24 +202,24 @@ const styles = StyleSheet.create({
     backgroundColor: '#F8F3F3',
   },
   locationIcon: {
-    color: '#DB00FF',
+    color: colors.pink3,
     marginRight: 8,
   },
   locationIconLight: {
-    color: '#909090',
+    color: colors.gray3,
     marginRight: 8,
   },
   locationText: {
-    color: '#000',
+    color: colors.black,
   },
   locationTextLight: {
-    color: '#868788',
+    color: colors.gray4,
   },
   bottomBar: {
     flexDirection: 'row',
-    backgroundColor: '#fff',
+    backgroundColor: colors.white,
     borderTopWidth: 1,
-    borderTopColor: '#ccc',
+    borderTopColor: colors.gray2,
     paddingLeft: 5,
     paddingRight: 15,
     paddingBottom: 20,
@@ -230,6 +234,6 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   inactive: {
-    color: '#888',
+    color: colors.gray3,
   },
 })
diff --git a/todos.txt b/todos.txt
index 661f8082b..65d1a7a8d 100644
--- a/todos.txt
+++ b/todos.txt
@@ -14,4 +14,6 @@ Paul's todo list
   - Follows list
 - Navigation
   - Restore all functionality that was disabled during the refactor
-  - Reduce extraneous triggers of useLoadEffect
\ No newline at end of file
+  - Reduce extraneous triggers of useLoadEffect
+- Bugs
+  - Home screen goes white sometimes, not sure why
\ No newline at end of file