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 f91171953..000000000 --- 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 1ce3b1417..000000000 --- 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 944d06ee6..d67da54be 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 e666dee59..6ef55358c 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 e2f9818a9..5e8c2e748 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 35cbd7e97..d4e993f50 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 6a9c23c3a..3ad9675f9 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 d816ce2b5..d30a9cf19 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 a25ac1460..dd24b0d12 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 3d04ba416..82b0ac7dc 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 7f3c93907..20f841fa4 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 601799c93..ec4cb3e76 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 a1f433fa9..65a41d3ee 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 f1e110172..9e3a3874d 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 6237a6871..99c091f32 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 3537b66c0..3b53d04c5 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 c9eea974c..a74ef1cdc 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 6ec7efff8..d927a63ef 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 fc2ff6888..d9a38eee6 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 cde5fa96d..733464dff 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 7e8371051..bb35b31a3 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 7767d2e88..1385209bb 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 39f310466..4f05fb45d 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 d4c570bd4..e5c9bae0f 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 471732860..e75becdf7 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 dc01e6736..a3d91cfe6 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 f649b5f8a..493559503 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 b2305c2c1..b225e718e 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 {