From b7b58b506bf836fa19b064e93443cb54fa1bada8 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Tue, 22 May 2018 21:29:24 -0700
Subject: [PATCH 01/42] POC current user redux implementation

---
 mobile/actions/currentUserId.js  | 13 +++++++++++++
 mobile/reducers/currentUserId.js | 19 +++++++++++++++++++
 mobile/reducers/index.js         |  3 +++
 mobile/views/Dashboard/index.js  | 16 +++++++++++++++-
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 mobile/actions/currentUserId.js
 create mode 100644 mobile/reducers/currentUserId.js

diff --git a/mobile/actions/currentUserId.js b/mobile/actions/currentUserId.js
new file mode 100644
index 0000000000..5e3aee92bc
--- /dev/null
+++ b/mobile/actions/currentUserId.js
@@ -0,0 +1,13 @@
+// @flow
+
+export type SetCurrentUserAction = {
+  type: 'SET_CURRENT_USER_ID',
+  id: ?string,
+};
+
+export const setCurrentUserId = (id: ?string) => {
+  return {
+    type: 'SET_CURRENT_USER_ID',
+    id,
+  };
+};
diff --git a/mobile/reducers/currentUserId.js b/mobile/reducers/currentUserId.js
new file mode 100644
index 0000000000..c4b3be78b5
--- /dev/null
+++ b/mobile/reducers/currentUserId.js
@@ -0,0 +1,19 @@
+// @flow
+import { type SetCurrentUserAction } from '../actions/currentUserId';
+
+export type CurrentUserState = ?string;
+
+const initialState: CurrentUserState = null;
+
+export default (
+  state: CurrentUserState = initialState,
+  action: SetCurrentUserAction
+): CurrentUserState => {
+  switch (action.type) {
+    case 'SET_CURRENT_USER_ID': {
+      return action.id;
+    }
+    default:
+      return state;
+  }
+};
diff --git a/mobile/reducers/index.js b/mobile/reducers/index.js
index 6443010fba..681f2f4ec3 100644
--- a/mobile/reducers/index.js
+++ b/mobile/reducers/index.js
@@ -1,11 +1,14 @@
 // @flow
 import { combineReducers } from 'redux';
 import authentication, { type AuthenticationState } from './authentication';
+import currentUserId, { type CurrentUserState } from './currentUserId';
 
 export type State = {
   +authentication: $Exact<AuthenticationState>,
+  +currentUserId: CurrentUserState,
 };
 
 export default combineReducers({
   authentication,
+  currentUserId,
 });
diff --git a/mobile/views/Dashboard/index.js b/mobile/views/Dashboard/index.js
index bc9cddafb2..a86c76791f 100644
--- a/mobile/views/Dashboard/index.js
+++ b/mobile/views/Dashboard/index.js
@@ -1,10 +1,13 @@
 // @flow
 import * as React from 'react';
 import { View } from 'react-native';
+import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import withSafeView from '../../components/SafeAreaView';
 import ThreadFeed from '../../components/ThreadFeed';
 import getCurrentUserEverythingFeed from '../../../shared/graphql/queries/user/getCurrentUserEverythingFeed';
+import { setCurrentUserId } from '../../actions/currentUserId';
+import type { State as ReduxState } from '../../reducers';
 import {
   getCurrentUser,
   type GetUserType,
@@ -16,12 +19,22 @@ const EverythingThreadFeed = compose(getCurrentUserEverythingFeed)(ThreadFeed);
 
 type Props = {
   navigation: Object,
+  dispatch: Function,
   data: {
     user?: GetUserType,
   },
+  currentUserId: ?GetUserType,
 };
 
 class Dashboard extends React.Component<Props> {
+  componentDidUpdate(prevProps) {
+    const curr = this.props;
+    if (!prevProps.data.user && curr.data.user) {
+      if (!curr.currentUserId || curr.data.user.id !== curr.currentUserId) {
+        return curr.dispatch(setCurrentUserId(curr.data.user.id));
+      }
+    }
+  }
   render() {
     return (
       <Wrapper>
@@ -33,4 +46,5 @@ class Dashboard extends React.Component<Props> {
   }
 }
 
-export default compose(withSafeView, getCurrentUser)(Dashboard);
+const map = ({ currentUserId }: ReduxState): * => ({ currentUserId });
+export default compose(connect(map), withSafeView, getCurrentUser)(Dashboard);

From 4baf3bd01ceab6d01ab089c2f438066bf5cf41ee Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Tue, 22 May 2018 21:29:35 -0700
Subject: [PATCH 02/42] Fix up outdated notification types

---
 shared/types.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/shared/types.js b/shared/types.js
index 267217f4dc..eb18a7fdfc 100644
--- a/shared/types.js
+++ b/shared/types.js
@@ -139,7 +139,6 @@ export type NotificationEventType =
   | 'REACTION_CREATED'
   | 'MESSAGE_CREATED'
   | 'THREAD_CREATED'
-  | 'THREAD_EDITED'
   | 'CHANNEL_CREATED'
   | 'DIRECT_MESSAGE_THREAD_CREATED'
   | 'USER_JOINED_COMMUNITY'
@@ -147,7 +146,13 @@ export type NotificationEventType =
   | 'USER_APPROVED_TO_JOIN_PRIVATE_CHANNEL'
   | 'THREAD_LOCKED_BY_OWNER'
   | 'THREAD_DELETED_BY_OWNER'
-  | 'COMMUNITY_INVITATION';
+  | 'COMMUNITY_INVITE'
+  | 'MENTION_THREAD'
+  | 'MENTION_MESSAGE'
+  | 'PRIVATE_CHANNEL_REQUEST_SENT'
+  | 'PRIVATE_CHANNEL_REQUEST_APPROVED'
+  | 'PRIVATE_COMMUNITY_REQUEST_SENT'
+  | 'PRIVATE_COMMUNITY_REQUEST_APPROVED';
 
 type NotificationPayload = {
   id: string,

From 34fbec9a9d503542f84effa7186e7e1a89bbf877 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Tue, 22 May 2018 21:30:07 -0700
Subject: [PATCH 03/42] Get notifications rendering to the view

---
 mobile/views/Dashboard/style.js               |   1 +
 mobile/views/Notifications/index.js           |  71 +++--
 mobile/views/Notifications/renderUtils.js     |  49 +++
 mobile/views/Notifications/renderer.js        | 280 ++++++++++++++++++
 mobile/views/Notifications/style.js           |   0
 .../notification/notificationInfo.js          |  11 +-
 .../queries/notification/getNotifications.js  |   3 +-
 7 files changed, 382 insertions(+), 33 deletions(-)
 create mode 100644 mobile/views/Notifications/renderUtils.js
 create mode 100644 mobile/views/Notifications/renderer.js
 create mode 100644 mobile/views/Notifications/style.js

diff --git a/mobile/views/Dashboard/style.js b/mobile/views/Dashboard/style.js
index f2c3081388..f44ab2b6bc 100644
--- a/mobile/views/Dashboard/style.js
+++ b/mobile/views/Dashboard/style.js
@@ -2,6 +2,7 @@
 import styled from 'styled-components/native';
 
 export const Wrapper = styled.View`
+  display: flex;
   background-color: ${props => props.theme.bg.default};
   flex: 1;
 `;
diff --git a/mobile/views/Notifications/index.js b/mobile/views/Notifications/index.js
index f395575be5..037994a530 100644
--- a/mobile/views/Notifications/index.js
+++ b/mobile/views/Notifications/index.js
@@ -1,6 +1,6 @@
 // @flow
-import React from 'react';
-import { View, Button } from 'react-native';
+import * as React from 'react';
+import { Button } from 'react-native';
 import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import { SecureStore } from 'expo';
@@ -18,11 +18,17 @@ import subscribeExpoPush from '../../../shared/graphql/mutations/user/subscribeE
 import getPushNotificationToken from '../../utils/get-push-notification-token';
 import type { State as ReduxState } from '../../reducers';
 import type { AuthenticationState } from '../../reducers/authentication';
+import Renderer from './renderer';
+import { parseNotification } from './renderUtils';
+import type { Navigation } from '../../utils/types';
+import type { CurrentUserState } from '../../reducers/currentUserId';
 
 type Props = {
   ...$Exact<ViewNetworkHandlerProps>,
   mutate: (token: any) => Promise<any>,
   authentication: AuthenticationState,
+  currentUserId: CurrentUserState,
+  navigation: Navigation,
   data: {
     subscribeToNewNotifications: Function,
     fetchMore: Function,
@@ -41,10 +47,6 @@ type State = {
   pushNotifications: ?PushNotificationsDecision,
 };
 
-const mapStateToProps = (state: ReduxState): * => ({
-  authentication: state.authentication,
-});
-
 class Notifications extends React.Component<Props, State> {
   constructor() {
     super();
@@ -132,31 +134,39 @@ class Notifications extends React.Component<Props, State> {
   };
 
   render() {
-    const { isLoading, hasError, data: { notifications } } = this.props;
+    const {
+      isLoading,
+      hasError,
+      data: { notifications },
+      currentUserId,
+      navigation,
+    } = this.props;
     const { pushNotifications } = this.state;
     if (notifications) {
       return (
         <Wrapper>
-          <View>
-            {pushNotifications != null &&
-              pushNotifications.decision === undefined && (
-                <Button
-                  title="Enable push notifications"
-                  onPress={this.enablePushNotifications}
-                />
-              )}
-            <InfiniteList
-              data={notifications.edges}
-              renderItem={({ item: { node } }) => (
-                <Text type="body">{node.id}</Text>
-              )}
-              loadingIndicator={<Text>Loading...</Text>}
-              hasNextPage={notifications.pageInfo.hasNextPage}
-              fetchMore={this.fetchMore}
-              refetching={this.props.isRefetching}
-              refetch={this.props.data.refetch}
-            />
-          </View>
+          {pushNotifications != null &&
+            pushNotifications.decision === undefined && (
+              <Button
+                title="Enable push notifications"
+                onPress={this.enablePushNotifications}
+              />
+            )}
+          <InfiniteList
+            data={notifications.edges}
+            renderItem={({ item }) => (
+              <Renderer
+                currentUserId={currentUserId}
+                navigation={navigation}
+                notification={parseNotification(item.node)}
+              />
+            )}
+            loadingIndicator={<Text>Loading...</Text>}
+            hasNextPage={notifications.pageInfo.hasNextPage}
+            fetchMore={this.fetchMore}
+            refetching={this.props.isRefetching}
+            refetch={this.props.data.refetch}
+          />
         </Wrapper>
       );
     }
@@ -179,10 +189,15 @@ class Notifications extends React.Component<Props, State> {
   }
 }
 
+const map = (state: ReduxState): * => ({
+  authentication: state.authentication,
+  currentUserId: state.currentUserId,
+});
+
 export default compose(
   withSafeView,
   getNotifications,
   subscribeExpoPush,
   viewNetworkHandler,
-  connect(mapStateToProps)
+  connect(map)
 )(Notifications);
diff --git a/mobile/views/Notifications/renderUtils.js b/mobile/views/Notifications/renderUtils.js
new file mode 100644
index 0000000000..3116964d6a
--- /dev/null
+++ b/mobile/views/Notifications/renderUtils.js
@@ -0,0 +1,49 @@
+// @flow
+import type { NotificationInfoType } from '../../../shared/graphql/fragments/notification/notificationInfo';
+import type {
+  NotificationEventType,
+  NotificationPayloadType,
+} from '../../../shared/types';
+
+type Node = {
+  id: string,
+  payload: any,
+  type: NotificationPayloadType,
+};
+
+export type ParsedNotificationType = {
+  id: string,
+  actors: Array<Node>,
+  context: Node,
+  entities: Array<Node>,
+  createdAt: string,
+  event: NotificationEventType,
+  isRead: boolean,
+  isSeen: boolean,
+  modifiedAt: ?string,
+};
+
+// prettier-ignore
+export const parseNotification = (notification: NotificationInfoType): ParsedNotificationType => {
+  return Object.assign({}, notification, {
+    actors: notification.actors.map(actor => {
+      return {
+        id: actor.id,
+        type: actor.type,
+        payload: JSON.parse(actor.payload),
+      };
+    }),
+    context: {
+      id: notification.context.id,
+      type: notification.context.type,
+      payload: JSON.parse(notification.context.payload),
+    },
+    entities: notification.entities.map(entity => {
+      return {
+        id: entity.id,
+        type: entity.type,
+        payload: JSON.parse(entity.payload),
+      };
+    }),
+  });
+};
diff --git a/mobile/views/Notifications/renderer.js b/mobile/views/Notifications/renderer.js
new file mode 100644
index 0000000000..395dfec0c4
--- /dev/null
+++ b/mobile/views/Notifications/renderer.js
@@ -0,0 +1,280 @@
+// @flow
+import * as React from 'react';
+import type { CurrentUserState } from '../../reducers/currentUserId';
+import type { Navigation } from '../../utils/types';
+import { type ParsedNotificationType } from './renderUtils';
+import { View, TouchableHighlight } from 'react-native';
+import Avatar from '../../components/Avatar';
+import Text from '../../components/Text';
+
+type Props = {
+  notification: ParsedNotificationType,
+  currentUserId: CurrentUserState,
+  navigation: Navigation,
+};
+
+class Renderer extends React.Component<Props> {
+  renderActorsString = (): any => {
+    const { navigation } = this.props;
+    const actors = this.getActors();
+    // reverse to show the most recent first
+    if (!actors || actors.length === 0) return null;
+
+    const names = actors.map(actor => actor.payload.name).reverse();
+    const data = actors.map(actor => actor.payload).reverse();
+
+    if (actors.length === 1) {
+      return (
+        <View>
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
+          >
+            <Text>{names[0]}</Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if (actors.length === 2) {
+      return (
+        <View>
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
+          >
+            <Text>{names[0]}</Text>
+          </TouchableHighlight>{' '}
+          and{' '}
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[1].id })}
+          >
+            <Text>{names[1]}</Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if (actors.length === 3) {
+      return (
+        <View>
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
+          >
+            <Text>{names[0]}</Text>
+          </TouchableHighlight>,
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[1].id })}
+          >
+            <Text>{names[1]}</Text>
+          </TouchableHighlight>{' '}
+          and{' '}
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[2].id })}
+          >
+            <Text>{names[2]}</Text>
+          </TouchableHighlight>
+        </View>
+      );
+    } else if (actors.length >= 4) {
+      return (
+        <View>
+          <TouchableHighlight
+            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
+          >
+            <Text>{names[0]}</Text>
+          </TouchableHighlight>{' '}
+          and {names.length - 1} others{' '}
+        </View>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  actorsToObjects = () => {
+    const actors = this.getActors();
+
+    if (!actors || actors.length == 0) return [];
+
+    return actors
+      .map(actor => {
+        return {
+          name: actor.payload.name,
+          username: actor.payload.username,
+          profilePhoto: actor.payload.profilePhoto,
+          id: actor.payload.id,
+        };
+      })
+      .reverse();
+  };
+
+  renderActorsRow = () => {
+    const { navigation } = this.props;
+    const actors = this.getActors();
+    if (!actors || actors.length === 0) return null;
+
+    return (
+      <View>
+        {actors.map(actor => (
+          <Avatar
+            key={actor.id}
+            user={actor}
+            size={'32'}
+            radius={'16'}
+            isOnline={actor.payload.isOnline}
+            src={actor.payload.profilePhoto}
+            onPress={() => navigation.navigate(`User`, { id: actor.id })}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  getActors = () => {
+    return this.props.notification.actors.filter(
+      actor => actor.id !== this.props.currentUserId
+    );
+  };
+
+  threadToString = () => {
+    const { currentUserId, navigation, notification } = this.props;
+
+    const isAuthor = notification.context.payload.creatorId === currentUserId;
+    const str = isAuthor ? 'in your thread' : 'in';
+    const output = `${str} ${notification.context.payload.content.title}`;
+
+    return (
+      <TouchableHighlight
+        onPress={() =>
+          navigation.navigate(`Thread`, { id: notification.context.id })
+        }
+      >
+        <Text>{output}</Text>
+      </TouchableHighlight>
+    );
+  };
+
+  messageToString = () => {
+    return <Text>'your reply'</Text>;
+  };
+
+  communityToString = () => {
+    const { navigation, notification } = this.props;
+    return (
+      <TouchableHighlight
+        onPress={() =>
+          navigation.navigate(`Community`, { id: notification.context.id })
+        }
+      >
+        <Text>{notification.context.payload.name}</Text>
+      </TouchableHighlight>
+    );
+  };
+
+  channelToString = () => {
+    const { context } = this.props.notification;
+    return <Text>{context.payload.name}</Text>;
+  };
+
+  renderContextString = () => {
+    const { context } = this.props.notification;
+    switch (context.type) {
+      case 'SLATE':
+      case 'THREAD': {
+        return this.threadToString();
+      }
+      case 'MESSAGE': {
+        return this.messageToString();
+      }
+      case 'COMMUNITY': {
+        return this.communityToString();
+      }
+      case 'CHANNEL': {
+        return this.channelToString();
+      }
+      default: {
+        console.error('Invalid notification context type');
+        return '';
+      }
+    }
+  };
+
+  parseEvent = () => {
+    const { event } = this.props.notification;
+
+    switch (event) {
+      case 'MESSAGE_CREATED': {
+        return <Text>replied</Text>;
+      }
+      case 'REACTION_CREATED': {
+        return <Text>liked</Text>;
+      }
+      case 'CHANNEL_CREATED': {
+        return <Text>created a channel</Text>;
+      }
+      case 'USER_JOINED_COMMUNITY': {
+        return <Text>joined</Text>;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_SENT': {
+        return <Text>requested to join</Text>;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
+        return <Text>approved your request to join</Text>;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
+        return <Text>requested to join</Text>;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
+        return <Text>approved your request to join</Text>;
+      }
+      default: {
+        return '';
+      }
+    }
+  };
+
+  timeDifferenceShort(current: number, previous: number) {
+    const msPerSecond = 1000;
+    const msPerMinute = 60 * 1000;
+    const msPerHour = msPerMinute * 60;
+    const msPerDay = msPerHour * 24;
+    const msPerYear = msPerDay * 365;
+
+    let elapsed = current - previous;
+
+    if (elapsed < msPerMinute) {
+      const now = Math.round(elapsed / msPerSecond);
+      return <Text>{now}s</Text>;
+    } else if (elapsed < msPerHour) {
+      const now = Math.round(elapsed / msPerMinute);
+      return <Text>{now}m</Text>;
+    } else if (elapsed < msPerDay) {
+      const now = Math.round(elapsed / msPerHour);
+      return <Text>{now}h</Text>;
+    } else if (elapsed < msPerYear) {
+      const now = Math.round(elapsed / msPerDay);
+      return <Text>{now}d</Text>;
+    } else {
+      const now = Math.round(elapsed / msPerYear);
+      return <Text>{now}y</Text>;
+    }
+  }
+
+  parseNotificationDate = () => {
+    const { createdAt, modifiedAt } = this.props.notification;
+    const date = modifiedAt || createdAt;
+
+    const now = new Date().getTime();
+    const timestamp = new Date(date).getTime();
+    return <Text>· {this.timeDifferenceShort(now, timestamp)}</Text>;
+  };
+
+  render() {
+    return (
+      <View>
+        {this.renderActorsRow()}
+        {this.renderActorsString()}
+        {this.parseEvent()}
+        {this.renderContextString()}
+        {this.parseNotificationDate()}
+      </View>
+    );
+  }
+}
+
+export default Renderer;
diff --git a/mobile/views/Notifications/style.js b/mobile/views/Notifications/style.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/shared/graphql/fragments/notification/notificationInfo.js b/shared/graphql/fragments/notification/notificationInfo.js
index 339895d2ab..d2235f93eb 100644
--- a/shared/graphql/fragments/notification/notificationInfo.js
+++ b/shared/graphql/fragments/notification/notificationInfo.js
@@ -1,17 +1,20 @@
 // @flow
 import gql from 'graphql-tag';
-import type { NotificationEventType } from 'shared/types';
+import type {
+  NotificationEventType,
+  NotificationPayloadType,
+} from 'shared/types';
 
 type Node = {
   id: string,
-  type: string,
+  type: NotificationPayloadType,
   payload: string,
 };
 
 export type NotificationInfoType = {
   id: string,
-  createdAt: Date,
-  modifiedAt: ?Date,
+  createdAt: string,
+  modifiedAt: ?string,
   actors: Array<Node>,
   context: Node,
   entities: Array<Node>,
diff --git a/shared/graphql/queries/notification/getNotifications.js b/shared/graphql/queries/notification/getNotifications.js
index bb47b40d65..fd368fd96c 100644
--- a/shared/graphql/queries/notification/getNotifications.js
+++ b/shared/graphql/queries/notification/getNotifications.js
@@ -109,7 +109,8 @@ export const getNotificationsOptions = {
         subscribeToMore({
           document: subscribeToNewNotifications,
           updateQuery: (prev, { subscriptionData }) => {
-            let newNotification = subscriptionData.data.notificationAdded;
+            let newNotification =
+              subscriptionData.data && subscriptionData.data.notificationAdded;
             if (!newNotification) return prev;
 
             const notificationNode = {

From fc26342bf5e20768260754986a0851219d2196c6 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:19:18 -0700
Subject: [PATCH 04/42] Add a default export for flex helpers

---
 mobile/components/Flex/index.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 mobile/components/Flex/index.js

diff --git a/mobile/components/Flex/index.js b/mobile/components/Flex/index.js
new file mode 100644
index 0000000000..125de59038
--- /dev/null
+++ b/mobile/components/Flex/index.js
@@ -0,0 +1,5 @@
+// @flow
+import Row from './Row';
+import Column from './Column';
+
+export { Row, Column };

From 41ebac88a8015c68f51ba7f350f3412f49244390 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:20:13 -0700
Subject: [PATCH 05/42] Add list item helper utility components

---
 mobile/components/Lists/ListItem.js           |  23 ++
 mobile/components/Lists/ListItemWithAvatar.js |  32 +++
 mobile/components/Lists/index.js              |   6 +
 mobile/components/Lists/style.js              | 209 ++++++++++++++++++
 4 files changed, 270 insertions(+)
 create mode 100644 mobile/components/Lists/ListItem.js
 create mode 100644 mobile/components/Lists/ListItemWithAvatar.js
 create mode 100644 mobile/components/Lists/index.js
 create mode 100644 mobile/components/Lists/style.js

diff --git a/mobile/components/Lists/ListItem.js b/mobile/components/Lists/ListItem.js
new file mode 100644
index 0000000000..18ded5021a
--- /dev/null
+++ b/mobile/components/Lists/ListItem.js
@@ -0,0 +1,23 @@
+// @flow
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { ListItemView } from './style';
+
+type ListItemProps = {
+  onPress: Function,
+  children?: React.ChildrenArray<any>,
+};
+
+export class ListItem extends React.Component<ListItemProps> {
+  render() {
+    const { onPress, children } = this.props;
+
+    return (
+      <ListItemView>
+        <TouchableOpacity onPress={onPress} activeOpacity={0.6}>
+          {children}
+        </TouchableOpacity>
+      </ListItemView>
+    );
+  }
+}
diff --git a/mobile/components/Lists/ListItemWithAvatar.js b/mobile/components/Lists/ListItemWithAvatar.js
new file mode 100644
index 0000000000..ace6f61323
--- /dev/null
+++ b/mobile/components/Lists/ListItemWithAvatar.js
@@ -0,0 +1,32 @@
+// @flow
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Row } from '../Flex';
+import { ListItemView, AvatarWrapper } from './style';
+
+type ListItemWithAvatarProps = {
+  onPress: Function,
+  children?: React.ChildrenArray<any>,
+  AvatarComponent: React.ComponentType<any>,
+};
+
+export class ListItemWithAvatar extends React.Component<
+  ListItemWithAvatarProps
+> {
+  render() {
+    const { onPress, children, AvatarComponent } = this.props;
+
+    return (
+      <ListItemView>
+        <TouchableOpacity onPress={onPress} activeOpacity={0.6}>
+          <Row>
+            <AvatarWrapper>
+              <AvatarComponent />
+            </AvatarWrapper>
+            {children}
+          </Row>
+        </TouchableOpacity>
+      </ListItemView>
+    );
+  }
+}
diff --git a/mobile/components/Lists/index.js b/mobile/components/Lists/index.js
new file mode 100644
index 0000000000..6a4a5a80b8
--- /dev/null
+++ b/mobile/components/Lists/index.js
@@ -0,0 +1,6 @@
+// @flow
+import { ListItem } from './ListItem';
+import { ListItemWithAvatar } from './ListItemWithAvatar';
+import { DirectMessageListItem } from './DirectMessageListItem';
+
+export { ListItem, ListItemWithAvatar, DirectMessageListItem };
diff --git a/mobile/components/Lists/style.js b/mobile/components/Lists/style.js
new file mode 100644
index 0000000000..d42a1fce27
--- /dev/null
+++ b/mobile/components/Lists/style.js
@@ -0,0 +1,209 @@
+// @flow
+import { Row, Column } from '../Flex';
+import { StyleSheet } from 'react-native';
+import styled from 'styled-components/native';
+
+export const ListItemView = styled.View`
+  display: flex;
+  flex-direction: column;
+  border-bottom-color: ${props => props.theme.bg.border};
+  border-bottom-width: ${StyleSheet.hairlineWidth};
+  background: ${props => props.theme.bg.default};
+  position: relative;
+  padding: 12px 16px 12px 0;
+  margin-left: 16px;
+`;
+
+export const AvatarWrapper = styled(Column)`
+  margin-right: 16px;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TextColumnContainer = styled(Column)`
+  flex: 1;
+  align-items: stretch;
+  justify-content: center;
+`;
+
+export const TextRowContainer = styled(Row)`
+  flex: 0;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const TitleTextContainer = styled(Row)`
+  flex: 1;
+  padding-right: 12px;
+`;
+
+export const TimestampTextContainer = styled(Row)``;
+
+export const Title = styled.Text`
+  font-size: 16px;
+  font-weight: 700;
+  color: ${props => props.theme.text.default};
+`;
+
+export const Subtitle = styled.Text`
+  font-size: 15px;
+  font-weight: 500;
+  color: ${props => props.theme.text.alt};
+  margin-top: 4px;
+  line-height: 21;
+`;
+
+export const Timestamp = styled.Text`
+  font-size: 16px;
+  font-weight: 300;
+  color: ${props => props.theme.text.placeholder};
+`;
+
+export const MultiAvatarWrapper = styled.View`
+  display: flex;
+  align-items: center;
+  flex: 0;
+  position: relative;
+  min-width: 44px;
+`;
+
+export const DoubleAvatarFirst = styled.View`
+  position: relative;
+  top: 8px;
+  left: -8px;
+  width: 36px;
+  height: 36px;
+  z-index: 1;
+`;
+
+export const DoubleAvatarSecond = styled.View`
+  position: relative;
+  bottom: 8px;
+  right: -4px;
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 2;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const TripleAvatarFirst = styled.View`
+  position: relative;
+  top: 16px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+  margin-top: -8px;
+`;
+
+export const TripleAvatarSecond = styled.View`
+  position: relative;
+  top: -10px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 2;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const TripleAvatarThird = styled.View`
+  position: relative;
+  bottom: 16px;
+  right: 0px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const QuadrupleAvatarFirst = styled.View`
+  position: relative;
+  top: 28px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+  margin-top: -8px;
+`;
+
+export const QuadrupleAvatarSecond = styled.View`
+  position: relative;
+  top: 2px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 2;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const QuadrupleAvatarThird = styled.View`
+  position: relative;
+  bottom: 4px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const QuadrupleAvatarFourth = styled.View`
+  position: relative;
+  bottom: 24px;
+  right: -10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.default};
+`;
+
+export const OverflowAvatar = styled.View`
+  position: relative;
+  bottom: 24px;
+  right: -10px;
+  width: 29px;
+  height: 29px;
+  border-radius: 15px;
+  border-color: ${props => props.theme.bg.default};
+  border-width: 2px;
+  z-index: 3;
+  margin-bottom: -8px;
+  overflow: hidden;
+  background: ${props => props.theme.bg.wash};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OverflowAvatarLabel = styled.Text`
+  font-size: 10px;
+  font-weight: 700;
+  color: ${props => props.theme.text.alt};
+  line-height: 17;
+  margin-top: -2px;
+`;

From e03521f2f82f052fbb64a31f5997d3649a0791ed Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:20:50 -0700
Subject: [PATCH 06/42] Add example implementation of direct message thread
 list item with utility component

---
 .../components/Lists/DirectMessageListItem.js | 216 ++++++++++++++++++
 .../components/DirectMessageThread.js         |   7 +-
 .../components/DirectMessageThreadListItem.js |  72 ++----
 .../components/DirectMessageThreadsList.js    |  43 ++--
 shared/time-difference.js                     |   2 +-
 5 files changed, 251 insertions(+), 89 deletions(-)
 create mode 100644 mobile/components/Lists/DirectMessageListItem.js

diff --git a/mobile/components/Lists/DirectMessageListItem.js b/mobile/components/Lists/DirectMessageListItem.js
new file mode 100644
index 0000000000..0d48a48ee9
--- /dev/null
+++ b/mobile/components/Lists/DirectMessageListItem.js
@@ -0,0 +1,216 @@
+// @flow
+import * as React from 'react';
+import Avatar from '../Avatar';
+import { ListItemWithAvatar } from './ListItemWithAvatar';
+import {
+  TextColumnContainer,
+  TextRowContainer,
+  TitleTextContainer,
+  TimestampTextContainer,
+  Title,
+  Timestamp,
+  Subtitle,
+  MultiAvatarWrapper,
+  DoubleAvatarFirst,
+  DoubleAvatarSecond,
+  TripleAvatarFirst,
+  TripleAvatarSecond,
+  TripleAvatarThird,
+  QuadrupleAvatarFirst,
+  QuadrupleAvatarSecond,
+  QuadrupleAvatarThird,
+  QuadrupleAvatarFourth,
+  OverflowAvatar,
+  OverflowAvatarLabel,
+} from './style';
+
+type DirectMessageListItemType = {
+  onPress: Function,
+  participants: Array<Object>,
+  title: string,
+  subtitle: string,
+  timestamp: string,
+};
+
+export class DirectMessageListItem extends React.Component<
+  DirectMessageListItemType
+> {
+  renderParticipantAvatars = () => {
+    const { participants } = this.props;
+    if (!participants || participants.length === 0) return null;
+    if (participants.length === 1) {
+      return (
+        <Avatar
+          key={'avatar-' + participants[0].id}
+          src={participants[0].profilePhoto}
+          size={44}
+          radius={22}
+        />
+      );
+    }
+    if (participants.length === 2) {
+      return (
+        <MultiAvatarWrapper>
+          <DoubleAvatarFirst>
+            <Avatar
+              key={'avatar-' + participants[0].id}
+              src={participants[0].profilePhoto}
+              size={36}
+              radius={18}
+            />
+          </DoubleAvatarFirst>
+
+          <DoubleAvatarSecond>
+            <Avatar
+              key={'avatar-' + participants[1].id}
+              src={participants[1].profilePhoto}
+              size={36}
+              radius={18}
+            />
+          </DoubleAvatarSecond>
+        </MultiAvatarWrapper>
+      );
+    }
+
+    if (participants.length === 3) {
+      return (
+        <MultiAvatarWrapper>
+          <TripleAvatarFirst>
+            <Avatar
+              key={'avatar-' + participants[0].id}
+              src={participants[0].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </TripleAvatarFirst>
+
+          <TripleAvatarSecond>
+            <Avatar
+              key={'avatar-' + participants[1].id}
+              src={participants[1].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </TripleAvatarSecond>
+
+          <TripleAvatarThird>
+            <Avatar
+              key={'avatar-' + participants[2].id}
+              src={participants[2].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </TripleAvatarThird>
+        </MultiAvatarWrapper>
+      );
+    }
+
+    if (participants.length === 4) {
+      return (
+        <MultiAvatarWrapper>
+          <QuadrupleAvatarFirst>
+            <Avatar
+              key={'avatar-' + participants[0].id}
+              src={participants[0].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarFirst>
+
+          <QuadrupleAvatarSecond>
+            <Avatar
+              key={'avatar-' + participants[1].id}
+              src={participants[1].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarSecond>
+
+          <QuadrupleAvatarThird>
+            <Avatar
+              key={'avatar-' + participants[2].id}
+              src={participants[2].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarThird>
+
+          <QuadrupleAvatarFourth>
+            <Avatar
+              key={'avatar-' + participants[2].id}
+              src={participants[2].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarFourth>
+        </MultiAvatarWrapper>
+      );
+    }
+
+    if (participants.length > 4) {
+      return (
+        <MultiAvatarWrapper>
+          <QuadrupleAvatarFirst>
+            <Avatar
+              key={'avatar-' + participants[0].id}
+              src={participants[0].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarFirst>
+
+          <QuadrupleAvatarSecond>
+            <Avatar
+              key={'avatar-' + participants[1].id}
+              src={participants[1].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarSecond>
+
+          <QuadrupleAvatarThird>
+            <Avatar
+              key={'avatar-' + participants[2].id}
+              src={participants[2].profilePhoto}
+              size={24}
+              radius={12}
+            />
+          </QuadrupleAvatarThird>
+
+          <OverflowAvatar>
+            <OverflowAvatarLabel>
+              +{participants.length - 4}
+            </OverflowAvatarLabel>
+          </OverflowAvatar>
+        </MultiAvatarWrapper>
+      );
+    }
+  };
+
+  render() {
+    const { onPress, title, subtitle, timestamp } = this.props;
+
+    return (
+      <ListItemWithAvatar
+        onPress={onPress}
+        AvatarComponent={() => this.renderParticipantAvatars()}
+      >
+        <TextColumnContainer>
+          <TextRowContainer>
+            <TitleTextContainer>
+              <Title numberOfLines={1}>{title}</Title>
+            </TitleTextContainer>
+
+            <TimestampTextContainer>
+              <Timestamp type={'body'} light>
+                {timestamp}
+              </Timestamp>
+            </TimestampTextContainer>
+          </TextRowContainer>
+
+          <Subtitle numberOfLines={2}>{subtitle}</Subtitle>
+        </TextColumnContainer>
+      </ListItemWithAvatar>
+    );
+  }
+}
diff --git a/mobile/views/DirectMessageThread/components/DirectMessageThread.js b/mobile/views/DirectMessageThread/components/DirectMessageThread.js
index dacb54e188..84271d9c81 100644
--- a/mobile/views/DirectMessageThread/components/DirectMessageThread.js
+++ b/mobile/views/DirectMessageThread/components/DirectMessageThread.js
@@ -1,14 +1,13 @@
 // @flow
-import React, { Fragment } from 'react';
+import * as React from 'react';
 import { View } from 'react-native';
 import compose from 'recompose/compose';
-import { Query } from 'react-apollo';
 import Text from '../../../components/Text';
 import ChatInput from '../../../components/ChatInput';
 import Messages from '../../../components/Messages';
 import Avatar from '../../../components/Avatar';
 import Column from '../../../components/Flex/Column';
-import Row from '../../../components/Flex/Row';
+import { Row } from '../../../components/Flex';
 import ViewNetworkHandler, {
   type ViewNetworkHandlerProps,
 } from '../../../components/ViewNetworkHandler';
@@ -21,8 +20,6 @@ import getDirectMessageThreadMessageConnection from '../../../../shared/graphql/
 import type { GetUserType } from '../../../../shared/graphql/queries/user/getUser';
 import sendDirectMessage from '../../../../shared/graphql/mutations/message/sendDirectMessage';
 
-import type { DirectMessageThreadInfoType } from '../../../../shared/graphql/fragments/directMessageThread/directMessageThreadInfo';
-
 const DirectMessageThreadMessages = getDirectMessageThreadMessageConnection(
   Messages
 );
diff --git a/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js b/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js
index 41e8f1cc40..b89d43b1c6 100644
--- a/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js
+++ b/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js
@@ -1,34 +1,14 @@
 // @flow
-import React, { Fragment } from 'react';
-import { TouchableOpacity } from 'react-native';
-import styled, { css } from 'styled-components/native';
-import Text from '../../../components/Text';
-import Avatar from '../../../components/Avatar';
-import Row from '../../../components/Flex/Row';
-import Column from '../../../components/Flex/Column';
-import ConditionalWrap from '../../../components/ConditionalWrap';
+import * as React from 'react';
 import sentencify from '../../../../shared/sentencify';
-import { timeDifference } from '../../../../shared/time-difference';
-
+import { timeDifferenceShort } from '../../../../shared/time-difference';
+import { DirectMessageListItem } from '../../../components/Lists';
 import type { DirectMessageThreadInfoType } from '../../../../shared/graphql/fragments/directMessageThread/directMessageThreadInfo';
 
-const Wrapper = styled(Row)`
-  padding: 16px 8px;
-  border-bottom-color: ${props => props.theme.bg.border};
-  border-bottom-width: 1px;
-`;
-
-const AvatarWrapper = styled(Column)`
-  margin-right: 8px;
-  justify-content: center;
-  width: 60px;
-  align-items: center;
-`;
-
 type Props = {
   thread: DirectMessageThreadInfoType,
   currentUserId: string,
-  onPress?: Function,
+  onPress: Function,
 };
 
 const DirectMessageThreadListItem = ({
@@ -40,42 +20,16 @@ const DirectMessageThreadListItem = ({
     ({ userId }) => userId !== currentUserId
   );
   return (
-    <ConditionalWrap
-      condition={!!onPress}
-      wrap={children => (
-        <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
+    <DirectMessageListItem
+      onPress={onPress}
+      participants={participants}
+      title={sentencify(participants.map(({ name }) => name))}
+      subtitle={thread.snippet}
+      timestamp={timeDifferenceShort(
+        Date.now(),
+        new Date(thread.threadLastActive)
       )}
-    >
-      <Wrapper>
-        <AvatarWrapper>
-          {participants.map(({ profilePhoto, id }) => (
-            <Avatar
-              key={'avatar-' + id}
-              src={profilePhoto}
-              size={50 / participants.length}
-              radius={25 / participants.length}
-            />
-          ))}
-        </AvatarWrapper>
-        <Column style={{ flex: 1 }}>
-          <Row style={{ justifyContent: 'space-between' }}>
-            <Text type="headline">
-              {sentencify(participants.map(({ name }) => name))}
-            </Text>
-            <Text type="subhead" color={props => props.theme.text.alt}>
-              {timeDifference(Date.now(), new Date(thread.threadLastActive))}
-            </Text>
-          </Row>
-          <Text
-            type="body"
-            numberOfLines={1}
-            color={props => props.theme.text.alt}
-          >
-            {thread.snippet}
-          </Text>
-        </Column>
-      </Wrapper>
-    </ConditionalWrap>
+    />
   );
 };
 
diff --git a/mobile/views/DirectMessages/components/DirectMessageThreadsList.js b/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
index 40671e4b05..8be9a94042 100644
--- a/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
+++ b/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { Fragment } from 'react';
+import * as React from 'react';
 import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
 import InfiniteList from '../../../components/InfiniteList';
@@ -7,14 +7,10 @@ import Text from '../../../components/Text';
 import ViewNetworkHandler, {
   type ViewNetworkHandlerProps,
 } from '../../../components/ViewNetworkHandler';
-
 import DirectMessageThreadListItem from './DirectMessageThreadListItem';
-
-import { getCurrentUserQuery } from '../../../../shared/graphql/queries/user/getUser';
 import getCurrentUserDMThreadConnection, {
   type GetCurrentUserDMThreadConnectionType,
 } from '../../../../shared/graphql/queries/directMessageThread/getCurrentUserDMThreadConnection';
-import type { ApolloQueryResult } from 'apollo-client';
 import type { NavigationProps } from 'react-navigation';
 
 type Props = {
@@ -31,25 +27,24 @@ const DirectMessageThreadsList = (props: Props) => {
   if (user) {
     const { pageInfo, edges } = user.directMessageThreadsConnection;
     return (
-      <Fragment>
-        <InfiniteList
-          data={edges}
-          renderItem={({ item: { node: thread } }) => (
-            <DirectMessageThreadListItem
-              thread={thread}
-              currentUserId={user.id}
-              onPress={() =>
-                props.navigation.navigate('DirectMessageThread', {
-                  id: thread.id,
-                })
-              }
-            />
-          )}
-          hasNextPage={pageInfo.hasNextPage}
-          fetchMore={props.data.fetchMore}
-          loadingIndicator={<Text>Loading...</Text>}
-        />
-      </Fragment>
+      <InfiniteList
+        data={edges}
+        renderItem={({ item: { node: thread } }) => (
+          <DirectMessageThreadListItem
+            thread={thread}
+            key={thread.id}
+            currentUserId={user.id}
+            onPress={() =>
+              props.navigation.navigate('DirectMessageThread', {
+                id: thread.id,
+              })
+            }
+          />
+        )}
+        hasNextPage={pageInfo.hasNextPage}
+        fetchMore={props.data.fetchMore}
+        loadingIndicator={<Text>Loading...</Text>}
+      />
     );
   }
   if (isLoading) return <Text>Loading...</Text>;
diff --git a/shared/time-difference.js b/shared/time-difference.js
index fa5a4e0abf..caed2d4af8 100644
--- a/shared/time-difference.js
+++ b/shared/time-difference.js
@@ -5,7 +5,7 @@ const MS_PER_HOUR = 3600000;
 const MS_PER_DAY = 86400000;
 const MS_PER_YEAR = 31536000000;
 
-export function timeDifferenceShort(current: Date, previous: Date) {
+export function timeDifferenceShort(current: number, previous: number) {
   const elapsed = current - previous;
 
   if (elapsed < MS_PER_MINUTE) {

From c9eb5db54aceda9a62a82e92fc6b9a63b4519b9a Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:21:10 -0700
Subject: [PATCH 07/42] Switch thread item to use list component

---
 mobile/components/ThreadItem/index.js    | 66 ++++++++++++------------
 mobile/components/ThreadItem/style.js    | 11 ----
 mobile/views/Thread/components/Byline.js |  2 +-
 3 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/mobile/components/ThreadItem/index.js b/mobile/components/ThreadItem/index.js
index d57480b161..3ab055db78 100644
--- a/mobile/components/ThreadItem/index.js
+++ b/mobile/components/ThreadItem/index.js
@@ -1,12 +1,12 @@
 // @flow
 import * as React from 'react';
-import { TouchableHighlight, View } from 'react-native';
+import { View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import compose from 'recompose/compose';
 import Facepile from './Facepile';
+import { ListItem } from '../Lists';
 import ThreadCommunityInfo from './ThreadCommunityInfo';
 import {
-  InboxThreadItem,
   InboxThreadContent,
   ThreadTitle,
   ThreadMeta,
@@ -29,47 +29,45 @@ class ThreadItem extends React.Component<Props> {
     if (!thread.id) return null;
 
     return (
-      <TouchableHighlight
+      <ListItem
         onPress={() =>
           this.props.navigation.navigate(`Thread`, {
             id: thread.id,
           })
         }
       >
-        <InboxThreadItem>
-          <InboxThreadContent>
-            <ThreadCommunityInfo
-              activeChannel={activeChannel}
-              activeCommunity={activeCommunity}
-              thread={thread}
-            />
+        <InboxThreadContent>
+          <ThreadCommunityInfo
+            activeChannel={activeChannel}
+            activeCommunity={activeCommunity}
+            thread={thread}
+          />
 
-            <ThreadTitle>{thread.content.title}</ThreadTitle>
+          <ThreadTitle>{thread.content.title}</ThreadTitle>
 
-            <ThreadMeta>
-              <Facepile
-                participants={thread.participants}
-                creator={thread.author.user}
-                navigation={this.props.navigation}
-              />
+          <ThreadMeta>
+            <Facepile
+              participants={thread.participants}
+              creator={thread.author.user}
+              navigation={this.props.navigation}
+            />
 
-              {thread.messageCount > 0 ? (
-                <MessageCount>
-                  {thread.messageCount > 1
-                    ? `${thread.messageCount} messages`
-                    : `${thread.messageCount} message`}
-                </MessageCount>
-              ) : (
-                <View>
-                  <MetaTextPill offset={thread.participants.length} new>
-                    {'New thread!'.toUpperCase()}
-                  </MetaTextPill>
-                </View>
-              )}
-            </ThreadMeta>
-          </InboxThreadContent>
-        </InboxThreadItem>
-      </TouchableHighlight>
+            {thread.messageCount > 0 ? (
+              <MessageCount>
+                {thread.messageCount > 1
+                  ? `${thread.messageCount} messages`
+                  : `${thread.messageCount} message`}
+              </MessageCount>
+            ) : (
+              <View>
+                <MetaTextPill offset={thread.participants.length} new>
+                  {'New thread!'.toUpperCase()}
+                </MetaTextPill>
+              </View>
+            )}
+          </ThreadMeta>
+        </InboxThreadContent>
+      </ListItem>
     );
   }
 }
diff --git a/mobile/components/ThreadItem/style.js b/mobile/components/ThreadItem/style.js
index caace2a765..45b0ca1e5d 100644
--- a/mobile/components/ThreadItem/style.js
+++ b/mobile/components/ThreadItem/style.js
@@ -1,19 +1,8 @@
 // @flow
 import styled, { css } from 'styled-components/native';
 import { TouchableOpacity } from 'react-native';
-import { Stylesheet } from 'react-native';
 import Avatar from '../Avatar';
 
-export const InboxThreadItem = styled.View`
-  display: flex;
-  flex-direction: column;
-  border-bottom-color: ${props => props.theme.bg.border};
-  border-bottom-width: 1px;
-  background: ${props => props.theme.bg.default};
-  position: relative;
-  padding: 16px;
-`;
-
 export const InboxThreadContent = styled.View``;
 
 export const ThreadTitle = styled.Text`
diff --git a/mobile/views/Thread/components/Byline.js b/mobile/views/Thread/components/Byline.js
index e0767ad795..937ffd9488 100644
--- a/mobile/views/Thread/components/Byline.js
+++ b/mobile/views/Thread/components/Byline.js
@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components/native';
 import Avatar from '../../../components/Avatar';
 import Text from '../../../components/Text';
-import Row from '../../../components/Flex/Row';
+import { Row } from '../../../components/Flex';
 import Column from '../../../components/Flex/Column';
 import compose from 'recompose/compose';
 import type { Navigation } from '../../../utils/types';

From f063a8134ded652fad75c0690dc1c20d57a27106 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:21:20 -0700
Subject: [PATCH 08/42] Slight changes to theme colors for accessibility

---
 mobile/components/theme/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/mobile/components/theme/index.js b/mobile/components/theme/index.js
index 69a68cf7ec..be56ec7c47 100644
--- a/mobile/components/theme/index.js
+++ b/mobile/components/theme/index.js
@@ -4,7 +4,7 @@ export default {
     default: '#FFFFFF',
     reverse: '#16171A',
     wash: '#F5F8FC',
-    border: '#DFE7EF',
+    border: '#A3AFBF',
     inactive: '#DFE7EF',
   },
   brand: {
@@ -66,6 +66,7 @@ export default {
     alt: '#828C99',
     reverse: '#FFFFFF',
     placeholder: '#A3AFBF',
+    secondary: '#494C57',
   },
   warn: {
     default: '#C21F3A',

From 6f06bbe0bde057b36a440e8a1d69ae606e3c2512 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:30:03 -0700
Subject: [PATCH 09/42] Hide tab bar in dm thread and thread view

---
 mobile/views/TabBar/BaseStack.js          | 1 +
 mobile/views/TabBar/DirectMessageStack.js | 7 +++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/mobile/views/TabBar/BaseStack.js b/mobile/views/TabBar/BaseStack.js
index 91cccd0986..a969186182 100644
--- a/mobile/views/TabBar/BaseStack.js
+++ b/mobile/views/TabBar/BaseStack.js
@@ -13,6 +13,7 @@ const BaseStack = {
     screen: withMappedNavigationProps(Thread),
     navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
       headerTitle: navigation.state.params.title || 'Thread',
+      tabBarVisible: false,
     }),
   },
   Community: {
diff --git a/mobile/views/TabBar/DirectMessageStack.js b/mobile/views/TabBar/DirectMessageStack.js
index 89c49d74df..04291bb2f6 100644
--- a/mobile/views/TabBar/DirectMessageStack.js
+++ b/mobile/views/TabBar/DirectMessageStack.js
@@ -12,15 +12,14 @@ const DMStack = StackNavigator(
     DirectMessages: {
       screen: DirectMessages,
       navigationOptions: ({ navigation }) => ({
-        headerTitle:
-          idx(navigation, _ => _.state.params.title) || 'Direct Messages',
+        headerTitle: idx(navigation, _ => _.state.params.title) || 'Messages',
       }),
     },
     DirectMessageThread: {
       screen: DirectMessageThread,
       navigationOptions: ({ navigation }) => ({
-        headerTitle:
-          idx(navigation, _ => _.state.params.title) || 'Direct Message Thread',
+        headerTitle: idx(navigation, _ => _.state.params.title) || '',
+        tabBarVisible: false,
       }),
     },
     ...BaseStack,

From f95d7832941a15f9cfb32af24878452c4e4cbd8d Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 11:33:43 -0700
Subject: [PATCH 10/42] Fix avatar component radius to handle community avatars

---
 mobile/components/Avatar/index.js                   | 10 ++++++++--
 mobile/components/Avatar/style.js                   |  3 ++-
 mobile/components/Lists/DirectMessageListItem.js    | 13 -------------
 mobile/components/Messages/Author.js                |  1 -
 mobile/components/ThreadItem/Facepile.js            |  7 +++++--
 mobile/components/ThreadItem/ThreadCommunityInfo.js |  4 ++--
 mobile/views/Notifications/renderer.js              |  3 +--
 mobile/views/Thread/components/Byline.js            |  2 +-
 mobile/views/Thread/components/CommunityHeader.js   |  1 -
 9 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/mobile/components/Avatar/index.js b/mobile/components/Avatar/index.js
index 98c4362a8a..59be157ace 100644
--- a/mobile/components/Avatar/index.js
+++ b/mobile/components/Avatar/index.js
@@ -12,11 +12,12 @@ type AvatarProps = {|
   size?: number,
   onPress?: Function,
   style?: Object,
+  community?: boolean,
 |};
 
 class Avatar extends Component<AvatarProps> {
   render() {
-    const { src, size, onPress, style } = this.props;
+    const { src, size, onPress, style, community = false } = this.props;
     let source = src ? { uri: src } : {};
 
     return (
@@ -26,7 +27,12 @@ class Avatar extends Component<AvatarProps> {
           <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>
         )}
       >
-        <AvatarImage source={source} size={size} style={style} />
+        <AvatarImage
+          source={source}
+          size={size}
+          style={style}
+          community={community}
+        />
       </ConditionalWrap>
     );
   }
diff --git a/mobile/components/Avatar/style.js b/mobile/components/Avatar/style.js
index 3f72025649..190ea06eee 100644
--- a/mobile/components/Avatar/style.js
+++ b/mobile/components/Avatar/style.js
@@ -4,5 +4,6 @@ export const AvatarImage = styled.Image`
   background-color: ${props => props.theme.bg.border};
   width: ${props => (props.size ? `${props.size}px` : '30px')};
   height: ${props => (props.size ? `${props.size}px` : '30px')};
-  border-radius: ${props => (props.size ? `${props.size / 2}px` : '15px')};
+  border-radius: ${props =>
+    props.community ? `${props.size / 4}px` : `${props.size / 2}`};
 `;
diff --git a/mobile/components/Lists/DirectMessageListItem.js b/mobile/components/Lists/DirectMessageListItem.js
index 0d48a48ee9..93fd840982 100644
--- a/mobile/components/Lists/DirectMessageListItem.js
+++ b/mobile/components/Lists/DirectMessageListItem.js
@@ -44,7 +44,6 @@ export class DirectMessageListItem extends React.Component<
           key={'avatar-' + participants[0].id}
           src={participants[0].profilePhoto}
           size={44}
-          radius={22}
         />
       );
     }
@@ -56,7 +55,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[0].id}
               src={participants[0].profilePhoto}
               size={36}
-              radius={18}
             />
           </DoubleAvatarFirst>
 
@@ -65,7 +63,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[1].id}
               src={participants[1].profilePhoto}
               size={36}
-              radius={18}
             />
           </DoubleAvatarSecond>
         </MultiAvatarWrapper>
@@ -80,7 +77,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[0].id}
               src={participants[0].profilePhoto}
               size={24}
-              radius={12}
             />
           </TripleAvatarFirst>
 
@@ -89,7 +85,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[1].id}
               src={participants[1].profilePhoto}
               size={24}
-              radius={12}
             />
           </TripleAvatarSecond>
 
@@ -98,7 +93,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[2].id}
               src={participants[2].profilePhoto}
               size={24}
-              radius={12}
             />
           </TripleAvatarThird>
         </MultiAvatarWrapper>
@@ -113,7 +107,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[0].id}
               src={participants[0].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarFirst>
 
@@ -122,7 +115,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[1].id}
               src={participants[1].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarSecond>
 
@@ -131,7 +123,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[2].id}
               src={participants[2].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarThird>
 
@@ -140,7 +131,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[2].id}
               src={participants[2].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarFourth>
         </MultiAvatarWrapper>
@@ -155,7 +145,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[0].id}
               src={participants[0].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarFirst>
 
@@ -164,7 +153,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[1].id}
               src={participants[1].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarSecond>
 
@@ -173,7 +161,6 @@ export class DirectMessageListItem extends React.Component<
               key={'avatar-' + participants[2].id}
               src={participants[2].profilePhoto}
               size={24}
-              radius={12}
             />
           </QuadrupleAvatarThird>
 
diff --git a/mobile/components/Messages/Author.js b/mobile/components/Messages/Author.js
index a1ba9f5155..9732181b52 100644
--- a/mobile/components/Messages/Author.js
+++ b/mobile/components/Messages/Author.js
@@ -38,7 +38,6 @@ const Author = ({ author, avatar, me, navigation, onPress }: Props) => {
           <Avatar
             src={author.user.profilePhoto}
             size={16}
-            radius={8}
             style={{ marginRight: 4 }}
           />
         )}
diff --git a/mobile/components/ThreadItem/Facepile.js b/mobile/components/ThreadItem/Facepile.js
index 0f258b6465..02122cfd57 100644
--- a/mobile/components/ThreadItem/Facepile.js
+++ b/mobile/components/ThreadItem/Facepile.js
@@ -24,7 +24,6 @@ const messageAvatars = (list, navigation) => {
         key={participant.id}
         src={participant.profilePhoto}
         size={30}
-        radius={15}
         onPress={() => navigation.navigate(`User`, { id: participant.id })}
         key={participant.id}
       />
@@ -65,7 +64,11 @@ const Facepile = ({ participants, creator, navigation }: FacepileProps) => {
 
   return (
     <FacepileContainer>
-      <StackedAvatar onPress={() => navigation.navigate(`User`, { id: creator.id })} src={creator.profilePhoto} size={30} radius={15} />
+      <StackedAvatar
+        onPress={() => navigation.navigate(`User`, { id: creator.id })}
+        src={creator.profilePhoto}
+        size={30}
+      />
       {messageAvatars(participantList, navigation)}
       {hasOverflow && (
         <StackedEmptyParticipantHead size={30} adjustsFontSizeToFit>
diff --git a/mobile/components/ThreadItem/ThreadCommunityInfo.js b/mobile/components/ThreadItem/ThreadCommunityInfo.js
index da5a65f91b..f988093a67 100644
--- a/mobile/components/ThreadItem/ThreadCommunityInfo.js
+++ b/mobile/components/ThreadItem/ThreadCommunityInfo.js
@@ -35,11 +35,11 @@ class ThreadCommunityInfo extends React.Component<Props> {
     return (
       <ThreadCommunityInfoWrapper>
         {!hideCommunityInfo && (
-          <View style={{ marginRight: 4 }}>
+          <View style={{ marginRight: 8 }}>
             <Avatar
               src={community.profilePhoto}
               size={20}
-              radius={4}
+              community
               onPress={() =>
                 navigation.navigate(`Community`, { id: community.id })
               }
diff --git a/mobile/views/Notifications/renderer.js b/mobile/views/Notifications/renderer.js
index 395dfec0c4..cdf3563ef2 100644
--- a/mobile/views/Notifications/renderer.js
+++ b/mobile/views/Notifications/renderer.js
@@ -114,8 +114,7 @@ class Renderer extends React.Component<Props> {
           <Avatar
             key={actor.id}
             user={actor}
-            size={'32'}
-            radius={'16'}
+            size={32}
             isOnline={actor.payload.isOnline}
             src={actor.payload.profilePhoto}
             onPress={() => navigation.navigate(`User`, { id: actor.id })}
diff --git a/mobile/views/Thread/components/Byline.js b/mobile/views/Thread/components/Byline.js
index 937ffd9488..e30ee0a20a 100644
--- a/mobile/views/Thread/components/Byline.js
+++ b/mobile/views/Thread/components/Byline.js
@@ -29,7 +29,7 @@ const Byline = ({ author, navigation }: Props) => {
     >
       <BylineWrapper>
         <Row>
-          <Avatar src={author.user.profilePhoto} size={40} radius={20} />
+          <Avatar src={author.user.profilePhoto} size={40} />
           <Column>
             <Row>
               <Text style={{ marginTop: 0 }} type="body" bold>
diff --git a/mobile/views/Thread/components/CommunityHeader.js b/mobile/views/Thread/components/CommunityHeader.js
index 7aa1d3f5be..a6e35fa8cb 100644
--- a/mobile/views/Thread/components/CommunityHeader.js
+++ b/mobile/views/Thread/components/CommunityHeader.js
@@ -28,7 +28,6 @@ class CommunityHeader extends React.Component<Props> {
         <Avatar
           src={thread.community.profilePhoto}
           size={32}
-          radius={6}
           onPress={() =>
             navigation.navigate(`Community`, { id: thread.community.id })
           }

From 555e1800a2e645b4339519a4f0ba57d572458f55 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 17:26:43 -0700
Subject: [PATCH 11/42] Add abstraction for touchable opacity and
 touchablehighlight

---
 mobile/components/Avatar/index.js              |  2 +-
 mobile/components/Lists/ListItem.js            |  6 ++----
 mobile/components/Lists/ListItemWithAvatar.js  |  2 +-
 mobile/components/Login/style.js               |  5 +++--
 mobile/components/Message/QuotedMessage.js     |  2 +-
 mobile/components/Message/index.js             |  2 +-
 mobile/components/Messages/Author.js           |  2 +-
 .../ThreadItem/ThreadCommunityInfo.js          |  3 ++-
 mobile/components/TouchableHighlight/index.js  | 18 ++++++++++++++++++
 mobile/components/TouchableOpacity/index.js    | 13 +++++++++++++
 mobile/views/Community/style.js                |  2 +-
 mobile/views/Thread/components/Byline.js       |  2 +-
 .../views/Thread/components/CommunityHeader.js |  2 +-
 mobile/views/Thread/style.js                   |  2 +-
 mobile/views/User/style.js                     |  3 ++-
 15 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 mobile/components/TouchableHighlight/index.js
 create mode 100644 mobile/components/TouchableOpacity/index.js

diff --git a/mobile/components/Avatar/index.js b/mobile/components/Avatar/index.js
index 59be157ace..208237ee95 100644
--- a/mobile/components/Avatar/index.js
+++ b/mobile/components/Avatar/index.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
-import { TouchableHighlight } from 'react-native';
+import TouchableHighlight from '../TouchableHighlight';
 
 import ConditionalWrap from '../ConditionalWrap';
 import { AvatarImage } from './style';
diff --git a/mobile/components/Lists/ListItem.js b/mobile/components/Lists/ListItem.js
index 18ded5021a..cb7424d998 100644
--- a/mobile/components/Lists/ListItem.js
+++ b/mobile/components/Lists/ListItem.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { TouchableOpacity } from 'react-native';
+import TouchableOpacity from '../TouchableOpacity';
 import { ListItemView } from './style';
 
 type ListItemProps = {
@@ -14,9 +14,7 @@ export class ListItem extends React.Component<ListItemProps> {
 
     return (
       <ListItemView>
-        <TouchableOpacity onPress={onPress} activeOpacity={0.6}>
-          {children}
-        </TouchableOpacity>
+        <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
       </ListItemView>
     );
   }
diff --git a/mobile/components/Lists/ListItemWithAvatar.js b/mobile/components/Lists/ListItemWithAvatar.js
index ace6f61323..4b9bcbe2bb 100644
--- a/mobile/components/Lists/ListItemWithAvatar.js
+++ b/mobile/components/Lists/ListItemWithAvatar.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { TouchableOpacity } from 'react-native';
+import TouchableOpacity from '../TouchableOpacity';
 import { Row } from '../Flex';
 import { ListItemView, AvatarWrapper } from './style';
 
diff --git a/mobile/components/Login/style.js b/mobile/components/Login/style.js
index 8eb6c5d86a..9d5caafbd4 100644
--- a/mobile/components/Login/style.js
+++ b/mobile/components/Login/style.js
@@ -1,7 +1,8 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components/native';
-import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
+import TouchableOpacity from '../TouchableOpacity';
 import { Svg } from 'expo';
 const { Path, G } = Svg;
 import theme from '../theme';
@@ -56,7 +57,7 @@ type SigninButtonProps = {
   children: React$Node,
   onPress: Function,
 };
-const SigninButtonContainer = styled.TouchableOpacity`
+const SigninButtonContainer = styled(TouchableOpacity)`
   background-color: ${props => props.color};
   width: 220px;
   height: 51px;
diff --git a/mobile/components/Message/QuotedMessage.js b/mobile/components/Message/QuotedMessage.js
index f0ba02ca3c..a0d475ee25 100644
--- a/mobile/components/Message/QuotedMessage.js
+++ b/mobile/components/Message/QuotedMessage.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import TouchableOpacity from '../TouchableOpacity';
 import Message from './';
 import Author from '../Messages/Author';
 import { QuoteWrapper, QuotedParagraph, QuoteGradient } from './style';
diff --git a/mobile/components/Message/index.js b/mobile/components/Message/index.js
index b698de443a..d6841237dd 100644
--- a/mobile/components/Message/index.js
+++ b/mobile/components/Message/index.js
@@ -3,7 +3,7 @@ import React from 'react';
 import redraft from 'redraft';
 import compose from 'recompose/compose';
 import { connect } from 'react-redux';
-import { TouchableOpacity } from 'react-native';
+import TouchableOpacity from '../TouchableOpacity';
 import { connectActionSheet } from '@expo/react-native-action-sheet';
 import Text from '../Text';
 import ConditionalWrap from '../ConditionalWrap';
diff --git a/mobile/components/Messages/Author.js b/mobile/components/Messages/Author.js
index 9732181b52..1a17b0694f 100644
--- a/mobile/components/Messages/Author.js
+++ b/mobile/components/Messages/Author.js
@@ -8,7 +8,7 @@ import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
 import type { ThreadParticipantType } from '../../../shared/graphql/fragments/thread/threadParticipant';
 import type { Navigation } from '../../utils/types';
-import { TouchableHighlight } from 'react-native';
+import TouchableHighlight from '../TouchableHighlight';
 
 type Props = {
   author: ThreadParticipantType,
diff --git a/mobile/components/ThreadItem/ThreadCommunityInfo.js b/mobile/components/ThreadItem/ThreadCommunityInfo.js
index f988093a67..35ef23e743 100644
--- a/mobile/components/ThreadItem/ThreadCommunityInfo.js
+++ b/mobile/components/ThreadItem/ThreadCommunityInfo.js
@@ -2,7 +2,8 @@
 import * as React from 'react';
 import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
+import TouchableOpacity from '../TouchableOpacity';
 import Avatar from '../Avatar';
 import type { Navigation } from '../../utils/types';
 import type { ThreadInfoType } from '../../../shared/graphql/fragments/thread/threadInfo';
diff --git a/mobile/components/TouchableHighlight/index.js b/mobile/components/TouchableHighlight/index.js
new file mode 100644
index 0000000000..86b9c4d414
--- /dev/null
+++ b/mobile/components/TouchableHighlight/index.js
@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react';
+import { TouchableHighlight } from 'react-native';
+import theme from '../theme';
+
+type Props = {
+  children?: React.ChildrenArray<any>,
+};
+
+export default ({ children, ...props }: Props) => (
+  <TouchableHighlight
+    underlayColor={theme.bg.wash}
+    style={{ borderRadius: 4 }}
+    {...props}
+  >
+    {children}
+  </TouchableHighlight>
+);
diff --git a/mobile/components/TouchableOpacity/index.js b/mobile/components/TouchableOpacity/index.js
new file mode 100644
index 0000000000..a60ecee7b5
--- /dev/null
+++ b/mobile/components/TouchableOpacity/index.js
@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+type Props = {
+  children?: React.ChildrenArray<any>,
+};
+
+export default ({ children, ...props }: Props) => (
+  <TouchableOpacity activeOpacity={0.6} {...props}>
+    {children}
+  </TouchableOpacity>
+);
diff --git a/mobile/views/Community/style.js b/mobile/views/Community/style.js
index 94a39a76d5..d77d36e72b 100644
--- a/mobile/views/Community/style.js
+++ b/mobile/views/Community/style.js
@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components/native';
-import { Dimensions, TouchableOpacity } from 'react-native';
+import { Dimensions } from 'react-native';
 
 const width = Dimensions.get('window').width;
 
diff --git a/mobile/views/Thread/components/Byline.js b/mobile/views/Thread/components/Byline.js
index e30ee0a20a..64003b931c 100644
--- a/mobile/views/Thread/components/Byline.js
+++ b/mobile/views/Thread/components/Byline.js
@@ -9,7 +9,7 @@ import compose from 'recompose/compose';
 import type { Navigation } from '../../../utils/types';
 import type { ThreadParticipantType } from '../../../../shared/graphql/fragments/thread/threadParticipant';
 import { withNavigation } from 'react-navigation';
-import { TouchableHighlight } from 'react-native';
+import TouchableHighlight from '../../../components/TouchableHighlight';
 
 const BylineWrapper = styled.View`
   flex: 1;
diff --git a/mobile/views/Thread/components/CommunityHeader.js b/mobile/views/Thread/components/CommunityHeader.js
index a6e35fa8cb..c2150305c6 100644
--- a/mobile/views/Thread/components/CommunityHeader.js
+++ b/mobile/views/Thread/components/CommunityHeader.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import compose from 'recompose/compose';
 import Avatar from '../../../components/Avatar';
-import { TouchableOpacity } from 'react-native';
+import TouchableOpacity from '../../../components/TouchableOpacity';
 import { withNavigation } from 'react-navigation';
 import type { Navigation } from '../../../utils/types';
 import type { ThreadInfoType } from '../../../../shared/graphql/fragments/thread/threadInfo';
diff --git a/mobile/views/Thread/style.js b/mobile/views/Thread/style.js
index 2d2b0c2131..55fc205c45 100644
--- a/mobile/views/Thread/style.js
+++ b/mobile/views/Thread/style.js
@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components/native';
-import { TouchableOpacity } from 'react-native';
+import TouchableOpacity from '../../components/TouchableOpacity';
 
 export const Wrapper = styled.View`
   background-color: ${props => props.theme.bg.default};
diff --git a/mobile/views/User/style.js b/mobile/views/User/style.js
index f35cbd48cd..6a316d877a 100644
--- a/mobile/views/User/style.js
+++ b/mobile/views/User/style.js
@@ -1,6 +1,7 @@
 // @flow
 import styled from 'styled-components/native';
-import { Dimensions, TouchableOpacity } from 'react-native';
+import { Dimensions } from 'react-native';
+import TouchableOpacity from '../../components/TouchableOpacity';
 
 const width = Dimensions.get('window').width;
 

From 7729264eeebaf39eeca193867a36b5404723e948 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 17:26:59 -0700
Subject: [PATCH 12/42] Implement first icon system

---
 mobile/components/ChatInput/input.js |   11 +-
 mobile/components/ChatInput/style.js |   31 +-
 mobile/components/Icon/glyphs.js     | 1062 ++++++++++++++++++++++++++
 mobile/components/Icon/index.js      |   39 +
 mobile/components/Icon/types.js      |   96 +++
 5 files changed, 1202 insertions(+), 37 deletions(-)
 create mode 100644 mobile/components/Icon/glyphs.js
 create mode 100644 mobile/components/Icon/index.js
 create mode 100644 mobile/components/Icon/types.js

diff --git a/mobile/components/ChatInput/input.js b/mobile/components/ChatInput/input.js
index 90dcdf6a3e..f1b967f8ea 100644
--- a/mobile/components/ChatInput/input.js
+++ b/mobile/components/ChatInput/input.js
@@ -1,12 +1,9 @@
 // @flow
 import React from 'react';
-import { TextInput, View, Button } from 'react-native';
+import { TextInput, View } from 'react-native';
 import KeyboardSpacer from 'react-native-keyboard-spacer';
-import {
-  ChatInputWrapper,
-  ChatInputTextInputWrapper,
-  SendButton,
-} from './style';
+import { ChatInputWrapper, ChatInputTextInputWrapper } from './style';
+import Icon from '../Icon';
 
 import type { Node } from 'react';
 
@@ -49,7 +46,7 @@ class ChatInput extends React.Component<InputProps, State> {
               onSubmitEditing={this.submit}
             />
           </ChatInputTextInputWrapper>
-          <SendButton onPress={this.submit} size={32} />
+          <Icon glyph={'send'} onPress={this.submit} size={32} />
         </ChatInputWrapper>
         {/* NOTE(@mxstbr): Magic number, otherwise the chatinput is way above the keyboard */}
         <KeyboardSpacer topSpacing={-75} />
diff --git a/mobile/components/ChatInput/style.js b/mobile/components/ChatInput/style.js
index 6c04508b1e..0e88794cc0 100644
--- a/mobile/components/ChatInput/style.js
+++ b/mobile/components/ChatInput/style.js
@@ -1,10 +1,5 @@
 // @flow
-import { TouchableOpacity } from 'react-native';
-import { Svg } from 'expo';
-import React from 'react';
-import styled, { withTheme } from 'styled-components/native';
-
-const { Path, G } = Svg;
+import styled from 'styled-components/native';
 
 export const ChatInputWrapper = styled.View`
   flex-direction: row;
@@ -27,27 +22,3 @@ export const ChatInputTextInputWrapper = styled.View`
   border-color: ${props => props.theme.bg.border};
   background: ${props => props.theme.bg.default};
 `;
-
-type SendButtonProps = {
-  onPress: Function,
-  size?: number,
-  theme: Object,
-};
-
-export const SendButton = withTheme(
-  ({ onPress, size, theme }: SendButtonProps) => {
-    const actualSize = size ? size : 64;
-    return (
-      <TouchableOpacity onPress={onPress}>
-        <Svg width={actualSize} height={actualSize} viewBox={`0 0 32 32`}>
-          <G>
-            <Path
-              fill={theme.text.alt}
-              d="M9,8l0,5.287l7.054,1.495c0.628,0.133 0.966,0.665 0.989,1.164c0,0.009 0.001,0.022 0.001,0.034c0,0.004 0,0.008 0,0.012c0,0.005 0,0.009 0,0.013c0,0.012 -0.001,0.025 -0.001,0.034c-0.023,0.498 -0.361,1.031 -0.989,1.164l-7.054,1.495l0,5.627c0.02,0.001 0.049,-0.002 0.09,-0.017c4.386,-1.524 15.41,-7.808 15.41,-8.308c0,-0.5 -11.075,-6.473 -15.41,-7.984c-0.041,-0.014 -0.07,-0.017 -0.09,-0.016Zm17.555,7.992l0,-0.011l0,-0.003c-0.011,-0.698 -0.39,-1.289 -0.925,-1.685c-3.631,-2.688 -11.512,-6.642 -15.882,-8.165c-0.624,-0.218 -1.3,-0.158 -1.843,0.185c-0.554,0.349 -0.905,0.958 -0.905,1.667l0,5.712c0,0.708 0.496,1.32 1.189,1.467l3.931,0.833l-3.931,0.834c-0.693,0.146 -1.189,0.758 -1.189,1.467l0,6.052c0,0.709 0.351,1.317 0.905,1.667c0.543,0.343 1.219,0.403 1.843,0.185c4.371,-1.527 12.29,-5.85 15.881,-8.505c0.536,-0.397 0.915,-0.987 0.925,-1.685l0,-0.003l0.001,-0.012Z"
-            />
-          </G>
-        </Svg>
-      </TouchableOpacity>
-    );
-  }
-);
diff --git a/mobile/components/Icon/glyphs.js b/mobile/components/Icon/glyphs.js
new file mode 100644
index 0000000000..c49b5f7719
--- /dev/null
+++ b/mobile/components/Icon/glyphs.js
@@ -0,0 +1,1062 @@
+import * as React from 'react';
+import { Svg } from 'expo';
+const { Path, G } = Svg;
+import type { GlyphTypes } from './types';
+
+export default (glyph: GlyphTypes, color: string) => {
+  switch (glyph) {
+    case 'analytics':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 8 1C 8 0.447693 8.44772 0 9 0C 9.55228 0 10 0.447693 10 1L 10 13C 10 13.5523 9.55228 14 9 14C 8.44772 14 8 13.5523 8 13L 8 1ZM 5 4C 4.44772 4 4 4.44769 4 5L 4 13C 4 13.5523 4.44772 14 5 14C 5.55228 14 6 13.5523 6 13L 6 5C 6 4.44769 5.55228 4 5 4ZM 1 8C 0.447716 8 0 8.44769 0 9L 0 13C 0 13.5523 0.447716 14 1 14C 1.55228 14 2 13.5523 2 13L 2 9C 2 8.44769 1.55228 8 1 8ZM 13 6C 12.4477 6 12 6.44769 12 7L 12 13C 12 13.5523 12.4477 14 13 14C 13.5523 14 14 13.5523 14 13L 14 7C 14 6.44769 13.5523 6 13 6Z"
+          />
+        </React.Fragment>
+      );
+    case 'attachment':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M7.17,21.67c-1.381,2.392 -0.562,5.45 1.83,6.83c2.391,1.381 5.449,0.562 6.83,-1.83l4,-6.928l1,-1.732l4,-6.928c1.381,-2.392 0.561,-5.45 -1.83,-6.83c-2.392,-1.381 -5.45,-0.562 -6.83,1.83l-0.5,0.866c-0.276,0.478 -0.113,1.09 0.366,1.366c0.478,0.276 1.09,0.112 1.366,-0.366l0.5,-0.866c0.828,-1.435 2.663,-1.927 4.098,-1.098c1.435,0.828 1.926,2.663 1.098,4.098l-0.5,0.866l-3.5,6.062l-1,1.732l-4,6.928c-0.829,1.435 -2.663,1.927 -4.098,1.098c-1.435,-0.828 -1.927,-2.663 -1.098,-4.098l2,-3.464l4,-6.928c0.276,-0.478 0.887,-0.642 1.366,-0.366c0.478,0.276 0.642,0.888 0.366,1.366l-4,6.928c-0.276,0.479 -0.112,1.09 0.366,1.366c0.478,0.276 1.09,0.113 1.366,-0.366l4,-6.928c0.828,-1.435 0.337,-3.27 -1.098,-4.098c-1.435,-0.829 -3.27,-0.337 -4.098,1.098l-4,6.928l-2,3.464Z"
+          />
+        </React.Fragment>
+      );
+    case 'bug':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M12.121,4.693c-0.39,-0.391 -1.023,-0.391 -1.414,0c-0.39,0.39 -0.39,1.024 0,1.414l1.414,1.414c0.036,0.036 0.074,0.069 0.113,0.098c-0.245,0.672 -0.15,1.34 0.495,1.824c0.585,0.439 1.624,0.726 3.271,0.726c1.647,0 2.685,-0.287 3.271,-0.726c0.639,-0.479 0.738,-1.139 0.502,-1.805c0.049,-0.034 0.096,-0.073 0.14,-0.117l1.414,-1.414c0.391,-0.39 0.391,-1.024 0,-1.414c-0.39,-0.391 -1.024,-0.391 -1.414,0l-1.346,1.346c-0.745,-0.618 -1.698,-1.053 -2.567,-1.053c-0.862,0 -1.806,0.427 -2.548,1.037l-1.331,-1.33Zm3.879,3.476c-0.761,0 -1.289,-0.072 -1.638,-0.161c-0.021,-0.005 -0.041,-0.01 -0.06,-0.016c0.133,-0.17 0.331,-0.371 0.602,-0.563c0.465,-0.329 0.881,-0.443 1.096,-0.443c0.215,0 0.631,0.114 1.096,0.443c0.271,0.192 0.47,0.393 0.602,0.563c-0.019,0.006 -0.039,0.011 -0.06,0.016c-0.349,0.089 -0.877,0.161 -1.638,0.161Z"
+          />
+          <Path
+            fill={color}
+            d="M6.866,10.669c-0.478,-0.276 -1.09,-0.113 -1.366,0.366c-0.276,0.478 -0.112,1.09 0.366,1.366l2.993,1.728c-0.469,0.878 -0.689,1.911 -0.787,3.04l-3.072,0c-0.552,0 -1,0.447 -1,1c0,0.552 0.448,1 1,1l3,0c0,1.04 0.198,2.033 0.559,2.945l-2.693,1.555c-0.478,0.276 -0.642,0.888 -0.366,1.366c0.276,0.478 0.888,0.642 1.366,0.366l2.658,-1.535c1.454,2.002 3.813,3.303 6.476,3.303c2.663,0 5.022,-1.301 6.476,-3.303l2.658,1.535c0.478,0.276 1.09,0.112 1.366,-0.366c0.276,-0.478 0.112,-1.09 -0.366,-1.366l-2.694,-1.555c0.362,-0.912 0.56,-1.905 0.56,-2.945l3,0c0.552,0 1,-0.448 1,-1c0,-0.553 -0.448,-1 -1,-1l-3.072,0c-0.098,-1.129 -0.318,-2.162 -0.787,-3.04l2.993,-1.728c0.478,-0.276 0.642,-0.888 0.366,-1.366c-0.276,-0.479 -0.888,-0.642 -1.366,-0.366l-3.315,1.914c-0.581,-0.436 -1.314,-0.783 -2.238,-1.024c-0.969,-0.253 -2.148,-0.39 -3.581,-0.39c-1.433,0 -2.612,0.137 -3.581,0.39c-0.924,0.241 -1.657,0.588 -2.238,1.024l-3.315,-1.914Zm15.134,8.5c0,3.313 -2.686,6 -6,6c-3.314,0 -6,-2.687 -6,-6c0,-2.245 0.211,-3.603 0.851,-4.459c0.532,-0.71 1.75,-1.541 5.149,-1.541c3.399,0 4.617,0.831 5.149,1.541c0.64,0.856 0.851,2.214 0.851,4.459Z"
+          />
+        </React.Fragment>
+      );
+    case 'bug-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M10.707,4.693c0.391,-0.391 1.024,-0.391 1.414,0l1.331,1.33c0.742,-0.61 1.686,-1.037 2.548,-1.037c0.869,0 1.822,0.435 2.567,1.053l1.346,-1.346c0.39,-0.391 1.024,-0.391 1.414,0c0.391,0.39 0.391,1.024 0,1.414l-1.414,1.414c-0.044,0.044 -0.091,0.083 -0.14,0.117c0.453,1.275 -0.328,2.531 -3.773,2.531c-3.463,0 -4.234,-1.268 -3.766,-2.55c-0.039,-0.029 -0.077,-0.062 -0.113,-0.098l-1.414,-1.414c-0.39,-0.39 -0.39,-1.024 0,-1.414Z"
+          />
+          <Path
+            fill={color}
+            d="M23.441,22.114c0.361,-0.912 0.559,-1.905 0.559,-2.945l3,0c0.552,0 1,-0.448 1,-1c0,-0.553 -0.448,-1 -1,-1l-3.072,0c-0.098,-1.129 -0.318,-2.162 -0.787,-3.04l2.993,-1.728c0.478,-0.276 0.642,-0.888 0.366,-1.366c-0.276,-0.479 -0.888,-0.642 -1.366,-0.366l-3.315,1.914c-1.19,-0.892 -3.019,-1.414 -5.819,-1.414c-2.8,0 -4.629,0.522 -5.819,1.414l-3.315,-1.914c-0.478,-0.276 -1.09,-0.113 -1.366,0.366c-0.276,0.478 -0.112,1.09 0.366,1.366l2.993,1.728c-0.469,0.878 -0.689,1.911 -0.787,3.04l-3.072,0c-0.552,0 -1,0.447 -1,1c0,0.552 0.448,1 1,1l3,0c0,1.04 0.198,2.033 0.559,2.945l-2.693,1.555c-0.478,0.276 -0.642,0.887 -0.366,1.366c0.276,0.478 0.888,0.642 1.366,0.366l2.658,-1.535c1.454,2.002 3.813,3.303 6.476,3.303c2.663,0 5.022,-1.301 6.476,-3.303l2.658,1.535c0.478,0.276 1.09,0.112 1.366,-0.366c0.276,-0.479 0.112,-1.09 -0.366,-1.366l-2.694,-1.555Z"
+          />
+        </React.Fragment>
+      );
+    case 'channel':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M14.287,10.941c0.143,-0.533 0.692,-0.85 1.225,-0.707c0.534,0.143 0.85,0.692 0.707,1.225l-0.406,1.517l2.052,0l0.545,-2.035c0.143,-0.533 0.691,-0.85 1.225,-0.707c0.533,0.143 0.85,0.692 0.707,1.225l-0.407,1.517l1.085,0c0.553,0 1,0.447 1,1c0,0.552 -0.447,1 -1,1l-1.62,0l-0.536,2l1.156,0c0.553,0 1,0.447 1,1c0,0.552 -0.447,1 -1,1l-1.692,0l-0.574,2.142c-0.143,0.534 -0.692,0.85 -1.225,0.707c-0.534,-0.143 -0.85,-0.691 -0.707,-1.224l0.435,-1.625l-2.052,0l-0.574,2.142c-0.143,0.534 -0.691,0.85 -1.225,0.707c-0.533,-0.143 -0.85,-0.691 -0.707,-1.224l0.436,-1.625l-1.115,0c-0.552,0 -1,-0.448 -1,-1c0,-0.553 0.448,-1 1,-1l1.651,0l0.535,-2l-1.186,0c-0.552,0 -1,-0.448 -1,-1c0,-0.553 0.448,-1 1,-1l1.722,0l0.545,-2.035Zm2.506,6.035l0.536,-2l-2.052,0l-0.536,2l2.052,0Z"
+          />
+        </React.Fragment>
+      );
+    case 'channel-private':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M18.186,9.144c-0.502,-0.122 -1.139,-0.145 -2.186,-0.144c-1.047,-0.001 -1.684,0.022 -2.186,0.144l-0.013,0.002c-0.207,0.044 -0.226,0.048 -0.324,0.111c-0.017,0.007 -0.027,0.011 -0.034,0.012c-0.001,0.005 -0.005,0.013 -0.012,0.024c-0.034,0.043 -0.179,0.265 -0.285,1.008c-0.072,0.487 -0.111,1.06 -0.13,1.773c0.818,-0.057 1.802,-0.074 2.984,-0.074c1.182,0 2.166,0.017 2.984,0.074c-0.019,-0.713 -0.058,-1.286 -0.13,-1.773c-0.106,-0.743 -0.251,-0.965 -0.285,-1.008c-0.007,-0.011 -0.011,-0.019 -0.012,-0.024c-0.007,-0.001 -0.017,-0.005 -0.034,-0.012c-0.098,-0.063 -0.117,-0.067 -0.324,-0.111l-0.013,-0.002Zm2.805,3.252c-0.091,-4.83 -0.908,-5.396 -4.991,-5.396c-4.083,0 -4.9,0.566 -4.991,5.396c-1.808,0.57 -2.009,1.931 -2.009,5.104c0,5 0.5,5.5 7,5.5c6.5,0 7,-0.5 7,-5.5c0,-3.173 -0.201,-4.534 -2.009,-5.104Zm-9.991,5.104c0,-1.218 0.018,-1.992 0.142,-2.58c0.048,-0.261 0.059,-0.309 0.13,-0.428c0.009,-0.022 0.013,-0.035 0.014,-0.043c0.005,-0.001 0.013,-0.005 0.026,-0.012c0.041,-0.033 0.275,-0.189 1.11,-0.297c0.857,-0.115 1.978,-0.14 3.578,-0.14c1.6,0 2.721,0.025 3.578,0.14c0.835,0.108 1.069,0.264 1.11,0.297c0.013,0.007 0.021,0.011 0.026,0.012c0.001,0.008 0.005,0.021 0.014,0.043c0.071,0.119 0.082,0.167 0.13,0.428c0.124,0.588 0.142,1.362 0.142,2.58c0,1.218 -0.018,1.992 -0.142,2.58c-0.048,0.261 -0.059,0.309 -0.13,0.428c-0.009,0.022 -0.013,0.035 -0.014,0.043c-0.005,0.001 -0.013,0.005 -0.026,0.012c-0.041,0.033 -0.275,0.189 -1.11,0.297c-0.857,0.115 -1.978,0.14 -3.578,0.14c-1.6,0 -2.721,-0.025 -3.578,-0.14c-0.835,-0.108 -1.069,-0.264 -1.11,-0.297c-0.013,-0.007 -0.021,-0.011 -0.026,-0.012c-0.001,-0.008 -0.005,-0.021 -0.014,-0.043c-0.071,-0.119 -0.082,-0.167 -0.13,-0.428c-0.124,-0.588 -0.142,-1.362 -0.142,-2.58Z"
+          />
+        </React.Fragment>
+      );
+    case 'checkbox':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M22.586,22.586c0.864,-0.864 1.414,-2.572 1.414,-6.586c0,-4.014 -0.55,-5.722 -1.414,-6.586c-0.864,-0.864 -2.572,-1.414 -6.586,-1.414c-4.014,0 -5.722,0.55 -6.586,1.414c-0.864,0.864 -1.414,2.572 -1.414,6.586c0,4.014 0.55,5.722 1.414,6.586c0.864,0.864 2.572,1.414 6.586,1.414c4.014,0 5.722,-0.55 6.586,-1.414Zm-6.586,3.414c8,0 10,-2 10,-10c0,-8 -2,-10 -10,-10c-8,0 -10,2 -10,10c0,8 2,10 10,10Z"
+          />
+        </React.Fragment>
+      );
+    case 'checkmark':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,8c2.476,0 4.074,0.209 5.138,0.572c0.414,0.141 0.886,0.076 1.195,-0.234l0.509,-0.508c0.222,-0.222 0.186,-0.593 -0.092,-0.739c-1.527,-0.801 -3.704,-1.091 -6.75,-1.091c-8,0 -10,2 -10,10c0,8 2,10 10,10c8,0 10,-2 10,-10c0,-0.346 -0.004,-0.68 -0.012,-1.004c-0.01,-0.431 -0.526,-0.629 -0.831,-0.324l-0.863,0.862c-0.188,0.189 -0.294,0.444 -0.291,0.711c0.02,2.029 0.074,4.85 -1.417,6.341c-0.864,0.864 -2.572,1.414 -6.586,1.414c-4.014,0 -5.722,-0.55 -6.586,-1.414c-0.864,-0.864 -1.414,-2.572 -1.414,-6.586c0,-4.014 0.55,-5.722 1.414,-6.586c0.864,-0.864 2.572,-1.414 6.586,-1.414Z"
+          />
+          <Path
+            fill={color}
+            d="M10.707,14.293c-0.39,0.39 -0.39,1.024 0,1.414l4.586,4.586c0.39,0.39 1.024,0.39 1.414,0l11.586,-11.586c0.39,-0.39 0.39,-1.024 0,-1.414l-0.336,-0.336c-0.39,-0.39 -1.024,-0.39 -1.414,0l-10.543,10.543l-3.543,-3.543c-0.39,-0.39 -1.024,-0.39 -1.414,0l-0.336,0.336Z"
+          />
+        </React.Fragment>
+      );
+    case 'code':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M18.634,9.438c0.276,-0.478 0.888,-0.642 1.366,-0.366c0.478,0.276 0.642,0.888 0.366,1.366l-7,12.124c-0.276,0.478 -0.888,0.642 -1.366,0.366c-0.478,-0.276 -0.642,-0.888 -0.366,-1.366l7,-12.124Zm4.348,11.452c-0.354,-0.424 -0.296,-1.055 0.128,-1.408l0.245,-0.205c1.478,-1.236 2.216,-1.854 3.529,-3.277c-1.338,-1.451 -2.052,-2.045 -3.612,-3.347l-0.162,-0.135c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.424 0.942,-0.423 1.409,-0.128c1.609,1.018 2.609,2.018 4.2,3.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.591,1.947 -2.591,2.947 -4.2,3.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Zm-14.092,-1.408c0.424,0.353 0.482,0.984 0.128,1.408c-0.353,0.424 -0.984,0.482 -1.408,0.128l-0.001,-0.001c-1.609,-1.017 -2.609,-2.017 -4.2,-3.964c-0.219,-0.311 -0.409,-0.663 -0.409,-1.053c0,-0.39 0.19,-0.742 0.409,-1.054c1.591,-1.946 2.591,-2.946 4.2,-3.964c0.467,-0.295 1.056,-0.296 1.409,0.128c0.354,0.424 0.296,1.055 -0.128,1.408l-0.162,0.135c-1.56,1.302 -2.274,1.896 -3.612,3.347c1.313,1.423 2.051,2.041 3.529,3.277l0.245,0.205Z"
+          />
+        </React.Fragment>
+      );
+    case 'community':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M14.821,15c0,-3 -1,-5 1,-5c2,0 1,2 1,5l0,2c0,3 1,5 -1,5c-2,0 -1,-2 -1,-5l0,-2Z"
+          />
+          <Path
+            fill={color}
+            d="M16.187,14.634c2.598,-1.5 3.83,-3.367 4.83,-1.634c1,1.732 -1.232,1.866 -3.83,3.366l-1.732,1c-2.598,1.5 -3.83,3.366 -4.83,1.634c-1,-1.733 1.232,-1.866 3.83,-3.366l1.732,-1Z"
+          />
+          <Path
+            fill={color}
+            d="M17.187,15.634c2.598,1.5 4.83,1.633 3.83,3.366c-1,1.732 -2.232,-0.134 -4.83,-1.634l-1.732,-1c-2.598,-1.5 -4.83,-1.634 -3.83,-3.366c1,-1.733 2.232,0.134 4.83,1.634l1.732,1Z"
+          />
+        </React.Fragment>
+      );
+    case 'controls':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 3 15.7325C 3.5978 15.3867 4 14.7403 4 14C 4 13.2597 3.5978 12.6133 3 12.2675C 2.98457 12.2586 2.96901 12.2499 2.95332 12.2414C 2.66993 12.0875 2.34518 12 2 12C 1.63581 12 1.29436 12.0974 1.00024 12.2674L 1 12.2675C 0.402199 12.6133 0 13.2597 0 14C 0 14.7403 0.402199 15.3867 1 15.7325C 1.01543 15.7414 1.03099 15.7501 1.04668 15.7586C 1.33007 15.9125 1.65482 16 2 16C 2.36419 16 2.70564 15.9026 2.99976 15.7326L 3 15.7325ZM 3 1L 3 11.1707C 2.68722 11.0602 2.35064 11 2 11C 1.64936 11 1.31278 11.0602 1 11.1707L 1 1C 1 0.447723 1.44771 0 2 0C 2.55228 0 3 0.447723 3 1ZM 3 16.8293C 2.68722 16.9398 2.35064 17 2 17C 1.64936 17 1.31278 16.9398 1 16.8293L 1 19C 1 19.5523 1.44771 20 2 20C 2.55228 20 3 19.5523 3 19L 3 16.8293ZM 11 7.73245C 11.5978 7.38666 12 6.7403 12 6C 12 5.2597 11.5978 4.61334 11 4.26755C 10.9846 4.25864 10.969 4.24991 10.9533 4.24139C 10.6699 4.08746 10.3452 4 10 4C 9.63581 4 9.29436 4.09735 9.00024 4.26743L 9 4.26755C 8.4022 4.61334 8 5.2597 8 6C 8 6.7403 8.4022 7.38666 9 7.73245C 9.01543 7.74136 9.03099 7.75009 9.04668 7.75861C 9.33007 7.91254 9.65482 8 10 8C 10.3642 8 10.7056 7.90265 10.9998 7.73257L 11 7.73245ZM 11 1L 11 3.17072C 10.6872 3.06015 10.3506 3 10 3C 9.64936 3 9.31278 3.06015 9 3.17072L 9 1C 9 0.447723 9.44772 0 10 0C 10.5523 0 11 0.447723 11 1ZM 11 8.82928C 10.6872 8.93985 10.3506 9 10 9C 9.64936 9 9.31278 8.93985 9 8.82928L 9 19C 9 19.5523 9.44772 20 10 20C 10.5523 20 11 19.5523 11 19L 11 8.82928ZM 20 10C 20 10.7403 19.5978 11.3867 19 11.7325L 18.9998 11.7326C 18.7056 11.9026 18.3642 12 18 12C 17.6548 12 17.3301 11.9125 17.0467 11.7586C 17.031 11.7501 17.0154 11.7414 17 11.7325C 16.4022 11.3867 16 10.7403 16 10C 16 9.2597 16.4022 8.61334 17 8.26755L 17.0002 8.26743C 17.2944 8.09735 17.6358 8 18 8C 18.3452 8 18.6699 8.08746 18.9533 8.24139C 18.969 8.24991 18.9846 8.25861 19 8.26755C 19.5978 8.61334 20 9.2597 20 10ZM 19 7.17072L 19 1C 19 0.447723 18.5523 0 18 0C 17.4477 0 17 0.447723 17 1L 17 7.17072C 17.3128 7.06015 17.6494 7 18 7C 18.3506 7 18.6872 7.06015 19 7.17072ZM 18 13C 18.3506 13 18.6872 12.9398 19 12.8293L 19 19C 19 19.5523 18.5523 20 18 20C 17.4477 20 17 19.5523 17 19L 17 12.8293C 17.3128 12.9398 17.6494 13 18 13Z"
+            transform="matrix(0 1 -1 0 26 6)"
+          />
+        </React.Fragment>
+      );
+    case 'delete':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M8.391 12.32c-.636-.131-1.248.368-1.213 1.016.808 14.714 1.271 14.711 7.681 14.669C15.22 28.003 15.6 28 16 28s.78.003 1.141.005c6.41.042 6.873.045 7.681-14.669.035-.648-.577-1.147-1.212-1.016a.975.975 0 0 0-.784.896c-.17 3.094-.323 5.51-.519 7.407-.266 2.584-.588 3.883-.95 4.566-.225.426-.422.586-1.067.701-.716.128-1.615.123-3.019.115h-.002a161.358 161.358 0 0 0-2.538 0h-.001c-1.405.008-2.304.013-3.02-.115-.645-.115-.842-.275-1.067-.701-.362-.683-.684-1.982-.95-4.566-.196-1.897-.349-4.313-.519-7.407a.975.975 0 0 0-.783-.896z"
+          />
+          <Path
+            fill={color}
+            d="M6 10a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1z"
+            fillRule="nonzero"
+          />
+          <Path
+            fill={color}
+            d="M12.25 7.973C12.112 8.185 12 8.5 12 9h-2c0-.81.186-1.525.576-2.121.366-.536.963-1.006 1.525-1.271C13.24 5.087 14.687 5 16 5c1.313 0 2.76.087 3.899.608.562.265 1.158.735 1.525 1.271C21.814 7.475 22 8.19 22 9h-2c0-.5-.112-.815-.25-1.027-.161-.272-.324-.388-.684-.546C18.36 7.103 17.306 7 16 7c-1.306 0-2.36.103-3.066.427-.36.158-.523.274-.684.546z"
+          />
+          <Path
+            fill={color}
+            d="M12.044 14.086a1 1 0 1 1 1.998-.087l.349 7.992a1 1 0 0 1-1.998.087l-.349-7.992zM17.956 13.999a1 1 0 0 1 1.998.087l-.348 7.993a1 1 0 0 1-1.999-.088l.349-7.992z"
+            fillRule="nonzero"
+          />
+        </React.Fragment>
+      );
+    case 'door-enter':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M13.707,15.293c0.391,0.39 0.391,1.024 0,1.414l-4,4c-0.39,0.391 -1.024,0.391 -1.414,0c-0.391,-0.39 -0.391,-1.024 0,-1.414l2.293,-2.293l-7.586,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l7.586,0l-2.293,-2.293c-0.391,-0.39 -0.391,-1.024 0,-1.414c0.39,-0.391 1.024,-0.391 1.414,0l4,4Z"
+          />
+          <Path
+            fill={color}
+            d="M19.884,8c0,0 -0.001,0 -0.001,0c-1.7,-0.001 -2.86,0.045 -3.77,0.25c-0.005,0.001 -0.01,0.002 -0.015,0.003c-0.79,0.173 -1.104,0.409 -1.292,0.638c0,0 0,0.001 0,0.001c-0.23,0.282 -0.498,0.834 -0.679,2.043c0,0.001 0,0.002 0,0.003c-0.007,0.048 -0.015,0.097 -0.022,0.147c-0.072,0.516 -0.501,0.915 -1.022,0.915c-0.584,0 -1.049,-0.501 -0.973,-1.08c0.566,-4.332 2.406,-4.92 7.773,-4.92c7,0 8,1 8,10c0,9 -1,10 -8,10c-5.367,0 -7.207,-0.588 -7.773,-4.92c-0.076,-0.579 0.389,-1.08 0.973,-1.08c0.521,0 0.95,0.399 1.022,0.915c0.007,0.05 0.015,0.099 0.022,0.147c0,0.001 0,0.002 0,0.003c0.181,1.209 0.449,1.762 0.679,2.044l0,0c0.188,0.229 0.502,0.465 1.292,0.638c0.005,0.001 0.01,0.002 0.015,0.003c0.91,0.204 2.07,0.25 3.77,0.25c0,0 0.001,0 0.001,0c1.7,0 2.86,-0.046 3.77,-0.25c0.005,-0.001 0.01,-0.002 0.015,-0.003c0.79,-0.173 1.104,-0.409 1.291,-0.638l0.001,0c0.23,-0.282 0.498,-0.835 0.678,-2.043c0.001,-0.001 0.001,-0.003 0.001,-0.005c0.189,-1.247 0.244,-2.848 0.243,-5.061c0,0 0,0 0,0c0.001,-2.213 -0.054,-3.814 -0.243,-5.061c0,-0.002 0,-0.004 -0.001,-0.005c-0.18,-1.208 -0.448,-1.76 -0.678,-2.042c0,0 0,-0.001 -0.001,-0.001c-0.187,-0.229 -0.501,-0.465 -1.291,-0.638c-0.005,-0.001 -0.01,-0.002 -0.015,-0.003c-0.91,-0.205 -2.07,-0.251 -3.77,-0.25Z"
+          />
+        </React.Fragment>
+      );
+    case 'door-leave':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M27.708,15.293c0.39,0.39 0.39,1.024 0,1.414l-4,4c-0.391,0.391 -1.024,0.391 -1.415,0c-0.39,-0.39 -0.39,-1.024 0,-1.414l2.293,-2.293l-11.586,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l11.586,0l-2.293,-2.293c-0.39,-0.39 -0.39,-1.024 0,-1.414c0.391,-0.391 1.024,-0.391 1.415,0l4,4Z"
+          />
+          <Path
+            fill={color}
+            d="M11.999,8c0.001,0 0.001,0 0.002,0c1.699,-0.001 2.859,0.045 3.77,0.25c0.005,0.001 0.01,0.002 0.015,0.003c0.789,0.173 1.103,0.409 1.291,0.638c0,0 0,0.001 0,0.001c0.231,0.282 0.498,0.834 0.679,2.043c0,0.001 0,0.002 0.001,0.003c0.007,0.048 0.014,0.097 0.021,0.147c0.072,0.516 0.501,0.915 1.022,0.915c0.584,0 1.049,-0.501 0.973,-1.08c-0.566,-4.332 -2.405,-4.92 -7.773,-4.92c-7,0 -8,1 -8,10c0,9 1,10 8,10c5.368,0 7.207,-0.588 7.773,-4.92c0.076,-0.579 -0.389,-1.08 -0.973,-1.08c-0.521,0 -0.95,0.399 -1.022,0.915c-0.007,0.05 -0.014,0.099 -0.021,0.147c-0.001,0.001 -0.001,0.002 -0.001,0.003c-0.181,1.209 -0.448,1.762 -0.679,2.044l0,0c-0.188,0.229 -0.502,0.465 -1.291,0.638c-0.005,0.001 -0.01,0.002 -0.015,0.003c-0.911,0.204 -2.071,0.25 -3.77,0.25c-0.001,0 -0.001,0 -0.002,0c-1.699,0 -2.859,-0.046 -3.77,-0.25c-0.005,-0.001 -0.01,-0.002 -0.015,-0.003c-0.789,-0.173 -1.103,-0.409 -1.291,-0.638l0,0c-0.231,-0.282 -0.498,-0.835 -0.679,-2.043c0,-0.001 0,-0.003 -0.001,-0.005c-0.189,-1.247 -0.243,-2.848 -0.243,-5.061c0,0 0,0 0,0c0,-2.213 0.054,-3.814 0.243,-5.061c0.001,-0.002 0.001,-0.004 0.001,-0.005c0.181,-1.208 0.448,-1.76 0.679,-2.042c0,0 0,-0.001 0,-0.001c0.188,-0.229 0.502,-0.465 1.291,-0.638c0.005,-0.001 0.01,-0.002 0.015,-0.003c0.911,-0.205 2.071,-0.251 3.77,-0.25Z"
+          />
+        </React.Fragment>
+      );
+    case 'down':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M21.934,25.636c-1.478,0.284 -3.354,0.365 -5.934,0.364c-2.58,0.001 -4.456,-0.08 -5.934,-0.364c-1.402,-0.264 -2.137,-0.66 -2.589,-1.113c-0.453,-0.452 -0.849,-1.187 -1.113,-2.589c-0.284,-1.478 -0.365,-3.354 -0.364,-5.934c-0.001,-2.58 0.08,-4.456 0.364,-5.934c0.264,-1.402 0.66,-2.137 1.113,-2.589c0.452,-0.453 1.187,-0.849 2.589,-1.113c1.478,-0.284 3.354,-0.364 5.934,-0.364c2.58,0 4.456,0.08 5.934,0.364c1.402,0.264 2.137,0.66 2.589,1.113c0.453,0.452 0.849,1.187 1.113,2.589c0.284,1.478 0.364,3.354 0.364,5.934c0,2.58 -0.08,4.456 -0.364,5.934c-0.264,1.402 -0.66,2.137 -1.113,2.589c-0.452,0.453 -1.187,0.849 -2.589,1.113Zm6.066,-9.636c0,10.5 -1.5,12 -12,12c-10.5,0 -12,-1.5 -12,-12c0,-10.5 1.5,-12 12,-12c10.5,0 12,1.5 12,12Z"
+          />
+          <Path
+            fill={color}
+            d="M10.11,12.982c0.424,-0.354 1.055,-0.297 1.408,0.128c1.391,1.636 2.76,3.464 4.482,4.774c1.749,-1.331 3.085,-3.1 4.482,-4.774c0.353,-0.425 0.984,-0.482 1.408,-0.128c0.42,0.349 0.476,0.99 0.127,1.409c-1.505,1.799 -3.031,3.827 -4.964,5.2c-0.311,0.219 -0.663,0.409 -1.053,0.409c-0.39,0 -0.742,-0.19 -1.053,-0.409c-1.914,-1.359 -3.471,-3.41 -4.965,-5.201c-0.354,-0.424 -0.296,-1.055 0.128,-1.408Z"
+          />
+        </React.Fragment>
+      );
+    case 'down-caret':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 0.359841 9.01822C 0.784113 9.37178 1.41467 9.31446 1.76823 8.8902C 3.14518 7.2451 6.52975 3.42464 8.25002 2.11557C 9.99919 3.44663 13.335 7.21555 14.7318 8.8902C 15.0854 9.31446 15.7159 9.37178 16.1402 9.01822C 16.5645 8.66466 16.6215 8.03371 16.2679 7.60943C 14.7363 5.76983 11.2749 1.80977 9.30351 0.408618C 8.99227 0.190441 8.64018 0 8.25002 0C 7.85987 0 7.50778 0.190441 7.19654 0.408618C 5.26486 1.78153 1.73514 5.80788 0.232849 7.60856L 0.231804 7.60982C -0.12176 8.03409 -0.0644362 8.66466 0.359841 9.01822Z"
+            transform="translate(7.12506 20.6251) scale(1 -1)"
+          />
+        </React.Fragment>
+      );
+    case 'down-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,28c10.5,0 12,-1.5 12,-12c0,-10.5 -1.5,-12 -12,-12c-10.5,0 -12,1.5 -12,12c0,10.5 1.5,12 12,12Zm-4.482,-14.89c-0.353,-0.424 -0.984,-0.482 -1.408,-0.128c-0.424,0.353 -0.482,0.984 -0.128,1.408l0.001,0.001c0.216,0.26 0.433,0.524 0.652,0.79c1.299,1.581 2.658,3.235 4.312,4.41c0.311,0.219 0.663,0.409 1.053,0.409c0.39,0 0.742,-0.19 1.053,-0.409c1.679,-1.192 2.988,-2.79 4.285,-4.374c0.226,-0.277 0.452,-0.553 0.68,-0.826c0.354,-0.425 0.296,-1.056 -0.128,-1.409c-0.424,-0.354 -1.055,-0.296 -1.408,0.128c-0.212,0.254 -0.423,0.511 -0.634,0.768c-1.178,1.434 -2.365,2.878 -3.848,4.006c-1.457,-1.108 -2.673,-2.584 -3.848,-4.009c-0.212,-0.257 -0.423,-0.513 -0.634,-0.765Z"
+          />
+        </React.Fragment>
+      );
+    case 'edit':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M11.878,8.479c0.132,-0.242 0.346,-0.479 0.622,-0.479l1.5,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-1,0c-0.552,0 -1,0.448 -1,1l0,10c0,0.552 0.448,1 1,1l1,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-1.5,0c-0.276,0 -0.49,-0.237 -0.622,-0.48c-0.17,-0.31 -0.499,-0.52 -0.878,-0.52c-0.379,0 -0.708,0.21 -0.878,0.52c-0.132,0.243 -0.346,0.48 -0.622,0.48l-1.5,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l1,0c0.552,0 1,-0.448 1,-1l0,-10c0,-0.552 -0.448,-1 -1,-1l-1,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l1.5,0c0.276,0 0.49,0.237 0.622,0.479c0.17,0.311 0.499,0.521 0.878,0.521c0.379,0 0.708,-0.21 0.878,-0.521Zm-3.878,17.521c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l16,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-16,0Z"
+          />
+        </React.Fragment>
+      );
+    case 'email':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M25.709,21.048c0.241,-1.212 0.291,-2.792 0.291,-5.048c0,-2.256 -0.05,-3.836 -0.291,-5.048c-0.216,-1.11 -0.533,-1.577 -0.864,-1.853c-0.384,-0.32 -1.094,-0.641 -2.597,-0.844c-1.531,-0.209 -3.522,-0.255 -6.248,-0.255c-2.725,0 -4.717,0.046 -6.248,0.255c-1.503,0.203 -2.213,0.524 -2.597,0.844c-0.331,0.276 -0.648,0.743 -0.864,1.853c-0.241,1.212 -0.291,2.792 -0.291,5.048c0,2.256 0.05,3.836 0.291,5.048c0.216,1.11 0.533,1.577 0.864,1.853c0.384,0.32 1.094,0.641 2.597,0.843c1.531,0.21 3.523,0.256 6.248,0.256c2.726,0 4.717,-0.046 6.248,-0.256c1.503,-0.202 2.213,-0.523 2.597,-0.843c0.331,-0.276 0.648,-0.743 0.864,-1.853Zm-9.709,4.952c11,0 12,-0.833 12,-10c0,-9.167 -1,-10 -12,-10c-11,0 -12,0.833 -12,10c0,9.167 1,10 12,10Zm-8.651,-14.774c0.411,-0.344 1.023,-0.289 1.366,0.124c1.335,1.601 5.617,5.318 7.285,6.592c1.696,-1.296 5.931,-4.963 7.285,-6.592c0.343,-0.413 0.955,-0.468 1.366,-0.124c0.412,0.344 0.467,0.957 0.124,1.37c-0.695,0.838 -2.02,2.129 -3.429,3.404c1.409,1.275 2.734,2.566 3.429,3.404c0.343,0.412 0.288,1.026 -0.124,1.37c-0.411,0.344 -1.023,0.289 -1.366,-0.124c-0.662,-0.798 -2.015,-2.083 -3.422,-3.339c-1.102,0.95 -2.137,1.789 -2.841,2.291c-0.302,0.213 -0.644,0.398 -1.022,0.398c-0.378,0 -0.72,-0.185 -1.021,-0.398c-0.691,-0.492 -1.728,-1.335 -2.835,-2.292c-1.414,1.264 -2.775,2.556 -3.429,3.34c-0.343,0.413 -0.955,0.468 -1.366,0.124c-0.411,-0.344 -0.467,-0.957 -0.124,-1.37l0.001,-0.001c0.683,-0.822 2.018,-2.119 3.436,-3.403c-1.418,-1.284 -2.753,-2.582 -3.436,-3.403l-0.001,-0.001c-0.343,-0.413 -0.287,-1.026 0.124,-1.37Z"
+          />
+        </React.Fragment>
+      );
+    case 'email-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,26c11,0 12,-0.833 12,-10c0,-9.167 -1,-10 -12,-10c-11,0 -12,0.833 -12,10c0,9.167 1,10 12,10Zm-8.651,-14.774c0.411,-0.344 1.023,-0.289 1.366,0.124c1.335,1.601 5.617,5.318 7.285,6.592c1.696,-1.296 5.931,-4.963 7.285,-6.592c0.343,-0.413 0.955,-0.468 1.366,-0.124c0.412,0.344 0.467,0.957 0.124,1.37c-0.695,0.838 -2.02,2.129 -3.429,3.404c1.409,1.275 2.734,2.566 3.429,3.404c0.343,0.412 0.288,1.026 -0.124,1.37c-0.411,0.344 -1.023,0.289 -1.366,-0.124c-0.662,-0.798 -2.015,-2.083 -3.422,-3.339c-1.102,0.95 -2.137,1.789 -2.841,2.291c-0.302,0.213 -0.644,0.398 -1.022,0.398c-0.378,0 -0.72,-0.185 -1.021,-0.398c-0.691,-0.492 -1.728,-1.335 -2.835,-2.292c-1.414,1.264 -2.775,2.556 -3.429,3.34c-0.343,0.413 -0.955,0.468 -1.366,0.124c-0.411,-0.344 -0.467,-0.957 -0.124,-1.37l0.001,-0.001c0.683,-0.822 2.018,-2.119 3.436,-3.403c-1.418,-1.284 -2.753,-2.582 -3.436,-3.403l-0.001,-0.001c-0.343,-0.413 -0.287,-1.026 0.124,-1.37Z"
+          />
+        </React.Fragment>
+      );
+    case 'embed':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,6.033c5.1,0 7.247,0.576 8.336,1.665c1.089,1.089 1.664,3.235 1.664,8.335c0,5.1 -0.575,7.247 -1.664,8.336c-1.089,1.089 -3.236,1.664 -8.336,1.664c-5.1,0 -7.247,-0.575 -8.336,-1.664c-1.089,-1.089 -1.664,-3.236 -1.664,-8.336c0,-5.1 0.575,-7.247 1.664,-8.335c1.089,-1.089 3.236,-1.665 8.336,-1.665Zm12,10c0,-10 -2,-12 -12,-12c-10,0 -12,2 -12,12c0,10 2,12 12,12c10,0 12,-2 12,-12Zm-19.25,0c0,0.336 0.175,0.617 0.332,0.825l0.001,0.002c0.836,1.087 2.004,1.978 3.102,2.816c0.09,0.068 0.179,0.137 0.268,0.205l0.079,0.06c0.061,0.047 0.122,0.094 0.183,0.141l0.001,0.001c0.394,0.305 0.977,0.258 1.31,-0.113c0.343,-0.382 0.284,-0.953 -0.121,-1.266c-0.178,-0.138 -0.359,-0.276 -0.54,-0.415c-0.92,-0.703 -1.854,-1.417 -2.579,-2.256c0.734,-0.851 1.651,-1.55 2.576,-2.255c0.181,-0.138 0.363,-0.276 0.543,-0.415c0.404,-0.313 0.464,-0.884 0.121,-1.266c-0.333,-0.372 -0.917,-0.417 -1.31,-0.113c-0.181,0.139 -0.363,0.278 -0.546,0.418l-0.01,0.007c-1.099,0.836 -2.228,1.695 -3.077,2.798l-0.001,0.001c-0.157,0.208 -0.332,0.49 -0.332,0.825Zm14.5,0c0,0.336 -0.175,0.617 -0.332,0.825l-0.001,0.002c-0.836,1.087 -2.004,1.978 -3.102,2.816c-0.179,0.136 -0.356,0.272 -0.53,0.406l-0.001,0.001c-0.394,0.305 -0.977,0.258 -1.31,-0.113c-0.343,-0.382 -0.284,-0.953 0.121,-1.266c0.178,-0.138 0.359,-0.276 0.54,-0.415c0.92,-0.703 1.854,-1.417 2.579,-2.256c-0.734,-0.851 -1.651,-1.55 -2.576,-2.255l-0.002,-0.001c-0.18,-0.137 -0.361,-0.275 -0.541,-0.414c-0.404,-0.313 -0.464,-0.884 -0.121,-1.266c0.333,-0.372 0.917,-0.417 1.31,-0.113c0.184,0.142 0.369,0.283 0.556,0.425c1.099,0.836 2.228,1.695 3.077,2.798l0.001,0.001c0.157,0.208 0.332,0.49 0.332,0.825Z"
+          />
+        </React.Fragment>
+      );
+    case 'emoji':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M26,16c0,5.523 -4.477,10 -10,10c-5.523,0 -10,-4.477 -10,-10c0,-5.523 4.477,-10 10,-10c5.523,0 10,4.477 10,10Zm2,0c0,6.627 -5.373,12 -12,12c-6.627,0 -12,-5.373 -12,-12c0,-6.627 5.373,-12 12,-12c6.627,0 12,5.373 12,12Zm-17.5,0c0.829,0 1.5,-0.672 1.5,-1.5c0,-0.828 -0.671,-1.5 -1.5,-1.5c-0.829,0 -1.5,0.672 -1.5,1.5c0,0.828 0.671,1.5 1.5,1.5Zm12.5,-1.5c0,0.828 -0.671,1.5 -1.5,1.5c-0.829,0 -1.5,-0.672 -1.5,-1.5c0,-0.828 0.671,-1.5 1.5,-1.5c0.829,0 1.5,0.672 1.5,1.5Zm-6.999,8c2.45,0 4.534,-1.715 5,-4c0.232,-1.14 -3,-1.5 -5,-1.5c-2,0 -5.259,0.231 -5,1.5c0.466,2.285 2.549,4 5,4Zm2,-2c0,0 -0.896,0.5 -2,0.5c-1.105,0 -2,-0.5 -2,-0.5c0,0 0.895,-1 2,-1c1.104,0 2,1 2,1Z"
+          />
+        </React.Fragment>
+      );
+    case 'enter':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M18.496,10.132c-0.479,-0.274 -1.09,-0.108 -1.364,0.372c-0.274,0.479 -0.108,1.09 0.372,1.364c1.554,0.886 3.031,1.929 4.357,3.132l-13.861,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l13.861,0c-1.326,1.203 -2.803,2.246 -4.357,3.132c-0.48,0.274 -0.646,0.885 -0.372,1.364c0.274,0.48 0.885,0.646 1.364,0.372c2.16,-1.237 4.859,-2.886 6.237,-5.061c0.076,-0.12 0.267,-0.431 0.267,-0.807c0,-0.376 -0.191,-0.687 -0.267,-0.807c-1.403,-2.215 -4.021,-3.792 -6.237,-5.061Z"
+          />
+        </React.Fragment>
+      );
+    case 'everything':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,14.591c-0.394,-0.376 -0.939,-0.875 -1.539,-1.365c-0.632,-0.516 -1.383,-1.066 -2.101,-1.472c-0.709,-0.399 -1.545,-0.754 -2.36,-0.754c-2.761,0 -5,2.239 -5,5c0,2.761 2.239,5 5,5c0.815,0 1.651,-0.355 2.36,-0.754c0.718,-0.406 1.469,-0.956 2.101,-1.472c0.6,-0.49 1.145,-0.989 1.539,-1.365c0.394,0.376 0.939,0.875 1.539,1.365c0.632,0.516 1.383,1.066 2.101,1.472c0.709,0.399 1.545,0.754 2.36,0.754c2.761,0 5,-2.239 5,-5c0,-2.761 -2.239,-5 -5,-5c-0.815,0 -1.651,0.355 -2.36,0.754c-0.718,0.406 -1.469,0.956 -2.101,1.472c-0.6,0.491 -1.145,0.989 -1.539,1.365Zm-9,1.409c0,-1.657 1.343,-3 3,-3c0.289,0 0.755,0.145 1.379,0.496c0.614,0.344 1.225,0.794 1.817,1.278c0.539,0.441 1.014,0.874 1.384,1.226c-0.37,0.352 -0.845,0.785 -1.384,1.226c-0.592,0.484 -1.203,0.934 -1.817,1.278c-0.624,0.351 -1.09,0.496 -1.379,0.496c-1.657,0 -3,-1.343 -3,-3Zm18,0c0,-1.657 -1.343,-3 -3,-3c-0.289,0 -0.756,0.145 -1.379,0.496c-0.614,0.344 -1.225,0.794 -1.817,1.278c-0.539,0.441 -1.014,0.874 -1.384,1.226c0.37,0.352 0.845,0.786 1.384,1.226c0.592,0.484 1.203,0.934 1.817,1.278c0.623,0.351 1.09,0.496 1.379,0.496c1.657,0 3,-1.343 3,-3Z"
+          />
+        </React.Fragment>
+      );
+    case 'explore':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M25.915,15.946c-1.251,0.722 -2.043,1.179 -3.002,0.579l-0.529,0.305l-2.598,1.5c-2.165,1.25 -3.373,1.658 -4.289,1.321l-0.541,0.313l-1.299,0.75c-3.464,2 -5.103,0.286 -5.897,-1.214c-0.795,-1.5 -1.567,-3.715 1.897,-5.715l1.299,-0.75l0.541,-0.312c0.166,-0.962 1.124,-1.804 3.289,-3.054l2.598,-1.5l0.655,-0.378c0.02,-1.166 0.833,-1.636 1.876,-2.238c1.894,-1.093 3.031,-1.75 6.031,3.447c3,5.196 2.242,5.633 -0.031,6.946Zm-2.573,-1.771c-0.471,-0.592 -1.001,-1.418 -1.726,-2.675c-1.412,-2.447 -1.581,-3.388 -1.579,-3.653c0.136,-0.136 0.335,-0.25 0.681,-0.448l0.012,-0.007c0.057,-0.033 0.119,-0.068 0.185,-0.107c0.071,-0.04 0.136,-0.078 0.197,-0.114c0.344,-0.2 0.542,-0.315 0.728,-0.365c0.231,0.131 0.962,0.747 2.374,3.194c0.726,1.256 1.177,2.128 1.454,2.832c0.143,0.347 0.192,0.632 0.215,0.789c-0.16,0.128 -0.392,0.262 -0.753,0.469l-0.001,0.001c-0.067,0.038 -0.138,0.079 -0.214,0.123c-0.076,0.043 -0.147,0.085 -0.213,0.123c-0.361,0.21 -0.593,0.344 -0.784,0.418c-0.124,-0.097 -0.347,-0.283 -0.576,-0.58Zm-1.958,0.923l0.103,-0.06c-0.461,-0.634 -0.984,-1.467 -1.603,-2.538c-0.619,-1.072 -1.062,-1.951 -1.358,-2.68l-0.142,0.081l-2.598,1.5c-1.026,0.591 -1.627,0.989 -2.042,1.377c-0.158,0.133 -0.225,0.228 -0.253,0.28l0,0.001c0.004,0.054 0.015,0.205 0.136,0.475c0.201,0.476 0.528,1.043 0.99,1.843l0.141,0.245c0.463,0.801 0.789,1.367 1.101,1.779c0.174,0.24 0.299,0.325 0.344,0.356l0.001,0c0.059,0.002 0.174,-0.009 0.369,-0.079c0.544,-0.165 1.189,-0.488 2.213,-1.08l2.598,-1.5Zm-9.397,-0.349l-0.031,0.018l-1.299,0.751c-1.398,0.806 -1.539,1.405 -1.566,1.593c-0.045,0.323 0.071,0.763 0.436,1.453c0.306,0.578 0.62,0.88 0.904,0.991c0.196,0.076 0.823,0.236 2.226,-0.573l1.299,-0.75l0.031,-0.019c-0.313,-0.469 -0.643,-1.042 -1.03,-1.711l-0.001,-0.002c-0.387,-0.671 -0.718,-1.244 -0.969,-1.751Z"
+          />
+          <Path
+            fill={color}
+            d="M7.027,22.232c-0.478,0.276 -1.089,0.112 -1.366,-0.366l-1,-1.732c-0.276,-0.479 -0.112,-1.09 0.366,-1.367c0.479,-0.276 1.09,-0.112 1.367,0.367l1,1.732c0.276,0.478 0.112,1.089 -0.367,1.366Z"
+          />
+          <Path
+            fill={color}
+            d="M19.52,20.258c-0.534,0.143 -0.85,0.692 -0.707,1.225l1.279,4.775c0.117,0.438 0.513,0.742 0.966,0.742c0.658,0 1.136,-0.624 0.966,-1.259l-1.28,-4.775c-0.142,-0.534 -0.691,-0.851 -1.224,-0.708Z"
+          />
+          <Path
+            fill={color}
+            d="M16.554,26c0,0.552 -0.448,1 -1,1c-0.553,0 -1,-0.448 -1,-1l0,-3c0,-0.553 0.447,-1 1,-1c0.552,0 1,0.447 1,1l0,3Z"
+          />
+          <Path
+            fill={color}
+            d="M11.822,26.258c-0.117,0.438 -0.514,0.742 -0.966,0.742c-0.658,0 -1.136,-0.624 -0.966,-1.259l0.475,-1.775c0.143,-0.534 0.692,-0.851 1.225,-0.708c0.534,0.143 0.85,0.692 0.707,1.225l-0.475,1.775Z"
+          />
+        </React.Fragment>
+      );
+    case 'facebook':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M19.491,27.944c7.731,-0.319 8.509,-2.242 8.509,-11.944c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,10.985 0.997,11.997 11.956,12l0,-7.667l-2.956,0l0,-3.377l2.956,0l0,-2.491c0,-2.891 1.789,-4.465 4.403,-4.465c1.251,0 2.327,0.092 2.641,0.133l0,3.021l-1.813,0.001c-1.421,0 -1.696,0.666 -1.696,1.644l0,2.157l3.39,0l-0.442,3.377l-2.948,0l0,7.611Z"
+          />
+        </React.Fragment>
+      );
+    case 'flag':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z"
+          />
+        </React.Fragment>
+      );
+    case 'flag-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M11.153,4.434c-0.533,-0.143 -1.082,0.174 -1.225,0.707l-5.694,21.251c-0.143,0.533 0.174,1.082 0.707,1.224c0.534,0.143 1.082,-0.173 1.225,-0.707l2.745,-10.242c0.059,0.019 0.122,0.037 0.187,0.057c1.057,0.315 2.811,0.839 5.449,2.801c6.447,4.796 8.206,-1.17 9.5,-6c0.634,-2.366 0.3,-2.364 -0.86,-2.359c-1.207,0.005 -3.307,0.014 -6.14,-2.641c-2.401,-2.25 -4.034,-3.022 -5.255,-2.612l0.068,-0.254c0.143,-0.533 -0.173,-1.082 -0.707,-1.225Z"
+          />
+        </React.Fragment>
+      );
+    case 'freeze':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M17,4.923c0,-0.51 -0.448,-0.923 -1,-0.923c-0.552,0 -1,0.413 -1,0.923l0,2.414c-0.471,-0.313 -0.871,-0.673 -1.482,-1.227c-0.354,-0.424 -0.984,-0.482 -1.408,-0.128c-0.425,0.353 -0.482,0.984 -0.128,1.409c0.628,0.685 1.864,1.859 3.018,2.365l0,12.488c-1.154,0.506 -2.39,1.68 -3.018,2.365c-0.354,0.425 -0.297,1.056 0.128,1.409c0.424,0.354 1.054,0.296 1.408,-0.128c0.611,-0.554 1.011,-0.914 1.482,-1.227l0,2.414c0,0.51 0.448,0.923 1,0.923c0.552,0 1,-0.413 1,-0.923l0,-2.414c0.471,0.313 0.87,0.673 1.482,1.227c0.353,0.424 0.984,0.482 1.408,0.128c0.424,-0.353 0.481,-0.984 0.128,-1.409c-0.629,-0.685 -1.864,-1.859 -3.018,-2.365l0,-12.488c1.154,-0.506 2.389,-1.68 3.018,-2.365c0.353,-0.425 0.296,-1.056 -0.128,-1.409c-0.424,-0.354 -1.055,-0.296 -1.408,0.128c-0.612,0.554 -1.011,0.914 -1.482,1.227l0,-2.414Z"
+          />
+          <Path
+            fill={color}
+            d="M26.092,11.328c0.442,-0.255 0.576,-0.849 0.3,-1.328c-0.276,-0.478 -0.858,-0.659 -1.3,-0.404l-2.09,1.207c0.035,-0.564 0.148,-1.091 0.322,-1.897c0.191,-0.518 -0.075,-1.093 -0.593,-1.284c-0.519,-0.19 -1.094,0.076 -1.284,0.594c-0.279,0.887 -0.679,2.544 -0.54,3.796l-10.815,6.244c-1.015,-0.746 -2.65,-1.229 -3.557,-1.43c-0.545,-0.094 -1.062,0.27 -1.156,0.815c-0.094,0.544 0.27,1.061 0.815,1.155c0.785,0.252 1.297,0.418 1.803,0.67l-2.09,1.207c-0.442,0.255 -0.576,0.849 -0.3,1.327c0.276,0.479 0.858,0.66 1.3,0.405l2.09,-1.207c-0.035,0.564 -0.147,1.091 -0.322,1.897c-0.19,0.518 0.075,1.093 0.594,1.284c0.518,0.19 1.093,-0.076 1.284,-0.594c0.279,-0.887 0.678,-2.544 0.539,-3.797l10.815,-6.244c1.015,0.747 2.65,1.23 3.558,1.431c0.544,0.094 1.062,-0.27 1.156,-0.815c0.094,-0.544 -0.271,-1.061 -0.815,-1.155c-0.786,-0.253 -1.298,-0.418 -1.804,-0.67l2.09,-1.207Z"
+          />
+          <Path
+            fill={color}
+            d="M25.093,22.405c0.441,0.255 1.023,0.074 1.299,-0.405c0.276,-0.478 0.142,-1.072 -0.299,-1.327l-2.091,-1.207c0.507,-0.252 1.018,-0.418 1.804,-0.67c0.544,-0.094 0.909,-0.611 0.815,-1.155c-0.094,-0.545 -0.612,-0.909 -1.156,-0.815c-0.908,0.201 -2.542,0.684 -3.558,1.43l-10.815,-6.244c0.139,-1.252 -0.26,-2.909 -0.539,-3.796c-0.191,-0.518 -0.766,-0.784 -1.284,-0.594c-0.518,0.191 -0.784,0.766 -0.593,1.284c0.174,0.806 0.286,1.333 0.321,1.897l-2.09,-1.207c-0.442,-0.255 -1.023,-0.074 -1.3,0.404c-0.276,0.479 -0.142,1.073 0.3,1.328l2.09,1.207c-0.506,0.252 -1.018,0.417 -1.803,0.67c-0.544,0.094 -0.909,0.611 -0.815,1.155c0.094,0.545 0.612,0.909 1.156,0.815c0.907,-0.201 2.542,-0.684 3.557,-1.43l10.815,6.243c-0.138,1.253 0.261,2.91 0.54,3.797c0.19,0.518 0.765,0.784 1.284,0.594c0.518,-0.191 0.784,-0.766 0.593,-1.284c-0.174,-0.806 -0.287,-1.333 -0.322,-1.897l2.091,1.207Z"
+          />
+        </React.Fragment>
+      );
+    case 'friend':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 11.4912 8.97717C 12.3703 8.17303 12.6567 6.87286 12.6567 5C 12.6567 2.23859 10.4181 0 7.65668 0C 4.89526 0 2.65668 2.23859 2.65668 5C 2.65668 6.87286 2.94302 8.17303 3.82211 8.97717C 2.19708 9.86633 0.914429 11.3031 0.222412 13.0393C 0.0597229 13.4474 0.0085144 13.9776 0.38324 14.207C 1.17523 14.692 2.01566 13.7498 2.48837 12.9504C 3.53268 11.1844 5.45636 10 7.65668 10C 7.76151 10 7.86569 10.0027 7.96918 10.008C 9.10062 10.066 10.3418 9.95276 11.209 9.22382C 11.3059 9.14246 11.4006 9.06012 11.4912 8.97717ZM 10.6567 5C 10.6567 6.68262 10.3854 7.24109 10.1871 7.45593C 10.0244 7.63208 9.50742 8 7.65668 8C 5.80594 8 5.28891 7.63208 5.12628 7.45593C 4.92798 7.24109 4.65668 6.68262 4.65668 5C 4.65668 3.34314 5.99982 2 7.65668 2C 9.31354 2 10.6567 3.34314 10.6567 5ZM 12.6567 11.88C 13.9552 10.6 15.2537 10.92 15.9029 11.56C 18.4999 14.12 13.4531 17.5 12.6567 17.5C 11.8602 17.5 6.81342 14.12 9.41043 11.56C 10.0597 10.92 11.3582 10.6 12.6567 11.88Z"
+            transform="translate(8.34332 8)"
+          />
+        </React.Fragment>
+      );
+    case 'github':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M18.837,27.966c8.342,-0.241 9.163,-1.997 9.163,-11.966c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,9.995 0.826,11.734 9.228,11.968c0.073,-0.091 0.1,-0.205 0.1,-0.321c0,-0.25 -0.01,-2.816 -0.015,-3.699c-3.037,0.639 -3.678,-1.419 -3.678,-1.419c-0.497,-1.222 -1.213,-1.548 -1.213,-1.548c-0.991,-0.656 0.075,-0.643 0.075,-0.643c1.096,0.075 1.673,1.091 1.673,1.091c0.974,1.617 2.556,1.15 3.178,0.879c0.099,-0.683 0.381,-1.15 0.693,-1.414c-2.425,-0.267 -4.974,-1.175 -4.974,-5.23c0,-1.155 0.426,-2.099 1.124,-2.839c-0.113,-0.268 -0.487,-1.344 0.107,-2.8c0,0 0.917,-0.285 3.003,1.084c0.871,-0.235 1.805,-0.352 2.734,-0.356c0.927,0.004 1.861,0.121 2.734,0.356c2.085,-1.369 3,-1.084 3,-1.084c0.596,1.456 0.221,2.532 0.108,2.8c0.7,0.74 1.123,1.684 1.123,2.839c0,4.065 -2.553,4.96 -4.986,5.221c0.392,0.327 0.741,0.973 0.741,1.96c0,0.946 -0.006,2.619 -0.01,3.728c-0.002,0.549 -0.003,0.959 -0.003,1.074c0,0.109 0.029,0.224 0.095,0.319Z"
+          />
+        </React.Fragment>
+      );
+    case 'google':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,28c11,0 12,-1 12,-12c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,11 1,12 12,12Zm0.142,-10.558l0,-2.675l6.731,0.01c0.588,2.728 -0.735,8.223 -6.731,8.223c-3.944,0 -7.142,-3.134 -7.142,-7c0,-3.866 3.198,-7 7.142,-7c1.852,0 3.54,0.691 4.81,1.825l-2.01,1.97c-0.754,-0.633 -1.73,-1.017 -2.8,-1.017c-2.379,0 -4.308,1.89 -4.308,4.222c0,2.332 1.929,4.222 4.308,4.222c1.998,0 3.38,-1.159 3.888,-2.78l-3.888,0Z"
+          />
+        </React.Fragment>
+      );
+    case 'home':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,5c-0.358,0 -0.736,0.149 -0.997,0.264c-0.297,0.13 -0.676,0.326 -1.077,0.555c-0.789,0.451 -1.798,1.102 -2.878,1.864c-2.149,1.518 -4.715,3.572 -6.755,5.61c-0.391,0.39 -0.391,1.024 0,1.414c0.39,0.391 1.024,0.391 1.414,0c1.96,-1.962 4.394,-3.908 6.495,-5.39c1.045,-0.738 1.974,-1.337 2.716,-1.761c0.365,-0.209 0.649,-0.357 0.887,-0.46c0.091,-0.04 0.154,-0.064 0.195,-0.078c0.041,0.014 0.104,0.038 0.194,0.078c0.239,0.103 0.523,0.251 0.888,0.46c0.742,0.424 1.671,1.023 2.716,1.761c2.101,1.482 4.535,3.428 6.495,5.39c0.39,0.391 1.024,0.391 1.414,0c0.391,-0.39 0.391,-1.024 0,-1.414c-2.04,-2.038 -4.606,-4.092 -6.755,-5.61c-1.08,-0.762 -2.089,-1.413 -2.878,-1.864c-0.401,-0.229 -0.78,-0.425 -1.077,-0.555c-0.262,-0.115 -0.639,-0.264 -0.997,-0.264Zm3.934,19.816c0.184,-0.028 0.358,-0.061 0.524,-0.098l0.014,-0.003c0.923,-0.2 1.291,-0.482 1.522,-0.79c0.292,-0.39 0.589,-1.123 0.774,-2.649l0.001,-0.003c0.165,-1.347 0.218,-3.047 0.229,-5.273c0.002,-0.552 0.45,-1 1.002,-1c0.552,0 1,0.448 0.998,1c-0.052,10.061 -1.005,11 -8.998,11c-7.993,0 -8.946,-0.939 -8.998,-11c-0.002,-0.552 0.446,-1 0.998,-1c0.552,0 1,0.448 1.002,1c0.011,2.226 0.064,3.926 0.229,5.273l0.001,0.003c0.185,1.526 0.482,2.259 0.774,2.649c0.231,0.308 0.599,0.59 1.523,0.79l0.013,0.003c0.166,0.037 0.34,0.07 0.524,0.098c-0.049,-0.788 -0.066,-1.718 -0.066,-2.816c0,-5.133 0.4,-6 4,-6c3.6,0 4,0.867 4,6c0,1.098 -0.017,2.028 -0.066,2.816Zm-2.015,0.16c0.062,-0.782 0.081,-1.74 0.081,-2.976c0,-1.258 -0.02,-2.159 -0.105,-2.87l0,-0.002c-0.081,-0.688 -0.196,-0.921 -0.228,-0.973c-0.001,-0.001 -0.001,-0.002 -0.001,-0.003c-0.002,-0.005 -0.007,-0.009 -0.012,-0.009c-0.019,-0.001 -0.042,-0.003 -0.073,-0.009c-0.004,-0.001 -0.009,-0.002 -0.012,-0.003c-0.338,-0.11 -0.751,-0.133 -1.568,-0.131l-0.002,0c-0.817,-0.002 -1.23,0.021 -1.568,0.131c-0.004,0.001 -0.008,0.002 -0.012,0.003c-0.031,0.006 -0.055,0.008 -0.073,0.009c-0.005,0 -0.01,0.004 -0.012,0.009c0,0.002 0,0.002 -0.001,0.003c-0.032,0.052 -0.147,0.285 -0.228,0.973l0,0.002c-0.085,0.711 -0.105,1.612 -0.105,2.87c0,1.236 0.019,2.194 0.08,2.976c0.569,0.018 1.204,0.024 1.92,0.024l0,0c0.715,0 1.35,-0.006 1.919,-0.024Z"
+          />
+        </React.Fragment>
+      );
+    case 'idea':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M15,4c0,-0.552 0.448,-1 1,-1c0.552,0 1,0.448 1,1l0,2c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1l0,-2Zm-5.879,2.707c-0.39,-0.39 -1.023,-0.39 -1.414,0c-0.39,0.391 -0.39,1.024 0,1.414l1.414,1.415c0.391,0.39 1.024,0.39 1.415,0c0.39,-0.391 0.39,-1.024 0,-1.415l-1.415,-1.414Zm9.688,11.72c0.732,-0.786 1.191,-1.881 1.191,-3.251c0,-2.361 -1.845,-4.176 -4,-4.176c-2.155,0 -4,1.815 -4,4.176c0,1.537 0.335,2.397 1.168,3.224c0.86,0.854 1.674,2.086 1.812,3.6l2.046,0c0.158,-1.539 1.024,-2.757 1.783,-3.573Zm1.464,1.363c-0.703,0.754 -1.273,1.677 -1.273,2.708c0,0.829 -0.672,1.502 -1.502,1.502l-2.95,0c-0.855,0 -1.548,-0.693 -1.548,-1.548c0,-1.009 -0.525,-1.922 -1.241,-2.633c-1.295,-1.286 -1.759,-2.704 -1.759,-4.643c0,-3.411 2.686,-6.176 6,-6.176c3.314,0 6,2.765 6,6.176c0,1.841 -0.628,3.433 -1.727,4.614Zm-3.509,5.21c0.758,0 0.777,0.126 0.046,0.327l-3.45,0.949c-0.182,0.049 -0.36,-0.088 -0.36,-0.276c0,-0.218 0.07,-0.42 0.189,-0.585c0.089,-0.123 0.232,-0.19 0.378,-0.23l0.565,-0.151c0.084,-0.023 0.171,-0.034 0.258,-0.034l2.374,0Zm-3.762,2.534c0.027,0.386 0.474,0.514 0.847,0.414l4.603,-1.234c0.323,-0.086 0.548,-0.379 0.548,-0.714c0,-0.265 -0.287,-0.391 -0.543,-0.322l-5.143,1.378c-0.185,0.049 -0.314,0.217 -0.314,0.409c0,0.023 0.001,0.046 0.002,0.069Zm3.515,1.466c0.088,0 0.175,-0.012 0.259,-0.034l1.137,-0.305c0.105,-0.028 0.205,-0.073 0.296,-0.134l0.346,-0.23c0.278,-0.186 0.445,-0.498 0.445,-0.832c0,-0.066 -0.062,-0.114 -0.126,-0.097l-4.587,1.23c-0.109,0.029 -0.132,0.172 -0.039,0.234c0.164,0.11 0.357,0.168 0.555,0.168l1.714,0Zm8.018,-22.293c-0.39,-0.39 -1.023,-0.39 -1.414,0l-1.414,1.414c-0.39,0.391 -0.39,1.024 0,1.415c0.391,0.39 1.024,0.39 1.414,0l1.415,-1.415c0.39,-0.39 0.39,-1.023 0,-1.414Zm2.464,7.293c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-2,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l2,0Zm-19,1c0,-0.552 -0.448,-1 -1,-1l-2,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l2,0c0.552,0 1,-0.448 1,-1Z"
+          />
+        </React.Fragment>
+      );
+    case 'inserter':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M28,16c0,-10.5 -1.5,-12 -12,-12c-10.5,0 -12,1.5 -12,12c0,10.5 1.5,12 12,12c10.5,0 12,-1.5 12,-12Zm-14.89,4.482c-0.424,0.353 -0.482,0.984 -0.128,1.408c0.353,0.424 0.984,0.482 1.408,0.128l0.001,-0.001c0.26,-0.216 0.524,-0.433 0.79,-0.652c1.581,-1.299 3.235,-2.658 4.41,-4.311c0.219,-0.312 0.409,-0.664 0.409,-1.054c0,-0.39 -0.19,-0.742 -0.409,-1.053c-1.192,-1.679 -2.79,-2.988 -4.374,-4.285c-0.277,-0.226 -0.553,-0.452 -0.826,-0.68c-0.425,-0.353 -1.056,-0.296 -1.409,0.128c-0.354,0.424 -0.296,1.055 0.128,1.408c0.254,0.213 0.511,0.423 0.768,0.635c1.434,1.178 2.878,2.364 4.007,3.847c-1.109,1.457 -2.584,2.673 -4.009,3.847c-0.258,0.213 -0.514,0.424 -0.766,0.635Z"
+          />
+        </React.Fragment>
+      );
+    case 'like':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M15.982 13.578l-1.414-1.414C12.876 10.473 11.364 10 10.232 10c-1.17 0-2.175.503-2.836 1.164-1.592 1.592-1.887 3.022-1.676 4.288.235 1.407 1.152 2.928 2.579 4.412 1.432 1.501 3.108 2.703 4.719 3.616.789.451 1.453.769 2.062 1.001.344.134.65.199.809.233l.093.02.092-.02c.159-.034.466-.099.81-.233.608-.232 1.273-.55 2.062-1.001 1.611-.913 3.287-2.115 4.719-3.616 1.427-1.484 2.344-3.005 2.578-4.412.211-1.266-.083-2.696-1.675-4.288A4.035 4.035 0 0 0 21.732 10c-1.132 0-2.644.473-4.336 2.164l-1.414 1.414zm0-2.828c4-4 8-3 10-1 8 8-7 17-10 17s-18-9-10-17c2-2 6-3 10 1z"
+          />
+        </React.Fragment>
+      );
+    case 'like-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M25.982 9.75c-2-2-6-3-10 1-4-4-8-3-10-1-8 8 7 17 10 17s18-9 10-17z"
+            fillRule="nonzero"
+          />
+        </React.Fragment>
+      );
+    case 'link':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16.693,16.664c0.376,-0.375 1.001,-0.413 1.377,-0.038l0.083,0.084c0.358,0.357 0.386,0.93 0.032,1.291c-0.026,0.026 -0.051,0.052 -0.077,0.078c-0.867,0.866 -1.671,1.438 -2.514,1.655c0,0 -0.001,0 -0.001,0c-0.078,0.02 -0.157,0.037 -0.236,0.051c0,0 0,0 0,0c-0.802,0.142 -1.646,-0.036 -2.616,-0.582l0,0c-0.907,-0.511 -1.923,-1.343 -3.119,-2.539c-3.959,-3.959 -3.939,-5.959 -1.414,-8.485c2.526,-2.525 4.526,-2.545 8.485,1.414c0.439,0.439 0.828,0.853 1.171,1.247c0.102,0.117 -0.009,0.3 -0.162,0.28c0,0 0,0 -0.001,0c-0.559,-0.074 -1.083,-0.035 -1.58,0.094c-0.299,0.078 -0.624,0.012 -0.842,-0.206c-1.958,-1.958 -3.035,-2.492 -3.63,-2.571c-0.366,-0.049 -0.902,0.032 -2.027,1.156c-1.124,1.125 -1.205,1.661 -1.156,2.027c0.079,0.595 0.613,1.672 2.571,3.63c0.432,0.433 0.822,0.796 1.173,1.1c0,0 0,0 0,0c0.046,0.04 0.091,0.079 0.136,0.117c0,0 0,0 0,0c0.841,0.712 1.45,1.073 1.891,1.24c0,0 0,0 0,0c0.166,0.062 0.308,0.098 0.429,0.114c0,0 0,0 0,0c0.367,0.049 0.903,-0.032 2.027,-1.157Zm3.07,-1.099c-0.912,-0.79 -1.563,-1.181 -2.027,-1.357c0,0 0,0 0,0c-0.166,-0.063 -0.308,-0.098 -0.43,-0.114c0,0 0,0 0,0c-0.367,-0.049 -0.902,0.032 -2.027,1.156c-0.375,0.376 -1.001,0.414 -1.376,0.038l-0.083,-0.083c-0.358,-0.358 -0.387,-0.931 -0.032,-1.291c0.025,-0.026 0.051,-0.052 0.077,-0.078c0.866,-0.866 1.671,-1.438 2.514,-1.655l0,0c0.873,-0.225 1.786,-0.07 2.853,0.531c0,0 0,0 0,0c0.906,0.51 1.923,1.343 3.118,2.538c3.96,3.96 3.94,5.96 1.414,8.486c-2.525,2.525 -4.525,2.545 -8.485,-1.415c-0.438,-0.438 -0.828,-0.852 -1.171,-1.246c-0.102,-0.117 0.009,-0.301 0.163,-0.28c0.559,0.074 1.083,0.035 1.581,-0.094c0.299,-0.078 0.623,-0.012 0.841,0.206c1.958,1.958 3.035,2.492 3.63,2.571c0.367,0.049 0.903,-0.032 2.027,-1.157c1.125,-1.124 1.206,-1.66 1.157,-2.027c-0.079,-0.595 -0.613,-1.672 -2.571,-3.63c-0.433,-0.432 -0.822,-0.795 -1.173,-1.099Z"
+          />
+        </React.Fragment>
+      );
+    case 'logo':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M6,14.5c0,0.828 0.672,1.5 1.5,1.5l1.5,0c3.866,0 7,3.134 7,7l0,1.5c0,0.828 0.672,1.5 1.5,1.5l7,0c0.828,0 1.5,-0.672 1.5,-1.5l0,-1.5c0,-9.389 -7.611,-17 -17,-17l-1.5,0c-0.828,0 -1.5,0.672 -1.5,1.5l0,7Z"
+          />
+        </React.Fragment>
+      );
+    case 'markdown':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 12 0C 22.5 0 24 1 24 8C 24 15 22.5 16 12 16C 1.5 16 0 15 0 8C 0 1 1.5 0 12 0ZM 4 12L 6 12L 6 7.61032L 7.14252 9.5145L 8 10.9436L 8.85748 9.5145L 10 7.61032L 10 12L 12 12L 12 4L 9.83383 4L 8 7.05635L 6.16617 4L 4 4L 4 12ZM 17 12L 13.5 8L 16 8L 16 4L 18 4L 18 8L 20.5 8L 17 12Z"
+            transform="translate(4 8)"
+          />
+        </React.Fragment>
+      );
+    case 'member-add':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M23.981,7c-0.552,0 -1,0.448 -1,1l0,2l-2,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l2,0l0,2c0,0.552 0.448,1 1,1c0.553,0 1,-0.448 1,-1l0,-2l2,0c0.553,0 1,-0.448 1,-1c0,-0.552 -0.447,-1 -1,-1l-2,0l0,-2c0,-0.552 -0.447,-1 -1,-1Z"
+          />
+          <Path
+            fill={color}
+            d="M16.981,17c0,1.683 -0.271,2.241 -0.469,2.456c-0.163,0.176 -0.68,0.544 -2.531,0.544c-1.85,0 -2.367,-0.368 -2.53,-0.544c-0.198,-0.215 -0.47,-0.773 -0.47,-2.456c0,-1.657 1.343,-3 3,-3c1.657,0 3,1.343 3,3Zm0.835,3.977c0.879,-0.804 1.165,-2.104 1.165,-3.977c0,-2.761 -2.238,-5 -5,-5c-2.761,0 -5,2.239 -5,5c0,1.873 0.287,3.173 1.166,3.977c-1.665,0.911 -2.97,2.396 -3.649,4.189c-0.124,0.328 -0.154,0.708 0.051,0.993c0.569,0.789 1.674,-0.111 2.13,-0.97c1.008,-1.897 3.004,-3.189 5.302,-3.189c2.298,0 4.295,1.292 5.303,3.189c0.456,0.859 1.561,1.759 2.129,0.97c0.205,-0.285 0.176,-0.665 0.052,-0.993c-0.68,-1.793 -1.985,-3.278 -3.649,-4.189Z"
+          />
+        </React.Fragment>
+      );
+    case 'member-remove':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M21.981,9c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1c1.648,0 5,0 6,0c0.553,0 1,-0.448 1,-1c0,-0.552 -0.447,-1 -1,-1c-3.173,0 -2.219,0 -6,0Z"
+          />
+          <Path
+            fill={color}
+            d="M16.981,16c0,1.683 -0.271,2.241 -0.469,2.456c-0.163,0.176 -0.68,0.544 -2.531,0.544c-1.85,0 -2.367,-0.368 -2.53,-0.544c-0.198,-0.215 -0.47,-0.773 -0.47,-2.456c0,-1.657 1.343,-3 3,-3c1.657,0 3,1.343 3,3Zm0.835,3.977c0.879,-0.804 1.165,-2.104 1.165,-3.977c0,-2.761 -2.238,-5 -5,-5c-2.761,0 -5,2.239 -5,5c0,1.873 0.287,3.173 1.166,3.977c-1.665,0.911 -2.97,2.396 -3.649,4.189c-0.124,0.328 -0.154,0.708 0.051,0.993c0.569,0.789 1.674,-0.111 2.13,-0.97c1.008,-1.897 3.004,-3.189 5.302,-3.189c2.298,0 4.295,1.292 5.303,3.189c0.456,0.859 1.561,1.759 2.129,0.97c0.205,-0.285 0.176,-0.665 0.052,-0.993c-0.679,-1.793 -1.985,-3.278 -3.649,-4.189Z"
+          />
+        </React.Fragment>
+      );
+    case 'mention':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M22.586,9.414c0.864,0.864 1.414,2.572 1.414,6.586l0,1.5c0,0.828 -0.672,1.5 -1.5,1.5c-0.828,0 -1.5,-0.672 -1.5,-1.5l0,-0.5l0,-1l0,-4c0,-0.552 -0.448,-1 -1,-1c-0.552,0 -1,0.448 -1,1c-0.836,-0.628 -1.874,-1 -3,-1c-2.761,0 -5,2.239 -5,5c0,2.761 2.239,5 5,5c1.416,0 2.694,-0.588 3.604,-1.534c0.63,0.926 1.692,1.534 2.896,1.534c1.933,0 3.5,-1.567 3.5,-3.5l0,-0.5l0,-1c0,-8 -2,-10 -10,-10c-8,0 -10,2 -10,10c0,8 2,10 10,10l6,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-6,0c-4.014,0 -5.722,-0.55 -6.586,-1.414c-0.864,-0.864 -1.414,-2.572 -1.414,-6.586c0,-4.014 0.55,-5.722 1.414,-6.586c0.864,-0.864 2.572,-1.414 6.586,-1.414c4.014,0 5.722,0.55 6.586,1.414Zm-3.586,6.586c0,1.657 -1.343,3 -3,3c-1.657,0 -3,-1.343 -3,-3c0,-1.657 1.343,-3 3,-3c1.657,0 3,1.343 3,3Z"
+          />
+        </React.Fragment>
+      );
+    case 'menu':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M9,10c0,-0.552 0.448,-1 1,-1l12,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-12,0c-0.552,0 -1,-0.448 -1,-1Z"
+          />
+          <Path
+            fill={color}
+            d="M9,15c0,-0.552 0.448,-1 1,-1l12,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-12,0c-0.552,0 -1,-0.448 -1,-1Z"
+          />
+          <Path
+            fill={color}
+            d="M9,20c0,-0.552 0.448,-1 1,-1l12,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-12,0c-0.552,0 -1,-0.448 -1,-1Z"
+          />
+        </React.Fragment>
+      );
+    case 'message':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M14.5,7.021c0.625,-0.014 1.291,-0.021 2,-0.021c10.542,0 11.5,1.5 11.5,8c0,6.5 -0.958,8 -11.5,8c-0.517,0 -1.01,-0.004 -1.482,-0.011c-0.001,0 -0.002,0 -0.002,0.001l-4.461,2.974c-0.665,0.443 -1.555,-0.034 -1.555,-0.833l0,-2.713c0,-0.002 -0.002,-0.004 -0.004,-0.005c-2.969,-0.754 -3.765,-2.347 -3.948,-5.413c-0.036,-0.607 -0.048,-1.272 -0.048,-2c0,-6.063 0.834,-7.776 9.5,-7.979Zm-7.023,12.153c-0.341,-0.732 -0.477,-1.923 -0.477,-4.174c-0.001,-1.579 0.04,-2.656 0.259,-3.523c0.171,-0.791 0.268,-1.008 0.751,-1.324c0.394,-0.301 1.12,-0.62 2.55,-0.84c1.458,-0.228 3.327,-0.312 5.892,-0.313l0.048,0c2.589,-0.001 4.473,0.084 5.94,0.313c1.43,0.22 2.156,0.539 2.55,0.84c0.483,0.316 0.58,0.533 0.751,1.324c0.219,0.867 0.259,1.944 0.259,3.523c0,1.579 -0.04,2.656 -0.259,3.523c-0.171,0.791 -0.268,1.007 -0.751,1.324c-0.394,0.301 -1.12,0.62 -2.55,0.84c-1.467,0.229 -3.351,0.313 -5.94,0.313c-0.509,0 -0.987,-0.004 -1.449,-0.011c-0.303,0.018 -0.882,0.188 -1.145,0.337l-2.906,1.937l0,-0.845c0,-0.96 -0.664,-1.728 -1.512,-1.943c-1.389,-0.353 -1.784,-0.813 -2.011,-1.301Zm4.023,-2.174c0.828,0 1.5,-0.672 1.5,-1.5c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.828,0 -1.5,0.672 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5Zm6.5,-1.5c0,0.828 -0.672,1.5 -1.5,1.5c-0.828,0 -1.5,-0.672 -1.5,-1.5c0,-0.828 0.672,-1.5 1.5,-1.5c0.828,0 1.5,0.672 1.5,1.5Zm3.5,1.5c0.828,0 1.5,-0.672 1.5,-1.5c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.828,0 -1.5,0.672 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5Z"
+          />
+        </React.Fragment>
+      );
+    case 'message-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M28,15c0,6.5 -0.958,8 -11.5,8c-0.517,0 -1.01,-0.004 -1.482,-0.011c-0.001,0 -0.002,0 -0.002,0.001l-4.461,2.974c-0.665,0.443 -1.555,-0.034 -1.555,-0.833l0,-2.713c0,-0.002 -0.002,-0.004 -0.004,-0.005c-3.557,-0.903 -3.996,-3.012 -3.996,-7.413c0,-6.5 0.958,-8 11.5,-8c10.542,0 11.5,1.5 11.5,8Zm-16.5,2c0.828,0 1.5,-0.672 1.5,-1.5c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.828,0 -1.5,0.672 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5Zm10,0c0.828,0 1.5,-0.672 1.5,-1.5c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.828,0 -1.5,0.672 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5Zm-3.5,-1.5c0,0.828 -0.672,1.5 -1.5,1.5c-0.828,0 -1.5,-0.672 -1.5,-1.5c0,-0.828 0.672,-1.5 1.5,-1.5c0.828,0 1.5,0.672 1.5,1.5Z"
+          />
+        </React.Fragment>
+      );
+    case 'message-new':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M15.5,7c-0.709,0 -1.375,0.007 -2,0.021c-8.666,0.203 -9.5,1.916 -9.5,7.979c0,0.728 0.012,1.393 0.048,2c0.183,3.066 0.979,4.66 3.948,5.413c0.002,0.001 0.004,0.003 0.004,0.005l0,2.713c0,0.799 0.89,1.276 1.555,0.833l4.461,-2.974c0,-0.001 0.001,-0.001 0.002,-0.001c0.472,0.007 0.965,0.011 1.482,0.011c2.312,0 4.163,-0.072 5.644,-0.253c-0.093,-0.231 -0.144,-0.483 -0.144,-0.747c0,-0.507 0.189,-0.969 0.499,-1.322l-0.059,0.009c-1.467,0.229 -3.351,0.314 -5.94,0.313c-0.509,0 -0.987,-0.003 -1.449,-0.011c-0.303,0.018 -0.882,0.188 -1.145,0.337l-2.906,1.937l0,-0.845c0,-0.96 -0.664,-1.728 -1.512,-1.943c-1.389,-0.353 -1.784,-0.813 -2.011,-1.301c-0.341,-0.732 -0.477,-1.923 -0.477,-4.174c-0.001,-1.579 0.04,-2.656 0.259,-3.523c0.171,-0.791 0.268,-1.008 0.751,-1.324c0.394,-0.301 1.12,-0.62 2.55,-0.84c1.458,-0.228 3.327,-0.312 5.892,-0.313l0.048,0c2.589,-0.001 4.473,0.084 5.94,0.313c1.43,0.22 2.156,0.539 2.55,0.84c0.483,0.316 0.58,0.533 0.751,1.324c0.219,0.867 0.259,1.944 0.259,3.523c0,0.921 -0.013,1.672 -0.068,2.309c0.309,-0.196 0.675,-0.309 1.068,-0.309c0.338,0 0.657,0.084 0.937,0.232c0.048,-0.669 0.063,-1.41 0.063,-2.232c0,-6.5 -0.958,-8 -11.5,-8Zm-3.5,8.5c0,0.828 -0.672,1.5 -1.5,1.5c-0.828,0 -1.5,-0.672 -1.5,-1.5c0,-0.828 0.672,-1.5 1.5,-1.5c0.828,0 1.5,0.672 1.5,1.5Zm5,0c0,0.828 -0.672,1.5 -1.5,1.5c-0.828,0 -1.5,-0.672 -1.5,-1.5c0,-0.828 0.672,-1.5 1.5,-1.5c0.828,0 1.5,0.672 1.5,1.5Zm3.5,1.5c0.828,0 1.5,-0.672 1.5,-1.5c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.828,0 -1.5,0.672 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5Zm5.5,1c-0.552,0 -1,0.448 -1,1l0,2l-2,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l2,0l0,2c0,0.552 0.448,1 1,1c0.552,0 1,-0.448 1,-1l0,-2l2,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-2,0l0,-2c0,-0.552 -0.448,-1 -1,-1Z"
+          />
+        </React.Fragment>
+      );
+    case 'minus':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,6c5.1,0 7.247,0.575 8.336,1.664c1.089,1.089 1.664,3.236 1.664,8.336c0,5.1 -0.575,7.247 -1.664,8.336c-1.089,1.089 -3.236,1.664 -8.336,1.664c-5.1,0 -7.247,-0.575 -8.336,-1.664c-1.089,-1.089 -1.664,-3.236 -1.664,-8.336c0,-5.1 0.575,-7.247 1.664,-8.336c1.089,-1.089 3.236,-1.664 8.336,-1.664Zm12,10c0,-10 -2,-12 -12,-12c-10,0 -12,2 -12,12c0,10 2,12 12,12c10,0 12,-2 12,-12Zm-16,-1c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l8,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-8,0Z"
+          />
+        </React.Fragment>
+      );
+    case 'minus-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,4c10,0 12,2 12,12c0,10 -2,12 -12,12c-10,0 -12,-2 -12,-12c0,-10 2,-12 12,-12Zm-4,11c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1l8,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-8,0Z"
+          />
+        </React.Fragment>
+      );
+    case 'notification':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M22.217,19.476c-0.512,-1.149 -1.201,-2.759 -1.201,-4.487c0,-3.12 -0.878,-4.452 -1.642,-5.077c-0.84,-0.687 -2.022,-0.923 -3.359,-0.923c-1.336,0 -2.518,0.236 -3.358,0.923c-0.764,0.625 -1.642,1.957 -1.642,5.077c0,1.729 -0.689,3.339 -1.201,4.488c-0.046,0.103 -0.09,0.202 -0.133,0.298c-0.526,1.178 -0.796,1.782 -0.829,2.235c0,0.002 -0.001,0.004 -0.001,0.006c0.067,0.061 0.207,0.171 0.449,0.258c0.981,0.393 2.968,0.715 6.715,0.715c3.748,0 5.735,-0.322 6.715,-0.715c0.243,-0.087 0.383,-0.198 0.45,-0.259c0,-0.002 -0.001,-0.004 -0.001,-0.006c-0.033,-0.453 -0.303,-1.058 -0.83,-2.238c-0.042,-0.094 -0.086,-0.193 -0.132,-0.295Zm0.97,2.627c-0.003,-0.006 -0.006,-0.03 -0.002,-0.052c0.006,0.047 0.004,0.058 0.002,0.052Zm-14.343,0.001c-0.002,0.006 -0.004,-0.005 0.002,-0.051c0.003,0.022 0,0.045 -0.002,0.051Zm15.38,-3.041c-0.58,-1.285 -1.208,-2.679 -1.208,-4.074c0,-7 -4,-8 -7.001,-8c-2.999,0 -7,1 -7,8c0,1.396 -0.629,2.79 -1.209,4.076c-1.499,3.326 -2.671,5.924 8.209,5.924c10.882,0 9.709,-2.6 8.209,-5.926Z"
+          />
+
+          <Path
+            fill={color}
+            d="M17.464,6.081c0.293,0.037 0.57,-0.176 0.511,-0.465c-0.184,-0.904 -0.995,-1.616 -1.96,-1.616c-0.966,0 -1.776,0.712 -1.96,1.616c-0.059,0.289 0.218,0.502 0.511,0.465c0.955,-0.122 1.943,-0.122 2.898,0Z"
+          />
+          <Path
+            fill={color}
+            d="M12.978,25.911c-0.525,-0.035 -1.01,0.37 -0.84,0.868c0.5,1.466 2.413,2.221 3.877,2.221c1.465,0 3.376,-0.755 3.877,-2.221c0.17,-0.498 -0.315,-0.903 -0.84,-0.868c-0.555,0.037 -1.146,0.575 -1.657,0.795c-0.489,0.212 -1.128,0.294 -1.38,0.294c-0.301,0 -0.935,-0.068 -1.409,-0.274c-0.511,-0.221 -1.073,-0.778 -1.628,-0.815Z"
+          />
+        </React.Fragment>
+      );
+    case 'notification-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M24.209,18.074c-0.597,-1.324 -1.209,-2.18 -1.209,-3.574c0,-6.5 -4.5,-7.5 -7,-7.5c-2.5,0 -7,1 -7,7.5c0,1.395 -0.498,2 -1.209,3.576c-2.672,5.924 2.209,5.924 8.209,5.924c6,0 10.882,0 8.209,-5.926Z"
+          />
+
+          <Path
+            fill={color}
+            d="M17.449,6.081c0.293,0.037 0.57,-0.176 0.511,-0.465c-0.184,-0.904 -0.995,-1.616 -1.96,-1.616c-0.966,0 -1.776,0.712 -1.96,1.616c-0.059,0.289 0.218,0.502 0.511,0.465c0.955,-0.122 1.943,-0.122 2.898,0Z"
+          />
+          <Path
+            fill={color}
+            d="M12.963,24.911c-0.525,-0.035 -1.01,0.37 -0.84,0.868c0.5,1.466 2.413,2.221 3.877,2.221c1.465,0 3.376,-0.755 3.877,-2.221c0.17,-0.498 -0.315,-0.903 -0.84,-0.868c-0.555,0.037 -1.146,0.575 -1.657,0.795c-0.489,0.212 -1.128,0.294 -1.38,0.294c-0.301,0 -0.935,-0.068 -1.409,-0.274c-0.511,-0.221 -1.073,-0.778 -1.628,-0.815Z"
+          />
+        </React.Fragment>
+      );
+    case 'payment':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,7c-0.552,0 -1,0.448 -1,1l0,2.019l2,-0.004l0,-2.015c0,-0.552 -0.448,-1 -1,-1Z"
+          />
+          <Path
+            fill={color}
+            d="M17,24l0,-2.015l-2,0l0,2.015c0,0.552 0.448,1 1,1c0.552,0 1,-0.448 1,-1Z"
+          />
+          <Path
+            fill={color}
+            d="M21.909,12.004c0.107,0.542 -0.358,0.995 -0.91,0.995c-0.552,0.001 -0.942,-0.492 -1.25,-0.95c-0.402,-0.598 -0.499,-1.049 -3.749,-1.049c-3.25,0 -4,0 -4,2c0,2 0.606,2 4,2c5.143,0 6,0.8 6,4c0,2.95 -1.275,3.86 -5,3.985c-0.631,0.021 -1.369,0.021 -2,0c-2.872,-0.096 -4.559,-0.785 -4.924,-2.988c-0.091,-0.545 0.372,-0.997 0.924,-0.997c0.552,0 0.925,0.463 1.075,0.995c0.208,0.736 0.99,1.005 3.925,1.005c4,0 4,-0.5 4,-1.998l0,-0.004c0,-1.498 0,-1.998 -4,-1.998c-5.143,0 -6,-1 -6,-4c0,-2.766 1.275,-3.832 5,-3.981c0.631,-0.026 1.369,-0.025 2,-0.004c3.006,0 4.537,1.096 4.909,2.989Z"
+          />
+        </React.Fragment>
+      );
+    case 'person':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M19,13c0,1.683 -0.271,2.241 -0.47,2.456c-0.162,0.176 -0.679,0.544 -2.53,0.544c-1.851,0 -2.368,-0.368 -2.53,-0.544c-0.199,-0.215 -0.47,-0.773 -0.47,-2.456c0,-1.657 1.343,-3 3,-3c1.657,0 3,1.343 3,3Zm0.835,3.977c0.879,-0.804 1.165,-2.104 1.165,-3.977c0,-2.761 -2.239,-5 -5,-5c-2.761,0 -5,2.239 -5,5c0,1.873 0.286,3.173 1.165,3.977c-1.664,0.911 -2.969,2.396 -3.649,4.189c-0.124,0.328 -0.153,0.708 0.052,0.993c0.568,0.789 1.674,-0.111 2.13,-0.97c1.007,-1.897 3.004,-3.189 5.302,-3.189c2.298,0 4.295,1.292 5.302,3.189c0.456,0.859 1.562,1.759 2.13,0.97c0.205,-0.285 0.176,-0.665 0.052,-0.993c-0.68,-1.793 -1.985,-3.278 -3.649,-4.189Z"
+          />
+        </React.Fragment>
+      );
+    case 'photo':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M25.698,22.196c0.248,-1.511 0.302,-3.475 0.302,-6.196c0,-2.716 -0.063,-4.673 -0.324,-6.181c-0.245,-1.442 -0.619,-2.125 -1.019,-2.521c-0.403,-0.397 -1.093,-0.761 -2.534,-0.996c-1.502,-0.249 -3.445,-0.302 -6.123,-0.302c-2.678,0 -4.621,0.053 -6.123,0.302c-1.441,0.235 -2.131,0.599 -2.534,0.996c-0.4,0.396 -0.774,1.079 -1.019,2.521c-0.261,1.508 -0.324,3.465 -0.324,6.181c0,2.721 0.053,4.685 0.302,6.196c0.235,1.45 0.6,2.127 0.987,2.515c0.388,0.387 1.065,0.752 2.515,0.987c1.511,0.249 3.475,0.302 6.196,0.302c2.721,0 4.685,-0.053 6.196,-0.302c1.45,-0.235 2.127,-0.6 2.515,-0.987c0.387,-0.388 0.752,-1.065 0.987,-2.515Zm-9.698,5.804c11,0 12,-1 12,-12c0,-11 -1.169,-12 -12,-12c-10.831,0 -12,1 -12,12c0,11 1,12 12,12Z"
+          />
+          <Path
+            fill={color}
+            d="M8.556,20.674c-0.706,-0.103 -1.385,0.459 -1.28,1.164c0.06,0.406 0.379,0.72 0.784,0.784c1.958,0.308 4.539,0.378 7.94,0.378c3.4,0 5.982,-0.07 7.939,-0.378c0.406,-0.064 0.724,-0.378 0.785,-0.784c0.105,-0.705 -0.574,-1.267 -1.28,-1.164c-0.038,0.006 -0.077,0.011 -0.116,0.017c-0.001,0 -0.002,0 -0.002,0c-1.802,0.253 -4.143,0.309 -7.326,0.309c0,0 0,0 0,0c-3.183,0 -5.524,-0.056 -7.326,-0.309c0,0 -0.001,0 -0.002,0c-0.039,-0.006 -0.078,-0.011 -0.116,-0.017Z"
+          />
+          <Path
+            fill={color}
+            d="M11.722,10.034c-0.808,-0.186 -1.612,0.319 -1.798,1.126c-0.045,0.195 -0.049,0.39 -0.019,0.576c0.05,0.307 -0.056,0.664 -0.323,0.825c-0.107,0.065 -0.212,0.133 -0.316,0.204c-0.465,0.319 -1.106,0.201 -1.256,-0.343c-0.149,-0.54 -0.169,-1.125 -0.035,-1.71c0.433,-1.884 2.311,-3.06 4.194,-2.627c1.884,0.432 3.061,2.31 2.628,4.194c-0.055,0.241 -0.134,0.471 -0.234,0.687c-0.268,0.58 -1.007,0.479 -1.431,0.001c-0.052,-0.06 -0.107,-0.118 -0.164,-0.174c-0.208,-0.207 -0.25,-0.546 -0.158,-0.825c0.015,-0.044 0.027,-0.09 0.038,-0.136c0.185,-0.808 -0.319,-1.613 -1.126,-1.798Zm1.5,7.742c0.407,0.341 1.013,0.286 1.352,-0.124c0.251,-0.296 0.501,-0.6 0.752,-0.905l0.001,0c1.088,-1.32 2.208,-2.677 3.551,-3.705c1.424,1.09 2.563,2.484 3.694,3.868l0.001,0.001c0.203,0.248 0.405,0.495 0.609,0.741c0.339,0.41 0.945,0.465 1.352,0.124c0.403,-0.338 0.457,-0.957 0.122,-1.361c-0.216,-0.26 -0.432,-0.524 -0.651,-0.791l-0.007,-0.009c-1.239,-1.514 -2.533,-3.095 -4.108,-4.221c-0.299,-0.211 -0.637,-0.394 -1.012,-0.394c-0.375,0 -0.713,0.183 -1.012,0.394c-1.581,1.13 -2.909,2.754 -4.163,4.287l0,0c-0.203,0.248 -0.405,0.494 -0.604,0.735c-0.34,0.41 -0.285,1.018 0.123,1.36Zm-0.421,-2.606c0.275,-0.312 0.271,-0.778 -0.024,-1.072c-0.231,-0.23 -0.483,-0.464 -0.763,-0.704c-0.299,-0.211 -0.637,-0.394 -1.012,-0.394c-0.375,0 -0.728,0.171 -1.012,0.394c-1.441,1.135 -1.99,2.084 -2.767,3.022c-0.34,0.41 -0.285,1.018 0.123,1.36c0.407,0.341 1.013,0.286 1.352,-0.124c0.802,-1.152 1.292,-1.652 2.304,-2.61c0.089,0.084 0.173,0.165 0.254,0.242c0.42,0.401 1.161,0.321 1.545,-0.114Z"
+          />
+        </React.Fragment>
+      );
+    case 'photo-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M28,16c0,11 -1,12 -12,12c-11,0 -12,-1 -12,-12c0,-11 1.169,-12 12,-12c10.831,0 12,1 12,12Zm-18.076,-3.84c0.186,-0.807 0.99,-1.311 1.798,-1.126c0.807,0.186 1.311,0.991 1.126,1.798c-0.011,0.047 -0.023,0.092 -0.038,0.137c-0.092,0.278 -0.05,0.617 0.158,0.824c0.057,0.056 0.112,0.114 0.164,0.174c0.424,0.479 1.163,0.579 1.431,-0.001c0.1,-0.216 0.179,-0.445 0.234,-0.686c0.433,-1.884 -0.744,-3.762 -2.628,-4.195c-1.883,-0.433 -3.761,0.744 -4.194,2.628c-0.134,0.585 -0.114,1.169 0.035,1.71c0.15,0.544 0.791,0.662 1.256,0.343c0.104,-0.071 0.209,-0.14 0.316,-0.205c0.267,-0.16 0.373,-0.517 0.323,-0.824c-0.03,-0.186 -0.026,-0.381 0.019,-0.577Zm3.298,6.616c0.407,0.342 1.013,0.286 1.352,-0.123l0.027,-0.033c0.01,-0.01 0.019,-0.021 0.028,-0.032c0.231,-0.274 0.461,-0.554 0.693,-0.835l0.005,-0.005l0,-0.001c1.088,-1.319 2.208,-2.677 3.551,-3.704c1.424,1.09 2.563,2.483 3.695,3.868l0.005,0.006c0.201,0.246 0.402,0.492 0.604,0.736c0.339,0.409 0.945,0.465 1.352,0.123c0.403,-0.337 0.457,-0.956 0.122,-1.361c-0.218,-0.262 -0.437,-0.529 -0.657,-0.799l0,0l-0.001,0c-1.239,-1.515 -2.533,-3.096 -4.108,-4.221c-0.299,-0.211 -0.637,-0.395 -1.012,-0.395c-0.375,0 -0.713,0.184 -1.012,0.395c-1.484,1.06 -2.746,2.557 -3.932,4.004c-0.4,-0.514 -0.753,-0.918 -1.132,-1.274c-0.008,-0.009 -0.017,-0.018 -0.025,-0.026c-0.231,-0.23 -0.483,-0.465 -0.763,-0.704c-0.289,-0.204 -0.615,-0.383 -0.974,-0.394c-0.031,-0.002 -0.061,-0.001 -0.091,0c-0.354,0.017 -0.674,0.193 -0.959,0.394c-1.292,1.302 -1.99,2.083 -2.767,3.021c-0.34,0.41 -0.285,1.019 0.123,1.36c0.407,0.342 1.013,0.286 1.352,-0.123c0.776,-1.116 1.261,-1.62 2.208,-2.52c0.711,0.503 1.13,1.028 2.062,2.313c0.057,0.124 0.142,0.237 0.254,0.33Z"
+          />
+        </React.Fragment>
+      );
+    case 'pin':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M7.407,15.978c-0.39,-0.39 -0.39,-1.024 0,-1.414l5.657,-5.657c0.39,-0.39 1.024,-0.39 1.414,0c0.391,0.391 0.391,1.024 0,1.414l-5.657,5.657c-0.39,0.391 -1.023,0.391 -1.414,0Z"
+          />
+          <Path
+            fill={color}
+            d="M15.303,22.268c-0.452,0.317 -1.076,0.207 -1.393,-0.245l-4.692,-6.702c-0.317,-0.452 -0.207,-1.076 0.245,-1.392c0.453,-0.317 1.076,-0.207 1.393,0.245l4.693,6.702c0.317,0.452 0.207,1.076 -0.246,1.392Z"
+          />
+          <Path
+            fill={color}
+            d="M20.891,16.887c0.317,-0.452 0.207,-1.076 -0.245,-1.393l-6.996,-4.898c-0.453,-0.317 -1.076,-0.207 -1.393,0.245c-0.317,0.453 -0.207,1.076 0.246,1.393l6.996,4.899c0.452,0.317 1.076,0.207 1.392,-0.246Z"
+          />
+          <Path
+            fill={color}
+            d="M13.771,23.756c-0.39,-0.39 -0.39,-1.024 0,-1.414l7.071,-7.071c0.391,-0.391 1.024,-0.391 1.414,0c0.391,0.39 0.391,1.024 0,1.414l-7.071,7.071c-0.39,0.391 -1.023,0.391 -1.414,0Z"
+          />
+          <Path
+            fill={color}
+            d="M18.721,21.635l1.414,-1.414l3.536,3.535c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.414,0l-3.536,-3.536Z"
+          />
+        </React.Fragment>
+      );
+    case 'pin-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M7.993,14.15c-0.391,0.39 -0.391,1.023 0,1.414c0.39,0.39 1.024,0.39 1.414,0l0.504,-0.504l4.586,6.549c0.024,0.035 0.051,0.069 0.079,0.1l-0.219,0.219c-0.391,0.39 -0.391,1.024 0,1.414c0.39,0.391 1.024,0.391 1.414,0l7.071,-7.071c0.391,-0.39 0.391,-1.024 0,-1.414c-0.39,-0.391 -1.024,-0.391 -1.414,0l-0.212,0.212l-6.654,-4.66l0.502,-0.502c0.39,-0.39 0.39,-1.024 0,-1.414c-0.391,-0.391 -1.024,-0.391 -1.414,0l-5.657,5.657Z"
+          />
+          <Path
+            fill={color}
+            d="M19.307,21.221l1.414,-1.414l3.536,3.535c0.39,0.391 0.39,1.024 0,1.415c-0.391,0.39 -1.024,0.39 -1.414,0l-3.536,-3.536Z"
+          />
+        </React.Fragment>
+      );
+    case 'plus':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,6c5.1,0 7.247,0.575 8.336,1.664c1.089,1.089 1.664,3.236 1.664,8.336c0,5.1 -0.575,7.247 -1.664,8.336c-1.089,1.089 -3.236,1.664 -8.336,1.664c-5.1,0 -7.247,-0.575 -8.336,-1.664c-1.089,-1.089 -1.664,-3.236 -1.664,-8.336c0,-5.1 0.575,-7.247 1.664,-8.336c1.089,-1.089 3.236,-1.664 8.336,-1.664Zm0,-2c10,0 12,2 12,12c0,10 -2,12 -12,12c-10,0 -12,-2 -12,-12c0,-10 2,-12 12,-12Zm-1,8c0,-0.552 0.448,-1 1,-1c0.552,0 1,0.448 1,1l0,3l3,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-3,0l0,3c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1l0,-3l-3,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l3,0l0,-3Z"
+          />
+        </React.Fragment>
+      );
+    case 'plus-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,4c10,0 12,2 12,12c0,10 -2,12 -12,12c-10,0 -12,-2 -12,-12c0,-10 2,-12 12,-12Zm-1,8c0,-0.552 0.448,-1 1,-1c0.552,0 1,0.448 1,1l0,3l3,0c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1l-3,0l0,3c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1l0,-3l-3,0c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1l3,0l0,-3Z"
+          />
+        </React.Fragment>
+      );
+    case 'post':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M26.957,4.886c-0.39,-0.391 -1.024,-0.391 -1.414,0l-10.896,10.896c-0.593,0.593 -1.07,1.291 -1.407,2.058l-0.003,0.006c-0.307,0.7 0.403,1.413 1.104,1.11c0.777,-0.337 1.484,-0.817 2.083,-1.416l10.886,-10.887c0.391,-0.39 0.391,-1.023 0,-1.414l-0.353,-0.353Zm-8.039,3.245c0.311,0.032 0.622,-0.071 0.843,-0.292l0.737,-0.737c0.274,-0.274 0.145,-0.736 -0.236,-0.804c-1.184,-0.21 -2.592,-0.298 -4.262,-0.298c-8,0 -10,2 -10,10c0,8 2,10 10,10c8,0 10,-2 10,-10c0,-1.507 -0.071,-2.801 -0.24,-3.909c-0.059,-0.39 -0.53,-0.529 -0.808,-0.251l-0.757,0.757c-0.215,0.215 -0.319,0.517 -0.293,0.821c0.064,0.734 0.098,1.587 0.098,2.582c0,4.015 -0.55,5.722 -1.414,6.586c-0.864,0.864 -2.572,1.414 -6.586,1.414c-4.014,0 -5.722,-0.55 -6.586,-1.414c-0.864,-0.864 -1.414,-2.571 -1.414,-6.586c0,-4.014 0.55,-5.721 1.414,-6.585c0.864,-0.864 2.572,-1.415 6.586,-1.415c1.151,0 2.112,0.046 2.918,0.131Z"
+          />
+        </React.Fragment>
+      );
+    default:
+    case 'post-cancel':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M26,16.019c0,8 -2,10 -10,10c-8,0 -10,-2 -10,-10c0,-8 2,-10 10,-10c8,0 10,2 10,10Zm-8.586,-2.828c0.391,-0.39 1.024,-0.39 1.414,0c0.391,0.391 0.391,1.024 0,1.414l-1.414,1.414l1.414,1.414c0.39,0.391 0.391,1.024 0,1.415c-0.39,0.39 -1.024,0.39 -1.414,-0.001l-1.414,-1.413l-1.414,1.414c-0.391,0.39 -1.024,0.39 -1.414,0c-0.391,-0.391 -0.391,-1.024 0,-1.414l1.414,-1.415l-1.414,-1.413c-0.39,-0.391 -0.391,-1.024 0,-1.415c0.39,-0.39 1.024,-0.39 1.414,0.001l1.414,1.413l1.414,-1.414Z"
+          />
+        </React.Fragment>
+      );
+    case 'post-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M26.957,4.843c-0.39,-0.391 -1.024,-0.391 -1.414,0l-10.896,10.896c-0.904,0.96 -1.173,2.243 -1.246,2.744c-0.017,0.115 0.073,0.211 0.189,0.2c0.487,-0.045 1.722,-0.25 2.834,-1.186l10.886,-10.887c0.391,-0.39 0.391,-1.023 0,-1.414l-0.353,-0.353Zm-9.18,14.129l-0.032,0.027l-0.033,0.028c-1.552,1.306 -3.249,1.584 -3.939,1.647c-1.415,0.131 -2.555,-1.095 -2.351,-2.482c0.091,-0.616 0.501,-2.413 1.753,-3.807l0.007,-0.008l0.009,-0.009l0.01,-0.011l0.01,-0.011l0.011,-0.011l0.011,-0.01l7.885,-7.885c-1.343,-0.346 -3.025,-0.483 -5.118,-0.483c-8,0 -10,2 -10,10c0,8 2,10 10,10c8,0 10,-2 10,-10c0,-1.931 -0.117,-3.514 -0.406,-4.802l-7.756,7.756l-0.03,0.03l-0.031,0.031Z"
+          />
+        </React.Fragment>
+      );
+    case 'private':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M19.196 6.238C18.44 6.041 17.479 5.999 16 6c-1.479-.001-2.44.041-3.195.238-.606.15-.826.343-.976.551-.208.291-.451.872-.613 2.111-.119.895-.178 1.972-.202 3.315C12.316 12.052 13.951 12 16 12s3.684.052 4.986.215c-.024-1.343-.083-2.42-.201-3.315-.162-1.239-.406-1.82-.614-2.111-.15-.208-.37-.401-.976-.551zm3.797 6.403C22.894 4.897 21.803 4 16.001 4s-6.893.897-6.992 8.641c-2.604.885-3.008 2.911-3.008 7.359 0 7 1 8 10 8s10-1 10-8c0-4.448-.404-6.474-3.008-7.359zm-5.992 8.092a2 2 0 1 0-2 0V22a1 1 0 0 0 2 0v-1.267z"
+          />
+        </React.Fragment>
+      );
+    case 'private-outline':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 13.1955 2.23785C 12.44 2.04071 11.4794 1.99933 10 2C 8.52065 1.99933 7.55997 2.04071 6.8045 2.23785C 6.1992 2.38824 5.97868 2.58063 5.82935 2.78922C 5.62134 3.07977 5.37756 3.66086 5.21555 4.8999C 5.09674 5.79526 5.03786 6.87158 5.01379 8.21457C 6.31618 8.05185 7.9507 8 10 8C 12.0493 8 13.6838 8.05185 14.9862 8.21457C 14.9621 6.87158 14.9033 5.79526 14.7845 4.8999C 14.6225 3.66086 14.3787 3.07977 14.1707 2.78922C 14.0213 2.58066 13.8008 2.38824 13.1955 2.23785ZM 16.992 8.64078C 16.893 0.897217 15.8017 0 10 0C 4.19827 0 3.107 0.897217 3.00796 8.64078C 0.403839 9.52625 0 11.5516 0 16C 0 23 1 24 10 24C 19 24 20 23 20 16C 20 11.5516 19.5962 9.52625 16.992 8.64078ZM 2.25122 12.2217C 2.04568 13.1338 1.99948 14.2954 2 16C 1.99948 17.7046 2.04568 18.8662 2.25122 19.7783C 2.42407 20.5734 2.66103 20.8885 2.89148 21.0771C 3.17363 21.3079 3.72681 21.5756 4.93619 21.7563C 6.18376 21.946 7.78571 22.0003 10 22C 12.2143 22.0003 13.8162 21.946 15.0638 21.7563C 16.2732 21.5756 16.8264 21.308 17.1085 21.0771C 17.339 20.8885 17.5759 20.5734 17.7488 19.7783C 17.9543 18.8662 18.0005 17.7046 18 16C 18.0005 14.2954 17.9543 13.1338 17.7488 12.2217C 17.5759 11.4266 17.339 11.1115 17.1085 10.9229C 16.8264 10.692 16.2732 10.4244 15.0638 10.2437C 13.8162 10.054 12.2143 9.99969 10 10C 7.78571 9.99969 6.18376 10.054 4.93619 10.2437C 3.72681 10.4244 3.17363 10.6921 2.89148 10.9229C 2.66103 11.1115 2.42407 11.4266 2.25122 12.2217ZM 11 16.7325C 11.5978 16.3867 12 15.7403 12 15C 12 13.8954 11.1046 13 10 13C 8.89543 13 8 13.8954 8 15C 8 15.7403 8.40221 16.3867 9 16.7325L 9 18C 9 18.5523 9.44772 19 10 19C 10.5523 19 11 18.5523 11 18L 11 16.7325Z"
+          />
+        </React.Fragment>
+      );
+    case 'private-unlocked':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16 5c1.479-.001 2.44.041 3.195.238.606.15.826.343.976.551.208.291.452.872.614 2.111.146 1.108.202 2.492.213 4.316C19.693 12.052 18.055 12 16 12c-9 0-10 1-10 8s1 8 10 8 10-1 10-8c0-4.444-.403-6.47-3-7.357C22.976 3.973 22.043 3 16 3c-5.168 0-6.599.712-6.919 6.342-.036.626.582 1.092 1.199.982a.957.957 0 0 0 .796-.88c.033-.571.078-1.082.14-1.544.162-1.239.405-1.82.613-2.111.15-.208.37-.401.976-.551C13.56 5.041 14.521 4.999 16 5zM8.251 16.222C8.046 17.134 7.999 18.295 8 20c-.001 1.705.046 2.866.251 3.778.173.795.41 1.111.64 1.299.283.231.836.499 2.045.679 1.248.19 2.85.244 5.064.244s3.816-.054 5.064-.244c1.209-.18 1.762-.448 2.044-.679.231-.188.468-.504.641-1.299.205-.912.251-2.073.251-3.778s-.046-2.866-.251-3.778c-.173-.795-.41-1.11-.641-1.299-.282-.231-.835-.499-2.044-.679C19.816 14.054 18.214 14 16 14s-3.816.054-5.064.244c-1.209.18-1.762.448-2.045.679-.23.189-.467.504-.64 1.299zM17 20.733a2 2 0 1 0-2 0V22a1 1 0 0 0 2 0v-1.267z"
+          />
+        </React.Fragment>
+      );
+    case 'product-hunt':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M15.986,27.968c11,0 12,-1 12,-12c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,11 1,12 12,12Zm-1.84,-11.5l3.06,0c0.895,0 1.62,-0.739 1.62,-1.65c0,-0.911 -0.725,-1.65 -1.62,-1.65l-3.06,0l0,3.3Zm-2.16,-5.5l5.22,0c2.088,0 3.78,1.724 3.78,3.85c0,2.126 -1.692,3.85 -3.78,3.85l-3.06,0l0,3.3l-2.16,0l0,-11Z"
+          />
+        </React.Fragment>
+      );
+    case 'profile':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M25.698,22.196c0.248,-1.511 0.302,-3.475 0.302,-6.196c0,-2.721 -0.053,-4.685 -0.302,-6.196c-0.235,-1.45 -0.6,-2.127 -0.987,-2.515c-0.388,-0.387 -1.065,-0.752 -2.515,-0.987c-1.511,-0.249 -3.475,-0.302 -6.196,-0.302c-2.721,0 -4.685,0.053 -6.196,0.302c-1.45,0.235 -2.127,0.6 -2.515,0.987c-0.387,0.388 -0.752,1.065 -0.987,2.515c-0.249,1.511 -0.302,3.475 -0.302,6.196c0,2.721 0.053,4.685 0.302,6.196c0.235,1.45 0.6,2.127 0.987,2.515c0.388,0.387 1.065,0.752 2.515,0.987c1.511,0.249 3.475,0.302 6.196,0.302c2.721,0 4.685,-0.053 6.196,-0.302c1.45,-0.235 2.127,-0.6 2.515,-0.987c0.387,-0.388 0.752,-1.065 0.987,-2.515Zm-9.698,5.804c11,0 12,-1 12,-12c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,11 1,12 12,12Z"
+          />
+          <Path
+            fill={color}
+            d="M19,14c0,1.683 -0.271,2.241 -0.469,2.456c-0.163,0.176 -0.68,0.544 -2.531,0.544c-1.85,0 -2.367,-0.368 -2.53,-0.544c-0.198,-0.215 -0.47,-0.773 -0.47,-2.456c0,-1.657 1.343,-3 3,-3c1.657,0 3,1.343 3,3Zm0.835,3.977c0.879,-0.804 1.165,-2.104 1.165,-3.977c0,-2.761 -2.238,-5 -5,-5c-2.761,0 -5,2.239 -5,5c0,1.873 0.287,3.173 1.166,3.977c-1.665,0.911 -2.97,2.396 -3.649,4.189c-0.124,0.328 -0.154,0.708 0.051,0.993c0.569,0.789 1.674,-0.111 2.13,-0.97c1.008,-1.897 3.004,-3.189 5.302,-3.189c2.298,0 4.295,1.292 5.303,3.189c0.456,0.859 1.561,1.759 2.129,0.97c0.205,-0.285 0.176,-0.665 0.052,-0.993c-0.68,-1.793 -1.985,-3.278 -3.649,-4.189Z"
+          />
+        </React.Fragment>
+      );
+    case 'profile-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M28,15.972c0,11 -1,12 -12,12c-11,0 -12,-1 -12,-12c0,-11 1,-12 12,-12c11,0 12,1 12,12Zm-9.47,0.456c0.199,-0.215 0.47,-0.773 0.47,-2.456c0,-1.657 -1.343,-3 -3,-3c-1.657,0 -3,1.343 -3,3c0,1.683 0.271,2.241 0.47,2.456c0.162,0.176 0.679,0.544 2.53,0.544c1.851,0 2.368,-0.368 2.53,-0.544Zm2.47,-2.456c0,1.873 -0.286,3.173 -1.165,3.977c1.664,0.911 2.969,2.396 3.648,4.189c0.125,0.328 0.154,0.709 -0.051,0.993c-0.568,0.789 -1.674,-0.111 -2.13,-0.97c-1.008,-1.897 -3.004,-3.189 -5.302,-3.189c-2.298,0 -4.295,1.292 -5.302,3.189c-0.456,0.859 -1.562,1.759 -2.13,0.97c-0.205,-0.284 -0.176,-0.665 -0.052,-0.993c0.68,-1.793 1.985,-3.278 3.649,-4.189c-0.879,-0.804 -1.165,-2.104 -1.165,-3.977c0,-2.761 2.239,-5 5,-5c2.761,0 5,2.239 5,5Z"
+          />
+        </React.Fragment>
+      );
+    case 'quote':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M7.222,15.218c0.257,-1.016 0.616,-1.893 1.085,-2.62c1.043,-1.616 2.704,-2.605 5.41,-2.605c0.552,0 1,-0.447 1,-1c0,-0.552 -0.448,-1 -1,-1c-3.294,0 -5.633,1.261 -7.091,3.521c-1.405,2.179 -1.909,5.161 -1.909,8.479c0,4 1,5 5,5c4,0 5,-1 5,-5c0,-4 -1,-5 -5,-5c-1.014,0 -1.834,0.064 -2.495,0.225Z"
+          />
+          <Path
+            fill={color}
+            d="M19.222,15.218c0.257,-1.016 0.616,-1.893 1.085,-2.62c1.043,-1.616 2.704,-2.605 5.41,-2.605c0.552,0 1,-0.447 1,-1c0,-0.552 -0.448,-1 -1,-1c-3.294,0 -5.633,1.261 -7.091,3.521c-1.405,2.179 -1.909,5.161 -1.909,8.479c0,4 1,5 5,5c4,0 5,-1 5,-5c0,-4 -1,-5 -5,-5c-1.014,0 -1.834,0.064 -2.495,0.225Z"
+          />
+        </React.Fragment>
+      );
+    case 'rep':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M19.22,8.687c-0.353,-1.21 -2.087,-1.21 -2.44,0c-0.406,1.393 -0.814,2.183 -1.362,2.731c-0.548,0.548 -1.338,0.956 -2.731,1.362c-1.21,0.353 -1.21,2.087 0,2.44c1.393,0.406 2.183,0.814 2.731,1.362c0.548,0.548 0.956,1.338 1.362,2.731c0.353,1.21 2.087,1.21 2.44,0c0.406,-1.393 0.814,-2.183 1.362,-2.731c0.548,-0.548 1.338,-0.956 2.731,-1.362c1.21,-0.353 1.21,-2.087 0,-2.44c-1.393,-0.406 -2.183,-0.814 -2.731,-1.362c-0.548,-0.548 -0.956,-1.338 -1.362,-2.731Zm-2.388,4.145c0.482,-0.481 0.856,-1.041 1.168,-1.688c0.312,0.647 0.686,1.207 1.168,1.688c0.482,0.482 1.041,0.856 1.688,1.168c-0.647,0.312 -1.206,0.686 -1.688,1.168c-0.482,0.482 -0.856,1.041 -1.168,1.688c-0.312,-0.647 -0.686,-1.206 -1.168,-1.688c-0.481,-0.482 -1.041,-0.856 -1.688,-1.168c0.647,-0.312 1.207,-0.686 1.688,-1.168Z"
+          />
+          <Path
+            fill={color}
+            d="M12.852,19.726c-0.26,0.408 -0.444,0.76 -0.553,1.089c-0.059,0.175 -0.095,0.344 -0.11,0.511c-0.011,0.116 -0.011,0.232 0,0.348c0.015,0.167 0.052,0.336 0.11,0.513c0.109,0.328 0.293,0.679 0.553,1.087c0.029,0.046 0.058,0.092 0.089,0.138c0.215,0.327 -0.201,0.744 -0.526,0.529c-0.047,-0.031 -0.093,-0.061 -0.138,-0.09c-0.407,-0.261 -0.758,-0.446 -1.085,-0.555c-0.175,-0.059 -0.343,-0.095 -0.509,-0.11c-0.115,-0.011 -0.23,-0.011 -0.346,0c-0.166,0.015 -0.334,0.051 -0.509,0.11c-0.327,0.109 -0.678,0.294 -1.085,0.555c-0.045,0.029 -0.091,0.059 -0.137,0.09c-0.326,0.215 -0.741,-0.202 -0.526,-0.529c0.03,-0.047 0.06,-0.092 0.089,-0.138c0.256,-0.403 0.439,-0.751 0.547,-1.076c0.058,-0.174 0.095,-0.341 0.11,-0.506c0.011,-0.123 0.011,-0.244 -0.001,-0.367c-0.017,-0.165 -0.055,-0.332 -0.115,-0.506c-0.111,-0.323 -0.297,-0.669 -0.558,-1.07c-0.029,-0.045 -0.06,-0.09 -0.091,-0.136c-0.218,-0.325 0.192,-0.747 0.52,-0.535c0.047,0.03 0.093,0.06 0.139,0.088c0.415,0.26 0.771,0.443 1.103,0.55c0.177,0.057 0.347,0.092 0.516,0.105c0.109,0.009 0.217,0.009 0.326,-0.001c0.169,-0.015 0.339,-0.051 0.515,-0.11c0.331,-0.11 0.686,-0.297 1.097,-0.561c0.045,-0.029 0.091,-0.059 0.138,-0.09c0.325,-0.215 0.741,0.202 0.526,0.529c-0.018,0.027 -0.035,0.053 -0.052,0.079c-0.012,0.02 -0.025,0.039 -0.037,0.059Z"
+          />
+        </React.Fragment>
+      );
+    case 'reply':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 5.8902 8.70774C 6.31445 9.0613 6.3718 9.69185 6.01822 10.1161C 5.66464 10.5404 5.03409 10.5977 4.6098 10.2442L 4.60855 10.2431C 3 9.22597 2 8.22597 0.40863 6.27944C 0.19043 5.96819 0 5.61611 0 5.22594C 0 4.83579 0.19043 4.48371 0.40863 4.17246C 2 2.22597 3 1.22597 4.60944 0.20804C 5.0762 -0.0871717 5.66464 -0.0885144 6.01822 0.335756C 6.3718 0.760027 6.31445 1.3906 5.8902 1.74416L 5.72845 1.87903C 4.58041 2.83635 3.8909 3.41132 3.07352 4.22597L 16 4.22597C 18.7614 4.22597 21 6.46454 21 9.22597C 21 11.9874 18.7614 14.226 16 14.226L 12 14.226C 11.4477 14.226 11 13.7783 11 13.226C 11 12.6737 11.4477 12.226 12 12.226L 16 12.226C 17.6569 12.226 19 10.8828 19 9.22597C 19 7.56911 17.6569 6.22597 16 6.22597L 3.07495 6.22597C 3.87918 7.02567 4.56436 7.59874 5.64545 8.50295L 5.8902 8.70774Z"
+            transform="translate(6 9)"
+          />
+        </React.Fragment>
+      );
+    case 'sam':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 14 2C 14 2.74028 13.5978 3.38663 13 3.73244L 13 6L 11 6L 11 3.73244C 10.4022 3.38663 10 2.74028 10 2C 10 0.895432 10.8954 0 12 0C 13.1046 0 14 0.895432 14 2ZM 11 7.00577L 11 7L 13 7L 13 7.00577C 22.1347 7.11594 24 8.8546 24 16.5C 24 24.4167 22 26 12 26C 2 26 0 24.4167 0 16.5C 0 8.8546 1.8653 7.11594 11 7.00577ZM 5.5 17C 6.32843 17 7 16.3284 7 15.5C 7 14.6716 6.32843 14 5.5 14C 4.67157 14 4 14.6716 4 15.5C 4 16.3284 4.67157 17 5.5 17ZM 18.5 17C 19.3284 17 20 16.3284 20 15.5C 20 14.6716 19.3284 14 18.5 14C 17.6716 14 17 14.6716 17 15.5C 17 16.3284 17.6716 17 18.5 17ZM 12.0008 21C 13.9558 21 15.6185 19.7531 15.9905 18.0909C 16.176 17.262 13.597 17 12.0011 17C 10.4053 17 7.80522 17.1678 8.01158 18.0909C 8.38356 19.7531 10.0457 21 12.0008 21Z"
+            transform="translate(4 2)"
+          />
+        </React.Fragment>
+      );
+    case 'search':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M14,9c-2.761,0 -5,2.239 -5,5c0,2.761 2.239,5 5,5c1.387,0 2.641,-0.564 3.548,-1.477c0.899,-0.905 1.452,-2.148 1.452,-3.523c0,-2.761 -2.239,-5 -5,-5Zm-7,5c0,-3.866 3.134,-7 7,-7c3.866,0 7,3.134 7,7c0,1.257 -0.332,2.436 -0.912,3.456c-0.244,0.431 -0.212,0.981 0.137,1.332l3.984,4.007c0.389,0.391 0.388,1.025 -0.004,1.414c-0.392,0.389 -1.025,0.388 -1.414,-0.004l-3.97,-3.992c-0.352,-0.354 -0.908,-0.387 -1.341,-0.138c-1.025,0.588 -2.214,0.925 -3.48,0.925c-3.866,0 -7,-3.134 -7,-7Z"
+          />
+        </React.Fragment>
+      );
+    case 'send':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M9,8l0,5.287l7.054,1.495c0.628,0.133 0.966,0.665 0.989,1.164c0,0.009 0.001,0.022 0.001,0.034c0,0.004 0,0.008 0,0.012c0,0.005 0,0.009 0,0.013c0,0.012 -0.001,0.025 -0.001,0.034c-0.023,0.498 -0.361,1.031 -0.989,1.164l-7.054,1.495l0,5.627c0.02,0.001 0.049,-0.002 0.09,-0.017c4.386,-1.524 15.41,-7.808 15.41,-8.308c0,-0.5 -11.075,-6.473 -15.41,-7.984c-0.041,-0.014 -0.07,-0.017 -0.09,-0.016Zm17.555,7.992l0,-0.011l0,-0.003c-0.011,-0.698 -0.39,-1.289 -0.925,-1.685c-3.631,-2.688 -11.512,-6.642 -15.882,-8.165c-0.624,-0.218 -1.3,-0.158 -1.843,0.185c-0.554,0.349 -0.905,0.958 -0.905,1.667l0,5.712c0,0.708 0.496,1.32 1.189,1.467l3.931,0.833l-3.931,0.834c-0.693,0.146 -1.189,0.758 -1.189,1.467l0,6.052c0,0.709 0.351,1.317 0.905,1.667c0.543,0.343 1.219,0.403 1.843,0.185c4.371,-1.527 12.29,-5.85 15.881,-8.505c0.536,-0.397 0.915,-0.987 0.925,-1.685l0,-0.003l0.001,-0.012Z"
+          />
+        </React.Fragment>
+      );
+    case 'send-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16.044,15.012c-0.005,-0.104 -0.071,-0.205 -0.198,-0.232l-7.45,-1.579c-0.231,-0.049 -0.396,-0.253 -0.396,-0.489l0,-5.712c0,-0.73 0.698,-1.159 1.419,-0.908c4.295,1.497 12.081,5.408 15.616,8.025c0.34,0.252 0.515,0.573 0.52,0.895c-0.005,0.323 -0.18,0.644 -0.52,0.896c-3.535,2.617 -11.321,6.868 -15.616,8.365c-0.721,0.251 -1.419,-0.178 -1.419,-0.908l0,-6.052c0,-0.236 0.165,-0.44 0.396,-0.489l7.45,-1.579c0.127,-0.027 0.193,-0.129 0.198,-0.233Z"
+          />
+        </React.Fragment>
+      );
+    case 'settings':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M9.752,9.489l2.302,0.705c0.552,-0.373 1.161,-0.669 1.81,-0.873l0.885,-2.239c0.397,-0.054 0.803,-0.082 1.216,-0.082c0.413,0 0.819,0.028 1.217,0.082l0.884,2.239c0.649,0.204 1.258,0.5 1.81,0.873l2.302,-0.705c0.588,0.56 1.1,1.2 1.519,1.901l-1.2,2.088c0.238,0.616 0.391,1.274 0.446,1.959l1.987,1.361c-0.073,0.828 -0.257,1.624 -0.539,2.372l-2.383,0.364c-0.341,0.583 -0.764,1.111 -1.253,1.57l0.176,2.403c-0.673,0.446 -1.408,0.804 -2.191,1.057l-1.77,-1.636c-0.328,0.048 -0.664,0.072 -1.005,0.072c-0.341,0 -0.676,-0.024 -1.005,-0.072l-1.77,1.636c-0.782,-0.253 -1.518,-0.611 -2.19,-1.057l0.175,-2.403c-0.489,-0.459 -0.912,-0.987 -1.253,-1.57l-2.383,-0.364c-0.281,-0.748 -0.466,-1.544 -0.539,-2.372l1.987,-1.361c0.055,-0.685 0.208,-1.343 0.446,-1.959l-1.199,-2.088c0.419,-0.701 0.93,-1.341 1.518,-1.901Zm6.213,10.511c2.209,0 4,-1.791 4,-4c0,-2.209 -1.791,-4 -4,-4c-2.209,0 -4,1.791 -4,4c0,2.209 1.791,4 4,4Z"
+          />
+        </React.Fragment>
+      );
+    case 'share':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16.707,5.294c-0.39,-0.39 -1.024,-0.39 -1.414,0l-3,3c-0.391,0.391 -0.391,1.024 0,1.415c0.39,0.39 1.024,0.39 1.414,0l1.293,-1.293l0,9.585c0,0.553 0.448,1 1,1c0.552,0 1,-0.447 1,-1l0,-9.585l1.293,1.293c0.39,0.39 1.024,0.39 1.414,0c0.391,-0.391 0.391,-1.024 0,-1.415l-3,-3Zm-5.817,7.023c0.588,-0.114 1.11,0.36 1.11,0.959l0,0.426c0,0.265 -0.198,0.487 -0.459,0.531l-0.002,0c-1.042,0.17 -1.486,0.416 -1.706,0.612c-0.191,0.171 -0.42,0.489 -0.588,1.31l-0.007,0.03c-0.191,0.926 -0.238,2.106 -0.238,3.815l0,0.003c0,1.709 0.047,2.889 0.238,3.814l0.007,0.031c0.168,0.821 0.397,1.139 0.588,1.309c0.219,0.197 0.662,0.442 1.699,0.612l0.017,0.002c1.094,0.182 2.493,0.231 4.45,0.23l0.002,0c1.957,0.001 3.356,-0.048 4.45,-0.23l0.017,-0.002c1.037,-0.17 1.48,-0.415 1.699,-0.611c0.191,-0.171 0.42,-0.489 0.588,-1.31l0.007,-0.031c0.191,-0.925 0.238,-2.105 0.238,-3.814l0,-0.003c0,-1.709 -0.047,-2.889 -0.238,-3.815l-0.007,-0.03c-0.168,-0.821 -0.397,-1.139 -0.588,-1.31c-0.22,-0.196 -0.664,-0.442 -1.706,-0.612l-0.002,0c-0.262,-0.044 -0.459,-0.266 -0.459,-0.531l0,-0.426c0,-0.599 0.522,-1.073 1.11,-0.959c3.362,0.655 3.89,2.553 3.89,7.684c0,7.059 -1,8 -9,8c-8,0 -9,-0.941 -9,-8c0,-5.131 0.528,-7.029 3.89,-7.684Z"
+          />
+        </React.Fragment>
+      );
+    case 'slack':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 11.4524 22.9048C 20.9961 22.9048 22.9048 20.9961 22.9048 11.4524C 22.9048 1.90873 20.9961 -2.02849e-06 11.4524 0C 1.90872 -5.87002e-06 -6.92945e-06 1.90873 1.91115e-10 11.4524C -2.20542e-05 20.9961 1.90874 22.9048 11.4524 22.9048ZM 8.45242 3.95241C 9.28085 3.95241 9.9524 4.62398 9.9524 5.45241L 9.95241 6.95241L 12.9524 6.95241L 12.9524 5.45241C 12.9524 4.62398 13.624 3.9524 14.4524 3.95241C 15.2808 3.95241 15.9524 4.62398 15.9524 5.45241L 15.9524 6.9524L 17.4524 6.95241C 18.2808 6.95241 18.9524 7.62398 18.9524 8.45241C 18.9524 9.28083 18.2808 9.95241 17.4524 9.95241L 15.9524 9.9524L 15.9524 12.9524L 17.4524 12.9524C 18.2808 12.9524 18.9524 13.624 18.9524 14.4524C 18.9524 15.2808 18.2808 15.9524 17.4524 15.9524L 15.9524 15.9524L 15.9524 17.4524C 15.9524 18.2808 15.2808 18.9524 14.4524 18.9524C 13.624 18.9524 12.9524 18.2808 12.9524 17.4524L 12.9524 15.9524L 9.95242 15.9524L 9.9524 17.4524C 9.95241 18.2808 9.28083 18.9524 8.4524 18.9524C 7.62397 18.9524 6.95242 18.2808 6.95242 17.4524L 6.9524 15.9524L 5.45241 15.9524C 4.62398 15.9524 3.9524 15.2808 3.9524 14.4524C 3.95239 13.624 4.62398 12.9524 5.4524 12.9524L 6.9524 12.9524L 6.9524 9.95241L 5.4524 9.95241C 4.62397 9.95241 3.9524 9.28083 3.95239 8.4524C 3.95242 7.62398 4.62397 6.95241 5.4524 6.95241L 6.9524 6.95241L 6.95241 5.45241C 6.95241 4.62398 7.62399 3.95241 8.45242 3.95241ZM 12.9524 9.95241L 12.9524 12.9524L 9.95242 12.9524L 9.95242 9.95241L 12.9524 9.95241Z"
+            transform="matrix(0.951056 -0.309017 0.309017 0.951056 1.56912 8.6471)"
+          />
+        </React.Fragment>
+      );
+    case 'support':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 9 0.0236206C 9.62299 0.00744629 10.2887 0 11 0C 21.0833 0 22 1.5 22 8C 22 14.5 21.0833 16 11 16C 10.6595 16 10.3294 15.9982 10.0095 15.9947L 10.0082 15.9949C 10.0077 15.995 10.0071 15.9952 10.0067 15.9955L 5.55469 18.9636C 4.89014 19.4066 4 18.9302 4 18.1315L 4 15.4624C 4 15.4601 3.99835 15.4581 3.99609 15.4575C 1.01367 14.723 0.223999 13.1274 0.046051 10C 0.0114746 9.3927 0 8.72772 0 8C 0 1.95856 0.791901 0.236511 9 0.0236206ZM 2.47714 12.2372C 2.13568 11.5002 2 10.2927 2 8C 1.99951 6.41864 2.03903 5.33221 2.24951 4.4577C 2.41556 3.659 2.50861 3.43878 2.96548 3.12634C 3.3237 2.84076 3.99329 2.52826 5.34534 2.31049C 6.72906 2.08453 8.50272 2.00055 10.9492 2L 11 2C 13.4727 1.99945 15.2614 2.08295 16.6547 2.31049C 18.0067 2.52826 18.6763 2.84076 19.0345 3.12634C 19.4914 3.43878 19.5844 3.659 19.7505 4.4577C 19.961 5.33221 20.0005 6.41864 20 8C 20.0005 9.58136 19.961 10.6678 19.7505 11.5423C 19.5844 12.341 19.4914 12.5612 19.0345 12.8737C 18.6763 13.1592 18.0067 13.4717 16.6547 13.6895C 15.2614 13.9171 13.4727 14.0005 11 14C 10.6648 14 10.3458 13.9983 10.0316 13.9948C 9.73151 14.014 9.15842 14.1841 8.89725 14.3315L 6 16.263L 6 15.4624C 6 14.4967 5.32776 13.7258 4.47443 13.5156C 3.08609 13.1736 2.70114 12.7207 2.47714 12.2372ZM 10.9824 5.88C 12.2809 4.59998 13.5794 4.91998 14.2287 5.56C 16.8257 8.12 11.7788 11.5 10.9824 11.5C 10.1859 11.5 5.13913 8.12 7.73615 5.56C 8.38538 4.91998 9.6839 4.59998 10.9824 5.88Z"
+          />
+        </React.Fragment>
+      );
+    case 'support-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 22 8.07648C 22.0002 14.5118 22.0002 16 11.5 16C 10.9835 16 10.49 15.9964 10.0184 15.9888L 10.0156 15.9896L 5.55469 18.9636C 4.89014 19.4066 4 18.9302 4 18.1315L 4 15.418C 4 15.4165 3.9993 15.4151 3.9982 15.4142C 3.99762 15.4137 3.99692 15.4133 3.99615 15.4131C 0.439423 14.5103 0 12.4014 0 8C 0 1.5 0.958313 0 11.5 0C 22.0002 0 22.0002 1.48822 22 7.92352L 22 8L 22 8.07648ZM 11 6C 12.2985 4.71997 13.5794 4.91998 14.2286 5.56C 16.8257 8.12 11.7788 11.5 10.9824 11.5C 10.1859 11.5 5.13913 8.12 7.73615 5.56C 8.38538 4.91998 9.70151 4.71997 11 6Z"
+            transform="translate(5 7)"
+          />
+        </React.Fragment>
+      );
+    case 'thread':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 3.58569 2.55591C 3.00964 2.69867 2.59576 2.83893 2.28473 3C 2.59576 3.16107 3.00964 3.30133 3.58569 3.44409C 4.96814 3.79199 6.84656 4.00153 9 4C 11.1534 4.00153 13.0319 3.79199 14.4143 3.44409C 14.9904 3.30133 15.4042 3.16107 15.7153 3C 15.4042 2.83893 14.9904 2.69867 14.4143 2.55591C 13.0319 2.20801 11.1534 1.99847 9 2C 6.84656 1.99847 4.96814 2.20801 3.58569 2.55591ZM 9 0C 6.73517 0.00152588 4.61359 0.239685 3.10059 0.615662C 2.32495 0.811035 1.60474 1.07886 1.11987 1.36066C 0.663269 1.63049 0 2.15204 0 3C 0 3.84796 0.663269 4.36951 1.11987 4.63934C 1.60474 4.92114 2.32495 5.18896 3.10059 5.38434C 4.61359 5.76031 6.73517 5.99847 9 6C 11.2648 5.99847 13.3864 5.76031 14.8994 5.38434C 15.675 5.18896 16.3953 4.92114 16.8801 4.63934C 17.3367 4.36951 18 3.84796 18 3C 18 2.15204 17.3367 1.63049 16.8801 1.36066C 16.3953 1.07886 15.675 0.811035 14.8994 0.615662C 13.3864 0.239685 11.2648 0.00152588 9 0ZM 3 15.6415L 3 6.38879C 4.56848 6.75916 6.74707 6.99695 8.99933 7L 9.00067 7C 11.2529 6.99695 13.4315 6.75916 15 6.38879L 15 12.5333C 15.6378 12.8946 16.2509 13.2064 16.884 13.3768C 17.7888 13.6309 18.7344 13.6111 19.8818 12.9099C 20.3531 12.6218 20.9686 12.7703 21.2566 13.2416C 21.5446 13.7128 21.3961 14.3283 20.9249 14.6163C 19.2665 15.6299 17.7411 15.6948 16.3434 15.3024C 15.8802 15.1682 15.4322 14.9863 15 14.7811L 15 15.6415L 15 17C 15 17.6904 12.3137 18.25 9 18.25C 5.68628 18.25 3 17.6904 3 17L 3 15.6415ZM 2 15.9562C 1.66284 16.0826 1.362 16.2199 1.11987 16.3607C 0.663269 16.6305 0 17.152 0 18C 0 18.848 0.663269 19.3695 1.11987 19.6393C 1.60474 19.9211 2.32495 20.189 3.10059 20.3843C 4.61359 20.7603 6.73517 20.9985 9 21C 11.2648 20.9985 13.3864 20.7603 14.8994 20.3843C 15.675 20.189 16.3953 19.9211 16.8801 19.6393C 17.3367 19.3695 18 18.848 18 18C 18 17.152 17.3367 16.6305 16.8801 16.3607C 16.638 16.2199 16.3372 16.0826 16 15.9562L 16 17C 16 17.4349 15.7839 17.7568 15.5916 17.9526C 15.4354 18.1039 15.1794 18.2783 14.9703 18.3837C 14.5935 18.5657 14.0343 18.7393 13.4466 18.8629C 12.3055 19.099 10.7033 19.2489 9 19.25C 7.29669 19.2489 5.69452 19.099 4.55341 18.8629C 3.9657 18.7393 3.40649 18.5657 3.02966 18.3837C 2.82062 18.2783 2.56458 18.1039 2.40845 17.9526C 2.21606 17.7568 2 17.4349 2 17L 2 15.9562Z"
+            transform="translate(6 6)"
+          />
+        </React.Fragment>
+      );
+    case 'twitter':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,28c11,0 12,-1 12,-12c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,11 1,12 12,12Zm5.825,-13.901c0,3.669 -2.889,7.901 -8.172,7.901l0,0c-1.622,0 -3.132,-0.46 -4.403,-1.248c0.225,0.026 0.454,0.039 0.685,0.039c1.346,0 2.585,-0.444 3.568,-1.189c-1.258,-0.022 -2.318,-0.825 -2.684,-1.928c0.175,0.032 0.355,0.05 0.54,0.05c0.262,0 0.516,-0.034 0.758,-0.098c-1.315,-0.255 -2.305,-1.377 -2.305,-2.722c0,-0.013 0,-0.024 0.001,-0.036c0.387,0.208 0.829,0.333 1.301,0.348c-0.772,-0.498 -1.279,-1.348 -1.279,-2.312c0,-0.509 0.143,-0.985 0.389,-1.396c1.417,1.681 3.534,2.786 5.921,2.902c-0.049,-0.204 -0.074,-0.416 -0.074,-0.633c0,-1.533 1.286,-2.777 2.872,-2.777c0.826,0 1.573,0.338 2.097,0.877c0.654,-0.124 1.269,-0.356 1.824,-0.674c-0.215,0.649 -0.67,1.192 -1.263,1.536c0.581,-0.067 1.134,-0.216 1.649,-0.437c-0.384,0.557 -0.872,1.046 -1.433,1.438c0.006,0.119 0.008,0.239 0.008,0.359Z"
+          />
+        </React.Fragment>
+      );
+    case 'up':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M21.934,6.364c-1.478,-0.284 -3.354,-0.365 -5.934,-0.364c-2.58,-0.001 -4.456,0.08 -5.934,0.364c-1.402,0.264 -2.137,0.66 -2.589,1.113c-0.453,0.452 -0.849,1.187 -1.113,2.589c-0.284,1.478 -0.365,3.354 -0.364,5.934c-0.001,2.58 0.08,4.456 0.364,5.934c0.264,1.402 0.66,2.137 1.113,2.589c0.452,0.453 1.187,0.849 2.589,1.113c1.478,0.284 3.354,0.364 5.934,0.364c2.58,0 4.456,-0.08 5.934,-0.364c1.402,-0.264 2.137,-0.66 2.589,-1.113c0.453,-0.452 0.849,-1.187 1.113,-2.589c0.284,-1.478 0.364,-3.354 0.364,-5.934c0,-2.58 -0.08,-4.456 -0.364,-5.934c-0.264,-1.402 -0.66,-2.137 -1.113,-2.589c-0.452,-0.453 -1.187,-0.849 -2.589,-1.113Zm6.066,9.636c0,-10.5 -1.5,-12 -12,-12c-10.5,0 -12,1.5 -12,12c0,10.5 1.5,12 12,12c10.5,0 12,-1.5 12,-12Z"
+          />
+          <Path
+            fill={color}
+            d="M10.11,19.018c0.424,0.354 1.055,0.297 1.408,-0.128c1.391,-1.636 2.76,-3.464 4.482,-4.774c1.749,1.331 3.085,3.1 4.482,4.774c0.353,0.425 0.984,0.482 1.408,0.128c0.42,-0.349 0.476,-0.99 0.127,-1.409c-1.505,-1.799 -3.031,-3.827 -4.964,-5.2c-0.311,-0.219 -0.663,-0.409 -1.053,-0.409c-0.39,0 -0.742,0.19 -1.053,0.409c-1.914,1.359 -3.471,3.41 -4.965,5.201c-0.354,0.424 -0.296,1.055 0.128,1.408Z"
+          />
+        </React.Fragment>
+      );
+    case 'up-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M16,4c10.5,0 12,1.5 12,12c0,10.5 -1.5,12 -12,12c-10.5,0 -12,-1.5 -12,-12c0,-10.5 1.5,-12 12,-12Zm-4.482,14.89c-0.353,0.424 -0.984,0.482 -1.408,0.128c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408l0.001,-0.001c0.216,-0.26 0.433,-0.524 0.652,-0.79c1.299,-1.581 2.658,-3.235 4.312,-4.41c0.311,-0.219 0.663,-0.409 1.053,-0.409c0.39,0 0.742,0.19 1.053,0.409c1.679,1.193 2.988,2.791 4.285,4.374c0.226,0.277 0.452,0.553 0.68,0.826c0.354,0.425 0.296,1.056 -0.128,1.409c-0.424,0.354 -1.055,0.296 -1.408,-0.128c-0.212,-0.254 -0.423,-0.511 -0.634,-0.768c-1.178,-1.434 -2.365,-2.878 -3.848,-4.006c-1.457,1.108 -2.673,2.584 -3.848,4.009c-0.212,0.257 -0.423,0.513 -0.634,0.765Z"
+          />
+        </React.Fragment>
+      );
+    case 'view':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 2.06943 7.14746C 2.04023 7.08008 2.02279 7.03156 2.0125 7C 2.02279 6.96844 2.04023 6.91992 2.06943 6.85254C 2.15181 6.65991 2.2622 6.45642 2.43916 6.18579C 2.80449 5.62134 3.30807 5.00348 4.01971 4.36969C 5.46653 3.06451 7.38721 1.96802 10 2C 12.6128 1.96802 14.5335 3.06451 15.9803 4.36969C 16.6919 5.00348 17.1955 5.62134 17.5608 6.18579C 17.7378 6.45642 17.8482 6.65991 17.9306 6.85254C 17.9598 6.91992 17.9772 6.96844 17.9875 7C 17.9772 7.03156 17.9598 7.08008 17.9306 7.14746C 17.8482 7.34009 17.7378 7.54358 17.5608 7.81421C 17.1955 8.37866 16.6919 8.99652 15.9803 9.63031C 14.5335 10.9355 12.6128 12.032 10 12C 7.38721 12.032 5.46653 10.9355 4.01971 9.63031C 3.30807 8.99652 2.80449 8.37866 2.43916 7.81421C 2.2622 7.54358 2.15181 7.34009 2.06943 7.14746ZM 10 0C 6.88552 0.0319824 4.3062 1.43549 2.68483 2.88031C 1.86238 3.62152 1.18983 4.44116 0.762543 5.09546C 0.543196 5.4342 0.353159 5.7854 0.234196 6.05762C 0.120506 6.32007 0 6.66284 0 7C 0 7.33716 0.120506 7.67993 0.234196 7.94238C 0.353159 8.2146 0.543196 8.5658 0.762543 8.90454C 1.18983 9.55884 1.86238 10.3785 2.68483 11.1197C 4.3062 12.5645 6.88552 13.968 10 14C 13.1145 13.968 15.6938 12.5645 17.3152 11.1197C 18.1376 10.3785 18.8102 9.55884 19.2375 8.90454C 19.4568 8.5658 19.6468 8.2146 19.7658 7.94238C 19.8795 7.67993 20 7.33716 20 7C 20 6.66284 19.8795 6.32007 19.7658 6.05762C 19.6468 5.7854 19.4568 5.4342 19.2375 5.09546C 18.8102 4.44116 18.1376 3.62152 17.3152 2.88031C 15.6938 1.43549 13.1145 0.0319824 10 0ZM 12.5 6.5C 12.6546 6.5 12.8051 6.48248 12.9496 6.44928C 12.9827 6.62781 13 6.81189 13 7C 13 8.65686 11.6569 10 10 10C 8.34315 10 7 8.65686 7 7C 7 5.34314 8.34315 4 10 4C 10.1881 4 10.3722 4.01727 10.5507 4.05042C 10.5175 4.19495 10.5 4.3454 10.5 4.5C 10.5 5.60455 11.3954 6.5 12.5 6.5Z"
+            transform="translate(6 9)"
+          />
+        </React.Fragment>
+      );
+    case 'view-fill':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 10 0C 6.82915 0 4.35131 1.38666 2.68483 2.88031C 1.85171 3.62708 1.20635 4.41302 0.762543 5.09546C 0.541014 5.43604 0.36179 5.76306 0.234196 6.05762C 0.120506 6.32007 0 6.66284 0 7C 0 7.33716 0.120506 7.67993 0.234196 7.94238C 0.36179 8.23694 0.541014 8.56396 0.762543 8.90454C 1.20635 9.58698 1.85171 10.3729 2.68483 11.1197C 4.35131 12.6133 6.82915 14 10 14C 13.1709 14 15.6487 12.6133 17.3152 11.1197C 18.1483 10.3729 18.7937 9.58698 19.2375 8.90454C 19.459 8.56396 19.6382 8.23694 19.7658 7.94238C 19.8795 7.67993 20 7.33716 20 7C 20 6.66284 19.8795 6.32007 19.7658 6.05762C 19.6382 5.76306 19.459 5.43604 19.2375 5.09546C 18.7937 4.41302 18.1483 3.62708 17.3152 2.88031C 15.6487 1.38666 13.1709 0 10 0ZM 12.5 6.5C 12.6546 6.5 12.8051 6.48248 12.9496 6.44928C 12.9827 6.62781 13 6.81189 13 7C 13 8.65686 11.6569 10 10 10C 8.34315 10 7 8.65686 7 7C 7 5.34314 8.34315 4 10 4C 10.1881 4 10.3722 4.01727 10.5507 4.05042C 10.5175 4.19495 10.5 4.3454 10.5 4.5C 10.5 5.60455 11.3954 6.5 12.5 6.5Z"
+            transform="translate(6 9)"
+          />
+        </React.Fragment>
+      );
+    case 'view-back':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M19.768,23.89c0.354,-0.424 0.296,-1.055 -0.128,-1.408c-1.645,-1.377 -5.465,-4.762 -6.774,-6.482c1.331,-1.749 5.1,-5.085 6.774,-6.482c0.424,-0.353 0.482,-0.984 0.128,-1.408c-0.353,-0.425 -0.984,-0.482 -1.409,-0.128c-1.839,1.532 -5.799,4.993 -7.2,6.964c-0.219,0.312 -0.409,0.664 -0.409,1.054c0,0.39 0.19,0.742 0.409,1.053c1.373,1.932 5.399,5.462 7.2,6.964l0.001,0.001c0.424,0.354 1.055,0.296 1.408,-0.128Z"
+          />
+        </React.Fragment>
+      );
+    case 'view-close':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M11.121,9.707c-0.39,-0.391 -1.024,-0.391 -1.414,0c-0.391,0.39 -0.391,1.024 0,1.414l4.95,4.95l-4.95,4.95c-0.391,0.39 -0.391,1.023 0,1.414c0.39,0.39 1.024,0.39 1.414,0l4.95,-4.95l4.95,4.95c0.39,0.39 1.023,0.39 1.414,0c0.39,-0.391 0.39,-1.024 0,-1.414l-4.95,-4.95l4.95,-4.95c0.39,-0.39 0.39,-1.024 0,-1.414c-0.391,-0.391 -1.024,-0.391 -1.414,0l-4.95,4.95l-4.95,-4.95Z"
+          />
+        </React.Fragment>
+      );
+    case 'view-close-small':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M 15.4142 3.41421C 16.1952 2.63317 16.1952 1.36681 15.4142 0.585777C 14.6332 -0.195259 13.3668 -0.195259 12.5858 0.585777L 8.00005 5.17156L 3.41423 0.585777C 2.63322 -0.195259 1.36687 -0.195259 0.585861 0.585777C -0.195206 1.36681 -0.195206 2.63317 0.585861 3.41421L 5.17162 7.99996L 0.5858 12.5858C -0.195267 13.3668 -0.195267 14.6332 0.5858 15.4142C 1.36681 16.1952 2.63316 16.1952 3.41417 15.4142L 8.00005 10.8284L 12.5859 15.4142C 13.3669 16.1952 14.6332 16.1952 15.4142 15.4142C 16.1953 14.6332 16.1953 13.3668 15.4142 12.5858L 10.8284 7.99996L 15.4142 3.41421Z"
+            transform="translate(8 8)"
+          />
+        </React.Fragment>
+      );
+    case 'view-forward':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"
+          />
+        </React.Fragment>
+      );
+    case 'view-reload':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M20.726,14.162c-0.776,-2.415 -3.04,-4.162 -5.713,-4.162c-3.314,0 -6,2.686 -6,6c0,3.314 2.686,6 6,6c2.063,0 3.883,-1.041 4.962,-2.626c0.333,-0.489 0.988,-0.707 1.497,-0.406c0.437,0.26 0.611,0.814 0.342,1.246c-1.411,2.273 -3.929,3.786 -6.801,3.786c-4.418,0 -8,-3.582 -8,-8c0,-4.418 3.582,-8 8,-8c3.53,0 6.525,2.286 7.588,5.458c0.278,-0.429 0.537,-0.848 0.736,-1.175c0.108,-0.178 0.196,-0.324 0.258,-0.428l0.042,-0.07l0.029,-0.05l0.018,-0.03l0.005,-0.008l0.001,-0.002c0.279,-0.476 0.892,-0.636 1.368,-0.357c0.477,0.279 0.636,0.892 0.357,1.369l-0.001,0.001l-0.001,0.002l-0.005,0.009l-0.02,0.034c-0.017,0.028 -0.043,0.072 -0.075,0.125l-0.062,0.105l-0.015,0.025l-0.084,0.139c-0.033,0.055 -0.069,0.114 -0.107,0.176c-0.222,0.365 -0.528,0.86 -0.849,1.35c-0.32,0.49 -0.676,1.006 -0.978,1.389c-0.157,0.198 -0.336,0.402 -0.482,0.54c-0.084,0.077 -0.217,0.181 -0.316,0.243c-0.103,0.062 -0.357,0.201 -0.695,0.178c-0.202,-0.013 -0.369,-0.08 -0.447,-0.113c-0.083,-0.035 -0.195,-0.091 -0.283,-0.141c-0.164,-0.092 -0.372,-0.224 -0.575,-0.363c-0.399,-0.272 -0.884,-0.633 -1.337,-0.98c-0.453,-0.348 -0.892,-0.697 -1.214,-0.954c-0.162,-0.13 -0.296,-0.239 -0.389,-0.314l-0.108,-0.088l-0.029,-0.024l-0.007,-0.006l-0.002,-0.001l-0.001,-0.001c-0.427,-0.35 -0.489,-0.98 -0.139,-1.407c0.35,-0.428 0.98,-0.489 1.407,-0.139l0.036,0.029l0.104,0.085c0.091,0.074 0.221,0.178 0.379,0.305c0.317,0.255 0.74,0.59 1.181,0.928c0.143,0.11 0.285,0.218 0.425,0.323Z"
+          />
+        </React.Fragment>
+      );
+    case 'welcome':
+      return (
+        <React.Fragment>
+          <Path
+            fill={color}
+            d="M24.518,7.453c0.279,0.487 0.058,1.095 -0.452,1.329l-0.103,0.047c-0.437,0.201 -0.953,0.013 -1.194,-0.404c-1.199,-2.078 -2.928,-3.659 -4.917,-4.673c-0.493,-0.251 -0.741,-0.834 -0.529,-1.346c0.21,-0.509 0.794,-0.755 1.288,-0.511c2.385,1.179 4.46,3.053 5.89,5.53l0.017,0.028Zm-2.539,1.428c0.215,0.371 0.046,0.837 -0.343,1.016l-0.568,0.26c-0.301,0.138 -0.655,0.011 -0.821,-0.276c-0.865,-1.499 -2.094,-2.656 -3.511,-3.425c-0.487,-0.265 -0.736,-0.846 -0.524,-1.358c0.21,-0.509 0.794,-0.756 1.283,-0.504c1.813,0.938 3.388,2.388 4.484,4.287Zm3.225,5.464c-0.13,0.288 -0.264,0.586 -0.336,0.89c-0.28,1.179 0,2.632 0,2.632c0,0 0.513,2.835 0,4.289c-0.855,2.423 -2.471,4.253 -5.113,4.253c-1.282,0 -2.765,-1.207 -3.956,-2.177l-0.001,0l0,0l-0.001,-0.001c-0.388,-0.316 -0.744,-0.606 -1.053,-0.821c-0.807,-0.563 -2.506,-1.542 -3.711,-2.237c-0.67,-0.386 -1.187,-0.684 -1.312,-0.773c-0.631,-0.448 -0.731,-1.306 -0.38,-1.867c0.351,-0.561 1.245,-0.91 1.929,-0.37c0.684,0.54 2.946,1.941 2.946,1.941c0,0 -3.64,-3.678 -4.283,-4.221c-0.644,-0.544 -0.727,-1.5 -0.212,-2.014c0.514,-0.514 1.324,-0.538 1.799,-0.151c0.475,0.387 4.364,4.149 4.364,4.149c0,0 -3.987,-5.03 -4.364,-5.495c-0.376,-0.465 -0.483,-1.281 0,-1.764c0.484,-0.484 1.325,-0.486 1.826,0c0.5,0.486 4.378,5.174 4.378,5.174c0,0 -2.669,-4.478 -2.98,-5.174c-0.31,-0.696 -0.03,-1.597 0.617,-1.84c0.648,-0.242 1.384,-0.054 1.802,0.53c0.115,0.159 0.433,0.744 0.85,1.511c1.112,2.044 2.928,5.382 3.453,5.382c0.477,0 0.511,-0.272 0.577,-0.805l0,0l0,-0.001c0.034,-0.274 0.077,-0.617 0.193,-1.027c0.307,-1.086 2.073,-2.919 3.071,-1.755c0.446,0.521 0.181,1.109 -0.103,1.742Zm0.802,12.595c-2.22,2.422 -3.372,2.045 -4.129,1.488c-1.62,-1.191 -1.406,-1.27 -0.507,-1.605c0.648,-0.24 1.65,-0.612 2.579,-1.626c0.843,-0.92 1.227,-1.771 1.486,-2.346c0.424,-0.939 0.516,-1.142 1.734,0.293c0.609,0.716 1.058,1.374 -1.163,3.796Zm-20.864,-8.729c-0.473,0.081 -0.791,0.535 -0.667,0.999c0.627,2.34 1.901,4.333 3.578,5.839c0.409,0.368 1.038,0.281 1.373,-0.157c0.336,-0.439 0.247,-1.066 -0.159,-1.443c-1.337,-1.242 -2.352,-2.863 -2.86,-4.756c-0.099,-0.37 -0.456,-0.619 -0.834,-0.555l-0.431,0.073Zm-2.709,0.46c0.526,-0.089 1.023,0.26 1.161,0.775c0.681,2.539 2.069,4.699 3.897,6.324c0.414,0.368 0.501,0.995 0.165,1.434c-0.335,0.438 -0.963,0.525 -1.379,0.163c-2.167,-1.887 -3.815,-4.418 -4.615,-7.403c-0.011,-0.041 -0.021,-0.082 -0.032,-0.124c-0.141,-0.542 0.23,-1.071 0.783,-1.165l0.02,-0.004Z"
+          />
+        </React.Fragment>
+      );
+    case 'slack-white':
+      return (
+        <React.Fragment>
+          <Path
+            d="M 11.4524 22.9048C 20.9961 22.9048 22.9048 20.9961 22.9048 11.4524C 22.9048 1.90873 20.9961 -2.02849e-06 11.4524 0C 1.90872 -5.87002e-06 -6.92945e-06 1.90873 1.91115e-10 11.4524C -2.20542e-05 20.9961 1.90874 22.9048 11.4524 22.9048ZM 8.45242 3.95241C 9.28085 3.95241 9.9524 4.62398 9.9524 5.45241L 9.95241 6.95241L 12.9524 6.95241L 12.9524 5.45241C 12.9524 4.62398 13.624 3.95241 14.4524 3.95241C 15.2808 3.95241 15.9524 4.62398 15.9524 5.45241L 15.9524 6.9524L 17.4524 6.95241C 18.2808 6.95241 18.9524 7.62398 18.9524 8.45241C 18.9524 9.28083 18.2808 9.95241 17.4524 9.95241L 15.9524 9.9524L 15.9524 12.9524L 17.4524 12.9524C 18.2808 12.9524 18.9524 13.624 18.9524 14.4524C 18.9524 15.2808 18.2808 15.9524 17.4524 15.9524L 15.9524 15.9524L 15.9524 17.4524C 15.9524 18.2808 15.2808 18.9524 14.4524 18.9524C 13.624 18.9524 12.9524 18.2808 12.9524 17.4524L 12.9524 15.9524L 9.95242 15.9524L 9.95241 17.4524C 9.95241 18.2808 9.28083 18.9524 8.4524 18.9524C 7.62397 18.9524 6.95242 18.2808 6.95242 17.4524L 6.9524 15.9524L 5.45241 15.9524C 4.62398 15.9524 3.9524 15.2808 3.9524 14.4524C 3.95239 13.624 4.62398 12.9524 5.4524 12.9524L 6.9524 12.9524L 6.9524 9.95241L 5.4524 9.95241C 4.62397 9.95241 3.9524 9.28083 3.95239 8.4524C 3.95242 7.62398 4.62397 6.95241 5.4524 6.95241L 6.9524 6.95241L 6.95241 5.45241C 6.95241 4.62398 7.62399 3.95241 8.45242 3.95241ZM 12.9524 9.95241L 12.9524 12.9524L 9.95242 12.9524L 9.95242 9.95241L 12.9524 9.95241Z"
+            transform="matrix(0.951056 -0.309017 0.309017 0.951056 1.56912 8.6471)"
+            fill="#16171A"
+          />
+        </React.Fragment>
+      );
+    case 'slack-colored':
+      return (
+        <React.Fragment>
+          <Path
+            d="M 4.17469 1.47953C 3.80074 0.356761 2.60017 -0.253868 1.47832 0.100691C 0.35647 0.474947 -0.253659 1.67651 0.100609 2.79928L 5.63113 19.8181C 6.00508 20.8621 7.14661 21.453 8.22909 21.1379C 9.37062 20.803 10.0595 19.6014 9.68553 18.4984C 9.68553 18.459 4.17469 1.47953 4.17469 1.47953Z"
+            transform="translate(15.3797 4)"
+            fill="#ECB32D"
+          />
+          <Path
+            d="M 4.17469 1.47953C 3.80074 0.356761 2.60017 -0.253869 1.47832 0.10069C 0.356468 0.474947 -0.25366 1.67651 0.100608 2.79928L 5.63113 19.8181C 6.00508 20.8621 7.14661 21.453 8.22909 21.1379C 9.37062 20.803 10.0595 19.6014 9.68553 18.4984C 9.68553 18.459 4.17469 1.47953 4.17469 1.47953Z"
+            transform="translate(6.81824 6.77738)"
+            fill="#63C1A0"
+          />
+          <Path
+            d="M 19.7466 4.17812C 20.8684 3.80386 21.4786 2.6023 21.1243 1.47953C 20.7503 0.35676 19.5498 -0.253869 18.4279 0.10069L 1.40337 5.65545C 0.360242 6.0297 -0.230204 7.17217 0.0847012 8.25555C 0.419288 9.39801 1.61986 10.0874 2.72203 9.71318C 2.76139 9.71318 19.7466 4.17812 19.7466 4.17812Z"
+            transform="translate(6.77509 15.3853)"
+            fill="#E01A59"
+          />
+          <Path
+            d="M 1.31866 5.39718C 2.42083 5.04262 3.85759 4.56987 5.39275 4.07743C 5.03848 2.97435 4.56612 1.53642 4.07408 -6.01127e-07L 6.00634e-07 1.31975L 1.31866 5.39718Z"
+            transform="translate(10.4025 18.9922)"
+            fill="#331433"
+          />
+          <Path
+            d="M 1.31867 5.39717C 2.85383 4.90473 4.29058 4.43199 5.39275 4.07743C 5.03848 2.97435 4.56612 1.53642 4.07408 0L -1.20127e-06 1.31975L 1.31867 5.39717Z"
+            transform="translate(18.9836 16.1951)"
+            fill="#D62027"
+          />
+          <Path
+            d="M 19.7269 4.17812C 20.8487 3.80386 21.4589 2.6023 21.1046 1.47953C 20.7307 0.356761 19.5301 -0.253868 18.4082 0.100691L 1.40337 5.63575C 0.360243 6.01001 -0.230205 7.15247 0.0847 8.23585C 0.419287 9.37831 1.61986 10.0677 2.72203 9.69348C 2.76139 9.69348 19.7269 4.17812 19.7269 4.17812Z"
+            transform="translate(4 6.81677)"
+            fill="#89D3DF"
+          />
+          <Path
+            d="M 1.31867 5.39717C 2.42083 5.04262 3.85759 4.56987 5.39275 4.07743C 4.90071 2.54101 4.42835 1.10307 4.07408 -3.00563e-07L -6.00634e-07 1.31975L 1.31867 5.39717Z"
+            transform="translate(7.62738 10.404)"
+            fill="#258B74"
+          />
+          <Path
+            d="M 1.31866 5.39717C 2.85383 4.90473 4.29058 4.43199 5.39275 4.07743C 4.90071 2.541 4.42835 1.10307 4.07408 0L -6.00634e-07 1.31975L 1.31866 5.39717Z"
+            transform="translate(16.1889 7.62658)"
+            fill="#819C3C"
+          />
+        </React.Fragment>
+      );
+  }
+};
diff --git a/mobile/components/Icon/index.js b/mobile/components/Icon/index.js
new file mode 100644
index 0000000000..cdd47c040f
--- /dev/null
+++ b/mobile/components/Icon/index.js
@@ -0,0 +1,39 @@
+// @flow
+import * as React from 'react';
+import TouchableOpacity from '../TouchableOpacity';
+import ConditionalWrap from '../ConditionalWrap';
+import { Svg } from 'expo';
+const { G } = Svg;
+import { withTheme } from 'styled-components/native';
+import type { GlyphTypes } from './types';
+import getPaths from './glyphs';
+
+type Props = {
+  onPress?: Function,
+  glyph: GlyphTypes,
+  size?: number,
+  color?: string,
+  theme: Object,
+};
+
+// prettier-ignore
+export default withTheme(({ size = 64, color = 'text.alt', glyph, theme, onPress }: Props) => {
+    const colorPaths = color.split('.')
+    const fill = theme[colorPaths[0]][colorPaths[1]]
+
+    return (
+      <ConditionalWrap
+        condition={!!onPress}
+        wrap={children => (
+          <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
+        )}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 32 32`}>
+          <G>
+            {getPaths(glyph, fill)}
+          </G>
+        </Svg>
+      </ConditionalWrap>
+    );
+  }
+);
diff --git a/mobile/components/Icon/types.js b/mobile/components/Icon/types.js
new file mode 100644
index 0000000000..91c20f4efb
--- /dev/null
+++ b/mobile/components/Icon/types.js
@@ -0,0 +1,96 @@
+// @flow
+export type GlyphTypes =
+  | 'analytics'
+  | 'attachment'
+  | 'bug'
+  | 'bug-fill'
+  | 'channel'
+  | 'channel-private'
+  | 'checkbox'
+  | 'checkmark'
+  | 'code'
+  | 'community'
+  | 'controls'
+  | 'delete'
+  | 'door-enter'
+  | 'door-leave'
+  | 'down'
+  | 'down-caret'
+  | 'down-fill'
+  | 'edit'
+  | 'email'
+  | 'email-fill'
+  | 'embed'
+  | 'emoji'
+  | 'enter'
+  | 'everything'
+  | 'explore'
+  | 'facebook'
+  | 'flag'
+  | 'flag-fill'
+  | 'freeze'
+  | 'friend'
+  | 'github'
+  | 'google'
+  | 'home'
+  | 'idea'
+  | 'inserter'
+  | 'like'
+  | 'like-fill'
+  | 'link'
+  | 'logo'
+  | 'markdown'
+  | 'member-add'
+  | 'member-remove'
+  | 'mention'
+  | 'menu'
+  | 'message'
+  | 'message-fill'
+  | 'message-new'
+  | 'minus'
+  | 'minus-fill'
+  | 'notification'
+  | 'notification-fill'
+  | 'payment'
+  | 'person'
+  | 'photo'
+  | 'photo-fill'
+  | 'pin'
+  | 'pin-fill'
+  | 'plus'
+  | 'plus-fill'
+  | 'post'
+  | 'post-cancel'
+  | 'post-fill'
+  | 'private'
+  | 'private-outline'
+  | 'private-unlocked'
+  | 'product-hunt'
+  | 'profile'
+  | 'profile-fill'
+  | 'quote'
+  | 'rep'
+  | 'reply'
+  | 'sam'
+  | 'search'
+  | 'send'
+  | 'send-fill'
+  | 'settings'
+  | 'share'
+  | 'slack'
+  | 'support'
+  | 'support-fill'
+  | 'thread'
+  | 'twitter'
+  | 'up'
+  | 'up-fill'
+  | 'view'
+  | 'view-fill'
+  | 'view-back'
+  | 'view-close'
+  | 'view-close-small'
+  | 'view-forward'
+  | 'view-reload'
+  | 'welcome'
+  | 'slack-white'
+  | 'slack-colored';

From ab75e506f3cc618330b4152dae98499b4e7b3132 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 17:27:16 -0700
Subject: [PATCH 13/42] Abstract Facepile component

---
 mobile/components/Facepile/index.js      | 92 ++++++++++++++++++++++++
 mobile/components/Facepile/style.js      | 39 ++++++++++
 mobile/components/ThreadItem/Facepile.js | 82 ---------------------
 mobile/components/ThreadItem/index.js    | 10 +--
 mobile/components/ThreadItem/style.js    | 37 +---------
 5 files changed, 139 insertions(+), 121 deletions(-)
 create mode 100644 mobile/components/Facepile/index.js
 create mode 100644 mobile/components/Facepile/style.js
 delete mode 100644 mobile/components/ThreadItem/Facepile.js

diff --git a/mobile/components/Facepile/index.js b/mobile/components/Facepile/index.js
new file mode 100644
index 0000000000..06621b3fb2
--- /dev/null
+++ b/mobile/components/Facepile/index.js
@@ -0,0 +1,92 @@
+// @flow
+import * as React from 'react';
+import Avatar from '../Avatar';
+import compose from 'recompose/compose';
+import { withNavigation } from 'react-navigation';
+import type { Navigation } from '../../utils/types';
+import type { UserInfoType } from '../../../shared/graphql/fragments/user/userInfo';
+import {
+  FacepileContainer,
+  StackedEmptyParticipantHead,
+  StackedAvatar,
+} from './style';
+
+const messageAvatars = (list, navigation, maxCount) => {
+  const avatarList = list.slice(0, maxCount);
+
+  return avatarList.map((participant, i) => {
+    if (!participant) {
+      return null;
+    }
+    return (
+      <StackedAvatar
+        key={participant.id}
+        src={participant.profilePhoto}
+        size={30}
+        onPress={() => navigation.navigate(`User`, { id: participant.id })}
+      />
+    );
+  });
+};
+
+type FacepileProps = {
+  users: Array<?UserInfoType>,
+  insertAtFirstPosition: UserInfoType,
+  maxCount: number,
+  navigation: Navigation,
+};
+
+const Facepile = ({
+  users,
+  insertAtFirstPosition,
+  maxCount = 5,
+  navigation,
+}: FacepileProps) => {
+  if (!users || users.length === 0) {
+    if (insertAtFirstPosition) {
+      return (
+        <FacepileContainer>
+          <Avatar
+            onPress={() =>
+              navigation.navigate(`User`, { id: insertAtFirstPosition.id })
+            }
+            src={insertAtFirstPosition.profilePhoto}
+            size={30}
+          />;
+        </FacepileContainer>
+      );
+    }
+
+    return null;
+  }
+
+  const participantCount = users.length;
+
+  const hasOverflow = participantCount > maxCount;
+  const overflowAmount =
+    participantCount - maxCount > 9 ? '···' : `+${participantCount - maxCount}`;
+
+  return (
+    <FacepileContainer>
+      {insertAtFirstPosition && (
+        <StackedAvatar
+          onPress={() =>
+            navigation.navigate(`User`, { id: insertAtFirstPosition.id })
+          }
+          src={insertAtFirstPosition.profilePhoto}
+          size={30}
+        />
+      )}
+
+      {messageAvatars(users, navigation, maxCount)}
+
+      {hasOverflow && (
+        <StackedEmptyParticipantHead size={30} adjustsFontSizeToFit>
+          {overflowAmount}
+        </StackedEmptyParticipantHead>
+      )}
+    </FacepileContainer>
+  );
+};
+
+export default compose(withNavigation)(Facepile);
diff --git a/mobile/components/Facepile/style.js b/mobile/components/Facepile/style.js
new file mode 100644
index 0000000000..f6ad2b9303
--- /dev/null
+++ b/mobile/components/Facepile/style.js
@@ -0,0 +1,39 @@
+// @flow
+import styled, { css } from 'styled-components/native';
+import Avatar from '../Avatar';
+
+const stackingStyles = css`
+  margin-right: -10px;
+  border-width: 2px;
+  border-color: #ffffff;
+`;
+
+export const StackedAvatar = styled(Avatar)`
+  ${stackingStyles};
+`;
+
+export const FacepileContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+`;
+
+export const EmptyParticipantHead = styled.Text`
+  color: ${props => props.theme.text.alt};
+  background: ${props => props.theme.bg.wash};
+  border-radius: ${props => (props.radius ? `${props.radius}px` : '15px')};
+  text-align: center;
+  text-align-vertical: center;
+  font-size: 12px;
+  font-weight: 600;
+  height: ${props => (props.size ? `${props.size}px` : '30px')};
+  width: ${props => (props.size ? `${props.size}px` : '30px')};
+  overflow: hidden;
+`;
+
+export const StackedEmptyParticipantHead = styled(EmptyParticipantHead)`
+  ${stackingStyles};
+`;
diff --git a/mobile/components/ThreadItem/Facepile.js b/mobile/components/ThreadItem/Facepile.js
deleted file mode 100644
index 02122cfd57..0000000000
--- a/mobile/components/ThreadItem/Facepile.js
+++ /dev/null
@@ -1,82 +0,0 @@
-// @flow
-import * as React from 'react';
-import Avatar from '../Avatar';
-import compose from 'recompose/compose';
-import { withNavigation } from 'react-navigation';
-import type { Navigation } from '../../utils/types';
-import type { UserInfoType } from '../../../shared/graphql/fragments/user/userInfo';
-import {
-  FacepileContainer,
-  StackedEmptyParticipantHead,
-  StackedAvatar,
-} from './style';
-const NUM_TO_DISPLAY = 5;
-
-const messageAvatars = (list, navigation) => {
-  const avatarList = list.slice(0, NUM_TO_DISPLAY);
-
-  return avatarList.map((participant, i) => {
-    if (!participant) {
-      return null;
-    }
-    return (
-      <StackedAvatar
-        key={participant.id}
-        src={participant.profilePhoto}
-        size={30}
-        onPress={() => navigation.navigate(`User`, { id: participant.id })}
-        key={participant.id}
-      />
-    );
-  });
-};
-
-type FacepileProps = {
-  participants: Array<?UserInfoType>,
-  creator: UserInfoType,
-  navigation: Navigation,
-};
-
-const Facepile = ({ participants, creator, navigation }: FacepileProps) => {
-  if (!participants || participants.length === 0) {
-    return (
-      <FacepileContainer>
-        <Avatar
-          onPress={() => navigation.navigate(`User`, { id: creator.id })}
-          src={creator.profilePhoto}
-          size={30}
-          radius={15}
-        />;
-      </FacepileContainer>
-    );
-  }
-
-  const participantList = participants.filter(
-    participant => participant && participant.id !== creator.id
-  );
-  const participantCount = participants.length;
-
-  const hasOverflow = participantCount > NUM_TO_DISPLAY;
-  const overflowAmount =
-    participantCount - NUM_TO_DISPLAY > 9
-      ? '···'
-      : `+${participantCount - NUM_TO_DISPLAY}`;
-
-  return (
-    <FacepileContainer>
-      <StackedAvatar
-        onPress={() => navigation.navigate(`User`, { id: creator.id })}
-        src={creator.profilePhoto}
-        size={30}
-      />
-      {messageAvatars(participantList, navigation)}
-      {hasOverflow && (
-        <StackedEmptyParticipantHead size={30} adjustsFontSizeToFit>
-          {overflowAmount}
-        </StackedEmptyParticipantHead>
-      )}
-    </FacepileContainer>
-  );
-};
-
-export default compose(withNavigation)(Facepile);
diff --git a/mobile/components/ThreadItem/index.js b/mobile/components/ThreadItem/index.js
index 3ab055db78..31611a9876 100644
--- a/mobile/components/ThreadItem/index.js
+++ b/mobile/components/ThreadItem/index.js
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import compose from 'recompose/compose';
-import Facepile from './Facepile';
+import Facepile from '../../components/Facepile';
 import { ListItem } from '../Lists';
 import ThreadCommunityInfo from './ThreadCommunityInfo';
 import {
@@ -47,9 +47,11 @@ class ThreadItem extends React.Component<Props> {
 
           <ThreadMeta>
             <Facepile
-              participants={thread.participants}
-              creator={thread.author.user}
-              navigation={this.props.navigation}
+              users={thread.participants.filter(
+                participant =>
+                  participant && participant.id !== thread.author.user.id
+              )}
+              insertAtFirstPosition={thread.author.user}
             />
 
             {thread.messageCount > 0 ? (
diff --git a/mobile/components/ThreadItem/style.js b/mobile/components/ThreadItem/style.js
index 45b0ca1e5d..a0cf210ff1 100644
--- a/mobile/components/ThreadItem/style.js
+++ b/mobile/components/ThreadItem/style.js
@@ -1,7 +1,6 @@
 // @flow
-import styled, { css } from 'styled-components/native';
-import { TouchableOpacity } from 'react-native';
-import Avatar from '../Avatar';
+import styled from 'styled-components/native';
+import TouchableOpacity from '../TouchableOpacity';
 
 export const InboxThreadContent = styled.View``;
 
@@ -41,24 +40,6 @@ export const MetaTextPill = styled(MetaText)`
   overflow: hidden;
 `;
 
-export const FacepileContainer = styled.View`
-  display: flex;
-  flex-direction: row;
-`;
-
-export const EmptyParticipantHead = styled.Text`
-  color: ${props => props.theme.text.alt};
-  background: ${props => props.theme.bg.wash};
-  border-radius: ${props => (props.radius ? `${props.radius}px` : '15px')};
-  text-align: center;
-  text-align-vertical: center;
-  font-size: 12px;
-  font-weight: 600;
-  height: ${props => (props.size ? `${props.size}px` : '30px')};
-  width: ${props => (props.size ? `${props.size}px` : '30px')};
-  overflow: hidden;
-`;
-
 export const ThreadCommunityInfoWrapper = styled.View`
   display: flex;
   flex-direction: row;
@@ -87,17 +68,3 @@ export const ThreadChannelName = styled.Text`
   color: ${props => props.theme.text.alt};
   font-size: 12px;
 `;
-
-const stackingStyles = css`
-  margin-right: -10px;
-  border-width: 2px;
-  border-color: #ffffff;
-`;
-
-export const StackedEmptyParticipantHead = styled(EmptyParticipantHead)`
-  ${stackingStyles};
-`;
-
-export const StackedAvatar = styled(Avatar)`
-  ${stackingStyles};
-`;

From 7632dea276b665c93a034f71036de618f64c6bff Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 17:27:36 -0700
Subject: [PATCH 14/42] Add notification list items and rendering functions

---
 mobile/components/Lists/ListItemWithIcon.js   |  30 ++
 .../components/Lists/NotificationListItem.js  | 288 ++++++++++++++++++
 mobile/components/Lists/index.js              |   8 +-
 mobile/components/Lists/style.js              |  19 +-
 mobile/utils/deduplicate-children.js          |  11 +
 mobile/views/Notifications/index.js           |  22 +-
 .../{renderUtils.js => parseNotification.js}  |   9 +-
 mobile/views/Notifications/renderer.js        | 279 -----------------
 8 files changed, 377 insertions(+), 289 deletions(-)
 create mode 100644 mobile/components/Lists/ListItemWithIcon.js
 create mode 100644 mobile/components/Lists/NotificationListItem.js
 create mode 100644 mobile/utils/deduplicate-children.js
 rename mobile/views/Notifications/{renderUtils.js => parseNotification.js} (84%)
 delete mode 100644 mobile/views/Notifications/renderer.js

diff --git a/mobile/components/Lists/ListItemWithIcon.js b/mobile/components/Lists/ListItemWithIcon.js
new file mode 100644
index 0000000000..f7cb00abdd
--- /dev/null
+++ b/mobile/components/Lists/ListItemWithIcon.js
@@ -0,0 +1,30 @@
+// @flow
+import * as React from 'react';
+import TouchableOpacity from '../TouchableOpacity';
+import { Row } from '../Flex';
+import { ListItemView, IconWrapper } from './style';
+
+type ListItemWithIconProps = {
+  onPress: Function,
+  children?: React.ChildrenArray<any>,
+  IconComponent: React.ComponentType<any>,
+};
+
+export class ListItemWithIcon extends React.Component<ListItemWithIconProps> {
+  render() {
+    const { onPress, children, IconComponent } = this.props;
+
+    return (
+      <ListItemView>
+        <TouchableOpacity onPress={onPress} activeOpacity={0.6}>
+          <Row>
+            <IconWrapper>
+              <IconComponent />
+            </IconWrapper>
+            {children}
+          </Row>
+        </TouchableOpacity>
+      </ListItemView>
+    );
+  }
+}
diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
new file mode 100644
index 0000000000..3d7948f140
--- /dev/null
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -0,0 +1,288 @@
+// @flow
+import * as React from 'react';
+import { ListItemWithIcon } from './ListItemWithIcon';
+import {
+  TextColumnContainer,
+  TextRowContainer,
+  TimestampTextContainer,
+  Timestamp,
+  Subtitle,
+  Link,
+  FacepileContainer,
+} from './style';
+import type { ParsedNotificationType } from '../../views/notifications/parseNotification';
+import type { Navigation } from '../../utils/types';
+import { timeDifferenceShort } from '../../../shared/time-difference';
+import Facepile from '../Facepile';
+import Icon from '../Icon';
+
+type Props = {
+  notification: ParsedNotificationType,
+  children?: React.ChildrenArray<any>,
+  currentUserId: string,
+  navigation: Navigation,
+};
+
+export class NotificationListItem extends React.Component<Props> {
+  renderActorsString = () => {
+    let actors = this.getActors();
+
+    if (!actors || actors.length === 0) return null;
+
+    const names = actors.map(actor => actor.payload.name).reverse();
+    actors = actors.map(actor => actor.payload).reverse();
+
+    if (actors.length === 1) {
+      return <React.Fragment>{names[0]}</React.Fragment>;
+    } else if (actors.length === 2) {
+      return (
+        <React.Fragment>
+          {names[0]} and {names[1]}
+        </React.Fragment>
+      );
+    } else if (actors.length === 3) {
+      return (
+        <React.Fragment>
+          {names[0]}, {names[1]} and {names[2]}
+        </React.Fragment>
+      );
+    } else if (actors.length >= 4) {
+      return (
+        <React.Fragment>
+          {names[0]} and {names.length - 1} others
+        </React.Fragment>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  getActors = () => {
+    return this.props.notification.actors.filter(
+      actor => actor.id !== this.props.currentUserId
+    );
+  };
+
+  threadToString = () => {
+    const { currentUserId, notification } = this.props;
+
+    const isAuthor = notification.context.payload.creatorId === currentUserId;
+    const str = isAuthor ? 'in your thread' : 'in';
+
+    return (
+      <React.Fragment>
+        <React.Fragment>{str} </React.Fragment>
+        <Link>{notification.context.payload.content.title}</Link>
+      </React.Fragment>
+    );
+  };
+
+  messageToString = () => {
+    return <Subtitle>your reply</Subtitle>;
+  };
+
+  communityToString = () => {
+    const { notification } = this.props;
+    return <Link>{notification.context.payload.name}</Link>;
+  };
+
+  channelToString = () => {
+    return <Link>{this.props.notification.context.payload.name}</Link>;
+  };
+
+  renderContextString = () => {
+    switch (this.props.notification.context.type) {
+      case 'SLATE':
+      case 'THREAD': {
+        return this.threadToString();
+      }
+      case 'MESSAGE': {
+        return this.messageToString();
+      }
+      case 'COMMUNITY': {
+        return this.communityToString();
+      }
+      case 'CHANNEL': {
+        return this.channelToString();
+      }
+      default: {
+        console.error('Invalid notification context type');
+        return '';
+      }
+    }
+  };
+
+  renderEventString = () => {
+    switch (this.props.notification.event) {
+      case 'MESSAGE_CREATED': {
+        return <React.Fragment> replied in </React.Fragment>;
+      }
+      case 'REACTION_CREATED': {
+        return <React.Fragment> liked </React.Fragment>;
+      }
+      case 'CHANNEL_CREATED': {
+        return <React.Fragment> created a channel </React.Fragment>;
+      }
+      case 'USER_JOINED_COMMUNITY': {
+        return <React.Fragment> joined </React.Fragment>;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_SENT': {
+        return <React.Fragment> requested to join </React.Fragment>;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
+        return <React.Fragment> approved your request to join </React.Fragment>;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
+        return <React.Fragment> requested to join </React.Fragment>;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
+        return <React.Fragment> approved your request to join </React.Fragment>;
+      }
+      case 'MENTION_MESSAGE':
+      case 'MENTION_THREAD': {
+        return <React.Fragment> mentioned you </React.Fragment>;
+      }
+      default: {
+        return '';
+      }
+    }
+  };
+
+  renderIcon = () => {
+    switch (this.props.notification.event) {
+      case 'MESSAGE_CREATED': {
+        return <Icon glyph={'message-fill'} size={32} color={'success.alt'} />;
+      }
+      case 'REACTION_CREATED': {
+        return <Icon glyph={'like-fill'} size={32} color={'warn.alt'} />;
+      }
+      case 'CHANNEL_CREATED': {
+        return <Icon glyph={'community'} size={32} color={'brand.alt'} />;
+      }
+      case 'USER_JOINED_COMMUNITY': {
+        return <Icon glyph={'member-add'} size={32} color={'space.default'} />;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_SENT': {
+        return <Icon glyph={'person'} size={32} color={'special.alt'} />;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
+        return (
+          <Icon glyph={'member-add'} size={32} color={'success.default'} />
+        );
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
+        return <Icon glyph={'person'} size={32} color={'special.alt'} />;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
+        return (
+          <Icon glyph={'member-add'} size={32} color={'success.default'} />
+        );
+      }
+      case 'MENTION_MESSAGE':
+      case 'MENTION_THREAD': {
+        return <Icon glyph={'mention'} size={32} color={'special.default'} />;
+      }
+      default: {
+        console.log('unsupported', this.props.notification.event);
+        return null;
+      }
+    }
+  };
+
+  getOnPress = (): Function => {
+    const { notification, navigation } = this.props;
+    let type;
+    switch (notification.event) {
+      case 'MESSAGE_CREATED': {
+        type = 'Thread';
+        break;
+      }
+      case 'REACTION_CREATED': {
+        type = 'Thread';
+        break;
+      }
+      case 'CHANNEL_CREATED': {
+        type = 'Channel';
+        break;
+      }
+      case 'USER_JOINED_COMMUNITY': {
+        type = 'Community';
+        break;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_SENT': {
+        type = 'Channel';
+        break;
+      }
+      case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
+        type = 'Channel';
+        break;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
+        type = 'Community';
+        break;
+      }
+      case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
+        type = 'Community';
+        break;
+      }
+      case 'MENTION_THREAD': {
+        type = 'Thread';
+        break;
+      }
+      case 'MENTION_MESSAGE': {
+        type = 'Thread';
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+
+    if (!type) return () => {};
+
+    return () => navigation.navigate(type, { id: notification.context.id });
+  };
+
+  facepileDataFromActors = () => {
+    return this.props.notification.actors
+      .filter(actor => actor.id !== this.props.currentUserId)
+      .map(actor => actor.payload);
+  };
+
+  renderTimestamp = () => {
+    const { notification } = this.props;
+    return timeDifferenceShort(
+      Date.now(),
+      new Date(notification.modifiedAt || notification.createdAt)
+    );
+  };
+
+  render() {
+    return (
+      <ListItemWithIcon
+        onPress={this.getOnPress()}
+        IconComponent={() => this.renderIcon()}
+      >
+        <TextColumnContainer>
+          <TextRowContainer>
+            <FacepileContainer>
+              <Facepile users={this.facepileDataFromActors()} maxCount={10} />
+            </FacepileContainer>
+
+            <TimestampTextContainer>
+              <Timestamp type={'body'} light>
+                {this.renderTimestamp()}
+              </Timestamp>
+            </TimestampTextContainer>
+          </TextRowContainer>
+
+          <Subtitle numberOfLines={3}>
+            {this.renderActorsString()}
+            {this.renderEventString()}
+            {this.renderContextString()}
+          </Subtitle>
+        </TextColumnContainer>
+      </ListItemWithIcon>
+    );
+  }
+}
diff --git a/mobile/components/Lists/index.js b/mobile/components/Lists/index.js
index 6a4a5a80b8..01dd9ff191 100644
--- a/mobile/components/Lists/index.js
+++ b/mobile/components/Lists/index.js
@@ -2,5 +2,11 @@
 import { ListItem } from './ListItem';
 import { ListItemWithAvatar } from './ListItemWithAvatar';
 import { DirectMessageListItem } from './DirectMessageListItem';
+import { NotificationListItem } from './NotificationListItem';
 
-export { ListItem, ListItemWithAvatar, DirectMessageListItem };
+export {
+  ListItem,
+  ListItemWithAvatar,
+  DirectMessageListItem,
+  NotificationListItem,
+};
diff --git a/mobile/components/Lists/style.js b/mobile/components/Lists/style.js
index d42a1fce27..e24076cd4d 100644
--- a/mobile/components/Lists/style.js
+++ b/mobile/components/Lists/style.js
@@ -20,6 +20,12 @@ export const AvatarWrapper = styled(Column)`
   align-items: center;
 `;
 
+export const IconWrapper = styled(Column)`
+  margin-right: 16px;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
 export const TextColumnContainer = styled(Column)`
   flex: 1;
   align-items: stretch;
@@ -43,16 +49,23 @@ export const Title = styled.Text`
   font-size: 16px;
   font-weight: 700;
   color: ${props => props.theme.text.default};
+  margin-bottom: 4px;
 `;
 
 export const Subtitle = styled.Text`
   font-size: 15px;
   font-weight: 500;
   color: ${props => props.theme.text.alt};
-  margin-top: 4px;
   line-height: 21;
 `;
 
+export const Link = styled.Text`
+  font-size: 15px;
+  line-height: 21;
+  font-weight: 700;
+  color: ${props => props.theme.text.secondary};
+`;
+
 export const Timestamp = styled.Text`
   font-size: 16px;
   font-weight: 300;
@@ -207,3 +220,7 @@ export const OverflowAvatarLabel = styled.Text`
   line-height: 17;
   margin-top: -2px;
 `;
+
+export const FacepileContainer = styled.View`
+  margin-bottom: 4px;
+`;
diff --git a/mobile/utils/deduplicate-children.js b/mobile/utils/deduplicate-children.js
new file mode 100644
index 0000000000..bdf0b3d8c7
--- /dev/null
+++ b/mobile/utils/deduplicate-children.js
@@ -0,0 +1,11 @@
+// @flow
+export const deduplicateChildren = (
+  array: Array<any>,
+  prop: string
+): Array<any> => {
+  if (!array || !Array.isArray(array) || array.length === 0) return array;
+
+  return array.filter((obj, pos, arr) => {
+    return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos;
+  });
+};
diff --git a/mobile/views/Notifications/index.js b/mobile/views/Notifications/index.js
index 037994a530..07c3ff936f 100644
--- a/mobile/views/Notifications/index.js
+++ b/mobile/views/Notifications/index.js
@@ -15,13 +15,15 @@ import viewNetworkHandler, {
   type ViewNetworkHandlerProps,
 } from '../../components/ViewNetworkHandler';
 import subscribeExpoPush from '../../../shared/graphql/mutations/user/subscribeExpoPush';
+import sortByDate from '../../../shared/sort-by-date';
 import getPushNotificationToken from '../../utils/get-push-notification-token';
 import type { State as ReduxState } from '../../reducers';
 import type { AuthenticationState } from '../../reducers/authentication';
-import Renderer from './renderer';
-import { parseNotification } from './renderUtils';
+import { parseNotification } from './parseNotification';
 import type { Navigation } from '../../utils/types';
 import type { CurrentUserState } from '../../reducers/currentUserId';
+import { deduplicateChildren } from '../../utils/deduplicate-children';
+import { NotificationListItem } from '../../components/Lists';
 
 type Props = {
   ...$Exact<ViewNetworkHandlerProps>,
@@ -142,7 +144,13 @@ class Notifications extends React.Component<Props, State> {
       navigation,
     } = this.props;
     const { pushNotifications } = this.state;
-    if (notifications) {
+
+    if (notifications && currentUserId) {
+      const edges = notifications.edges.map(edge => edge && edge.node);
+      const unique = deduplicateChildren(edges, 'id');
+      const sorted = sortByDate(unique, 'modifiedAt', 'desc');
+      const parsed = sorted.map(n => parseNotification(n)).filter(Boolean);
+
       return (
         <Wrapper>
           {pushNotifications != null &&
@@ -153,12 +161,12 @@ class Notifications extends React.Component<Props, State> {
               />
             )}
           <InfiniteList
-            data={notifications.edges}
+            data={parsed}
             renderItem={({ item }) => (
-              <Renderer
-                currentUserId={currentUserId}
+              <NotificationListItem
                 navigation={navigation}
-                notification={parseNotification(item.node)}
+                notification={item}
+                currentUserId={currentUserId}
               />
             )}
             loadingIndicator={<Text>Loading...</Text>}
diff --git a/mobile/views/Notifications/renderUtils.js b/mobile/views/Notifications/parseNotification.js
similarity index 84%
rename from mobile/views/Notifications/renderUtils.js
rename to mobile/views/Notifications/parseNotification.js
index 3116964d6a..45a5fe295d 100644
--- a/mobile/views/Notifications/renderUtils.js
+++ b/mobile/views/Notifications/parseNotification.js
@@ -23,8 +23,15 @@ export type ParsedNotificationType = {
   modifiedAt: ?string,
 };
 
+const isUnsupportedNotificationType = (event: string) => {
+  return event === 'THREAD_CREATED';
+};
+
 // prettier-ignore
-export const parseNotification = (notification: NotificationInfoType): ParsedNotificationType => {
+export const parseNotification = (notification: NotificationInfoType): ?ParsedNotificationType => {
+  
+  if (isUnsupportedNotificationType(notification.event)) return null
+
   return Object.assign({}, notification, {
     actors: notification.actors.map(actor => {
       return {
diff --git a/mobile/views/Notifications/renderer.js b/mobile/views/Notifications/renderer.js
deleted file mode 100644
index cdf3563ef2..0000000000
--- a/mobile/views/Notifications/renderer.js
+++ /dev/null
@@ -1,279 +0,0 @@
-// @flow
-import * as React from 'react';
-import type { CurrentUserState } from '../../reducers/currentUserId';
-import type { Navigation } from '../../utils/types';
-import { type ParsedNotificationType } from './renderUtils';
-import { View, TouchableHighlight } from 'react-native';
-import Avatar from '../../components/Avatar';
-import Text from '../../components/Text';
-
-type Props = {
-  notification: ParsedNotificationType,
-  currentUserId: CurrentUserState,
-  navigation: Navigation,
-};
-
-class Renderer extends React.Component<Props> {
-  renderActorsString = (): any => {
-    const { navigation } = this.props;
-    const actors = this.getActors();
-    // reverse to show the most recent first
-    if (!actors || actors.length === 0) return null;
-
-    const names = actors.map(actor => actor.payload.name).reverse();
-    const data = actors.map(actor => actor.payload).reverse();
-
-    if (actors.length === 1) {
-      return (
-        <View>
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
-          >
-            <Text>{names[0]}</Text>
-          </TouchableHighlight>
-        </View>
-      );
-    } else if (actors.length === 2) {
-      return (
-        <View>
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
-          >
-            <Text>{names[0]}</Text>
-          </TouchableHighlight>{' '}
-          and{' '}
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[1].id })}
-          >
-            <Text>{names[1]}</Text>
-          </TouchableHighlight>
-        </View>
-      );
-    } else if (actors.length === 3) {
-      return (
-        <View>
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
-          >
-            <Text>{names[0]}</Text>
-          </TouchableHighlight>,
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[1].id })}
-          >
-            <Text>{names[1]}</Text>
-          </TouchableHighlight>{' '}
-          and{' '}
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[2].id })}
-          >
-            <Text>{names[2]}</Text>
-          </TouchableHighlight>
-        </View>
-      );
-    } else if (actors.length >= 4) {
-      return (
-        <View>
-          <TouchableHighlight
-            onPress={() => navigation.navigate(`User`, { id: data[0].id })}
-          >
-            <Text>{names[0]}</Text>
-          </TouchableHighlight>{' '}
-          and {names.length - 1} others{' '}
-        </View>
-      );
-    } else {
-      return null;
-    }
-  };
-
-  actorsToObjects = () => {
-    const actors = this.getActors();
-
-    if (!actors || actors.length == 0) return [];
-
-    return actors
-      .map(actor => {
-        return {
-          name: actor.payload.name,
-          username: actor.payload.username,
-          profilePhoto: actor.payload.profilePhoto,
-          id: actor.payload.id,
-        };
-      })
-      .reverse();
-  };
-
-  renderActorsRow = () => {
-    const { navigation } = this.props;
-    const actors = this.getActors();
-    if (!actors || actors.length === 0) return null;
-
-    return (
-      <View>
-        {actors.map(actor => (
-          <Avatar
-            key={actor.id}
-            user={actor}
-            size={32}
-            isOnline={actor.payload.isOnline}
-            src={actor.payload.profilePhoto}
-            onPress={() => navigation.navigate(`User`, { id: actor.id })}
-          />
-        ))}
-      </View>
-    );
-  };
-
-  getActors = () => {
-    return this.props.notification.actors.filter(
-      actor => actor.id !== this.props.currentUserId
-    );
-  };
-
-  threadToString = () => {
-    const { currentUserId, navigation, notification } = this.props;
-
-    const isAuthor = notification.context.payload.creatorId === currentUserId;
-    const str = isAuthor ? 'in your thread' : 'in';
-    const output = `${str} ${notification.context.payload.content.title}`;
-
-    return (
-      <TouchableHighlight
-        onPress={() =>
-          navigation.navigate(`Thread`, { id: notification.context.id })
-        }
-      >
-        <Text>{output}</Text>
-      </TouchableHighlight>
-    );
-  };
-
-  messageToString = () => {
-    return <Text>'your reply'</Text>;
-  };
-
-  communityToString = () => {
-    const { navigation, notification } = this.props;
-    return (
-      <TouchableHighlight
-        onPress={() =>
-          navigation.navigate(`Community`, { id: notification.context.id })
-        }
-      >
-        <Text>{notification.context.payload.name}</Text>
-      </TouchableHighlight>
-    );
-  };
-
-  channelToString = () => {
-    const { context } = this.props.notification;
-    return <Text>{context.payload.name}</Text>;
-  };
-
-  renderContextString = () => {
-    const { context } = this.props.notification;
-    switch (context.type) {
-      case 'SLATE':
-      case 'THREAD': {
-        return this.threadToString();
-      }
-      case 'MESSAGE': {
-        return this.messageToString();
-      }
-      case 'COMMUNITY': {
-        return this.communityToString();
-      }
-      case 'CHANNEL': {
-        return this.channelToString();
-      }
-      default: {
-        console.error('Invalid notification context type');
-        return '';
-      }
-    }
-  };
-
-  parseEvent = () => {
-    const { event } = this.props.notification;
-
-    switch (event) {
-      case 'MESSAGE_CREATED': {
-        return <Text>replied</Text>;
-      }
-      case 'REACTION_CREATED': {
-        return <Text>liked</Text>;
-      }
-      case 'CHANNEL_CREATED': {
-        return <Text>created a channel</Text>;
-      }
-      case 'USER_JOINED_COMMUNITY': {
-        return <Text>joined</Text>;
-      }
-      case 'PRIVATE_CHANNEL_REQUEST_SENT': {
-        return <Text>requested to join</Text>;
-      }
-      case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
-        return <Text>approved your request to join</Text>;
-      }
-      case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
-        return <Text>requested to join</Text>;
-      }
-      case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
-        return <Text>approved your request to join</Text>;
-      }
-      default: {
-        return '';
-      }
-    }
-  };
-
-  timeDifferenceShort(current: number, previous: number) {
-    const msPerSecond = 1000;
-    const msPerMinute = 60 * 1000;
-    const msPerHour = msPerMinute * 60;
-    const msPerDay = msPerHour * 24;
-    const msPerYear = msPerDay * 365;
-
-    let elapsed = current - previous;
-
-    if (elapsed < msPerMinute) {
-      const now = Math.round(elapsed / msPerSecond);
-      return <Text>{now}s</Text>;
-    } else if (elapsed < msPerHour) {
-      const now = Math.round(elapsed / msPerMinute);
-      return <Text>{now}m</Text>;
-    } else if (elapsed < msPerDay) {
-      const now = Math.round(elapsed / msPerHour);
-      return <Text>{now}h</Text>;
-    } else if (elapsed < msPerYear) {
-      const now = Math.round(elapsed / msPerDay);
-      return <Text>{now}d</Text>;
-    } else {
-      const now = Math.round(elapsed / msPerYear);
-      return <Text>{now}y</Text>;
-    }
-  }
-
-  parseNotificationDate = () => {
-    const { createdAt, modifiedAt } = this.props.notification;
-    const date = modifiedAt || createdAt;
-
-    const now = new Date().getTime();
-    const timestamp = new Date(date).getTime();
-    return <Text>· {this.timeDifferenceShort(now, timestamp)}</Text>;
-  };
-
-  render() {
-    return (
-      <View>
-        {this.renderActorsRow()}
-        {this.renderActorsString()}
-        {this.parseEvent()}
-        {this.renderContextString()}
-        {this.parseNotificationDate()}
-      </View>
-    );
-  }
-}
-
-export default Renderer;

From 84d482863a6237bbd94cbde0c32bf3255005c8f1 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 17:34:31 -0700
Subject: [PATCH 15/42] Remove unneeded file in dm thread list

---
 mobile/components/ThreadFeed/index.js         |  2 +
 .../components/DirectMessageThreadListItem.js | 36 -----------------
 .../components/DirectMessageThreadsList.js    | 40 +++++++++++++------
 mobile/views/DirectMessages/index.js          |  2 +-
 4 files changed, 30 insertions(+), 50 deletions(-)
 delete mode 100644 mobile/views/DirectMessages/components/DirectMessageThreadListItem.js

diff --git a/mobile/components/ThreadFeed/index.js b/mobile/components/ThreadFeed/index.js
index ec3156ce6d..aeb1e7f069 100644
--- a/mobile/components/ThreadFeed/index.js
+++ b/mobile/components/ThreadFeed/index.js
@@ -140,6 +140,8 @@ class ThreadFeed extends React.Component<Props, State> {
             loadingIndicator={<Text>Loading...</Text>}
             fetchMore={this.fetchMore}
             hasNextPage={threadConnection.pageInfo.hasNextPage}
+            refetching={this.props.isRefetching}
+            refetch={this.props.data.refetch}
             {...flatListProps}
           />
         </View>
diff --git a/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js b/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js
deleted file mode 100644
index b89d43b1c6..0000000000
--- a/mobile/views/DirectMessages/components/DirectMessageThreadListItem.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// @flow
-import * as React from 'react';
-import sentencify from '../../../../shared/sentencify';
-import { timeDifferenceShort } from '../../../../shared/time-difference';
-import { DirectMessageListItem } from '../../../components/Lists';
-import type { DirectMessageThreadInfoType } from '../../../../shared/graphql/fragments/directMessageThread/directMessageThreadInfo';
-
-type Props = {
-  thread: DirectMessageThreadInfoType,
-  currentUserId: string,
-  onPress: Function,
-};
-
-const DirectMessageThreadListItem = ({
-  thread,
-  currentUserId,
-  onPress,
-}: Props) => {
-  const participants = thread.participants.filter(
-    ({ userId }) => userId !== currentUserId
-  );
-  return (
-    <DirectMessageListItem
-      onPress={onPress}
-      participants={participants}
-      title={sentencify(participants.map(({ name }) => name))}
-      subtitle={thread.snippet}
-      timestamp={timeDifferenceShort(
-        Date.now(),
-        new Date(thread.threadLastActive)
-      )}
-    />
-  );
-};
-
-export default DirectMessageThreadListItem;
diff --git a/mobile/views/DirectMessages/components/DirectMessageThreadsList.js b/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
index 8be9a94042..c7bbe23e74 100644
--- a/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
+++ b/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
@@ -7,11 +7,13 @@ import Text from '../../../components/Text';
 import ViewNetworkHandler, {
   type ViewNetworkHandlerProps,
 } from '../../../components/ViewNetworkHandler';
-import DirectMessageThreadListItem from './DirectMessageThreadListItem';
 import getCurrentUserDMThreadConnection, {
   type GetCurrentUserDMThreadConnectionType,
 } from '../../../../shared/graphql/queries/directMessageThread/getCurrentUserDMThreadConnection';
 import type { NavigationProps } from 'react-navigation';
+import sentencify from '../../../../shared/sentencify';
+import { timeDifferenceShort } from '../../../../shared/time-difference';
+import { DirectMessageListItem } from '../../../components/Lists';
 
 type Props = {
   ...$Exact<ViewNetworkHandlerProps>,
@@ -19,6 +21,7 @@ type Props = {
   data: {
     fetchMore: Function,
     user?: $Exact<GetCurrentUserDMThreadConnectionType>,
+    refetch: Function,
   },
 };
 
@@ -29,18 +32,29 @@ const DirectMessageThreadsList = (props: Props) => {
     return (
       <InfiniteList
         data={edges}
-        renderItem={({ item: { node: thread } }) => (
-          <DirectMessageThreadListItem
-            thread={thread}
-            key={thread.id}
-            currentUserId={user.id}
-            onPress={() =>
-              props.navigation.navigate('DirectMessageThread', {
-                id: thread.id,
-              })
-            }
-          />
-        )}
+        renderItem={({ item: { node: thread } }) => {
+          const participants = thread.participants.filter(
+            ({ userId }) => userId !== user.id
+          );
+
+          return (
+            <DirectMessageListItem
+              key={thread.id}
+              onPress={() =>
+                props.navigation.navigate('DirectMessageThread', {
+                  id: thread.id,
+                })
+              }
+              participants={participants}
+              title={sentencify(participants.map(({ name }) => name))}
+              subtitle={thread.snippet}
+              timestamp={timeDifferenceShort(
+                Date.now(),
+                new Date(thread.threadLastActive)
+              )}
+            />
+          );
+        }}
         hasNextPage={pageInfo.hasNextPage}
         fetchMore={props.data.fetchMore}
         loadingIndicator={<Text>Loading...</Text>}
diff --git a/mobile/views/DirectMessages/index.js b/mobile/views/DirectMessages/index.js
index d682359c76..e64201f09a 100644
--- a/mobile/views/DirectMessages/index.js
+++ b/mobile/views/DirectMessages/index.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { Fragment } from 'react';
+import * as React from 'react';
 import DirectMessageThreadsList from './components/DirectMessageThreadsList';
 import { Wrapper } from './style';
 

From e3fc4faf2c74b53bd2de8cb6b2ca7c17230a7264 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 18:03:47 -0700
Subject: [PATCH 16/42] Fix reaction notification onpress route

---
 mobile/components/Lists/NotificationListItem.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index 3d7948f140..3d3d66f951 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -192,6 +192,7 @@ export class NotificationListItem extends React.Component<Props> {
   getOnPress = (): Function => {
     const { notification, navigation } = this.props;
     let type;
+    let id;
     switch (notification.event) {
       case 'MESSAGE_CREATED': {
         type = 'Thread';
@@ -199,6 +200,7 @@ export class NotificationListItem extends React.Component<Props> {
       }
       case 'REACTION_CREATED': {
         type = 'Thread';
+        id = notification.context.payload.threadId;
         break;
       }
       case 'CHANNEL_CREATED': {
@@ -239,8 +241,8 @@ export class NotificationListItem extends React.Component<Props> {
     }
 
     if (!type) return () => {};
-
-    return () => navigation.navigate(type, { id: notification.context.id });
+    return () =>
+      navigation.navigate(type, { id: id ? id : notification.context.id });
   };
 
   facepileDataFromActors = () => {

From be9747e3133ee3d354dae924e5bc66a2e944b8b2 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:39:13 -0700
Subject: [PATCH 17/42] Explore -> search

---
 mobile/views/TabBar/SearchStack.js | 31 ++++++++++++++++++++++++++++++
 mobile/views/TabBar/index.js       |  9 +++++----
 mobile/views/TabBar/style.js       | 11 +++++++++++
 3 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 mobile/views/TabBar/SearchStack.js

diff --git a/mobile/views/TabBar/SearchStack.js b/mobile/views/TabBar/SearchStack.js
new file mode 100644
index 0000000000..16c6c76e93
--- /dev/null
+++ b/mobile/views/TabBar/SearchStack.js
@@ -0,0 +1,31 @@
+// @flow
+import { StackNavigator } from 'react-navigation';
+import BaseStack from './BaseStack';
+import Search from '../Search';
+
+const DMStack = StackNavigator(
+  {
+    Search: {
+      screen: Search,
+      navigationOptions: ({ navigation }) => ({
+        headerTitle: null,
+        headerStyle: {
+          backgroundColor: 'transparent',
+          right: 0,
+          left: 0,
+          top: 0,
+          position: 'absolute',
+          width: 0,
+          height: 0,
+        },
+        headerTintColor: 'white',
+      }),
+    },
+    ...BaseStack,
+  },
+  {
+    initialRouteName: 'Search',
+  }
+);
+
+export default DMStack;
diff --git a/mobile/views/TabBar/index.js b/mobile/views/TabBar/index.js
index d63ec7cd5b..d2ecb93f5d 100644
--- a/mobile/views/TabBar/index.js
+++ b/mobile/views/TabBar/index.js
@@ -8,8 +8,9 @@ import HomeStack from './HomeStack';
 import ProfileStack from './ProfileStack';
 import NotificationsStack from './NotificationsStack';
 import DMStack from './DirectMessageStack';
+import SearchStack from './SearchStack';
 import {
-  ExploreIcon,
+  SearchIcon,
   HomeIcon,
   MessageIcon,
   NotificationIcon,
@@ -29,10 +30,10 @@ const routeConfiguration = {
       tabBarIcon: ({ tintColor }) => <MessageIcon color={tintColor} />,
     },
   },
-  Explore: {
-    screen: HomeStack,
+  Search: {
+    screen: SearchStack,
     navigationOptions: {
-      tabBarIcon: ({ tintColor }) => <ExploreIcon color={tintColor} />,
+      tabBarIcon: ({ tintColor }) => <SearchIcon color={tintColor} />,
     },
   },
   Notifications: {
diff --git a/mobile/views/TabBar/style.js b/mobile/views/TabBar/style.js
index 20a1054096..b12c8d67a0 100644
--- a/mobile/views/TabBar/style.js
+++ b/mobile/views/TabBar/style.js
@@ -64,6 +64,17 @@ export const ExploreIcon = ({ color }: IconProps) => (
   </Svg>
 );
 
+export const SearchIcon = ({ color }: IconProps) => (
+  <Svg width="32" height="32" viewBox="0 0 32 32">
+    <G>
+      <Path
+        fill={color}
+        d="M14,9c-2.761,0 -5,2.239 -5,5c0,2.761 2.239,5 5,5c1.387,0 2.641,-0.564 3.548,-1.477c0.899,-0.905 1.452,-2.148 1.452,-3.523c0,-2.761 -2.239,-5 -5,-5Zm-7,5c0,-3.866 3.134,-7 7,-7c3.866,0 7,3.134 7,7c0,1.257 -0.332,2.436 -0.912,3.456c-0.244,0.431 -0.212,0.981 0.137,1.332l3.984,4.007c0.389,0.391 0.388,1.025 -0.004,1.414c-0.392,0.389 -1.025,0.388 -1.414,-0.004l-3.97,-3.992c-0.352,-0.354 -0.908,-0.387 -1.341,-0.138c-1.025,0.588 -2.214,0.925 -3.48,0.925c-3.866,0 -7,-3.134 -7,-7Z"
+      />
+    </G>
+  </Svg>
+);
+
 export const NotificationIcon = ({ color }: IconProps) => (
   <Svg width="32" height="32" viewBox="0 0 32 32">
     <G>

From 0773b5bf6883bde3cced99e0a7d8bb9d1c9d3091 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:39:23 -0700
Subject: [PATCH 18/42] Add tab bar package

---
 .../npm/react-native-tab-view_vx.x.x.js       | 116 ++++++++++++++++++
 mobile/package.json                           |   2 +
 mobile/yarn.lock                              |  14 +++
 3 files changed, 132 insertions(+)
 create mode 100644 flow-typed/npm/react-native-tab-view_vx.x.x.js

diff --git a/flow-typed/npm/react-native-tab-view_vx.x.x.js b/flow-typed/npm/react-native-tab-view_vx.x.x.js
new file mode 100644
index 0000000000..494b132fef
--- /dev/null
+++ b/flow-typed/npm/react-native-tab-view_vx.x.x.js
@@ -0,0 +1,116 @@
+// flow-typed signature: d468e37370cd20a4265e71bef5bf0686
+// flow-typed version: <<STUB>>/react-native-tab-view_v0.0.78/flow_v0.66.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-native-tab-view'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-native-tab-view' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-native-tab-view/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/SceneMap' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabBar' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewAnimated' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerAndroid' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.web' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerExperimental' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerPan' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPagerScroll' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewPropTypes' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TabViewTypeDefinitions' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/src/TouchableItem' {
+  declare module.exports: any;
+}
+
+declare module 'react-native-tab-view/types' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-native-tab-view/src/index.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/index'>;
+}
+declare module 'react-native-tab-view/src/SceneMap.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/SceneMap'>;
+}
+declare module 'react-native-tab-view/src/TabBar.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabBar'>;
+}
+declare module 'react-native-tab-view/src/TabViewAnimated.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewAnimated'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerAndroid.web.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerAndroid.web'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerExperimental.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerExperimental'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerPan.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerPan'>;
+}
+declare module 'react-native-tab-view/src/TabViewPagerScroll.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPagerScroll'>;
+}
+declare module 'react-native-tab-view/src/TabViewPropTypes.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewPropTypes'>;
+}
+declare module 'react-native-tab-view/src/TabViewTypeDefinitions.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TabViewTypeDefinitions'>;
+}
+declare module 'react-native-tab-view/src/TouchableItem.js' {
+  declare module.exports: $Exports<'react-native-tab-view/src/TouchableItem'>;
+}
+declare module 'react-native-tab-view/types.js' {
+  declare module.exports: $Exports<'react-native-tab-view/types'>;
+}
diff --git a/mobile/package.json b/mobile/package.json
index 954c26eb6d..beaf8130da 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -16,7 +16,9 @@
     "react": "16.3.0-alpha.1",
     "react-apollo": "2.x",
     "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
+    "react-native-gesture-handler": "^1.0.1",
     "react-native-keyboard-spacer": "^0.4.1",
+    "react-native-tab-view": "^0.0.78",
     "react-native-typography": "^1.2.1",
     "react-navigation": "^1.5.8",
     "react-navigation-props-mapper": "^0.1.2",
diff --git a/mobile/yarn.lock b/mobile/yarn.lock
index 55e8a8f551..118739aaf7 100644
--- a/mobile/yarn.lock
+++ b/mobile/yarn.lock
@@ -6132,6 +6132,14 @@ react-native-gesture-handler@1.0.0-alpha.41:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
+react-native-gesture-handler@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.0.1.tgz#e76236befe5d35b827a610ce6af427c58c8d2b82"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+    invariant "^2.2.2"
+    prop-types "^15.5.10"
+
 react-native-keyboard-spacer@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/react-native-keyboard-spacer/-/react-native-keyboard-spacer-0.4.1.tgz#46f18a320432098a25ea9fa89f5143dd254d332d"
@@ -6174,6 +6182,12 @@ react-native-svg@6.2.2:
     lodash "^4.16.6"
     pegjs "^0.10.0"
 
+react-native-tab-view@^0.0.78:
+  version "0.0.78"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.78.tgz#9b90730d89cbd34a03f0e0ab10e74ca7af945560"
+  dependencies:
+    prop-types "^15.6.0"
+
 "react-native-tab-view@github:react-navigation/react-native-tab-view":
   version "0.0.74"
   resolved "https://codeload.github.com/react-navigation/react-native-tab-view/tar.gz/36ebd834d78b841fc19778c966465d02fd1213bb"

From b11c13a62ad2857384ea9c3e23c0151141484732 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:39:36 -0700
Subject: [PATCH 19/42] Add search view

---
 mobile/views/Search/index.js | 132 +++++++++++++++++++++++++++++++++++
 mobile/views/Search/style.js |  40 +++++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 mobile/views/Search/index.js
 create mode 100644 mobile/views/Search/style.js

diff --git a/mobile/views/Search/index.js b/mobile/views/Search/index.js
new file mode 100644
index 0000000000..25f1eccd09
--- /dev/null
+++ b/mobile/views/Search/index.js
@@ -0,0 +1,132 @@
+// @flow
+import * as React from 'react';
+import { withTheme } from 'styled-components';
+import { View, StyleSheet, Dimensions, TextInput } from 'react-native';
+import { TabViewAnimated, SceneMap, TabBar } from 'react-native-tab-view';
+import { TabLabel, SearchBar, SearchView } from './style';
+import { Constants } from 'expo';
+import ThreadsSearchView from './ThreadsSearchView';
+import CommunitiesSearchView from './CommunitiesSearchView';
+import PeopleSearchView from './PeopleSearchView';
+
+const initialLayout = {
+  height: 0,
+  width: Dimensions.get('window').width,
+};
+
+type TabView = {
+  key: string,
+  title: string,
+};
+
+type State = {
+  searchString: ?string,
+  index: number,
+  routes: Array<TabView>,
+};
+
+type Props = {
+  theme: Object,
+};
+
+class Search extends React.Component<Props, State> {
+  searchInput: React.ComponentType<TextInput>;
+
+  state = {
+    searchString: '',
+    index: 0,
+    routes: [
+      { key: 'threads', title: 'Threads' },
+      { key: 'communities', title: 'Communities' },
+      { key: 'people', title: 'People' },
+    ],
+  };
+
+  renderThreadsRoute = () => {
+    const { index, routes } = this.state;
+    if (routes[index].key !== 'threads') return <SearchView />;
+    if (!this.state.searchString) return <SearchView />;
+    return <ThreadsSearchView queryString={this.state.searchString} />;
+  };
+
+  renderCommunitiesRoute = () => {
+    const { index, routes } = this.state;
+    if (routes[index].key !== 'communities') return <SearchView />;
+    if (!this.state.searchString) return <SearchView />;
+    return <CommunitiesSearchView queryString={this.state.searchString} />;
+  };
+
+  renderPeopleRoute = () => {
+    const { index, routes } = this.state;
+    if (routes[index].key !== 'people') return <SearchView />;
+    if (!this.state.searchString) return <SearchView />;
+    return <PeopleSearchView queryString={this.state.searchString} />;
+  };
+
+  handleIndexChange = (index: number) => this.setState({ index });
+
+  renderTabs = (props: any) => {
+    const active = this.state.index === props.navigationState.index;
+    return (
+      <TabBar
+        indicatorStyle={{
+          backgroundColor: '#000',
+          height: StyleSheet.hairlineWidth,
+        }}
+        renderLabel={props => (
+          <TabLabel active={active}>{props.route.title}</TabLabel>
+        )}
+        style={{
+          backgroundColor: '#fff',
+          paddingTop: Constants.statusBarHeight,
+        }}
+        useNativeDriver
+        {...props}
+      />
+    );
+  };
+
+  handleChange = (e: any) => {
+    this.setState({ searchString: e.nativeEvent.text });
+  };
+
+  renderHeader = (props: any) => {
+    const Tabs = () => this.renderTabs(props);
+    return (
+      <View>
+        <SearchBar
+          autoFocus
+          blurOnSubmit
+          placeholder={`Search for ${this.state.routes[
+            this.state.index
+          ].title.toLowerCase()}`}
+          returnKeyType={'search'}
+          clearButtonMode={'always'}
+          onSubmitEditing={this.handleChange}
+        />
+        <Tabs />
+      </View>
+    );
+  };
+
+  render() {
+    const renderScene = SceneMap({
+      threads: this.renderThreadsRoute,
+      communities: this.renderCommunitiesRoute,
+      people: this.renderPeopleRoute,
+    });
+
+    return (
+      <TabViewAnimated
+        navigationState={this.state}
+        renderScene={renderScene}
+        renderHeader={this.renderHeader}
+        onIndexChange={this.handleIndexChange}
+        initialLayout={initialLayout}
+        useNativeDriver
+      />
+    );
+  }
+}
+
+export default withTheme(Search);
diff --git a/mobile/views/Search/style.js b/mobile/views/Search/style.js
new file mode 100644
index 0000000000..b170acf33e
--- /dev/null
+++ b/mobile/views/Search/style.js
@@ -0,0 +1,40 @@
+// @flow
+import styled from 'styled-components/native';
+import { Animated, Dimensions, TextInput, StyleSheet } from 'react-native';
+import { Constants } from 'expo';
+
+export const TabLabel = styled(Animated.Text)`
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 72px 8px 8px;
+  font-size: 14px;
+  font-weight: ${props => (props.active ? '700' : '400')};
+  color: ${props =>
+    props.active ? props.theme.text.default : props.theme.text.alt};
+  position: relative;
+  z-index: 100;
+`;
+
+export const SearchBar = styled(TextInput)`
+  position: absolute;
+  top: ${Constants.statusBarHeight + 16};
+  width: ${Dimensions.get('window').width - 32};
+  height: 40px;
+  left: 16px;
+  border-radius: 8px;
+  background: ${props => props.theme.bg.wash};
+  z-index: 100;
+  padding: 4px 0px 4px 12px;
+  font-size: 16px;
+  font-weight: 600;
+`;
+
+export const SearchView = styled.View`
+  border-top-color: ${props => props.theme.bg.border};
+  border-top-width: ${StyleSheet.hairlineWidth};
+  display: flex;
+  background: ${props => props.theme.bg.default};
+  flex: 1;
+`;

From c583a60e2dda12402c02e27b9d27a9d6d7f3be3f Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:39:53 -0700
Subject: [PATCH 20/42] Add individual search subviews

---
 mobile/views/Search/CommunitiesSearchView.js | 75 ++++++++++++++++++++
 mobile/views/Search/PeopleSearchView.js      | 73 +++++++++++++++++++
 mobile/views/Search/ThreadsSearchView.js     | 25 +++++++
 3 files changed, 173 insertions(+)
 create mode 100644 mobile/views/Search/CommunitiesSearchView.js
 create mode 100644 mobile/views/Search/PeopleSearchView.js
 create mode 100644 mobile/views/Search/ThreadsSearchView.js

diff --git a/mobile/views/Search/CommunitiesSearchView.js b/mobile/views/Search/CommunitiesSearchView.js
new file mode 100644
index 0000000000..f0c1fe9140
--- /dev/null
+++ b/mobile/views/Search/CommunitiesSearchView.js
@@ -0,0 +1,75 @@
+// @flow
+import * as React from 'react';
+import { Text } from 'react-native';
+import { withNavigation } from 'react-navigation';
+import compose from 'recompose/compose';
+import searchCommunitiesQuery, {
+  type SearchCommunitiesType,
+} from '../../../shared/graphql/queries/search/searchCommunities';
+import viewNetworkHandler, {
+  type ViewNetworkHandlerProps,
+} from '../../components/ViewNetworkHandler';
+import Loading from '../../components/Loading';
+import { SearchView } from './style';
+import { CommunityListItem } from '../../components/Lists';
+import type { Navigation } from '../../utils/types';
+import InfiniteList from '../../components/InfiniteList';
+
+type Props = {
+  data: {
+    search: SearchCommunitiesType,
+  },
+  ...$Exact<ViewNetworkHandlerProps>,
+  navigation: Navigation,
+};
+
+class CommunitiesSearchView extends React.Component<Props> {
+  render() {
+    const { isLoading, data, navigation } = this.props;
+
+    if (data.search) {
+      const { search: { searchResultsConnection } } = data;
+      const hasResults =
+        searchResultsConnection && searchResultsConnection.edges.length > 0;
+      const results = hasResults
+        ? searchResultsConnection.edges.map(e => e && e.node)
+        : [];
+
+      return (
+        <SearchView>
+          {isLoading && <Loading />}
+          {!hasResults && <Text>No results</Text>}
+          {hasResults && (
+            <InfiniteList
+              data={results}
+              renderItem={({ item }) => (
+                <CommunityListItem
+                  key={item.id}
+                  community={item}
+                  navigation={navigation}
+                />
+              )}
+              loadingIndicator={<Loading />}
+            />
+          )}
+        </SearchView>
+      );
+    }
+
+    if (isLoading) {
+      return (
+        <SearchView>
+          <Loading />
+        </SearchView>
+      );
+    }
+
+    return <SearchView />;
+  }
+}
+
+export default compose(
+  searchCommunitiesQuery,
+  withNavigation,
+  viewNetworkHandler
+)(CommunitiesSearchView);
diff --git a/mobile/views/Search/PeopleSearchView.js b/mobile/views/Search/PeopleSearchView.js
new file mode 100644
index 0000000000..b16e20cd83
--- /dev/null
+++ b/mobile/views/Search/PeopleSearchView.js
@@ -0,0 +1,73 @@
+// @flow
+import * as React from 'react';
+import { Text } from 'react-native';
+import { withNavigation } from 'react-navigation';
+import compose from 'recompose/compose';
+import searchUsersQuery, {
+  type SearchUsersType,
+} from '../../../shared/graphql/queries/search/searchUsers';
+import viewNetworkHandler, {
+  type ViewNetworkHandlerProps,
+} from '../../components/ViewNetworkHandler';
+import Loading from '../../components/Loading';
+import { SearchView } from './style';
+import { UserListItem } from '../../components/Lists';
+import type { Navigation } from '../../utils/types';
+import InfiniteList from '../../components/InfiniteList';
+
+type Props = {
+  data: {
+    search: SearchUsersType,
+  },
+  ...$Exact<ViewNetworkHandlerProps>,
+  navigation: Navigation,
+};
+
+class UsersSearchView extends React.Component<Props> {
+  render() {
+    const { isLoading, data, navigation } = this.props;
+
+    if (data.search) {
+      const { search: { searchResultsConnection } } = data;
+      const hasResults =
+        searchResultsConnection && searchResultsConnection.edges.length > 0;
+      const results = hasResults
+        ? searchResultsConnection.edges.map(e => e && e.node)
+        : [];
+
+      return (
+        <SearchView>
+          {isLoading && <Loading />}
+          {!hasResults && <Text>No results</Text>}
+          {hasResults && (
+            <InfiniteList
+              data={results}
+              renderItem={({ item }) => (
+                <UserListItem
+                  key={item.id}
+                  user={item}
+                  navigation={navigation}
+                />
+              )}
+              loadingIndicator={<Loading />}
+            />
+          )}
+        </SearchView>
+      );
+    }
+
+    if (isLoading) {
+      return (
+        <SearchView>
+          <Loading />
+        </SearchView>
+      );
+    }
+
+    return <SearchView />;
+  }
+}
+
+export default compose(searchUsersQuery, withNavigation, viewNetworkHandler)(
+  UsersSearchView
+);
diff --git a/mobile/views/Search/ThreadsSearchView.js b/mobile/views/Search/ThreadsSearchView.js
new file mode 100644
index 0000000000..5adca25574
--- /dev/null
+++ b/mobile/views/Search/ThreadsSearchView.js
@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react';
+import compose from 'recompose/compose';
+import searchThreadsQuery from '../../../shared/graphql/queries/search/searchThreads';
+import { SearchView } from './style';
+import ThreadFeed from '../../components/ThreadFeed';
+
+type Props = {
+  queryString: string,
+};
+
+const SearchThreadFeed = compose(searchThreadsQuery)(ThreadFeed);
+
+class ThreadsSearchView extends React.Component<Props> {
+  render() {
+    const { queryString } = this.props;
+    return (
+      <SearchView>
+        <SearchThreadFeed queryString={queryString} />
+      </SearchView>
+    );
+  }
+}
+
+export default ThreadsSearchView;

From 5d24cce2cc6141ab505a97c33a069365685f9c8b Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:40:03 -0700
Subject: [PATCH 21/42] Add community list item component

---
 mobile/components/Lists/CommunityListItem.js | 29 ++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 mobile/components/Lists/CommunityListItem.js

diff --git a/mobile/components/Lists/CommunityListItem.js b/mobile/components/Lists/CommunityListItem.js
new file mode 100644
index 0000000000..6978238830
--- /dev/null
+++ b/mobile/components/Lists/CommunityListItem.js
@@ -0,0 +1,29 @@
+// @flow
+import * as React from 'react';
+import Avatar from '../Avatar';
+import { ListItemWithAvatar } from './ListItemWithAvatar';
+import { TextColumnContainer, Title, Subtitle } from './style';
+import type { Navigation } from '../../utils/types';
+
+type CommunityListItemType = { community: Object, navigation: Navigation };
+
+export class CommunityListItem extends React.Component<CommunityListItemType> {
+  render() {
+    const { community, navigation } = this.props;
+    return (
+      <ListItemWithAvatar
+        onPress={() => navigation.navigate(`Community`, { id: community.id })}
+        AvatarComponent={() => (
+          <Avatar src={community.profilePhoto} size={40} community />
+        )}
+      >
+        <TextColumnContainer>
+          <Title numberOfLines={1}>{community.name}</Title>
+          <Subtitle numberOfLines={1}>
+            {community.metaData.members} members
+          </Subtitle>
+        </TextColumnContainer>
+      </ListItemWithAvatar>
+    );
+  }
+}

From bd106f86144b6f7f37c3031158ce33ac65b80e05 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:40:10 -0700
Subject: [PATCH 22/42] Add user list item component

---
 mobile/components/Lists/UserListItem.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 mobile/components/Lists/UserListItem.js

diff --git a/mobile/components/Lists/UserListItem.js b/mobile/components/Lists/UserListItem.js
new file mode 100644
index 0000000000..815b7cd114
--- /dev/null
+++ b/mobile/components/Lists/UserListItem.js
@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react';
+import Avatar from '../Avatar';
+import { ListItemWithAvatar } from './ListItemWithAvatar';
+import { TextColumnContainer, Title, Subtitle } from './style';
+import type { Navigation } from '../../utils/types';
+
+type UserListItemType = { user: Object, navigation: Navigation };
+
+export class UserListItem extends React.Component<UserListItemType> {
+  render() {
+    const { user, navigation } = this.props;
+    return (
+      <ListItemWithAvatar
+        onPress={() => navigation.navigate(`User`, { id: user.id })}
+        AvatarComponent={() => <Avatar src={user.profilePhoto} size={40} />}
+      >
+        <TextColumnContainer>
+          <Title numberOfLines={1}>{user.name}</Title>
+          <Subtitle numberOfLines={1}>@{user.username}</Subtitle>
+        </TextColumnContainer>
+      </ListItemWithAvatar>
+    );
+  }
+}

From c2b9817c2ed1b0b38ed9e2c4239a95a99b43cace Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Thu, 24 May 2018 23:40:21 -0700
Subject: [PATCH 23/42] Cleanup

---
 mobile/components/Lists/index.js               | 4 ++++
 mobile/components/ThreadFeed/index.js          | 8 +++++++-
 shared/graphql/queries/search/searchThreads.js | 1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/mobile/components/Lists/index.js b/mobile/components/Lists/index.js
index 01dd9ff191..2be9bcc0b3 100644
--- a/mobile/components/Lists/index.js
+++ b/mobile/components/Lists/index.js
@@ -3,10 +3,14 @@ import { ListItem } from './ListItem';
 import { ListItemWithAvatar } from './ListItemWithAvatar';
 import { DirectMessageListItem } from './DirectMessageListItem';
 import { NotificationListItem } from './NotificationListItem';
+import { UserListItem } from './UserListItem';
+import { CommunityListItem } from './CommunityListItem';
 
 export {
   ListItem,
   ListItemWithAvatar,
   DirectMessageListItem,
   NotificationListItem,
+  UserListItem,
+  CommunityListItem,
 };
diff --git a/mobile/components/ThreadFeed/index.js b/mobile/components/ThreadFeed/index.js
index aeb1e7f069..efa9123def 100644
--- a/mobile/components/ThreadFeed/index.js
+++ b/mobile/components/ThreadFeed/index.js
@@ -99,6 +99,8 @@ class ThreadFeed extends React.Component<Props, State> {
       !isLoading &&
       !hasError &&
       !isRefetching &&
+      threadConnection &&
+      threadConnection.pageInfo &&
       threadConnection.pageInfo.hasNextPage
     ) {
       fetchMore();
@@ -139,7 +141,11 @@ class ThreadFeed extends React.Component<Props, State> {
             )}
             loadingIndicator={<Text>Loading...</Text>}
             fetchMore={this.fetchMore}
-            hasNextPage={threadConnection.pageInfo.hasNextPage}
+            hasNextPage={
+              threadConnection &&
+              threadConnection.pageInfo &&
+              threadConnection.pageInfo.hasNextPage
+            }
             refetching={this.props.isRefetching}
             refetch={this.props.data.refetch}
             {...flatListProps}
diff --git a/shared/graphql/queries/search/searchThreads.js b/shared/graphql/queries/search/searchThreads.js
index 4f87ccf927..5a01caa898 100644
--- a/shared/graphql/queries/search/searchThreads.js
+++ b/shared/graphql/queries/search/searchThreads.js
@@ -45,6 +45,7 @@ const searchThreadsOptions = {
       networkStatus,
       fetchMore: () => {},
       threads: search ? search.searchResultsConnection.edges : [],
+      threadConnection: search && search.searchResultsConnection,
     },
   }),
   options: ({ queryString, filter }) => ({

From 39154e3f8abf7cc06c71fed74554e195b991e34d Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 11:29:58 +0200
Subject: [PATCH 24/42] Remove empty file

---
 mobile/views/Notifications/style.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 mobile/views/Notifications/style.js

diff --git a/mobile/views/Notifications/style.js b/mobile/views/Notifications/style.js
deleted file mode 100644
index e69de29bb2..0000000000

From 066528146379f8e3d4728f5ac5167801d9aa8886 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 11:30:22 +0200
Subject: [PATCH 25/42] Flowtype icon glyphs

---
 mobile/components/Icon/glyphs.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mobile/components/Icon/glyphs.js b/mobile/components/Icon/glyphs.js
index c49b5f7719..c88c1901d4 100644
--- a/mobile/components/Icon/glyphs.js
+++ b/mobile/components/Icon/glyphs.js
@@ -1,3 +1,4 @@
+// @flow
 import * as React from 'react';
 import { Svg } from 'expo';
 const { Path, G } = Svg;

From c092716cefae56c199b01f13c4f771da5a643f88 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 11:30:59 +0200
Subject: [PATCH 26/42] console.log -> console.warn

---
 mobile/components/Lists/NotificationListItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index 3d3d66f951..8325a84c8a 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -183,7 +183,7 @@ export class NotificationListItem extends React.Component<Props> {
         return <Icon glyph={'mention'} size={32} color={'special.default'} />;
       }
       default: {
-        console.log('unsupported', this.props.notification.event);
+        console.warn('unsupported', this.props.notification.event);
         return null;
       }
     }

From a397dc79120d1e2bde7408ee17a6430aed393059 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 14:16:22 +0200
Subject: [PATCH 27/42] Avatar community prop => radiusprop

---
 mobile/components/Avatar/index.js                   | 12 ++++++------
 mobile/components/Avatar/style.js                   |  2 +-
 mobile/components/Lists/CommunityListItem.js        |  2 +-
 mobile/components/ThreadItem/ThreadCommunityInfo.js |  2 +-
 mobile/views/Thread/components/CommunityHeader.js   |  1 +
 mobile/views/Thread/index.js                        |  2 +-
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/mobile/components/Avatar/index.js b/mobile/components/Avatar/index.js
index 208237ee95..3ac6dfb2ca 100644
--- a/mobile/components/Avatar/index.js
+++ b/mobile/components/Avatar/index.js
@@ -7,17 +7,17 @@ import TouchableHighlight from '../TouchableHighlight';
 import ConditionalWrap from '../ConditionalWrap';
 import { AvatarImage } from './style';
 
-type AvatarProps = {|
+type AvatarProps = {
   src: string,
-  size?: number,
+  size: number,
   onPress?: Function,
   style?: Object,
-  community?: boolean,
-|};
+  radius?: number,
+};
 
 class Avatar extends Component<AvatarProps> {
   render() {
-    const { src, size, onPress, style, community = false } = this.props;
+    const { src, size, onPress, style, radius } = this.props;
     let source = src ? { uri: src } : {};
 
     return (
@@ -31,7 +31,7 @@ class Avatar extends Component<AvatarProps> {
           source={source}
           size={size}
           style={style}
-          community={community}
+          radius={radius || size / 2}
         />
       </ConditionalWrap>
     );
diff --git a/mobile/components/Avatar/style.js b/mobile/components/Avatar/style.js
index 190ea06eee..e77559732a 100644
--- a/mobile/components/Avatar/style.js
+++ b/mobile/components/Avatar/style.js
@@ -5,5 +5,5 @@ export const AvatarImage = styled.Image`
   width: ${props => (props.size ? `${props.size}px` : '30px')};
   height: ${props => (props.size ? `${props.size}px` : '30px')};
   border-radius: ${props =>
-    props.community ? `${props.size / 4}px` : `${props.size / 2}`};
+    props.radius ? `${props.radius}px` : `${props.size / 2}px`};
 `;
diff --git a/mobile/components/Lists/CommunityListItem.js b/mobile/components/Lists/CommunityListItem.js
index 6978238830..2446de9d2a 100644
--- a/mobile/components/Lists/CommunityListItem.js
+++ b/mobile/components/Lists/CommunityListItem.js
@@ -14,7 +14,7 @@ export class CommunityListItem extends React.Component<CommunityListItemType> {
       <ListItemWithAvatar
         onPress={() => navigation.navigate(`Community`, { id: community.id })}
         AvatarComponent={() => (
-          <Avatar src={community.profilePhoto} size={40} community />
+          <Avatar src={community.profilePhoto} size={40} radius={10} />
         )}
       >
         <TextColumnContainer>
diff --git a/mobile/components/ThreadItem/ThreadCommunityInfo.js b/mobile/components/ThreadItem/ThreadCommunityInfo.js
index 35ef23e743..01100c8e07 100644
--- a/mobile/components/ThreadItem/ThreadCommunityInfo.js
+++ b/mobile/components/ThreadItem/ThreadCommunityInfo.js
@@ -40,7 +40,7 @@ class ThreadCommunityInfo extends React.Component<Props> {
             <Avatar
               src={community.profilePhoto}
               size={20}
-              community
+              radius={5}
               onPress={() =>
                 navigation.navigate(`Community`, { id: community.id })
               }
diff --git a/mobile/views/Thread/components/CommunityHeader.js b/mobile/views/Thread/components/CommunityHeader.js
index c2150305c6..6d941fb9b3 100644
--- a/mobile/views/Thread/components/CommunityHeader.js
+++ b/mobile/views/Thread/components/CommunityHeader.js
@@ -28,6 +28,7 @@ class CommunityHeader extends React.Component<Props> {
         <Avatar
           src={thread.community.profilePhoto}
           size={32}
+          radius={8}
           onPress={() =>
             navigation.navigate(`Community`, { id: thread.community.id })
           }
diff --git a/mobile/views/Thread/index.js b/mobile/views/Thread/index.js
index 53a93a11b6..d365c6402d 100644
--- a/mobile/views/Thread/index.js
+++ b/mobile/views/Thread/index.js
@@ -121,7 +121,7 @@ class Thread extends React.Component<Props> {
       return (
         <Wrapper>
           <View testID="e2e-thread">
-            <Text type="body">Error!</Text>
+            <Text type="body">{this.props.data.error}</Text>
           </View>
         </Wrapper>
       );

From 928d31e599b56bfb3e84e7444bdb651b1aefc061 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 14:20:02 +0200
Subject: [PATCH 28/42] Avatar radius prop => variant

---
 mobile/components/Avatar/index.js                   | 6 +++---
 mobile/components/Lists/CommunityListItem.js        | 2 +-
 mobile/components/ThreadItem/ThreadCommunityInfo.js | 2 +-
 mobile/views/Thread/components/CommunityHeader.js   | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/mobile/components/Avatar/index.js b/mobile/components/Avatar/index.js
index 3ac6dfb2ca..8f3850ab7a 100644
--- a/mobile/components/Avatar/index.js
+++ b/mobile/components/Avatar/index.js
@@ -10,14 +10,14 @@ import { AvatarImage } from './style';
 type AvatarProps = {
   src: string,
   size: number,
+  variant?: 'square' | 'circle',
   onPress?: Function,
   style?: Object,
-  radius?: number,
 };
 
 class Avatar extends Component<AvatarProps> {
   render() {
-    const { src, size, onPress, style, radius } = this.props;
+    const { src, size, onPress, style, variant = 'circle' } = this.props;
     let source = src ? { uri: src } : {};
 
     return (
@@ -31,7 +31,7 @@ class Avatar extends Component<AvatarProps> {
           source={source}
           size={size}
           style={style}
-          radius={radius || size / 2}
+          radius={variant === 'circle' ? size / 2 : size / 4}
         />
       </ConditionalWrap>
     );
diff --git a/mobile/components/Lists/CommunityListItem.js b/mobile/components/Lists/CommunityListItem.js
index 2446de9d2a..518c225018 100644
--- a/mobile/components/Lists/CommunityListItem.js
+++ b/mobile/components/Lists/CommunityListItem.js
@@ -14,7 +14,7 @@ export class CommunityListItem extends React.Component<CommunityListItemType> {
       <ListItemWithAvatar
         onPress={() => navigation.navigate(`Community`, { id: community.id })}
         AvatarComponent={() => (
-          <Avatar src={community.profilePhoto} size={40} radius={10} />
+          <Avatar src={community.profilePhoto} size={40} variant="square" />
         )}
       >
         <TextColumnContainer>
diff --git a/mobile/components/ThreadItem/ThreadCommunityInfo.js b/mobile/components/ThreadItem/ThreadCommunityInfo.js
index 01100c8e07..786fbc89e7 100644
--- a/mobile/components/ThreadItem/ThreadCommunityInfo.js
+++ b/mobile/components/ThreadItem/ThreadCommunityInfo.js
@@ -40,7 +40,7 @@ class ThreadCommunityInfo extends React.Component<Props> {
             <Avatar
               src={community.profilePhoto}
               size={20}
-              radius={5}
+              variant="square"
               onPress={() =>
                 navigation.navigate(`Community`, { id: community.id })
               }
diff --git a/mobile/views/Thread/components/CommunityHeader.js b/mobile/views/Thread/components/CommunityHeader.js
index 6d941fb9b3..38d0a96a02 100644
--- a/mobile/views/Thread/components/CommunityHeader.js
+++ b/mobile/views/Thread/components/CommunityHeader.js
@@ -28,7 +28,7 @@ class CommunityHeader extends React.Component<Props> {
         <Avatar
           src={thread.community.profilePhoto}
           size={32}
-          radius={8}
+          variant="square"
           onPress={() =>
             navigation.navigate(`Community`, { id: thread.community.id })
           }

From d191c73808d58f8428f5d631f2950b6cd581cce9 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 14:25:04 +0200
Subject: [PATCH 29/42] Refactor <Icon> color prop to be a function

---
 mobile/components/Icon/index.js               |  7 +--
 .../components/Lists/NotificationListItem.js  | 56 ++++++++++++++++---
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/mobile/components/Icon/index.js b/mobile/components/Icon/index.js
index cdd47c040f..e3ab733691 100644
--- a/mobile/components/Icon/index.js
+++ b/mobile/components/Icon/index.js
@@ -12,14 +12,13 @@ type Props = {
   onPress?: Function,
   glyph: GlyphTypes,
   size?: number,
-  color?: string,
+  color?: (theme: Object) => string,
   theme: Object,
 };
 
 // prettier-ignore
-export default withTheme(({ size = 64, color = 'text.alt', glyph, theme, onPress }: Props) => {
-    const colorPaths = color.split('.')
-    const fill = theme[colorPaths[0]][colorPaths[1]]
+export default withTheme(({ size = 64, color, glyph, theme, onPress }: Props) => {
+    const fill = color ? color(theme) : theme.text.alt;
 
     return (
       <ConditionalWrap
diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index 8325a84c8a..037fb7c9bb 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -151,36 +151,74 @@ export class NotificationListItem extends React.Component<Props> {
   renderIcon = () => {
     switch (this.props.notification.event) {
       case 'MESSAGE_CREATED': {
-        return <Icon glyph={'message-fill'} size={32} color={'success.alt'} />;
+        return (
+          <Icon
+            glyph={'message-fill'}
+            size={32}
+            color={theme => theme.success.alt}
+          />
+        );
       }
       case 'REACTION_CREATED': {
-        return <Icon glyph={'like-fill'} size={32} color={'warn.alt'} />;
+        return (
+          <Icon glyph={'like-fill'} size={32} color={theme => theme.warn.alt} />
+        );
       }
       case 'CHANNEL_CREATED': {
-        return <Icon glyph={'community'} size={32} color={'brand.alt'} />;
+        return (
+          <Icon
+            glyph={'community'}
+            size={32}
+            color={theme => theme.brand.alt}
+          />
+        );
       }
       case 'USER_JOINED_COMMUNITY': {
-        return <Icon glyph={'member-add'} size={32} color={'space.default'} />;
+        return (
+          <Icon
+            glyph={'member-add'}
+            size={32}
+            color={theme => theme.space.default}
+          />
+        );
       }
       case 'PRIVATE_CHANNEL_REQUEST_SENT': {
-        return <Icon glyph={'person'} size={32} color={'special.alt'} />;
+        return (
+          <Icon glyph={'person'} size={32} color={theme => theme.special.alt} />
+        );
       }
       case 'PRIVATE_CHANNEL_REQUEST_APPROVED': {
         return (
-          <Icon glyph={'member-add'} size={32} color={'success.default'} />
+          <Icon
+            glyph={'member-add'}
+            size={32}
+            color={theme => theme.success.default}
+          />
         );
       }
       case 'PRIVATE_COMMUNITY_REQUEST_SENT': {
-        return <Icon glyph={'person'} size={32} color={'special.alt'} />;
+        return (
+          <Icon glyph={'person'} size={32} color={theme => theme.special.alt} />
+        );
       }
       case 'PRIVATE_COMMUNITY_REQUEST_APPROVED': {
         return (
-          <Icon glyph={'member-add'} size={32} color={'success.default'} />
+          <Icon
+            glyph={'member-add'}
+            size={32}
+            color={theme => theme.success.default}
+          />
         );
       }
       case 'MENTION_MESSAGE':
       case 'MENTION_THREAD': {
-        return <Icon glyph={'mention'} size={32} color={'special.default'} />;
+        return (
+          <Icon
+            glyph={'mention'}
+            size={32}
+            color={theme => theme.special.default}
+          />
+        );
       }
       default: {
         console.warn('unsupported', this.props.notification.event);

From 8dffe58a3aa26b10fce4d00ff423abae78b147d4 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 14:25:12 +0200
Subject: [PATCH 30/42] Undo accidental change

---
 mobile/views/Thread/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mobile/views/Thread/index.js b/mobile/views/Thread/index.js
index d365c6402d..53a93a11b6 100644
--- a/mobile/views/Thread/index.js
+++ b/mobile/views/Thread/index.js
@@ -121,7 +121,7 @@ class Thread extends React.Component<Props> {
       return (
         <Wrapper>
           <View testID="e2e-thread">
-            <Text type="body">{this.props.data.error}</Text>
+            <Text type="body">Error!</Text>
           </View>
         </Wrapper>
       );

From 1e258e6ba699a0b494120e10ace7897a1c97b1e2 Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 14:32:37 +0200
Subject: [PATCH 31/42] Fix flow nitpicks

---
 mobile/components/Lists/CommunityListItem.js    | 6 +++++-
 mobile/components/Lists/NotificationListItem.js | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/mobile/components/Lists/CommunityListItem.js b/mobile/components/Lists/CommunityListItem.js
index 518c225018..a67a9ed29e 100644
--- a/mobile/components/Lists/CommunityListItem.js
+++ b/mobile/components/Lists/CommunityListItem.js
@@ -3,9 +3,13 @@ import * as React from 'react';
 import Avatar from '../Avatar';
 import { ListItemWithAvatar } from './ListItemWithAvatar';
 import { TextColumnContainer, Title, Subtitle } from './style';
+import type { GetCommunityType } from '../../../shared/graphql/queries/community/getCommunity';
 import type { Navigation } from '../../utils/types';
 
-type CommunityListItemType = { community: Object, navigation: Navigation };
+type CommunityListItemType = {
+  community: GetCommunityType,
+  navigation: Navigation,
+};
 
 export class CommunityListItem extends React.Component<CommunityListItemType> {
   render() {
diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index 037fb7c9bb..b17482f2c5 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -18,7 +18,7 @@ import Icon from '../Icon';
 
 type Props = {
   notification: ParsedNotificationType,
-  children?: React.ChildrenArray<any>,
+  children?: React.Node,
   currentUserId: string,
   navigation: Navigation,
 };

From 67968721c533935c3b543904d35c00555176280e Mon Sep 17 00:00:00 2001
From: Maximilian Stoiber <contact@mxstbr.com>
Date: Fri, 25 May 2018 14:54:54 +0200
Subject: [PATCH 32/42] renderActorsAsString => sentencify

---
 .../components/Lists/NotificationListItem.js  | 40 +++----------------
 1 file changed, 6 insertions(+), 34 deletions(-)

diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index b17482f2c5..27ede5c06c 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -13,6 +13,7 @@ import {
 import type { ParsedNotificationType } from '../../views/notifications/parseNotification';
 import type { Navigation } from '../../utils/types';
 import { timeDifferenceShort } from '../../../shared/time-difference';
+import sentencify from '../../../shared/sentencify';
 import Facepile from '../Facepile';
 import Icon from '../Icon';
 
@@ -24,39 +25,6 @@ type Props = {
 };
 
 export class NotificationListItem extends React.Component<Props> {
-  renderActorsString = () => {
-    let actors = this.getActors();
-
-    if (!actors || actors.length === 0) return null;
-
-    const names = actors.map(actor => actor.payload.name).reverse();
-    actors = actors.map(actor => actor.payload).reverse();
-
-    if (actors.length === 1) {
-      return <React.Fragment>{names[0]}</React.Fragment>;
-    } else if (actors.length === 2) {
-      return (
-        <React.Fragment>
-          {names[0]} and {names[1]}
-        </React.Fragment>
-      );
-    } else if (actors.length === 3) {
-      return (
-        <React.Fragment>
-          {names[0]}, {names[1]} and {names[2]}
-        </React.Fragment>
-      );
-    } else if (actors.length >= 4) {
-      return (
-        <React.Fragment>
-          {names[0]} and {names.length - 1} others
-        </React.Fragment>
-      );
-    } else {
-      return null;
-    }
-  };
-
   getActors = () => {
     return this.props.notification.actors.filter(
       actor => actor.id !== this.props.currentUserId
@@ -317,7 +285,11 @@ export class NotificationListItem extends React.Component<Props> {
           </TextRowContainer>
 
           <Subtitle numberOfLines={3}>
-            {this.renderActorsString()}
+            {sentencify(
+              this.getActors()
+                .map(({ payload }) => payload.name)
+                .reverse()
+            )}
             {this.renderEventString()}
             {this.renderContextString()}
           </Subtitle>

From 25436df2cdfef5cfde06c126ed81103b546c5a99 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 06:46:56 -0700
Subject: [PATCH 33/42] Fix facepile behavior

---
 mobile/components/Facepile/index.js   | 38 +--------------------------
 mobile/components/ThreadItem/index.js | 14 +++++-----
 2 files changed, 8 insertions(+), 44 deletions(-)

diff --git a/mobile/components/Facepile/index.js b/mobile/components/Facepile/index.js
index 06621b3fb2..9ae54d89d7 100644
--- a/mobile/components/Facepile/index.js
+++ b/mobile/components/Facepile/index.js
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import Avatar from '../Avatar';
 import compose from 'recompose/compose';
 import { withNavigation } from 'react-navigation';
 import type { Navigation } from '../../utils/types';
@@ -31,53 +30,18 @@ const messageAvatars = (list, navigation, maxCount) => {
 
 type FacepileProps = {
   users: Array<?UserInfoType>,
-  insertAtFirstPosition: UserInfoType,
   maxCount: number,
   navigation: Navigation,
 };
 
-const Facepile = ({
-  users,
-  insertAtFirstPosition,
-  maxCount = 5,
-  navigation,
-}: FacepileProps) => {
-  if (!users || users.length === 0) {
-    if (insertAtFirstPosition) {
-      return (
-        <FacepileContainer>
-          <Avatar
-            onPress={() =>
-              navigation.navigate(`User`, { id: insertAtFirstPosition.id })
-            }
-            src={insertAtFirstPosition.profilePhoto}
-            size={30}
-          />;
-        </FacepileContainer>
-      );
-    }
-
-    return null;
-  }
-
+const Facepile = ({ users, maxCount = 5, navigation }: FacepileProps) => {
   const participantCount = users.length;
-
   const hasOverflow = participantCount > maxCount;
   const overflowAmount =
     participantCount - maxCount > 9 ? '···' : `+${participantCount - maxCount}`;
 
   return (
     <FacepileContainer>
-      {insertAtFirstPosition && (
-        <StackedAvatar
-          onPress={() =>
-            navigation.navigate(`User`, { id: insertAtFirstPosition.id })
-          }
-          src={insertAtFirstPosition.profilePhoto}
-          size={30}
-        />
-      )}
-
       {messageAvatars(users, navigation, maxCount)}
 
       {hasOverflow && (
diff --git a/mobile/components/ThreadItem/index.js b/mobile/components/ThreadItem/index.js
index 31611a9876..f7093a3e11 100644
--- a/mobile/components/ThreadItem/index.js
+++ b/mobile/components/ThreadItem/index.js
@@ -27,6 +27,12 @@ class ThreadItem extends React.Component<Props> {
     const { thread, activeChannel, activeCommunity } = this.props;
 
     if (!thread.id) return null;
+    const facepileUsers = [
+      thread.author.user,
+      ...thread.participants.filter(
+        participant => participant && participant.id !== thread.author.user.id
+      ),
+    ];
 
     return (
       <ListItem
@@ -46,13 +52,7 @@ class ThreadItem extends React.Component<Props> {
           <ThreadTitle>{thread.content.title}</ThreadTitle>
 
           <ThreadMeta>
-            <Facepile
-              users={thread.participants.filter(
-                participant =>
-                  participant && participant.id !== thread.author.user.id
-              )}
-              insertAtFirstPosition={thread.author.user}
-            />
+            <Facepile users={facepileUsers} />
 
             {thread.messageCount > 0 ? (
               <MessageCount>

From e7cec6bcb054f29f78131fd4c163f9c9b36ff4f4 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 06:53:43 -0700
Subject: [PATCH 34/42] Simplify list items component

---
 mobile/components/Lists/CommunityListItem.js  | 15 +++++----
 .../components/Lists/DirectMessageListItem.js | 12 +++----
 mobile/components/Lists/ListItem.js           |  7 ++--
 mobile/components/Lists/ListItemWithAvatar.js | 32 -------------------
 mobile/components/Lists/ListItemWithIcon.js   | 30 -----------------
 .../components/Lists/NotificationListItem.js  | 12 +++----
 mobile/components/Lists/UserListItem.js       | 14 ++++----
 mobile/components/Lists/index.js              |  2 --
 8 files changed, 32 insertions(+), 92 deletions(-)
 delete mode 100644 mobile/components/Lists/ListItemWithAvatar.js

diff --git a/mobile/components/Lists/CommunityListItem.js b/mobile/components/Lists/CommunityListItem.js
index a67a9ed29e..93e9dbed58 100644
--- a/mobile/components/Lists/CommunityListItem.js
+++ b/mobile/components/Lists/CommunityListItem.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
 import Avatar from '../Avatar';
-import { ListItemWithAvatar } from './ListItemWithAvatar';
-import { TextColumnContainer, Title, Subtitle } from './style';
+import { ListItem } from './ListItem';
+import { TextColumnContainer, Title, Subtitle, AvatarWrapper } from './style';
 import type { GetCommunityType } from '../../../shared/graphql/queries/community/getCommunity';
 import type { Navigation } from '../../utils/types';
 
@@ -15,19 +15,20 @@ export class CommunityListItem extends React.Component<CommunityListItemType> {
   render() {
     const { community, navigation } = this.props;
     return (
-      <ListItemWithAvatar
+      <ListItem
         onPress={() => navigation.navigate(`Community`, { id: community.id })}
-        AvatarComponent={() => (
-          <Avatar src={community.profilePhoto} size={40} variant="square" />
-        )}
       >
+        <AvatarWrapper>
+          <Avatar src={community.profilePhoto} size={40} variant="square" />
+        </AvatarWrapper>
+
         <TextColumnContainer>
           <Title numberOfLines={1}>{community.name}</Title>
           <Subtitle numberOfLines={1}>
             {community.metaData.members} members
           </Subtitle>
         </TextColumnContainer>
-      </ListItemWithAvatar>
+      </ListItem>
     );
   }
 }
diff --git a/mobile/components/Lists/DirectMessageListItem.js b/mobile/components/Lists/DirectMessageListItem.js
index 93fd840982..e79df211ea 100644
--- a/mobile/components/Lists/DirectMessageListItem.js
+++ b/mobile/components/Lists/DirectMessageListItem.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import Avatar from '../Avatar';
-import { ListItemWithAvatar } from './ListItemWithAvatar';
+import { ListItem } from './ListItem';
 import {
   TextColumnContainer,
   TextRowContainer,
@@ -10,6 +10,7 @@ import {
   Title,
   Timestamp,
   Subtitle,
+  AvatarWrapper,
   MultiAvatarWrapper,
   DoubleAvatarFirst,
   DoubleAvatarSecond,
@@ -178,10 +179,9 @@ export class DirectMessageListItem extends React.Component<
     const { onPress, title, subtitle, timestamp } = this.props;
 
     return (
-      <ListItemWithAvatar
-        onPress={onPress}
-        AvatarComponent={() => this.renderParticipantAvatars()}
-      >
+      <ListItem onPress={onPress}>
+        <AvatarWrapper>{this.renderParticipantAvatars()}</AvatarWrapper>
+
         <TextColumnContainer>
           <TextRowContainer>
             <TitleTextContainer>
@@ -197,7 +197,7 @@ export class DirectMessageListItem extends React.Component<
 
           <Subtitle numberOfLines={2}>{subtitle}</Subtitle>
         </TextColumnContainer>
-      </ListItemWithAvatar>
+      </ListItem>
     );
   }
 }
diff --git a/mobile/components/Lists/ListItem.js b/mobile/components/Lists/ListItem.js
index cb7424d998..831eafd164 100644
--- a/mobile/components/Lists/ListItem.js
+++ b/mobile/components/Lists/ListItem.js
@@ -1,11 +1,12 @@
 // @flow
 import * as React from 'react';
+import { Row } from '../Flex';
 import TouchableOpacity from '../TouchableOpacity';
 import { ListItemView } from './style';
 
 type ListItemProps = {
   onPress: Function,
-  children?: React.ChildrenArray<any>,
+  children?: any,
 };
 
 export class ListItem extends React.Component<ListItemProps> {
@@ -14,7 +15,9 @@ export class ListItem extends React.Component<ListItemProps> {
 
     return (
       <ListItemView>
-        <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
+        <TouchableOpacity onPress={onPress}>
+          <Row>{children}</Row>
+        </TouchableOpacity>
       </ListItemView>
     );
   }
diff --git a/mobile/components/Lists/ListItemWithAvatar.js b/mobile/components/Lists/ListItemWithAvatar.js
deleted file mode 100644
index 4b9bcbe2bb..0000000000
--- a/mobile/components/Lists/ListItemWithAvatar.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-import * as React from 'react';
-import TouchableOpacity from '../TouchableOpacity';
-import { Row } from '../Flex';
-import { ListItemView, AvatarWrapper } from './style';
-
-type ListItemWithAvatarProps = {
-  onPress: Function,
-  children?: React.ChildrenArray<any>,
-  AvatarComponent: React.ComponentType<any>,
-};
-
-export class ListItemWithAvatar extends React.Component<
-  ListItemWithAvatarProps
-> {
-  render() {
-    const { onPress, children, AvatarComponent } = this.props;
-
-    return (
-      <ListItemView>
-        <TouchableOpacity onPress={onPress} activeOpacity={0.6}>
-          <Row>
-            <AvatarWrapper>
-              <AvatarComponent />
-            </AvatarWrapper>
-            {children}
-          </Row>
-        </TouchableOpacity>
-      </ListItemView>
-    );
-  }
-}
diff --git a/mobile/components/Lists/ListItemWithIcon.js b/mobile/components/Lists/ListItemWithIcon.js
index f7cb00abdd..e69de29bb2 100644
--- a/mobile/components/Lists/ListItemWithIcon.js
+++ b/mobile/components/Lists/ListItemWithIcon.js
@@ -1,30 +0,0 @@
-// @flow
-import * as React from 'react';
-import TouchableOpacity from '../TouchableOpacity';
-import { Row } from '../Flex';
-import { ListItemView, IconWrapper } from './style';
-
-type ListItemWithIconProps = {
-  onPress: Function,
-  children?: React.ChildrenArray<any>,
-  IconComponent: React.ComponentType<any>,
-};
-
-export class ListItemWithIcon extends React.Component<ListItemWithIconProps> {
-  render() {
-    const { onPress, children, IconComponent } = this.props;
-
-    return (
-      <ListItemView>
-        <TouchableOpacity onPress={onPress} activeOpacity={0.6}>
-          <Row>
-            <IconWrapper>
-              <IconComponent />
-            </IconWrapper>
-            {children}
-          </Row>
-        </TouchableOpacity>
-      </ListItemView>
-    );
-  }
-}
diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index 27ede5c06c..34ae88dd51 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { ListItemWithIcon } from './ListItemWithIcon';
+import { ListItem } from './ListItem';
 import {
   TextColumnContainer,
   TextRowContainer,
@@ -9,6 +9,7 @@ import {
   Subtitle,
   Link,
   FacepileContainer,
+  IconWrapper,
 } from './style';
 import type { ParsedNotificationType } from '../../views/notifications/parseNotification';
 import type { Navigation } from '../../utils/types';
@@ -267,10 +268,9 @@ export class NotificationListItem extends React.Component<Props> {
 
   render() {
     return (
-      <ListItemWithIcon
-        onPress={this.getOnPress()}
-        IconComponent={() => this.renderIcon()}
-      >
+      <ListItem onPress={this.getOnPress()}>
+        <IconWrapper>{this.renderIcon()}</IconWrapper>
+
         <TextColumnContainer>
           <TextRowContainer>
             <FacepileContainer>
@@ -294,7 +294,7 @@ export class NotificationListItem extends React.Component<Props> {
             {this.renderContextString()}
           </Subtitle>
         </TextColumnContainer>
-      </ListItemWithIcon>
+      </ListItem>
     );
   }
 }
diff --git a/mobile/components/Lists/UserListItem.js b/mobile/components/Lists/UserListItem.js
index 815b7cd114..915945ad57 100644
--- a/mobile/components/Lists/UserListItem.js
+++ b/mobile/components/Lists/UserListItem.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
 import Avatar from '../Avatar';
-import { ListItemWithAvatar } from './ListItemWithAvatar';
-import { TextColumnContainer, Title, Subtitle } from './style';
+import { ListItem } from './ListItem';
+import { TextColumnContainer, Title, Subtitle, AvatarWrapper } from './style';
 import type { Navigation } from '../../utils/types';
 
 type UserListItemType = { user: Object, navigation: Navigation };
@@ -11,15 +11,15 @@ export class UserListItem extends React.Component<UserListItemType> {
   render() {
     const { user, navigation } = this.props;
     return (
-      <ListItemWithAvatar
-        onPress={() => navigation.navigate(`User`, { id: user.id })}
-        AvatarComponent={() => <Avatar src={user.profilePhoto} size={40} />}
-      >
+      <ListItem onPress={() => navigation.navigate(`User`, { id: user.id })}>
+        <AvatarWrapper>
+          <Avatar src={user.profilePhoto} size={40} />
+        </AvatarWrapper>
         <TextColumnContainer>
           <Title numberOfLines={1}>{user.name}</Title>
           <Subtitle numberOfLines={1}>@{user.username}</Subtitle>
         </TextColumnContainer>
-      </ListItemWithAvatar>
+      </ListItem>
     );
   }
 }
diff --git a/mobile/components/Lists/index.js b/mobile/components/Lists/index.js
index 2be9bcc0b3..184eb098a6 100644
--- a/mobile/components/Lists/index.js
+++ b/mobile/components/Lists/index.js
@@ -1,6 +1,5 @@
 // @flow
 import { ListItem } from './ListItem';
-import { ListItemWithAvatar } from './ListItemWithAvatar';
 import { DirectMessageListItem } from './DirectMessageListItem';
 import { NotificationListItem } from './NotificationListItem';
 import { UserListItem } from './UserListItem';
@@ -8,7 +7,6 @@ import { CommunityListItem } from './CommunityListItem';
 
 export {
   ListItem,
-  ListItemWithAvatar,
   DirectMessageListItem,
   NotificationListItem,
   UserListItem,

From 8775d32955feae398dd3f36a8c88000d81987a65 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 07:02:21 -0700
Subject: [PATCH 35/42] Move theme to shared directory

---
 admin/src/index.js                            |  2 +-
 mobile/App.js                                 |  2 +-
 mobile/components/Lists/style.js              |  2 +-
 mobile/components/Login/style.js              |  2 +-
 mobile/components/TouchableHighlight/index.js |  2 +-
 mobile/components/theme/index.js              |  7 +++++--
 mobile/views/TabBar/index.js                  |  2 +-
 {src/components => shared}/theme/index.js     | 10 ++++------
 src/components/rich-text-editor/style.js      |  2 +-
 src/routes.js                                 |  2 +-
 10 files changed, 17 insertions(+), 16 deletions(-)
 rename {src/components => shared}/theme/index.js (84%)

diff --git a/admin/src/index.js b/admin/src/index.js
index 6139b08a37..c57c23f537 100644
--- a/admin/src/index.js
+++ b/admin/src/index.js
@@ -5,7 +5,7 @@ import { Router } from 'react-router';
 import { ApolloProvider } from 'react-apollo';
 import { ThemeProvider } from 'styled-components';
 import { Provider } from 'react-redux';
-import { theme } from './components/theme';
+import { theme } from 'shared/theme';
 import { client } from './api';
 import { initStore } from './store';
 import Routes from './routes';
diff --git a/mobile/App.js b/mobile/App.js
index 834b782179..39ed1245af 100644
--- a/mobile/App.js
+++ b/mobile/App.js
@@ -9,7 +9,7 @@ import { ThemeProvider } from 'styled-components';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { type ApolloClient } from 'apollo-client';
 
-import theme from './components/theme';
+import theme from '../shared/theme';
 import { createClient } from '../shared/graphql';
 import Login from './components/Login';
 import TabBar from './views/TabBar';
diff --git a/mobile/components/Lists/style.js b/mobile/components/Lists/style.js
index e24076cd4d..f5d34d06f7 100644
--- a/mobile/components/Lists/style.js
+++ b/mobile/components/Lists/style.js
@@ -6,7 +6,7 @@ import styled from 'styled-components/native';
 export const ListItemView = styled.View`
   display: flex;
   flex-direction: column;
-  border-bottom-color: ${props => props.theme.bg.border};
+  border-bottom-color: ${props => props.theme.bg.hairline};
   border-bottom-width: ${StyleSheet.hairlineWidth};
   background: ${props => props.theme.bg.default};
   position: relative;
diff --git a/mobile/components/Login/style.js b/mobile/components/Login/style.js
index 9d5caafbd4..377f049210 100644
--- a/mobile/components/Login/style.js
+++ b/mobile/components/Login/style.js
@@ -5,7 +5,7 @@ import { ScrollView } from 'react-native';
 import TouchableOpacity from '../TouchableOpacity';
 import { Svg } from 'expo';
 const { Path, G } = Svg;
-import theme from '../theme';
+import theme from '../../../shared/theme';
 import Anchor from '../Anchor';
 
 export const Container = (props: any) => {
diff --git a/mobile/components/TouchableHighlight/index.js b/mobile/components/TouchableHighlight/index.js
index 86b9c4d414..86e46dc2d0 100644
--- a/mobile/components/TouchableHighlight/index.js
+++ b/mobile/components/TouchableHighlight/index.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { TouchableHighlight } from 'react-native';
-import theme from '../theme';
+import theme from '../../../shared/theme';
 
 type Props = {
   children?: React.ChildrenArray<any>,
diff --git a/mobile/components/theme/index.js b/mobile/components/theme/index.js
index be56ec7c47..e9613aa359 100644
--- a/mobile/components/theme/index.js
+++ b/mobile/components/theme/index.js
@@ -1,10 +1,11 @@
 // @flow
-export default {
+export const theme = {
   bg: {
     default: '#FFFFFF',
     reverse: '#16171A',
     wash: '#F5F8FC',
-    border: '#A3AFBF',
+    border: '#DFE7EF',
+    hairline: '#A3AFBF',
     inactive: '#DFE7EF',
   },
   brand: {
@@ -76,3 +77,5 @@ export default {
     border: '#FFCCE5',
   },
 };
+
+export default theme;
diff --git a/mobile/views/TabBar/index.js b/mobile/views/TabBar/index.js
index d2ecb93f5d..955e055de9 100644
--- a/mobile/views/TabBar/index.js
+++ b/mobile/views/TabBar/index.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { TabNavigator, TabBarBottom } from 'react-navigation';
-import theme from '../../components/theme';
+import theme from '../../../shared/theme';
 
 // Stacks for the individual views
 import HomeStack from './HomeStack';
diff --git a/src/components/theme/index.js b/shared/theme/index.js
similarity index 84%
rename from src/components/theme/index.js
rename to shared/theme/index.js
index e100ef6db8..e9613aa359 100644
--- a/src/components/theme/index.js
+++ b/shared/theme/index.js
@@ -1,15 +1,11 @@
 // @flow
-// export our theme to the provider
-// This is globally available in styled-components when interpolating a function like so:
-// ${(props) => props.theme}
-// Or using import { withTheme } from 'styled-components';
-
 export const theme = {
   bg: {
     default: '#FFFFFF',
     reverse: '#16171A',
     wash: '#F5F8FC',
     border: '#DFE7EF',
+    hairline: '#A3AFBF',
     inactive: '#DFE7EF',
   },
   brand: {
@@ -38,7 +34,7 @@ export const theme = {
     },
     github: {
       default: '#16171A',
-      alt: '#16171A',
+      alt: '#828C99',
     },
     ph: {
       default: '#D85537',
@@ -81,3 +77,5 @@ export const theme = {
     border: '#FFCCE5',
   },
 };
+
+export default theme;
diff --git a/src/components/rich-text-editor/style.js b/src/components/rich-text-editor/style.js
index ae3b02a22c..5b324d7810 100644
--- a/src/components/rich-text-editor/style.js
+++ b/src/components/rich-text-editor/style.js
@@ -3,7 +3,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import Link from 'src/components/link';
 import { Transition, zIndex } from '../globals';
-import { theme } from 'src/components/theme';
+import { theme } from 'shared/theme';
 
 export const customStyleMap = {
   CODE: {
diff --git a/src/routes.js b/src/routes.js
index 2f202f9584..ca7bd08255 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -7,7 +7,7 @@ import { ErrorBoundary } from 'src/components/error';
 import { CLIENT_URL } from './api/constants';
 import generateMetaInfo from 'shared/generate-meta-info';
 import './reset.css.js';
-import { theme } from './components/theme';
+import { theme } from 'shared/theme';
 import { FlexCol } from './components/globals';
 import ScrollManager from './components/scrollManager';
 import Head from './components/head';

From 413782382f8da6d413fbbf5a1e16878e67505205 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 07:20:10 -0700
Subject: [PATCH 36/42] Swap redux currentUser to render prop component that
 provides cU

---
 mobile/actions/currentUserId.js            | 13 -----
 mobile/components/Messages/index.js        | 14 +++---
 mobile/components/WithCurrentUser/index.js | 22 +++++++++
 mobile/reducers/currentUserId.js           | 19 --------
 mobile/reducers/index.js                   |  3 --
 mobile/views/Dashboard/index.js            | 19 ++------
 mobile/views/DirectMessageThread/index.js  | 29 +++++------
 mobile/views/Notifications/index.js        | 57 +++++++++++-----------
 mobile/views/Thread/index.js               | 21 ++++----
 9 files changed, 83 insertions(+), 114 deletions(-)
 delete mode 100644 mobile/actions/currentUserId.js
 create mode 100644 mobile/components/WithCurrentUser/index.js
 delete mode 100644 mobile/reducers/currentUserId.js

diff --git a/mobile/actions/currentUserId.js b/mobile/actions/currentUserId.js
deleted file mode 100644
index 5e3aee92bc..0000000000
--- a/mobile/actions/currentUserId.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// @flow
-
-export type SetCurrentUserAction = {
-  type: 'SET_CURRENT_USER_ID',
-  id: ?string,
-};
-
-export const setCurrentUserId = (id: ?string) => {
-  return {
-    type: 'SET_CURRENT_USER_ID',
-    id,
-  };
-};
diff --git a/mobile/components/Messages/index.js b/mobile/components/Messages/index.js
index 4ed3639563..459d907524 100644
--- a/mobile/components/Messages/index.js
+++ b/mobile/components/Messages/index.js
@@ -1,10 +1,8 @@
 // @flow
-import React, { Fragment } from 'react';
-import { View, ScrollView } from 'react-native';
-import { Query } from 'react-apollo';
+import * as React from 'react';
+import { View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import compose from 'recompose/compose';
-import { getCurrentUserQuery } from '../../../shared/graphql/queries/user/getUser';
 import viewNetworkHandler from '../ViewNetworkHandler';
 import Text from '../Text';
 import Message from '../Message';
@@ -12,7 +10,7 @@ import InfiniteList from '../InfiniteList';
 import { ThreadMargin } from '../../views/Thread/style';
 import { sortAndGroupMessages } from '../../../shared/clients/group-messages';
 import { convertTimestampToDate } from '../../../src/helpers/utils';
-
+import WithCurrentUser from '../../components/WithCurrentUser';
 import RoboText from './RoboText';
 import Author from './Author';
 
@@ -53,8 +51,8 @@ class Messages extends React.Component<Props> {
       let hasInjectedUnseenRobo = false;
 
       return (
-        <Query query={getCurrentUserQuery}>
-          {({ data: { user: currentUser } }) => (
+        <WithCurrentUser
+          render={({ currentUser }) => (
             <InfiniteList
               {...flatListProps}
               data={messages}
@@ -140,7 +138,7 @@ class Messages extends React.Component<Props> {
               }}
             />
           )}
-        </Query>
+        />
       );
     }
 
diff --git a/mobile/components/WithCurrentUser/index.js b/mobile/components/WithCurrentUser/index.js
new file mode 100644
index 0000000000..302626bf67
--- /dev/null
+++ b/mobile/components/WithCurrentUser/index.js
@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import compose from 'recompose/compose';
+import {
+  getCurrentUser,
+  type GetUserType,
+} from '../../../shared/graphql/queries/user/getUser';
+
+type Props = {
+  render: Function,
+  data: {
+    user?: GetUserType,
+  },
+};
+
+class WithCurrentUser extends React.Component<Props> {
+  render() {
+    return this.props.render({ currentUser: this.props.data.user });
+  }
+}
+
+export default compose(getCurrentUser)(WithCurrentUser);
diff --git a/mobile/reducers/currentUserId.js b/mobile/reducers/currentUserId.js
deleted file mode 100644
index c4b3be78b5..0000000000
--- a/mobile/reducers/currentUserId.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// @flow
-import { type SetCurrentUserAction } from '../actions/currentUserId';
-
-export type CurrentUserState = ?string;
-
-const initialState: CurrentUserState = null;
-
-export default (
-  state: CurrentUserState = initialState,
-  action: SetCurrentUserAction
-): CurrentUserState => {
-  switch (action.type) {
-    case 'SET_CURRENT_USER_ID': {
-      return action.id;
-    }
-    default:
-      return state;
-  }
-};
diff --git a/mobile/reducers/index.js b/mobile/reducers/index.js
index 5fde9c7183..3ccb4d17e6 100644
--- a/mobile/reducers/index.js
+++ b/mobile/reducers/index.js
@@ -1,17 +1,14 @@
 // @flow
 import { combineReducers } from 'redux';
 import authentication, { type AuthenticationState } from './authentication';
-import currentUserId, { type CurrentUserState } from './currentUserId';
 import message from '../../src/reducers/message';
 
 export type State = {
   +authentication: $Exact<AuthenticationState>,
-  +currentUserId: CurrentUserState,
   +message: $Exact<$Call<typeof message, {}>>,
 };
 
 export default combineReducers({
   authentication,
-  currentUserId,
   message,
 });
diff --git a/mobile/views/Dashboard/index.js b/mobile/views/Dashboard/index.js
index a86c76791f..857cc8ccf6 100644
--- a/mobile/views/Dashboard/index.js
+++ b/mobile/views/Dashboard/index.js
@@ -1,13 +1,11 @@
 // @flow
 import * as React from 'react';
 import { View } from 'react-native';
-import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import withSafeView from '../../components/SafeAreaView';
 import ThreadFeed from '../../components/ThreadFeed';
 import getCurrentUserEverythingFeed from '../../../shared/graphql/queries/user/getCurrentUserEverythingFeed';
-import { setCurrentUserId } from '../../actions/currentUserId';
-import type { State as ReduxState } from '../../reducers';
+import type { Navigation } from '../../utils/types';
 import {
   getCurrentUser,
   type GetUserType,
@@ -18,23 +16,13 @@ import { Wrapper } from './style';
 const EverythingThreadFeed = compose(getCurrentUserEverythingFeed)(ThreadFeed);
 
 type Props = {
-  navigation: Object,
-  dispatch: Function,
+  navigation: Navigation,
   data: {
     user?: GetUserType,
   },
-  currentUserId: ?GetUserType,
 };
 
 class Dashboard extends React.Component<Props> {
-  componentDidUpdate(prevProps) {
-    const curr = this.props;
-    if (!prevProps.data.user && curr.data.user) {
-      if (!curr.currentUserId || curr.data.user.id !== curr.currentUserId) {
-        return curr.dispatch(setCurrentUserId(curr.data.user.id));
-      }
-    }
-  }
   render() {
     return (
       <Wrapper>
@@ -46,5 +34,4 @@ class Dashboard extends React.Component<Props> {
   }
 }
 
-const map = ({ currentUserId }: ReduxState): * => ({ currentUserId });
-export default compose(connect(map), withSafeView, getCurrentUser)(Dashboard);
+export default compose(withSafeView, getCurrentUser)(Dashboard);
diff --git a/mobile/views/DirectMessageThread/index.js b/mobile/views/DirectMessageThread/index.js
index e26a1bf390..97a876aebe 100644
--- a/mobile/views/DirectMessageThread/index.js
+++ b/mobile/views/DirectMessageThread/index.js
@@ -6,20 +6,12 @@ import Text from '../../components/Text';
 import ViewNetworkHandler, {
   type ViewNetworkHandlerProps,
 } from '../../components/ViewNetworkHandler';
-
-import {
-  getCurrentUser,
-  type GetUserType,
-} from '../../../shared/graphql/queries/user/getUser';
-
+import WithCurrentUser from '../../components/WithCurrentUser';
 import DirectMessageThread from './components/DirectMessageThread';
 import { Wrapper } from './style';
 
 type Props = {
   ...$Exact<ViewNetworkHandlerProps>,
-  data: {
-    user?: GetUserType,
-  },
   navigation?: {
     state: {
       params: {
@@ -33,16 +25,19 @@ class DirectMessageThreadView extends React.Component<Props> {
   render() {
     const id = idx(this.props, props => props.navigation.state.params.id);
     if (!id) return <Text>Non-existant DM thread</Text>;
-    if (!this.props.data.user) return null;
     return (
-      <Wrapper>
-        {/* TODO(@mxstbr): We have to pass currentUser here because otherwise the sendDirectMessage mutation doesn't work. We should not make that a requirement. */}
-        <DirectMessageThread currentUser={this.props.data.user} id={id} />
-      </Wrapper>
+      <WithCurrentUser
+        render={({ currentUser }) => {
+          if (!currentUser) return null;
+          return (
+            <Wrapper>
+              <DirectMessageThread currentUser={currentUser} id={id} />
+            </Wrapper>
+          );
+        }}
+      />
     );
   }
 }
 
-export default compose(ViewNetworkHandler, getCurrentUser)(
-  DirectMessageThreadView
-);
+export default compose(ViewNetworkHandler)(DirectMessageThreadView);
diff --git a/mobile/views/Notifications/index.js b/mobile/views/Notifications/index.js
index 07c3ff936f..9815cd1b96 100644
--- a/mobile/views/Notifications/index.js
+++ b/mobile/views/Notifications/index.js
@@ -21,15 +21,14 @@ import type { State as ReduxState } from '../../reducers';
 import type { AuthenticationState } from '../../reducers/authentication';
 import { parseNotification } from './parseNotification';
 import type { Navigation } from '../../utils/types';
-import type { CurrentUserState } from '../../reducers/currentUserId';
 import { deduplicateChildren } from '../../utils/deduplicate-children';
 import { NotificationListItem } from '../../components/Lists';
+import WithCurrentUser from '../../components/WithCurrentUser';
 
 type Props = {
   ...$Exact<ViewNetworkHandlerProps>,
   mutate: (token: any) => Promise<any>,
   authentication: AuthenticationState,
-  currentUserId: CurrentUserState,
   navigation: Navigation,
   data: {
     subscribeToNewNotifications: Function,
@@ -140,42 +139,45 @@ class Notifications extends React.Component<Props, State> {
       isLoading,
       hasError,
       data: { notifications },
-      currentUserId,
       navigation,
     } = this.props;
     const { pushNotifications } = this.state;
 
-    if (notifications && currentUserId) {
+    if (notifications) {
       const edges = notifications.edges.map(edge => edge && edge.node);
       const unique = deduplicateChildren(edges, 'id');
       const sorted = sortByDate(unique, 'modifiedAt', 'desc');
       const parsed = sorted.map(n => parseNotification(n)).filter(Boolean);
 
       return (
-        <Wrapper>
-          {pushNotifications != null &&
-            pushNotifications.decision === undefined && (
-              <Button
-                title="Enable push notifications"
-                onPress={this.enablePushNotifications}
-              />
-            )}
-          <InfiniteList
-            data={parsed}
-            renderItem={({ item }) => (
-              <NotificationListItem
-                navigation={navigation}
-                notification={item}
-                currentUserId={currentUserId}
+        <WithCurrentUser
+          render={({ currentUser }) => (
+            <Wrapper>
+              {pushNotifications != null &&
+                pushNotifications.decision === undefined && (
+                  <Button
+                    title="Enable push notifications"
+                    onPress={this.enablePushNotifications}
+                  />
+                )}
+              <InfiniteList
+                data={parsed}
+                renderItem={({ item }) => (
+                  <NotificationListItem
+                    navigation={navigation}
+                    notification={item}
+                    currentUserId={currentUser.id}
+                  />
+                )}
+                loadingIndicator={<Text>Loading...</Text>}
+                hasNextPage={notifications.pageInfo.hasNextPage}
+                fetchMore={this.fetchMore}
+                refetching={this.props.isRefetching}
+                refetch={this.props.data.refetch}
               />
-            )}
-            loadingIndicator={<Text>Loading...</Text>}
-            hasNextPage={notifications.pageInfo.hasNextPage}
-            fetchMore={this.fetchMore}
-            refetching={this.props.isRefetching}
-            refetch={this.props.data.refetch}
-          />
-        </Wrapper>
+            </Wrapper>
+          )}
+        />
       );
     }
 
@@ -199,7 +201,6 @@ class Notifications extends React.Component<Props, State> {
 
 const map = (state: ReduxState): * => ({
   authentication: state.authentication,
-  currentUserId: state.currentUserId,
 });
 
 export default compose(
diff --git a/mobile/views/Thread/index.js b/mobile/views/Thread/index.js
index 53a93a11b6..d9eee61892 100644
--- a/mobile/views/Thread/index.js
+++ b/mobile/views/Thread/index.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { View, ScrollView } from 'react-native';
 import compose from 'recompose/compose';
 import { connect } from 'react-redux';
-import { Query } from 'react-apollo';
 import { getThreadById } from '../../../shared/graphql/queries/thread/getThread';
 import ViewNetworkHandler from '../../components/ViewNetworkHandler';
 import withSafeView from '../../components/SafeAreaView';
@@ -12,10 +11,9 @@ import ThreadContent from '../../components/ThreadContent';
 import Messages from '../../components/Messages';
 import ChatInput from '../../components/ChatInput';
 import getThreadMessageConnection from '../../../shared/graphql/queries/thread/getThreadMessageConnection';
-import { getCurrentUserQuery } from '../../../shared/graphql/queries/user/getUser';
 import sendMessageMutation from '../../../shared/graphql/mutations/message/sendMessage';
 import { convertTimestampToDate } from '../../../src/helpers/utils';
-
+import WithCurrentUser from '../../components/WithCurrentUser';
 import CommunityHeader from './components/CommunityHeader';
 import Byline from './components/Byline';
 import ActionBar from './components/ActionBar';
@@ -96,13 +94,16 @@ class Thread extends React.Component<Props> {
             />
             <ThreadMessages id={thread.id} />
           </ScrollView>
-          <Query query={getCurrentUserQuery}>
-            {({ data: { user } }) =>
-              user ? (
-                <ChatInput onSubmit={text => this.sendMessage(text, user)} />
-              ) : null
-            }
-          </Query>
+          <WithCurrentUser
+            render={({ currentUser }) => {
+              if (!currentUser) return null;
+              return (
+                <ChatInput
+                  onSubmit={text => this.sendMessage(text, currentUser)}
+                />
+              );
+            }}
+          />
         </Wrapper>
       );
     }

From e32c16c2e85329ae8d08b67e9911bdb54f0e222d Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 07:29:15 -0700
Subject: [PATCH 37/42] Fix flexing

---
 mobile/components/Lists/style.js      | 1 +
 mobile/components/ThreadItem/style.js | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/mobile/components/Lists/style.js b/mobile/components/Lists/style.js
index f5d34d06f7..8564b0bb86 100644
--- a/mobile/components/Lists/style.js
+++ b/mobile/components/Lists/style.js
@@ -5,6 +5,7 @@ import styled from 'styled-components/native';
 
 export const ListItemView = styled.View`
   display: flex;
+  flex: 1;
   flex-direction: column;
   border-bottom-color: ${props => props.theme.bg.hairline};
   border-bottom-width: ${StyleSheet.hairlineWidth};
diff --git a/mobile/components/ThreadItem/style.js b/mobile/components/ThreadItem/style.js
index a0cf210ff1..d8a281371e 100644
--- a/mobile/components/ThreadItem/style.js
+++ b/mobile/components/ThreadItem/style.js
@@ -2,7 +2,10 @@
 import styled from 'styled-components/native';
 import TouchableOpacity from '../TouchableOpacity';
 
-export const InboxThreadContent = styled.View``;
+export const InboxThreadContent = styled.View`
+  display: flex;
+  flex: 1;
+`;
 
 export const ThreadTitle = styled.Text`
   font-size: 18px;
@@ -15,9 +18,11 @@ export const ThreadTitle = styled.Text`
 export const ThreadMeta = styled.View`
   display: flex;
   flex-direction: row;
+  flex: 1;
   justify-content: space-between;
   align-items: center;
   margin-top: 12px;
+  min-height: 40px;
 `;
 
 export const MetaText = styled.Text`

From 429cea5e257f847e53444507e86509d3803c8050 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 07:56:47 -0700
Subject: [PATCH 38/42] Improve withCurrentUser, add hoc

---
 mobile/components/Messages/index.js           | 175 +++++++++---------
 mobile/components/WithCurrentUser/index.js    |  41 +++-
 mobile/views/DirectMessageThread/index.js     |  27 ++-
 .../components/DirectMessageThreadsList.js    |   4 +-
 mobile/views/Notifications/index.js           |  60 +++---
 mobile/views/Thread/index.js                  |  23 +--
 6 files changed, 178 insertions(+), 152 deletions(-)

diff --git a/mobile/components/Messages/index.js b/mobile/components/Messages/index.js
index 459d907524..394875470c 100644
--- a/mobile/components/Messages/index.js
+++ b/mobile/components/Messages/index.js
@@ -10,7 +10,7 @@ import InfiniteList from '../InfiniteList';
 import { ThreadMargin } from '../../views/Thread/style';
 import { sortAndGroupMessages } from '../../../shared/clients/group-messages';
 import { convertTimestampToDate } from '../../../src/helpers/utils';
-import WithCurrentUser from '../../components/WithCurrentUser';
+import { withCurrentUser } from '../../components/WithCurrentUser';
 import RoboText from './RoboText';
 import Author from './Author';
 
@@ -18,6 +18,7 @@ import type { FlatListProps } from 'react-native';
 import type { Navigation } from 'react-navigation';
 import type { ThreadMessageConnectionType } from '../../../shared/graphql/fragments/thread/threadMessageConnection.js';
 import type { ThreadParticipantType } from '../../../shared/graphql/fragments/thread/threadParticipant';
+import type { GetUserType } from '../../../shared/graphql/queries/user/getUser';
 
 type Props = {
   id: string,
@@ -25,6 +26,7 @@ type Props = {
   isLoading: boolean,
   hasError: boolean,
   navigation: Navigation,
+  currentUser: GetUserType,
   data: {
     ...$Exact<ThreadMessageConnectionType>,
   },
@@ -37,6 +39,7 @@ class Messages extends React.Component<Props> {
       isLoading,
       hasError,
       navigation,
+      currentUser,
       ...flatListProps
     } = this.props;
 
@@ -51,93 +54,89 @@ class Messages extends React.Component<Props> {
       let hasInjectedUnseenRobo = false;
 
       return (
-        <WithCurrentUser
-          render={({ currentUser }) => (
-            <InfiniteList
-              {...flatListProps}
-              data={messages}
-              keyExtractor={item => item[0].id}
-              renderItem={({ item: group, index: i }) => {
-                if (group.length === 0) return null;
-
-                const initialMessage = group[0];
-                const me = currentUser
-                  ? initialMessage.author.user.id === currentUser.id
-                  : false;
-                // const canModerate =
-                //   threadType !== 'directMessageThread' && (me || isModerator);
-
-                if (initialMessage.author.user.id === 'robo') {
-                  if (initialMessage.message.type === 'timestamp') {
-                    return (
-                      <RoboText key={initialMessage.timestamp}>
-                        {convertTimestampToDate(initialMessage.timestamp)}
-                      </RoboText>
-                    );
-                  }
-
-                  // Ignore unknown robo messages
-                  return null;
-                }
-
-                // Flow doesn't seem to understand that we filter the robo authors
-                // (which have incorrect information, obviously) above, so this
-                // has to be a thread participant
-                // $FlowIssue
-                const author: ThreadParticipantType = initialMessage.author;
-
-                let unseenRobo = null;
-                // TODO(@mxstbr): Figure out how to get lastSeen information
-                let lastSeen = new Date('April 15, 2018 12:00:00');
-                if (
-                  !!lastSeen &&
-                  new Date(group[group.length - 1].timestamp).getTime() >
-                    new Date(lastSeen).getTime() &&
-                  !me &&
-                  !hasInjectedUnseenRobo
-                ) {
-                  hasInjectedUnseenRobo = true;
-                  unseenRobo = (
-                    <RoboText
-                      style={{ marginTop: 8 }}
-                      color={props => props.theme.warn.default}
-                      key="new-messages"
-                    >
-                      New Messages
-                    </RoboText>
-                  );
-                }
-
+        <InfiniteList
+          {...flatListProps}
+          data={messages}
+          keyExtractor={item => item[0].id}
+          renderItem={({ item: group, index: i }) => {
+            if (group.length === 0) return null;
+
+            const initialMessage = group[0];
+            const me = currentUser
+              ? initialMessage.author.user.id === currentUser.id
+              : false;
+            // const canModerate =
+            //   threadType !== 'directMessageThread' && (me || isModerator);
+
+            if (initialMessage.author.user.id === 'robo') {
+              if (initialMessage.message.type === 'timestamp') {
                 return (
-                  <View key={initialMessage.id || 'robo'}>
-                    {unseenRobo}
-                    <ThreadMargin>
-                      <Author
-                        onPress={() =>
-                          navigation.navigate(`User`, { id: author.user.id })
-                        }
-                        avatar={!me}
-                        author={author}
-                        me={me}
-                      />
-                      <View>
-                        {group.map(message => {
-                          return (
-                            <Message
-                              key={message.id}
-                              me={me}
-                              message={message}
-                              threadId={this.props.id}
-                            />
-                          );
-                        })}
-                      </View>
-                    </ThreadMargin>
-                  </View>
+                  <RoboText key={initialMessage.timestamp}>
+                    {convertTimestampToDate(initialMessage.timestamp)}
+                  </RoboText>
                 );
-              }}
-            />
-          )}
+              }
+
+              // Ignore unknown robo messages
+              return null;
+            }
+
+            // Flow doesn't seem to understand that we filter the robo authors
+            // (which have incorrect information, obviously) above, so this
+            // has to be a thread participant
+            // $FlowIssue
+            const author: ThreadParticipantType = initialMessage.author;
+
+            let unseenRobo = null;
+            // TODO(@mxstbr): Figure out how to get lastSeen information
+            let lastSeen = new Date('April 15, 2018 12:00:00');
+            if (
+              !!lastSeen &&
+              new Date(group[group.length - 1].timestamp).getTime() >
+                new Date(lastSeen).getTime() &&
+              !me &&
+              !hasInjectedUnseenRobo
+            ) {
+              hasInjectedUnseenRobo = true;
+              unseenRobo = (
+                <RoboText
+                  style={{ marginTop: 8 }}
+                  color={props => props.theme.warn.default}
+                  key="new-messages"
+                >
+                  New Messages
+                </RoboText>
+              );
+            }
+
+            return (
+              <View key={initialMessage.id || 'robo'}>
+                {unseenRobo}
+                <ThreadMargin>
+                  <Author
+                    onPress={() =>
+                      navigation.navigate(`User`, { id: author.user.id })
+                    }
+                    avatar={!me}
+                    author={author}
+                    me={me}
+                  />
+                  <View>
+                    {group.map(message => {
+                      return (
+                        <Message
+                          key={message.id}
+                          me={me}
+                          message={message}
+                          threadId={this.props.id}
+                        />
+                      );
+                    })}
+                  </View>
+                </ThreadMargin>
+              </View>
+            );
+          }}
         />
       );
     }
@@ -154,4 +153,6 @@ class Messages extends React.Component<Props> {
   }
 }
 
-export default compose(viewNetworkHandler, withNavigation)(Messages);
+export default compose(viewNetworkHandler, withNavigation, withCurrentUser)(
+  Messages
+);
diff --git a/mobile/components/WithCurrentUser/index.js b/mobile/components/WithCurrentUser/index.js
index 302626bf67..0d85177591 100644
--- a/mobile/components/WithCurrentUser/index.js
+++ b/mobile/components/WithCurrentUser/index.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import hoistStatics from 'hoist-non-react-statics';
 import compose from 'recompose/compose';
 import {
   getCurrentUser,
@@ -8,15 +9,49 @@ import {
 
 type Props = {
   render: Function,
+  children: ?any,
   data: {
     user?: GetUserType,
   },
 };
 
-class WithCurrentUser extends React.Component<Props> {
+class CurrentUserComponent extends React.Component<Props> {
   render() {
-    return this.props.render({ currentUser: this.props.data.user });
+    const { data: { user: currentUser }, children, render } = this.props;
+
+    return children ? children({ currentUser }) : render({ currentUser });
   }
 }
 
-export default compose(getCurrentUser)(WithCurrentUser);
+export const CurrentUser = compose(getCurrentUser)(CurrentUserComponent);
+
+export type WithCurrentUserProps = {
+  currentUser: ?GetUserType,
+};
+
+export const withCurrentUser = (
+  Component: React.ComponentType<Props>
+): React.ComponentType<$Diff<Props, WithCurrentUserProps>> => {
+  const C = props => {
+    const { wrappedComponentRef, ...remainingProps } = props;
+    return (
+      <CurrentUser>
+        {({ currentUser }) => {
+          if (!currentUser)
+            return <Component {...remainingProps} ref={wrappedComponentRef} />;
+
+          return (
+            <Component
+              {...remainingProps}
+              currentUser={currentUser}
+              ref={wrappedComponentRef}
+            />
+          );
+        }}
+      </CurrentUser>
+    );
+  };
+
+  C.WrappedComponent = Component;
+  return hoistStatics(C, Component);
+};
diff --git a/mobile/views/DirectMessageThread/index.js b/mobile/views/DirectMessageThread/index.js
index 97a876aebe..cf0f0c466b 100644
--- a/mobile/views/DirectMessageThread/index.js
+++ b/mobile/views/DirectMessageThread/index.js
@@ -3,15 +3,13 @@ import React from 'react';
 import compose from 'recompose/compose';
 import idx from 'idx';
 import Text from '../../components/Text';
-import ViewNetworkHandler, {
-  type ViewNetworkHandlerProps,
-} from '../../components/ViewNetworkHandler';
-import WithCurrentUser from '../../components/WithCurrentUser';
+import { withCurrentUser } from '../../components/WithCurrentUser';
 import DirectMessageThread from './components/DirectMessageThread';
 import { Wrapper } from './style';
+import type { GetUserType } from '../../../shared/graphql/queries/user/getUser';
 
 type Props = {
-  ...$Exact<ViewNetworkHandlerProps>,
+  currentUser: ?GetUserType,
   navigation?: {
     state: {
       params: {
@@ -24,20 +22,17 @@ type Props = {
 class DirectMessageThreadView extends React.Component<Props> {
   render() {
     const id = idx(this.props, props => props.navigation.state.params.id);
+    const { currentUser } = this.props;
     if (!id) return <Text>Non-existant DM thread</Text>;
+
+    if (!currentUser) return null;
+
     return (
-      <WithCurrentUser
-        render={({ currentUser }) => {
-          if (!currentUser) return null;
-          return (
-            <Wrapper>
-              <DirectMessageThread currentUser={currentUser} id={id} />
-            </Wrapper>
-          );
-        }}
-      />
+      <Wrapper>
+        <DirectMessageThread currentUser={currentUser} id={id} />
+      </Wrapper>
     );
   }
 }
 
-export default compose(ViewNetworkHandler)(DirectMessageThreadView);
+export default compose(withCurrentUser)(DirectMessageThreadView);
diff --git a/mobile/views/DirectMessages/components/DirectMessageThreadsList.js b/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
index c7bbe23e74..0cf0d2c61d 100644
--- a/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
+++ b/mobile/views/DirectMessages/components/DirectMessageThreadsList.js
@@ -67,7 +67,7 @@ const DirectMessageThreadsList = (props: Props) => {
 };
 
 export default compose(
-  ViewNetworkHandler,
+  withNavigation,
   getCurrentUserDMThreadConnection,
-  withNavigation
+  ViewNetworkHandler
 )(DirectMessageThreadsList);
diff --git a/mobile/views/Notifications/index.js b/mobile/views/Notifications/index.js
index 9815cd1b96..2bc5965e01 100644
--- a/mobile/views/Notifications/index.js
+++ b/mobile/views/Notifications/index.js
@@ -23,13 +23,15 @@ import { parseNotification } from './parseNotification';
 import type { Navigation } from '../../utils/types';
 import { deduplicateChildren } from '../../utils/deduplicate-children';
 import { NotificationListItem } from '../../components/Lists';
-import WithCurrentUser from '../../components/WithCurrentUser';
+import { withCurrentUser } from '../../components/WithCurrentUser';
+import type { GetUserType } from '../../../shared/graphql/queries/user/getUser';
 
 type Props = {
   ...$Exact<ViewNetworkHandlerProps>,
   mutate: (token: any) => Promise<any>,
   authentication: AuthenticationState,
   navigation: Navigation,
+  currentUser: GetUserType,
   data: {
     subscribeToNewNotifications: Function,
     fetchMore: Function,
@@ -138,46 +140,43 @@ class Notifications extends React.Component<Props, State> {
     const {
       isLoading,
       hasError,
+      currentUser,
       data: { notifications },
       navigation,
     } = this.props;
     const { pushNotifications } = this.state;
-
-    if (notifications) {
+    console.log('currentUser', currentUser);
+    if (notifications && currentUser) {
       const edges = notifications.edges.map(edge => edge && edge.node);
       const unique = deduplicateChildren(edges, 'id');
       const sorted = sortByDate(unique, 'modifiedAt', 'desc');
       const parsed = sorted.map(n => parseNotification(n)).filter(Boolean);
 
       return (
-        <WithCurrentUser
-          render={({ currentUser }) => (
-            <Wrapper>
-              {pushNotifications != null &&
-                pushNotifications.decision === undefined && (
-                  <Button
-                    title="Enable push notifications"
-                    onPress={this.enablePushNotifications}
-                  />
-                )}
-              <InfiniteList
-                data={parsed}
-                renderItem={({ item }) => (
-                  <NotificationListItem
-                    navigation={navigation}
-                    notification={item}
-                    currentUserId={currentUser.id}
-                  />
-                )}
-                loadingIndicator={<Text>Loading...</Text>}
-                hasNextPage={notifications.pageInfo.hasNextPage}
-                fetchMore={this.fetchMore}
-                refetching={this.props.isRefetching}
-                refetch={this.props.data.refetch}
+        <Wrapper>
+          {pushNotifications != null &&
+            pushNotifications.decision === undefined && (
+              <Button
+                title="Enable push notifications"
+                onPress={this.enablePushNotifications}
               />
-            </Wrapper>
-          )}
-        />
+            )}
+          <InfiniteList
+            data={parsed}
+            renderItem={({ item }) => (
+              <NotificationListItem
+                navigation={navigation}
+                notification={item}
+                currentUserId={currentUser.id}
+              />
+            )}
+            loadingIndicator={<Text>Loading...</Text>}
+            hasNextPage={notifications.pageInfo.hasNextPage}
+            fetchMore={this.fetchMore}
+            refetching={this.props.isRefetching}
+            refetch={this.props.data.refetch}
+          />
+        </Wrapper>
       );
     }
 
@@ -204,6 +203,7 @@ const map = (state: ReduxState): * => ({
 });
 
 export default compose(
+  withCurrentUser,
   withSafeView,
   getNotifications,
   subscribeExpoPush,
diff --git a/mobile/views/Thread/index.js b/mobile/views/Thread/index.js
index d9eee61892..c2cafc37e9 100644
--- a/mobile/views/Thread/index.js
+++ b/mobile/views/Thread/index.js
@@ -13,13 +13,12 @@ import ChatInput from '../../components/ChatInput';
 import getThreadMessageConnection from '../../../shared/graphql/queries/thread/getThreadMessageConnection';
 import sendMessageMutation from '../../../shared/graphql/mutations/message/sendMessage';
 import { convertTimestampToDate } from '../../../src/helpers/utils';
-import WithCurrentUser from '../../components/WithCurrentUser';
+import { withCurrentUser } from '../../components/WithCurrentUser';
 import CommunityHeader from './components/CommunityHeader';
 import Byline from './components/Byline';
 import ActionBar from './components/ActionBar';
-
 import type { GetThreadType } from '../../../shared/graphql/queries/thread/getThread';
-
+import type { GetUserType } from '../../../shared/graphql/queries/user/getUser';
 import { Wrapper, ThreadMargin } from './style';
 
 const ThreadMessages = getThreadMessageConnection(Messages);
@@ -36,6 +35,7 @@ type Props = {
   hasError: boolean,
   sendMessage: Function,
   quotedMessage: ?string,
+  currentUser: GetUserType,
   data: {
     thread?: GetThreadType,
   },
@@ -59,7 +59,7 @@ class Thread extends React.Component<Props> {
   };
 
   render() {
-    const { data, isLoading, hasError } = this.props;
+    const { data, isLoading, hasError, currentUser } = this.props;
 
     if (data.thread) {
       const createdAt = new Date(data.thread.createdAt).getTime();
@@ -94,16 +94,10 @@ class Thread extends React.Component<Props> {
             />
             <ThreadMessages id={thread.id} />
           </ScrollView>
-          <WithCurrentUser
-            render={({ currentUser }) => {
-              if (!currentUser) return null;
-              return (
-                <ChatInput
-                  onSubmit={text => this.sendMessage(text, currentUser)}
-                />
-              );
-            }}
-          />
+
+          {currentUser && (
+            <ChatInput onSubmit={text => this.sendMessage(text, currentUser)} />
+          )}
         </Wrapper>
       );
     }
@@ -137,5 +131,6 @@ export default compose(
   getThreadById,
   connect(mapStateToProps),
   sendMessageMutation,
+  withCurrentUser,
   ViewNetworkHandler
 )(Thread);

From 79830ab4c968ab5e922226deaff439c1137d4e21 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 08:07:53 -0700
Subject: [PATCH 39/42] Delete unused file

---
 mobile/components/Lists/ListItemWithIcon.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 mobile/components/Lists/ListItemWithIcon.js

diff --git a/mobile/components/Lists/ListItemWithIcon.js b/mobile/components/Lists/ListItemWithIcon.js
deleted file mode 100644
index e69de29bb2..0000000000

From 82848b41823d903577b4689c354fc8245a35eb1e Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 08:08:26 -0700
Subject: [PATCH 40/42] Remove console log

---
 mobile/views/Notifications/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/mobile/views/Notifications/index.js b/mobile/views/Notifications/index.js
index 2bc5965e01..cc77948e85 100644
--- a/mobile/views/Notifications/index.js
+++ b/mobile/views/Notifications/index.js
@@ -145,7 +145,6 @@ class Notifications extends React.Component<Props, State> {
       navigation,
     } = this.props;
     const { pushNotifications } = this.state;
-    console.log('currentUser', currentUser);
     if (notifications && currentUser) {
       const edges = notifications.edges.map(edge => edge && edge.node);
       const unique = deduplicateChildren(edges, 'id');

From e655caebf5a3024493b85c99f459c41b141ccb46 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 08:09:43 -0700
Subject: [PATCH 41/42] Fix flow?

---
 mobile/components/Lists/NotificationListItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mobile/components/Lists/NotificationListItem.js b/mobile/components/Lists/NotificationListItem.js
index 34ae88dd51..5ac92e0e73 100644
--- a/mobile/components/Lists/NotificationListItem.js
+++ b/mobile/components/Lists/NotificationListItem.js
@@ -11,7 +11,7 @@ import {
   FacepileContainer,
   IconWrapper,
 } from './style';
-import type { ParsedNotificationType } from '../../views/notifications/parseNotification';
+import type { ParsedNotificationType } from '../../views/Notifications/parseNotification';
 import type { Navigation } from '../../utils/types';
 import { timeDifferenceShort } from '../../../shared/time-difference';
 import sentencify from '../../../shared/sentencify';

From 51d3922461062d60e6f9ed4421ae2d3ea32a7642 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 25 May 2018 08:25:38 -0700
Subject: [PATCH 42/42] Fix failing snapshot

---
 shared/clients/test/__snapshots__/messages.test.js.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/shared/clients/test/__snapshots__/messages.test.js.snap b/shared/clients/test/__snapshots__/messages.test.js.snap
index e72b8bc6a1..f268f3ccca 100644
--- a/shared/clients/test/__snapshots__/messages.test.js.snap
+++ b/shared/clients/test/__snapshots__/messages.test.js.snap
@@ -9,6 +9,7 @@ Array [
           "id": "robo",
         },
       },
+      "id": 2016-12-31T23:00:00.000Z,
       "message": Object {
         "content": 2016-12-31T23:00:00.000Z,
         "type": "timestamp",