From 9e107bfdf6de1903015c6cf3bd60a7cdd7a5a1f5 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Fri, 29 Mar 2019 16:36:07 -0300 Subject: [PATCH] Room item layout (#771) --- __tests__/RoomItem.js | 40 - __tests__/__snapshots__/RoomItem.js.snap | 38 - .../__snapshots__/Storyshots.test.js.snap | 2547 +++++++++++---- app/constants/colors.js | 15 +- app/containers/ConnectionBadge.js | 16 +- app/containers/EmojiPicker/styles.js | 5 +- app/containers/HeaderButton.js | 6 +- app/containers/MessageBox/Recording.js | 5 +- app/containers/MessageBox/ReplyPreview.js | 20 +- app/containers/MessageBox/UploadModal.js | 17 +- app/containers/MessageBox/index.js | 23 +- app/containers/MessageBox/styles.js | 40 +- app/containers/SearchBox.js | 4 +- app/containers/StatusBar.js | 4 +- app/containers/TextInput.js | 23 +- app/containers/message/Audio.js | 18 +- app/containers/message/Image.js | 3 +- app/containers/message/Markdown.js | 18 +- app/containers/message/Message.js | 7 +- app/containers/message/PhotoModal.js | 11 +- app/containers/message/ReactionsModal.js | 18 +- app/containers/message/Reply.js | 33 +- app/containers/message/Url.js | 20 +- app/containers/message/User.js | 29 +- app/containers/message/Video.js | 5 +- app/containers/message/styles.js | 55 +- app/i18n/locales/en.js | 2 +- app/i18n/locales/pt-BR.js | 2 +- app/lib/methods/helpers/normalizeMessage.js | 7 +- app/presentation/RoomItem.js | 82 +- app/presentation/UserItem.js | 21 +- app/utils/touch/index.ios.js | 3 +- app/views/CreateChannelView.js | 30 +- app/views/LegalView.js | 8 +- app/views/LoginSignupView.js | 8 +- app/views/LoginView.js | 5 +- app/views/MentionedMessagesView/index.js | 3 +- app/views/MentionedMessagesView/styles.js | 15 +- app/views/NewMessageView.js | 10 +- app/views/NewServerView.js | 8 +- app/views/OnboardingView/index.js | 7 +- app/views/OnboardingView/styles.js | 15 +- app/views/PinnedMessagesView/index.js | 3 +- app/views/PinnedMessagesView/styles.js | 15 +- app/views/ProfileView/index.js | 5 +- app/views/RoomActionsView/index.js | 4 +- app/views/RoomActionsView/styles.js | 38 +- app/views/RoomFilesView/index.js | 3 +- app/views/RoomFilesView/styles.js | 15 +- app/views/RoomInfoEditView/styles.js | 14 +- app/views/RoomInfoView/index.js | 2 +- app/views/RoomInfoView/styles.js | 41 +- app/views/RoomMembersView/styles.js | 32 +- app/views/RoomView/Header/Icon.js | 4 +- app/views/RoomView/Header/index.js | 10 +- app/views/RoomView/List.js | 4 +- app/views/RoomView/Separator.js | 19 +- app/views/RoomView/UploadProgress.js | 26 +- app/views/RoomView/index.js | 7 +- app/views/RoomView/styles.js | 34 +- .../RoomsListView/Header/Header.android.js | 8 +- app/views/RoomsListView/Header/Header.ios.js | 8 +- app/views/RoomsListView/Search/index.js | 46 - app/views/RoomsListView/Search/styles.js | 15 - app/views/RoomsListView/index.js | 19 +- app/views/RoomsListView/styles.js | 74 +- app/views/SearchMessagesView/index.js | 3 +- app/views/SearchMessagesView/styles.js | 18 +- app/views/SelectedUsersView.js | 4 +- app/views/SidebarView/SidebarItem.js | 3 +- app/views/SidebarView/index.js | 13 +- app/views/SidebarView/styles.js | 32 +- app/views/StarredMessagesView/index.js | 3 +- app/views/StarredMessagesView/styles.js | 15 +- app/views/Styles.js | 132 +- ios/Podfile | 4 +- ios/Podfile.lock | 5 +- .../Private/React/RCTLocationObserver.h | 1 - .../Public/React/RCTLocationObserver.h | 1 - ios/Pods/Manifest.lock | 5 +- ios/Pods/Pods.xcodeproj/project.pbxproj | 2720 ++++++++--------- storybook/stories/Channels/DirectMessage.js | 90 - storybook/stories/Message.js | 35 +- storybook/stories/RoomItem.js | 115 + storybook/stories/index.js | 20 +- 85 files changed, 4152 insertions(+), 2759 deletions(-) delete mode 100644 __tests__/RoomItem.js delete mode 100644 __tests__/__snapshots__/RoomItem.js.snap delete mode 100644 app/views/RoomsListView/Search/index.js delete mode 100644 app/views/RoomsListView/Search/styles.js delete mode 120000 ios/Pods/Headers/Private/React/RCTLocationObserver.h delete mode 120000 ios/Pods/Headers/Public/React/RCTLocationObserver.h delete mode 100644 storybook/stories/Channels/DirectMessage.js create mode 100644 storybook/stories/RoomItem.js diff --git a/__tests__/RoomItem.js b/__tests__/RoomItem.js deleted file mode 100644 index f9117195..00000000 --- a/__tests__/RoomItem.js +++ /dev/null @@ -1,40 +0,0 @@ -import {View} from 'react-native'; -import { Provider } from 'react-redux'; - -import { createStore, combineReducers } from 'redux'; - -const reducers = combineReducers({login:() => ({user: {}}), settings:() => ({}), meteor: () => ({ connected: true })}); -const store = createStore(reducers); - -import React from 'react'; -import RoomItem from '../app/presentation/RoomItem'; - -// Note: test renderer must be required after react-native. -import renderer from 'react-test-renderer'; - -const date = '2017-10-10T10:00:00Z'; -const onPress = () => {}; - -it('renders correctly', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); -}); - -it('render unread', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); -}); - -it('render unread +999', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); -}); - -it('render no icon', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); -}); - -it('render private group', () => { - expect(renderer.create( ).toJSON()).toMatchSnapshot(); -}); - -it('render channel', () => { - expect(renderer.create().toJSON()).toMatchSnapshot(); -}); diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap deleted file mode 100644 index 1ce3b141..00000000 --- a/__tests__/__snapshots__/RoomItem.js.snap +++ /dev/null @@ -1,38 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`render channel 1`] = ` - - View - -`; - -exports[`render no icon 1`] = ` - - View - -`; - -exports[`render private group 1`] = ` - - View - - -`; - -exports[`render unread +999 1`] = ` - - View - -`; - -exports[`render unread 1`] = ` - - View - -`; - -exports[`renders correctly 1`] = ` - - View - -`; diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 944d06ee..d67da54b 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -191,24 +191,6 @@ exports[`Storyshots Avatar avatar 1`] = ` `; -exports[`Storyshots Channel Cell Direct Messages 1`] = ` - - - View - View - View - View - View - View - View - View - View - View - View - - -`; - exports[`Storyshots Message list 1`] = ` @@ -365,11 +346,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -468,7 +456,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -553,7 +541,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -567,11 +554,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -670,7 +664,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -755,7 +749,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -769,11 +762,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -854,7 +854,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -902,7 +902,7 @@ exports[`Storyshots Message list 1`] = ` source={ Object { "priority": "high", - "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8", + "uri": "https://open.rocket.chat/avatar/Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8", } } style={ @@ -939,7 +939,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -953,25 +952,30 @@ exports[`Storyshots Message list 1`] = ` } > - rocket.cat + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum @@ -1083,9 +1089,11 @@ exports[`Storyshots Message list 1`] = ` @@ -1169,9 +1177,11 @@ exports[`Storyshots Message list 1`] = ` @@ -1210,7 +1220,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -1295,7 +1305,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -1309,11 +1318,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -1457,9 +1473,11 @@ exports[`Storyshots Message list 1`] = ` @@ -1516,7 +1534,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -1601,7 +1619,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -1615,38 +1632,44 @@ exports[`Storyshots Message list 1`] = ` } > Diego Mello - - - @ - diego.mello + > + @ + diego.mello + + + Message + + + + + + + + + + + + + + + + + + + + + Diego Mello + + @ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum + + + + + 10:00 AM + + + + + @@ -1731,7 +1960,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -1816,7 +2045,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -1830,11 +2058,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -1887,8 +2122,11 @@ exports[`Storyshots Message list 1`] = ` @@ -1943,7 +2181,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -2028,7 +2266,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -2042,11 +2279,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -2145,7 +2389,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -2230,7 +2474,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -2244,11 +2487,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -2347,7 +2597,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -2432,7 +2682,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -2446,11 +2695,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -2501,6 +2757,7 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "#E8F2FF", "color": "#0072FE", + "fontFamily": "System", "fontWeight": "500", "padding": 5, } @@ -2516,8 +2773,9 @@ exports[`Storyshots Message list 1`] = ` @@ -2727,11 +2987,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -2830,7 +3097,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -2915,7 +3182,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -2929,11 +3195,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -3074,7 +3347,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -3159,7 +3432,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -3173,11 +3445,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -3276,7 +3555,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -3361,7 +3640,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -3375,11 +3653,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -3436,7 +3721,7 @@ exports[`Storyshots Message list 1`] = ` Object { "flexDirection": "row", "flexWrap": "wrap", - "marginTop": 10, + "marginTop": 6, } } > @@ -3492,7 +3777,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -3577,7 +3862,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -3591,11 +3875,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -3652,7 +3943,7 @@ exports[`Storyshots Message list 1`] = ` Object { "flexDirection": "row", "flexWrap": "wrap", - "marginTop": 10, + "marginTop": 6, } } > @@ -3713,7 +4004,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -3798,7 +4089,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -3812,11 +4102,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -3897,7 +4194,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -3982,7 +4279,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -3996,11 +4292,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -4081,7 +4384,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -4166,7 +4469,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -4180,11 +4482,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -4265,7 +4574,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -4350,7 +4659,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -4364,11 +4672,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -4467,7 +4782,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -4552,7 +4867,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -4566,11 +4880,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -4641,9 +4962,11 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "color": "#9ea2a8", + "backgroundColor": "transparent", + "color": "#9ca2a8", + "fontFamily": "System", "fontSize": 14, - "fontWeight": "600", + "fontWeight": "500", }, Object { "color": "#f5455c", @@ -4657,7 +4980,7 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "backgroundColor": "#9ea2a8", + "backgroundColor": "#9ca2a8", "flex": 1, "height": 1, }, @@ -4665,7 +4988,7 @@ exports[`Storyshots Message list 1`] = ` "backgroundColor": "#f5455c", }, Object { - "marginHorizontal": 15, + "marginHorizontal": 14, }, ] } @@ -4674,9 +4997,11 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "color": "#9ea2a8", + "backgroundColor": "transparent", + "color": "#9ca2a8", + "fontFamily": "System", "fontSize": 14, - "fontWeight": "600", + "fontWeight": "500", }, Object { "color": "#f5455c", @@ -4712,7 +5037,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -4797,7 +5122,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -4811,11 +5135,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -4886,15 +5217,17 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "color": "#9ea2a8", + "backgroundColor": "transparent", + "color": "#9ca2a8", + "fontFamily": "System", "fontSize": 14, - "fontWeight": "600", + "fontWeight": "500", }, Object { "color": "#f5455c", }, Object { - "marginRight": 15, + "marginRight": 14, }, ] } @@ -4905,7 +5238,7 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "backgroundColor": "#9ea2a8", + "backgroundColor": "#9ca2a8", "flex": 1, "height": 1, }, @@ -4986,9 +5319,11 @@ exports[`Storyshots Message list 1`] = ` @@ -5027,7 +5362,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -5112,7 +5447,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -5126,11 +5460,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -5200,7 +5541,7 @@ exports[`Storyshots Message list 1`] = ` @@ -5347,11 +5689,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -5450,7 +5799,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -5535,7 +5884,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -5549,11 +5897,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -6019,11 +6375,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -6507,11 +6871,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -6685,7 +7056,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -6770,7 +7141,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -6784,11 +7154,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -6941,9 +7318,11 @@ exports[`Storyshots Message list 1`] = ` @@ -6985,6 +7366,729 @@ exports[`Storyshots Message list 1`] = ` + + + + + + + + + First message + + + + + + + + + + + + + + View + View + + + + + + + + 00:00 + + + + + + + This is a description + + + + + + + + + + + + + + View + View + + + + + + + + 00:00 + + + + + + + + + + + + View + View + + + + + + + + 00:00 + + + + + + @@ -7127,11 +8230,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -7213,7 +8323,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -7298,7 +8408,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -7312,11 +8421,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -7416,7 +8532,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -7501,7 +8617,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -7515,11 +8630,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -7689,11 +8808,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -7793,7 +8919,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -7878,7 +9004,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -7892,11 +9017,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -7997,7 +9129,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -8082,7 +9214,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -8096,11 +9227,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -8200,7 +9338,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -8285,7 +9423,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -8299,11 +9436,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -8452,9 +9596,11 @@ exports[`Storyshots Message list 1`] = ` @@ -8494,7 +9640,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -8583,7 +9729,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -8597,11 +9742,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -8700,7 +9852,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -8787,7 +9939,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -8801,11 +9952,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -8904,7 +10062,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, Object { "backgroundColor": "#fff5df", @@ -8991,7 +10149,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -9005,11 +10162,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -9108,7 +10272,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -9193,7 +10357,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -9207,11 +10370,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -9291,7 +10462,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -9376,7 +10547,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -9390,11 +10560,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -9474,7 +10652,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -9559,7 +10737,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -9573,11 +10750,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -9657,7 +10842,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -9742,7 +10927,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -9756,11 +10940,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -9841,7 +11033,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -9926,7 +11118,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -9940,11 +11131,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -10024,7 +11223,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -10109,7 +11308,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -10123,11 +11321,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -10207,7 +11413,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -10292,7 +11498,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -10306,11 +11511,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -10390,7 +11603,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -10475,7 +11688,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -10489,11 +11701,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -10573,7 +11793,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -10658,7 +11878,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -10672,11 +11891,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -10756,7 +11983,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -10841,7 +12068,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -10855,11 +12081,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -10939,7 +12173,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -11024,7 +12258,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -11038,11 +12271,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -11122,7 +12363,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -11207,7 +12448,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -11221,11 +12461,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -11305,7 +12553,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -11390,7 +12638,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -11404,11 +12651,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -11488,7 +12743,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -11573,7 +12828,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -11587,11 +12841,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -11671,7 +12933,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -11756,7 +13018,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -11770,11 +13031,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -11854,7 +13123,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, Array [ @@ -11944,7 +13213,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -11958,11 +13226,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -12061,7 +13336,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -12146,7 +13421,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -12160,11 +13434,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -12330,7 +13611,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -12415,7 +13696,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -12429,11 +13709,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -12767,11 +14063,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -12824,7 +14127,10 @@ exports[`Storyshots Message list 1`] = ` onPress={[Function]} style={ Object { - "color": "#1D74F5", + "backgroundColor": "transparent", + "color": "#1d74f5", + "fontFamily": "System", + "fontWeight": "400", } } > @@ -12839,7 +14145,10 @@ exports[`Storyshots Message list 1`] = ` onPress={[Function]} style={ Object { - "color": "#1D74F5", + "backgroundColor": "transparent", + "color": "#1d74f5", + "fontFamily": "System", + "fontWeight": "400", } } > @@ -12900,7 +14209,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -12985,7 +14294,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -12999,11 +14307,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -13202,11 +14514,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -13258,10 +14577,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13273,10 +14593,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13290,11 +14611,12 @@ exports[`Storyshots Message list 1`] = ` @@ -13449,11 +14770,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -13563,7 +14891,7 @@ exports[`Storyshots Message list 1`] = ` "width": "100%", }, Object { - "marginTop": 10, + "marginTop": 6, }, undefined, undefined, @@ -13648,7 +14976,6 @@ exports[`Storyshots Message list 1`] = ` "alignItems": "center", "flex": 1, "flexDirection": "row", - "marginBottom": 2, } } > @@ -13662,11 +14989,14 @@ exports[`Storyshots Message list 1`] = ` } > @@ -13757,9 +15091,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13795,9 +15131,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13819,9 +15157,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13855,9 +15195,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13879,9 +15221,11 @@ exports[`Storyshots Message list 1`] = ` @@ -13901,3 +15245,104 @@ exports[`Storyshots Message list 1`] = ` `; + +exports[`Storyshots RoomItem list 1`] = ` + + + + Basic + + View + + User + + View + View + + Type + + View + View + View + View + View + + Alerts + + View + View + View + View + View + + Last Message + + View + View + View + View + View + View + + +`; diff --git a/app/constants/colors.js b/app/constants/colors.js index e666dee5..6ef55358 100644 --- a/app/constants/colors.js +++ b/app/constants/colors.js @@ -1,9 +1,16 @@ import { isIOS } from '../utils/deviceInfo'; export const COLOR_DANGER = '#f5455c'; -export const COLOR_BUTTON_PRIMARY = '#1d74f5'; -export const COLOR_TEXT = '#292E35'; +export const COLOR_SUCCESS = '#2de0a5'; +export const COLOR_PRIMARY = '#1d74f5'; +export const COLOR_WHITE = '#fff'; +export const COLOR_BUTTON_PRIMARY = COLOR_PRIMARY; +export const COLOR_TITLE = '#0C0D0F'; +export const COLOR_TEXT = '#2F343D'; +export const COLOR_TEXT_DESCRIPTION = '#9ca2a8'; export const COLOR_SEPARATOR = '#A7A7AA'; +export const COLOR_BACKGROUND_CONTAINER = '#f3f4f5'; +export const COLOR_BORDER = '#e1e5e8'; export const STATUS_COLORS = { online: '#2de0a5', busy: COLOR_DANGER, @@ -12,5 +19,5 @@ export const STATUS_COLORS = { }; export const HEADER_BACKGROUND = isIOS ? '#f8f8f8' : '#2F343D'; -export const HEADER_TITLE = isIOS ? '#0C0D0F' : '#FFF'; -export const HEADER_BACK = isIOS ? '#1d74f5' : '#FFF'; +export const HEADER_TITLE = isIOS ? COLOR_TITLE : COLOR_WHITE; +export const HEADER_BACK = isIOS ? COLOR_PRIMARY : COLOR_WHITE; diff --git a/app/containers/ConnectionBadge.js b/app/containers/ConnectionBadge.js index e2f9818a..5e8c2e74 100644 --- a/app/containers/ConnectionBadge.js +++ b/app/containers/ConnectionBadge.js @@ -7,6 +7,10 @@ import PropTypes from 'prop-types'; import I18n from '../i18n'; import debounce from '../utils/debounce'; +import sharedStyles from '../views/Styles'; +import { + COLOR_BACKGROUND_CONTAINER, COLOR_DANGER, COLOR_SUCCESS, COLOR_WHITE +} from '../constants/colors'; const styles = StyleSheet.create({ container: { @@ -14,25 +18,25 @@ const styles = StyleSheet.create({ position: 'absolute', top: 0, height: 41, - backgroundColor: '#F7F8FA', + backgroundColor: COLOR_BACKGROUND_CONTAINER, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', elevation: 4 }, text: { - color: '#fff', + color: COLOR_WHITE, fontSize: 15, - fontWeight: 'normal' + ...sharedStyles.textRegular }, textConnecting: { - color: '#9EA2A8' + ...sharedStyles.textColorDescription }, containerConnected: { - backgroundColor: '#2de0a5' + backgroundColor: COLOR_SUCCESS }, containerOffline: { - backgroundColor: '#f5455c' + backgroundColor: COLOR_DANGER }, activityIndicator: { marginRight: 15 diff --git a/app/containers/EmojiPicker/styles.js b/app/containers/EmojiPicker/styles.js index 35cbd7e9..d4e993f5 100644 --- a/app/containers/EmojiPicker/styles.js +++ b/app/containers/EmojiPicker/styles.js @@ -1,8 +1,9 @@ import { StyleSheet } from 'react-native'; +import { COLOR_PRIMARY, COLOR_WHITE } from '../../constants/colors'; export default StyleSheet.create({ background: { - backgroundColor: '#fff' + backgroundColor: COLOR_WHITE }, container: { flex: 1 @@ -27,7 +28,7 @@ export default StyleSheet.create({ left: 0, right: 0, height: 2, - backgroundColor: '#007aff', + backgroundColor: COLOR_PRIMARY, bottom: 0 }, tabLine: { diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index 6a9c23c3..3ad9675f 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Text } from 'react-native'; import HeaderButtons, { HeaderButton, Item } from 'react-navigation-header-buttons'; import { CustomIcon } from '../lib/Icons'; import { isIOS } from '../utils/deviceInfo'; +import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors'; -const color = isIOS ? '#1D74F5' : '#FFF'; +const color = isIOS ? COLOR_PRIMARY : COLOR_WHITE; export const headerIconSize = 23; const CustomHeaderButton = React.memo(props => ( @@ -60,5 +60,3 @@ LegalButton.propTypes = { }; export { Item }; - -export default () => a; diff --git a/app/containers/MessageBox/Recording.js b/app/containers/MessageBox/Recording.js index d816ce2b..d30a9cf1 100644 --- a/app/containers/MessageBox/Recording.js +++ b/app/containers/MessageBox/Recording.js @@ -10,6 +10,7 @@ import styles from './styles'; import I18n from '../../i18n'; import { isIOS, isAndroid } from '../../utils/deviceInfo'; import { CustomIcon } from '../../lib/Icons'; +import { COLOR_SUCCESS, COLOR_DANGER } from '../../constants/colors'; export const _formatTime = function(seconds) { let minutes = Math.floor(seconds / 60); @@ -130,7 +131,7 @@ export default class extends React.PureComponent { > @@ -143,7 +144,7 @@ export default class extends React.PureComponent { > diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index a25ac146..dd24b0d1 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -6,17 +6,21 @@ import { connect } from 'react-redux'; import Markdown from '../message/Markdown'; import { CustomIcon } from '../../lib/Icons'; +import sharedStyles from '../../views/Styles'; +import { + COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_TEXT_DESCRIPTION, COLOR_WHITE +} from '../../constants/colors'; const styles = StyleSheet.create({ container: { flexDirection: 'row', marginTop: 10, - backgroundColor: '#fff' + backgroundColor: COLOR_WHITE }, messageContainer: { flex: 1, marginHorizontal: 10, - backgroundColor: '#F3F4F5', + backgroundColor: COLOR_BACKGROUND_CONTAINER, paddingHorizontal: 15, paddingVertical: 10, borderRadius: 4 @@ -26,15 +30,17 @@ const styles = StyleSheet.create({ alignItems: 'center' }, username: { - color: '#1D74F5', + color: COLOR_PRIMARY, fontSize: 16, - fontWeight: '500' + ...sharedStyles.textMedium }, time: { - color: '#9EA2A8', fontSize: 12, lineHeight: 16, - marginLeft: 5 + marginLeft: 6, + ...sharedStyles.textColorDescription, + ...sharedStyles.textRegular, + fontWeight: '300' }, close: { marginRight: 10 @@ -79,7 +85,7 @@ export default class ReplyPreview extends Component { - + ); } diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js index 3d04ba41..82b0ac7d 100644 --- a/app/containers/MessageBox/UploadModal.js +++ b/app/containers/MessageBox/UploadModal.js @@ -12,8 +12,9 @@ import Button from '../Button'; import I18n from '../../i18n'; import sharedStyles from '../../views/Styles'; import { isIOS } from '../../utils/deviceInfo'; +import { COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE } from '../../constants/colors'; -const cancelButtonColor = '#f7f8fa'; +const cancelButtonColor = COLOR_BACKGROUND_CONTAINER; const styles = StyleSheet.create({ modal: { @@ -25,11 +26,13 @@ const styles = StyleSheet.create({ paddingTop: 16 }, title: { + fontSize: 14, + ...sharedStyles.textColorTitle, ...sharedStyles.textBold }, container: { height: 430, - backgroundColor: '#ffffff', + backgroundColor: COLOR_WHITE, flexDirection: 'column' }, scrollView: { @@ -46,7 +49,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', padding: 16, - backgroundColor: '#f7f8fa' + backgroundColor: COLOR_BACKGROUND_CONTAINER }, button: { marginBottom: 0 @@ -149,15 +152,15 @@ export default class UploadModal extends Component { underlayColor={cancelButtonColor} activeOpacity={0.5} > - {I18n.t('Cancel')} + {I18n.t('Cancel')} - {I18n.t('Send')} + {I18n.t('Send')} ); diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js index 7f3c9390..20f841fa 100644 --- a/app/containers/MessageBox/index.js +++ b/app/containers/MessageBox/index.js @@ -31,12 +31,11 @@ import I18n from '../../i18n'; import ReplyPreview from './ReplyPreview'; import { CustomIcon } from '../../lib/Icons'; import debounce from '../../utils/debounce'; +import { COLOR_PRIMARY, COLOR_TEXT_DESCRIPTION } from '../../constants/colors'; const MENTIONS_TRACKING_TYPE_USERS = '@'; const MENTIONS_TRACKING_TYPE_EMOJIS = ':'; -const BLUE_COLOR = '#1D74F5'; - const onlyUnique = function onlyUnique(value, index, self) { return self.indexOf(({ _id }) => value._id === _id) === index; }; @@ -241,7 +240,7 @@ export default class MessageBox extends Component { > @@ -258,7 +257,7 @@ export default class MessageBox extends Component { > @@ -273,7 +272,7 @@ export default class MessageBox extends Component { > @@ -294,7 +293,7 @@ export default class MessageBox extends Component { accessibilityLabel={I18n.t('Send message')} accessibilityTraits='button' > - + ); return icons; @@ -308,7 +307,7 @@ export default class MessageBox extends Component { accessibilityLabel={I18n.t('Send audio message')} accessibilityTraits='button' > - + ); icons.push( @@ -320,7 +319,7 @@ export default class MessageBox extends Component { accessibilityLabel={I18n.t('Message actions')} accessibilityTraits='button' > - + ); return icons; @@ -648,7 +647,7 @@ export default class MessageBox extends Component { onPress={() => this.onPressMention(item)} > {item.username} - {item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')} + {item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')} ) @@ -691,7 +690,7 @@ export default class MessageBox extends Component { {trackingType === MENTIONS_TRACKING_TYPE_EMOJIS ? [ this.renderMentionEmoji(item), - :{ item.name || item }: + :{ item.name || item }: ] : [ , - { item.username || item.name } + { item.username || item.name } ] } @@ -782,7 +781,7 @@ export default class MessageBox extends Component { underlineColorAndroid='transparent' defaultValue='' multiline - placeholderTextColor='#9ea2a8' + placeholderTextColor={COLOR_TEXT_DESCRIPTION} testID='messagebox-input' /> {this.rightButtons} diff --git a/app/containers/MessageBox/styles.js b/app/containers/MessageBox/styles.js index 601799c9..ec4cb3e7 100644 --- a/app/containers/MessageBox/styles.js +++ b/app/containers/MessageBox/styles.js @@ -1,29 +1,33 @@ import { StyleSheet } from 'react-native'; import { isIOS } from '../../utils/deviceInfo'; +import sharedStyles from '../../views/Styles'; +import { + COLOR_BORDER, COLOR_SEPARATOR, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE +} from '../../constants/colors'; const MENTION_HEIGHT = 50; export default StyleSheet.create({ textBox: { - backgroundColor: '#fff', + backgroundColor: COLOR_WHITE, flex: 0, alignItems: 'center', - borderTopWidth: 1, - borderTopColor: '#D8D8D8', + borderTopWidth: StyleSheet.hairlineWidth, + borderTopColor: COLOR_SEPARATOR, zIndex: 2 }, composer: { - backgroundColor: '#fff', + backgroundColor: COLOR_WHITE, flexDirection: 'column', - borderTopColor: '#e1e5e8', - borderTopWidth: 1 + borderTopColor: COLOR_SEPARATOR, + borderTopWidth: StyleSheet.hairlineWidth }, textArea: { flexDirection: 'row', alignItems: 'center', flexGrow: 0, - backgroundColor: '#fff' + backgroundColor: COLOR_WHITE }, textBoxInput: { textAlignVertical: 'center', @@ -37,7 +41,8 @@ export default StyleSheet.create({ paddingRight: 0, fontSize: 17, letterSpacing: 0, - color: '#2f343d' + ...sharedStyles.textColorNormal, + ...sharedStyles.textRegular }, editing: { backgroundColor: '#fff5df' @@ -53,9 +58,9 @@ export default StyleSheet.create({ }, mentionItem: { height: MENTION_HEIGHT, - backgroundColor: '#F7F8FA', + backgroundColor: COLOR_BACKGROUND_CONTAINER, borderTopWidth: 1, - borderTopColor: '#ECECEC', + borderTopColor: COLOR_BORDER, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 5 @@ -72,18 +77,25 @@ export default StyleSheet.create({ textAlign: 'center' }, fixedMentionAvatar: { - fontWeight: 'bold', textAlign: 'center', - width: 46 + width: 46, + fontSize: 14, + ...sharedStyles.textBold, + ...sharedStyles.textColorNormal + }, + mentionText: { + fontSize: 14, + ...sharedStyles.textRegular, + ...sharedStyles.textColorNormal }, emojiKeyboardContainer: { flex: 1, - borderTopColor: '#ECECEC', + borderTopColor: COLOR_BORDER, borderTopWidth: 1 }, iphoneXArea: { height: 50, - backgroundColor: '#fff', + backgroundColor: COLOR_WHITE, position: 'absolute', bottom: 0, left: 0, diff --git a/app/containers/SearchBox.js b/app/containers/SearchBox.js index a1f433fa..65a41d3e 100644 --- a/app/containers/SearchBox.js +++ b/app/containers/SearchBox.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import I18n from '../i18n'; import { isIOS } from '../utils/deviceInfo'; import { CustomIcon } from '../lib/Icons'; +import sharedStyles from '../views/Styles'; const styles = StyleSheet.create({ container: { @@ -28,7 +29,8 @@ const styles = StyleSheet.create({ fontSize: 17, marginLeft: 8, paddingTop: 0, - paddingBottom: 0 + paddingBottom: 0, + ...sharedStyles.textRegular } }); diff --git a/app/containers/StatusBar.js b/app/containers/StatusBar.js index f1e11017..9e3a3874 100644 --- a/app/containers/StatusBar.js +++ b/app/containers/StatusBar.js @@ -3,13 +3,13 @@ import { StatusBar as StatusBarRN } from 'react-native'; import PropTypes from 'prop-types'; import { isIOS } from '../utils/deviceInfo'; -import { HEADER_BACKGROUND } from '../constants/colors'; +import { HEADER_BACKGROUND, COLOR_WHITE } from '../constants/colors'; const HEADER_BAR_STYLE = isIOS ? 'dark-content' : 'light-content'; const StatusBar = React.memo(({ light }) => { if (light) { - return ; + return ; } return ; }); diff --git a/app/containers/TextInput.js b/app/containers/TextInput.js index 6237a687..99c091f3 100644 --- a/app/containers/TextInput.js +++ b/app/containers/TextInput.js @@ -6,7 +6,9 @@ import PropTypes from 'prop-types'; import { BorderlessButton } from 'react-native-gesture-handler'; import sharedStyles from '../views/Styles'; -import { COLOR_DANGER, COLOR_TEXT } from '../constants/colors'; +import { + COLOR_DANGER, COLOR_TEXT_DESCRIPTION, COLOR_TEXT, COLOR_BORDER +} from '../constants/colors'; import { CustomIcon } from '../lib/Icons'; const styles = StyleSheet.create({ @@ -15,22 +17,21 @@ const styles = StyleSheet.create({ }, label: { marginBottom: 10, - color: COLOR_TEXT, fontSize: 14, - fontWeight: '700' + ...sharedStyles.textSemibold, + ...sharedStyles.textColorNormal }, input: { ...sharedStyles.textRegular, + ...sharedStyles.textColorNormal, height: 48, - fontSize: 17, - color: '#9EA2A8', - letterSpacing: 0, + fontSize: 16, paddingLeft: 14, paddingRight: 14, - borderWidth: 1.5, + borderWidth: 1, borderRadius: 2, backgroundColor: 'white', - borderColor: '#E7EBF2' + borderColor: COLOR_BORDER }, inputIconLeft: { paddingLeft: 45 @@ -59,10 +60,10 @@ const styles = StyleSheet.create({ right: 15 }, icon: { - color: '#2F343D' + color: COLOR_TEXT }, password: { - color: '#9ea2a8' + color: COLOR_TEXT_DESCRIPTION } }); @@ -144,7 +145,7 @@ export default class RCTextInput extends React.PureComponent { testID={testID} accessibilityLabel={placeholder} placeholder={placeholder} - placeholderTextColor='#9ea2a8' + placeholderTextColor={COLOR_TEXT_DESCRIPTION} contentDescription={placeholder} {...inputProps} /> diff --git a/app/containers/message/Audio.js b/app/containers/message/Audio.js index 3537b66c..3b53d04c 100644 --- a/app/containers/message/Audio.js +++ b/app/containers/message/Audio.js @@ -11,6 +11,8 @@ import equal from 'deep-equal'; import Markdown from './Markdown'; import { CustomIcon } from '../../lib/Icons'; +import sharedStyles from '../../views/Styles'; +import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY } from '../../constants/colors'; const styles = StyleSheet.create({ audioContainer: { @@ -18,9 +20,11 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', height: 56, - backgroundColor: '#f7f8fa', + backgroundColor: COLOR_BACKGROUND_CONTAINER, + borderColor: COLOR_BORDER, + borderWidth: 1, borderRadius: 4, - marginBottom: 10 + marginBottom: 6 }, playPauseButton: { width: 56, @@ -28,7 +32,7 @@ const styles = StyleSheet.create({ backgroundColor: 'transparent' }, playPauseImage: { - color: '#1D74F5' + color: COLOR_PRIMARY }, slider: { flex: 1, @@ -37,8 +41,8 @@ const styles = StyleSheet.create({ duration: { marginRight: 16, fontSize: 14, - fontWeight: '500', - color: '#54585e' + ...sharedStyles.textColorNormal, + ...sharedStyles.textRegular }, thumbStyle: { width: 12, @@ -169,8 +173,8 @@ export default class Audio extends React.Component { easing: Easing.linear, delay: 0 }} - thumbTintColor='#1d74f5' - minimumTrackTintColor='#1d74f5' + thumbTintColor={COLOR_PRIMARY} + minimumTrackTintColor={COLOR_PRIMARY} onValueChange={value => this.setState({ currentTime: value })} thumbStyle={styles.thumbStyle} /> diff --git a/app/containers/message/Image.js b/app/containers/message/Image.js index c9eea974..a74ef1cd 100644 --- a/app/containers/message/Image.js +++ b/app/containers/message/Image.js @@ -7,6 +7,7 @@ import equal from 'deep-equal'; import PhotoModal from './PhotoModal'; import Markdown from './Markdown'; import styles from './styles'; +import { COLOR_WHITE } from '../../constants/colors'; export default class extends Component { static propTypes = { @@ -71,7 +72,7 @@ export default class extends Component { onPress={() => this.onPressButton()} onActiveStateChange={this.isPressed} style={styles.imageContainer} - underlayColor='#fff' + underlayColor={COLOR_WHITE} > const formatText = text => text.replace( new RegExp('(?:<|<)((?:https|http):\\/\\/[^\\|]+)\\|(.+?)(?=>|>)(?:>|>)', 'gm'), @@ -92,26 +95,29 @@ export default class Markdown extends React.Component { style={{ paragraph: styles.paragraph, text: { - color: '#0C0D0F', fontSize: 16, - letterSpacing: 0.1 + ...sharedStyles.textColorNormal, + ...sharedStyles.textRegular }, codeInline: { + ...sharedStyles.textRegular, ...codeFontFamily, borderWidth: 1, - backgroundColor: '#f8f8f8', + backgroundColor: COLOR_BACKGROUND_CONTAINER, borderRadius: 4 }, codeBlock: { + ...sharedStyles.textRegular, ...codeFontFamily, - backgroundColor: '#f8f8f8', - borderColor: '#cccccc', + backgroundColor: COLOR_BACKGROUND_CONTAINER, + borderColor: COLOR_BORDER, borderWidth: 1, borderRadius: 4, padding: 4 }, link: { - color: '#1D74F5' + color: COLOR_PRIMARY, + ...sharedStyles.textRegular }, ...style }} diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js index 6ec7efff..d927a63e 100644 --- a/app/containers/message/Message.js +++ b/app/containers/message/Message.js @@ -23,6 +23,7 @@ import styles from './styles'; import I18n from '../../i18n'; import messagesStatus from '../../constants/messagesStatus'; import { CustomIcon } from '../../lib/Icons'; +import { COLOR_DANGER, COLOR_TEXT_DESCRIPTION, COLOR_WHITE } from '../../constants/colors'; const SYSTEM_MESSAGES = [ 'r', @@ -271,7 +272,7 @@ export default class Message extends PureComponent { const { onErrorPress } = this.props; return ( - + ); } @@ -281,7 +282,7 @@ export default class Message extends PureComponent { user, onReactionLongPress, onReactionPress, customEmojis, baseUrl } = this.props; const reacted = reaction.usernames.findIndex(item => item.value === user.username) !== -1; - const underlayColor = reacted ? '#fff' : '#e1e5e8'; + const underlayColor = reacted ? COLOR_WHITE : COLOR_TEXT_DESCRIPTION; return ( {I18n.t('Reply')} diff --git a/app/containers/message/PhotoModal.js b/app/containers/message/PhotoModal.js index fc2ff688..d9a38eee 100644 --- a/app/containers/message/PhotoModal.js +++ b/app/containers/message/PhotoModal.js @@ -8,6 +8,9 @@ import Modal from 'react-native-modal'; import ImageViewer from 'react-native-image-zoom-viewer'; import { responsive } from 'react-native-responsive-ui'; +import sharedStyles from '../../views/Styles'; +import { COLOR_WHITE } from '../../constants/colors'; + const styles = StyleSheet.create({ imageWrapper: { flex: 1 @@ -18,16 +21,16 @@ const styles = StyleSheet.create({ marginVertical: 10 }, title: { - color: '#ffffff', + color: COLOR_WHITE, textAlign: 'center', fontSize: 16, - fontWeight: '600' + ...sharedStyles.textSemibold }, description: { - color: '#ffffff', + color: COLOR_WHITE, textAlign: 'center', fontSize: 14, - fontWeight: '500' + ...sharedStyles.textMedium }, indicatorContainer: { alignItems: 'center', diff --git a/app/containers/message/ReactionsModal.js b/app/containers/message/ReactionsModal.js index cde5fa96..733464df 100644 --- a/app/containers/message/ReactionsModal.js +++ b/app/containers/message/ReactionsModal.js @@ -8,6 +8,8 @@ import Modal from 'react-native-modal'; import Emoji from './Emoji'; import I18n from '../../i18n'; import { CustomIcon } from '../../lib/Icons'; +import sharedStyles from '../../views/Styles'; +import { COLOR_WHITE } from '../../constants/colors'; const styles = StyleSheet.create({ titleContainer: { @@ -16,18 +18,20 @@ const styles = StyleSheet.create({ paddingVertical: 10 }, title: { - color: '#ffffff', + color: COLOR_WHITE, textAlign: 'center', fontSize: 16, - fontWeight: '600' + ...sharedStyles.textSemibold }, reactCount: { - color: '#dddddd', - fontSize: 10 + color: COLOR_WHITE, + fontSize: 13, + ...sharedStyles.textRegular }, peopleReacted: { - color: '#ffffff', - fontWeight: '500' + color: COLOR_WHITE, + fontSize: 14, + ...sharedStyles.textMedium }, peopleItemContainer: { flex: 1, @@ -51,7 +55,7 @@ const styles = StyleSheet.create({ position: 'absolute', left: 0, top: 10, - color: '#ffffff' + color: COLOR_WHITE } }); const standardEmojiStyle = { fontSize: 20 }; diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js index 7e837105..bb35b31a 100644 --- a/app/containers/message/Reply.js +++ b/app/containers/message/Reply.js @@ -6,15 +6,19 @@ import { RectButton } from 'react-native-gesture-handler'; import Markdown from './Markdown'; import openLink from '../../utils/openLink'; +import sharedStyles from '../../views/Styles'; +import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_WHITE } from '../../constants/colors'; const styles = StyleSheet.create({ button: { flex: 1, flexDirection: 'row', alignItems: 'center', - marginTop: 15, + marginTop: 6, alignSelf: 'flex-end', - backgroundColor: '#f3f4f5', + backgroundColor: COLOR_BACKGROUND_CONTAINER, + borderColor: COLOR_BORDER, + borderWidth: 1, borderRadius: 4 }, attachmentContainer: { @@ -30,16 +34,16 @@ const styles = StyleSheet.create({ }, author: { flex: 1, - color: '#0C0D0F', fontSize: 16, - fontWeight: '500', - marginRight: 10 + ...sharedStyles.textColorNormal, + ...sharedStyles.textMedium }, time: { fontSize: 12, - fontWeight: 'normal', - color: '#9ea2a8', - marginLeft: 5 + marginLeft: 10, + ...sharedStyles.textColorDescription, + ...sharedStyles.textRegular, + fontWeight: '300' }, fieldsContainer: { flex: 1, @@ -51,7 +55,14 @@ const styles = StyleSheet.create({ padding: 10 }, fieldTitle: { - fontWeight: 'bold' + fontSize: 14, + ...sharedStyles.textColorNormal, + ...sharedStyles.textSemibold + }, + fieldValue: { + fontSize: 14, + ...sharedStyles.textColorNormal, + ...sharedStyles.textRegular }, marginTop: { marginTop: 4 @@ -121,7 +132,7 @@ const Reply = ({ {attachment.fields.map(field => ( {field.title} - {field.value} + {field.value} ))} @@ -133,7 +144,7 @@ const Reply = ({ onPress={() => onPress(attachment, baseUrl, user)} style={[styles.button, index > 0 && styles.marginTop]} activeOpacity={0.5} - underlayColor='#fff' + underlayColor={COLOR_WHITE} > {renderTitle()} diff --git a/app/containers/message/Url.js b/app/containers/message/Url.js index 7767d2e8..1385209b 100644 --- a/app/containers/message/Url.js +++ b/app/containers/message/Url.js @@ -5,6 +5,10 @@ import FastImage from 'react-native-fast-image'; import { RectButton } from 'react-native-gesture-handler'; import openLink from '../../utils/openLink'; +import sharedStyles from '../../views/Styles'; +import { + COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY, COLOR_WHITE +} from '../../constants/colors'; const styles = StyleSheet.create({ button: { @@ -14,8 +18,8 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: 'column', borderRadius: 4, - backgroundColor: '#F3F4F5', - borderColor: '#F3F4F5', + backgroundColor: COLOR_BACKGROUND_CONTAINER, + borderColor: COLOR_BORDER, borderWidth: 1 }, textContainer: { @@ -26,14 +30,14 @@ const styles = StyleSheet.create({ alignItems: 'flex-start' }, title: { - fontWeight: '500', - color: '#1D74F5', - fontSize: 16 + color: COLOR_PRIMARY, + fontSize: 16, + ...sharedStyles.textMedium }, description: { - marginTop: 5, fontSize: 16, - color: '#0C0D0F' + ...sharedStyles.textColorDescription, + ...sharedStyles.textRegular }, marginTop: { marginTop: 4 @@ -58,7 +62,7 @@ const Url = ({ url, index }) => { onPress={() => onPress(url.url)} style={[styles.button, index > 0 && styles.marginTop, styles.container]} activeOpacity={0.5} - underlayColor='#fff' + underlayColor={COLOR_WHITE} > {url.image ? : null} diff --git a/app/containers/message/User.js b/app/containers/message/User.js index 39f31046..4f05fb45 100644 --- a/app/containers/message/User.js +++ b/app/containers/message/User.js @@ -3,18 +3,19 @@ import PropTypes from 'prop-types'; import { View, Text, StyleSheet } from 'react-native'; import moment from 'moment'; +import sharedStyles from '../../views/Styles'; + const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', - alignItems: 'center', - marginBottom: 2 + alignItems: 'center' }, username: { - color: '#0C0D0F', - fontWeight: '600', fontSize: 16, - lineHeight: 22 + lineHeight: 22, + ...sharedStyles.textColorNormal, + ...sharedStyles.textMedium }, titleContainer: { flex: 1, @@ -23,16 +24,16 @@ const styles = StyleSheet.create({ }, alias: { fontSize: 14, - color: '#9EA2A8', - paddingLeft: 6, - lineHeight: 16 + ...sharedStyles.textColorDescription, + ...sharedStyles.textRegular }, time: { fontSize: 12, - color: '#9EA2A8', paddingLeft: 10, - fontWeight: '300', - lineHeight: 16 + lineHeight: 22, + ...sharedStyles.textColorDescription, + ...sharedStyles.textRegular, + fontWeight: '300' } }); @@ -58,16 +59,16 @@ export default class User extends React.PureComponent { extraStyle.opacity = 0.3; } - const aliasUsername = alias ? (@{username}) : null; + const aliasUsername = alias ? ( @{username}) : null; const time = moment(ts).format(timeFormat); return ( - + {alias || username} + {aliasUsername} - {aliasUsername} {time} diff --git a/app/containers/message/Video.js b/app/containers/message/Video.js index d4c570bd..e5c9bae0 100644 --- a/app/containers/message/Video.js +++ b/app/containers/message/Video.js @@ -9,6 +9,7 @@ import Markdown from './Markdown'; import openLink from '../../utils/openLink'; import { isIOS } from '../../utils/deviceInfo'; import { CustomIcon } from '../../lib/Icons'; +import { COLOR_WHITE } from '../../constants/colors'; const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/webm', 'video/3gp', 'video/mkv'])]; const isTypeSupported = type => SUPPORTED_TYPES.indexOf(type) !== -1; @@ -19,7 +20,7 @@ const styles = StyleSheet.create({ borderRadius: 4, height: 150, backgroundColor: '#1f2329', - marginBottom: 10, + marginBottom: 6, alignItems: 'center', justifyContent: 'center' }, @@ -80,7 +81,7 @@ export default class Video extends React.PureComponent { style={styles.button} onPress={() => this.open()} activeOpacity={0.5} - underlayColor='#fff' + underlayColor={COLOR_WHITE} > { - if (!msg) { return; } + /** + * 2019-03-29: Realm object properties are *always* optional, but `u.username` is required + * https://realm.io/docs/javascript/latest/#to-one-relationships + */ + if (!msg || !msg.u || !msg.u.username) { return; } + msg = normalizeAttachments(msg); msg.reactions = msg.reactions || []; // TODO: api problems diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js index 47173286..e75becdf 100644 --- a/app/presentation/RoomItem.js +++ b/app/presentation/RoomItem.js @@ -1,7 +1,9 @@ import React from 'react'; import moment from 'moment'; import PropTypes from 'prop-types'; -import { View, Text, StyleSheet } from 'react-native'; +import { + View, Text, StyleSheet, PixelRatio +} from 'react-native'; import { connect } from 'react-redux'; import { emojify } from 'react-emojione'; import { RectButton } from 'react-native-gesture-handler'; @@ -10,29 +12,34 @@ import Avatar from '../containers/Avatar'; import Status from '../containers/Status'; import RoomTypeIcon from '../containers/RoomTypeIcon'; import I18n from '../i18n'; -import { isIOS } from '../utils/deviceInfo'; +import sharedStyles from '../views/Styles'; +import { COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors'; + +export const ROW_HEIGHT = 75 * PixelRatio.getFontScale(); const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', - marginHorizontal: 15 + marginLeft: 14, + height: ROW_HEIGHT }, centerContainer: { flex: 1, - height: '100%' + paddingVertical: 10, + paddingRight: 14, + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: COLOR_SEPARATOR }, title: { flex: 1, - fontSize: 18, - color: '#0C0D0F', - fontWeight: '400', - marginRight: 5, - paddingTop: 0, - paddingBottom: 0 + fontSize: 17, + lineHeight: 20, + ...sharedStyles.textColorNormal, + ...sharedStyles.textMedium }, alert: { - fontWeight: '600' + ...sharedStyles.textSemibold }, row: { flex: 1, @@ -41,35 +48,34 @@ const styles = StyleSheet.create({ }, titleContainer: { width: '100%', - marginTop: isIOS ? 5 : 2, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }, date: { - fontSize: 14, - color: '#9EA2A8', - fontWeight: 'normal', - paddingTop: 0, - paddingBottom: 0 + fontSize: 13, + marginLeft: 4, + ...sharedStyles.textColorDescription, + ...sharedStyles.textRegular }, updateAlert: { - color: '#1D74F5', - fontWeight: '700' + color: COLOR_PRIMARY, + ...sharedStyles.textSemibold }, unreadNumberContainer: { minWidth: 23, padding: 3, borderRadius: 4, - backgroundColor: '#1D74F5', + backgroundColor: COLOR_PRIMARY, alignItems: 'center', - justifyContent: 'center' + justifyContent: 'center', + marginLeft: 10 }, unreadNumberText: { - color: '#fff', + color: COLOR_WHITE, overflow: 'hidden', - fontSize: 14, - fontWeight: '500', + fontSize: 13, + ...sharedStyles.textRegular, letterSpacing: 0.56 }, status: { @@ -78,12 +84,13 @@ const styles = StyleSheet.create({ }, markdownText: { flex: 1, - color: '#9EA2A8', - fontSize: 15, - fontWeight: 'normal' + fontSize: 14, + lineHeight: 17, + ...sharedStyles.textRegular, + ...sharedStyles.textColorDescription }, markdownTextAlert: { - color: '#0C0D0F' + ...sharedStyles.textColorNormal }, avatar: { marginRight: 10 @@ -110,25 +117,22 @@ const renderNumber = (unread, userMentions) => { ); }; -const attrs = ['name', 'unread', 'userMentions', 'StoreLastMessage', 'alert', 'type']; +const attrs = ['name', 'unread', 'userMentions', 'showLastMessage', 'alert', 'type']; @connect(state => ({ user: { id: state.login.user && state.login.user.id, username: state.login.user && state.login.user.username, token: state.login.user && state.login.user.token - }, - StoreLastMessage: state.settings.Store_Last_Message, - baseUrl: state.settings.Site_Url || state.server ? state.server.server : '' + } })) export default class RoomItem extends React.Component { static propTypes = { type: PropTypes.string.isRequired, name: PropTypes.string.isRequired, baseUrl: PropTypes.string.isRequired, - StoreLastMessage: PropTypes.bool, + showLastMessage: PropTypes.bool, _updatedAt: PropTypes.string, lastMessage: PropTypes.object, - favorite: PropTypes.bool, alert: PropTypes.bool, unread: PropTypes.number, userMentions: PropTypes.number, @@ -172,10 +176,10 @@ export default class RoomItem extends React.Component { get lastMessage() { const { - lastMessage, type, StoreLastMessage, user + lastMessage, type, showLastMessage, user } = this.props; - if (!StoreLastMessage) { + if (!showLastMessage) { return ''; } if (!lastMessage) { @@ -214,14 +218,14 @@ export default class RoomItem extends React.Component { formatDate = date => moment(date).calendar(null, { lastDay: `[${ I18n.t('Yesterday') }]`, - sameDay: 'HH:mm', + sameDay: 'h:mm A', lastWeek: 'dddd', sameElse: 'MMM D' }) render() { const { - favorite, unread, userMentions, name, _updatedAt, alert, testID, height, onPress + unread, userMentions, name, _updatedAt, alert, testID, height, onPress } = this.props; const date = this.formatDate(_updatedAt); @@ -249,7 +253,7 @@ export default class RoomItem extends React.Component { testID={testID} > {this.avatar} diff --git a/app/presentation/UserItem.js b/app/presentation/UserItem.js index dc01e673..a3d91cfe 100644 --- a/app/presentation/UserItem.js +++ b/app/presentation/UserItem.js @@ -6,13 +6,14 @@ import PropTypes from 'prop-types'; import Avatar from '../containers/Avatar'; import Touch from '../utils/touch'; -import { isIOS } from '../utils/deviceInfo'; import { CustomIcon } from '../lib/Icons'; +import sharedStyles from '../views/Styles'; +import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors'; const styles = StyleSheet.create({ button: { height: 54, - backgroundColor: '#fff' + backgroundColor: COLOR_WHITE }, container: { flexDirection: 'row' @@ -23,23 +24,23 @@ const styles = StyleSheet.create({ }, textContainer: { flex: 1, - flexDirection: 'column' + flexDirection: 'column', + justifyContent: 'center' }, name: { - fontSize: 18, - color: '#0C0D0F', - marginTop: isIOS ? 6 : 3, - marginBottom: 1, - textAlign: 'left' + fontSize: 17, + ...sharedStyles.textMedium, + ...sharedStyles.textColorNormal }, username: { fontSize: 14, - color: '#9EA2A8' + ...sharedStyles.textRegular, + ...sharedStyles.textColorDescription }, icon: { marginHorizontal: 15, alignSelf: 'center', - color: '#1D74F5' + color: COLOR_PRIMARY } }); diff --git a/app/utils/touch/index.ios.js b/app/utils/touch/index.ios.js index f649b5f8..49355950 100644 --- a/app/utils/touch/index.ios.js +++ b/app/utils/touch/index.ios.js @@ -1,10 +1,11 @@ import React from 'react'; import { TouchableHighlight } from 'react-native'; import PropTypes from 'prop-types'; +import { COLOR_WHITE } from '../../constants/colors'; const Touch = ({ children, onPress, ...props }) => ( ( - {I18n.t('No_mentioned_messages')} + {I18n.t('No_mentioned_messages')} ) @@ -101,7 +101,6 @@ export default class MentionedMessagesView extends LoggedView { const { user, customEmojis, baseUrl } = this.props; return ( ); diff --git a/app/views/OnboardingView/index.js b/app/views/OnboardingView/index.js index b2305c2c..b225e718 100644 --- a/app/views/OnboardingView/index.js +++ b/app/views/OnboardingView/index.js @@ -18,6 +18,7 @@ import { isIOS, isNotch } from '../../utils/deviceInfo'; import EventEmitter from '../../utils/events'; import { CustomIcon } from '../../lib/Icons'; import StatusBar from '../../containers/StatusBar'; +import { COLOR_PRIMARY, COLOR_WHITE } from '../../constants/colors'; @connect(state => ({ currentServer: state.server.server, @@ -125,7 +126,7 @@ export default class OnboardingView extends LoggedView { ); @@ -144,7 +145,7 @@ export default class OnboardingView extends LoggedView {