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 {
}
+ icon={}
onPress={this.connectServer}
testID='connect-server-button'
/>
@@ -159,7 +160,7 @@ export default class OnboardingView extends LoggedView {
}
+ icon={}
onPress={this.createWorkspace}
testID='create-workspace-button'
/>
diff --git a/app/views/OnboardingView/styles.js b/app/views/OnboardingView/styles.js
index 12feae7fd..65cfac5c0 100644
--- a/app/views/OnboardingView/styles.js
+++ b/app/views/OnboardingView/styles.js
@@ -2,23 +2,24 @@ import { StyleSheet } from 'react-native';
import { verticalScale, moderateScale } from '../../utils/scaling';
import sharedStyles from '../Styles';
+import { COLOR_PRIMARY, COLOR_BORDER, COLOR_WHITE } from '../../constants/colors';
const colors = {
- backgroundPrimary: '#1D74F5',
+ backgroundPrimary: COLOR_PRIMARY,
backgroundSecondary: 'white',
textColorPrimary: 'white',
- textColorSecondary: '#1D74F5',
+ textColorSecondary: COLOR_PRIMARY,
- borderColorPrimary: '#1D74F5',
- borderColorSecondary: '#E1E5E8'
+ borderColorPrimary: COLOR_PRIMARY,
+ borderColorSecondary: COLOR_BORDER
};
export default StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
- backgroundColor: '#fff'
+ backgroundColor: COLOR_WHITE
},
onboarding: {
alignSelf: 'center',
@@ -31,9 +32,9 @@ export default StyleSheet.create({
},
title: {
...sharedStyles.textBold,
+ ...sharedStyles.textColorNormal,
letterSpacing: 0,
fontSize: moderateScale(24),
- color: '#2F343D',
alignSelf: 'center',
marginBottom: verticalScale(8)
},
@@ -67,7 +68,7 @@ export default StyleSheet.create({
},
buttonSubtitle: {
...sharedStyles.textRegular,
- color: '#9EA2A8',
+ ...sharedStyles.textColorDescription,
fontSize: 15
},
buttonIconContainer: {
diff --git a/app/views/PinnedMessagesView/index.js b/app/views/PinnedMessagesView/index.js
index 8a896cfd9..15ba9c693 100644
--- a/app/views/PinnedMessagesView/index.js
+++ b/app/views/PinnedMessagesView/index.js
@@ -131,7 +131,7 @@ export default class PinnedMessagesView extends LoggedView {
renderEmpty = () => (
- {I18n.t('No_pinned_messages')}
+ {I18n.t('No_pinned_messages')}
)
@@ -139,7 +139,6 @@ export default class PinnedMessagesView extends LoggedView {
const { user, customEmojis, baseUrl } = this.props;
return (
({
user: {
@@ -290,12 +291,12 @@ export default class ProfileView extends LoggedView {
key: 'profile-view-reset-avatar'
})}
{this.renderAvatarButton({
- child: ,
+ child: ,
onPress: () => this.pickImage(),
key: 'profile-view-upload-avatar'
})}
{this.renderAvatarButton({
- child: ,
+ child: ,
onPress: () => this.setAvatar({ url: avatarUrl, data: avatarUrl, service: 'url' }),
disabled: !avatarUrl,
key: 'profile-view-avatar-url-button'
diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
index 2ff8bca98..6c1b1526a 100644
--- a/app/views/RoomActionsView/index.js
+++ b/app/views/RoomActionsView/index.js
@@ -23,6 +23,7 @@ import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { CustomIcon } from '../../lib/Icons';
import DisclosureIndicator from '../../containers/DisclosureIndicator';
import StatusBar from '../../containers/StatusBar';
+import { COLOR_WHITE } from '../../constants/colors';
const renderSeparator = () => ;
@@ -403,7 +404,7 @@ export default class RoomActionsView extends LoggedView {
renderTouchableItem = (subview, item) => (
this.onPressTouchable(item)}
- underlayColor='#FFFFFF'
+ underlayColor={COLOR_WHITE}
activeOpacity={0.5}
accessibilityLabel={item.name}
accessibilityTraits='button'
@@ -443,6 +444,7 @@ export default class RoomActionsView extends LoggedView {
(
- {I18n.t('No_files')}
+ {I18n.t('No_files')}
)
@@ -110,7 +110,6 @@ export default class RoomFilesView extends LoggedView {
return (
{roles.map(role => (
- { allRoles[role] }
+ { allRoles[role] }
))}
diff --git a/app/views/RoomInfoView/styles.js b/app/views/RoomInfoView/styles.js
index 2720bce5c..faeaf9101 100644
--- a/app/views/RoomInfoView/styles.js
+++ b/app/views/RoomInfoView/styles.js
@@ -1,20 +1,21 @@
import { StyleSheet } from 'react-native';
+import sharedStyles from '../Styles';
+import { COLOR_BACKGROUND_CONTAINER, COLOR_WHITE } from '../../constants/colors';
+
export default StyleSheet.create({
container: {
flex: 1,
- backgroundColor: '#ffffff'
+ backgroundColor: COLOR_WHITE
},
scroll: {
flex: 1,
flexDirection: 'column',
- backgroundColor: '#ffffff',
+ backgroundColor: COLOR_WHITE,
padding: 10
},
item: {
padding: 10,
- // borderColor: '#EBEDF1',
- // borderTopWidth: StyleSheet.hairlineWidth,
justifyContent: 'center'
},
avatarContainer: {
@@ -31,12 +32,9 @@ export default StyleSheet.create({
flexDirection: 'row'
},
roomTitle: {
- fontSize: 18
- },
- roomDescription: {
- fontSize: 14,
- color: '#ccc',
- paddingTop: 10
+ fontSize: 18,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textMedium
},
roomTitleRow: {
flexDirection: 'row',
@@ -48,11 +46,15 @@ export default StyleSheet.create({
right: -4
},
itemLabel: {
- fontWeight: '600',
- marginBottom: 10
+ marginBottom: 10,
+ fontSize: 14,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textMedium
},
itemContent: {
- color: '#ccc'
+ fontSize: 14,
+ ...sharedStyles.textColorDescription,
+ ...sharedStyles.textRegular
},
itemContent__empty: {
fontStyle: 'italic'
@@ -62,10 +64,15 @@ export default StyleSheet.create({
flexWrap: 'wrap'
},
roleBadge: {
- padding: 8,
- backgroundColor: '#ddd',
+ padding: 6,
+ backgroundColor: COLOR_BACKGROUND_CONTAINER,
borderRadius: 2,
- marginRight: 5,
- marginBottom: 5
+ marginRight: 6,
+ marginBottom: 6
+ },
+ role: {
+ fontSize: 14,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textRegular
}
});
diff --git a/app/views/RoomMembersView/styles.js b/app/views/RoomMembersView/styles.js
index 0ca648e5b..75ae5e17d 100644
--- a/app/views/RoomMembersView/styles.js
+++ b/app/views/RoomMembersView/styles.js
@@ -1,10 +1,10 @@
import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import { COLOR_SEPARATOR, COLOR_WHITE } from '../../constants/colors';
export default StyleSheet.create({
list: {
flex: 1,
- backgroundColor: '#ffffff'
+ backgroundColor: COLOR_WHITE
},
item: {
flexDirection: 'row',
@@ -15,39 +15,11 @@ export default StyleSheet.create({
avatar: {
marginRight: 16
},
- status: {
- bottom: -2,
- right: -2,
- borderWidth: 2,
- borderRadius: 12,
- width: 12,
- height: 12
- },
separator: {
height: StyleSheet.hairlineWidth,
backgroundColor: COLOR_SEPARATOR,
marginLeft: 60
},
- username: {
- flex: 1,
- fontSize: 16,
- color: '#444'
- },
- searchBoxView: {
- backgroundColor: '#eee'
- },
- searchBox: {
- backgroundColor: '#fff',
- margin: 5,
- borderRadius: 5,
- padding: 5,
- paddingLeft: 10,
- color: '#aaa'
- },
- headerButton: {
- marginRight: 9,
- alignItems: 'flex-end'
- },
loading: {
flex: 1
}
diff --git a/app/views/RoomView/Header/Icon.js b/app/views/RoomView/Header/Icon.js
index 5c0682859..16e560dde 100644
--- a/app/views/RoomView/Header/Icon.js
+++ b/app/views/RoomView/Header/Icon.js
@@ -2,7 +2,7 @@ import React from 'react';
import { StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
-import { STATUS_COLORS } from '../../../constants/colors';
+import { STATUS_COLORS, COLOR_TEXT_DESCRIPTION, COLOR_WHITE } from '../../../constants/colors';
import { CustomIcon } from '../../../lib/Icons';
import Status from '../../../containers/Status/Status';
import { isIOS } from '../../../utils/deviceInfo';
@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
width: ICON_SIZE,
height: ICON_SIZE,
marginRight: 8,
- color: isIOS ? '#9EA2A8' : '#fff'
+ color: isIOS ? COLOR_TEXT_DESCRIPTION : COLOR_WHITE
},
status: {
marginRight: 8
diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js
index abb934faa..745578c24 100644
--- a/app/views/RoomView/Header/index.js
+++ b/app/views/RoomView/Header/index.js
@@ -12,8 +12,9 @@ import sharedStyles from '../../Styles';
import { isIOS } from '../../../utils/deviceInfo';
import { headerIconSize } from '../../../containers/HeaderButton';
import Icon from './Icon';
+import { COLOR_TEXT_DESCRIPTION, HEADER_TITLE, COLOR_WHITE } from '../../../constants/colors';
-const TITLE_SIZE = 18;
+const TITLE_SIZE = 16;
const styles = StyleSheet.create({
container: {
flex: 1,
@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
},
title: {
...sharedStyles.textSemibold,
- color: isIOS ? '#0C0D0F' : '#fff',
+ color: HEADER_TITLE,
fontSize: TITLE_SIZE
},
scroll: {
@@ -33,13 +34,12 @@ const styles = StyleSheet.create({
},
typing: {
...sharedStyles.textRegular,
- color: isIOS ? '#9EA2A8' : '#fff',
+ color: isIOS ? COLOR_TEXT_DESCRIPTION : COLOR_WHITE,
fontSize: 12,
marginBottom: 2
},
typingUsers: {
- ...sharedStyles.textSemibold,
- fontWeight: '600'
+ ...sharedStyles.textSemibold
}
});
diff --git a/app/views/RoomView/List.js b/app/views/RoomView/List.js
index 4f5be429b..93c355592 100644
--- a/app/views/RoomView/List.js
+++ b/app/views/RoomView/List.js
@@ -11,6 +11,7 @@ import RocketChat from '../../lib/rocketchat';
import log from '../../utils/log';
import EmptyRoom from './EmptyRoom';
import ScrollBottomButton from './ScrollBottomButton';
+import { isNotch } from '../../utils/deviceInfo';
@responsive
export class List extends React.Component {
@@ -83,7 +84,7 @@ export class List extends React.Component {
scrollToBottom = () => {
requestAnimationFrame(() => {
- this.list.scrollToOffset({ offset: -100 });
+ this.list.scrollToOffset({ offset: isNotch ? -90 : -60 });
});
}
@@ -116,6 +117,7 @@ export class List extends React.Component {
data={messages}
extraData={this.state}
renderItem={({ item, index }) => renderRow(item, messages[index + 1])}
+ contentContainerStyle={styles.contentContainer}
style={styles.list}
onScroll={this.handleScroll}
inverted
diff --git a/app/views/RoomView/Separator.js b/app/views/RoomView/Separator.js
index 17ac04713..ea772b11f 100644
--- a/app/views/RoomView/Separator.js
+++ b/app/views/RoomView/Separator.js
@@ -2,7 +2,10 @@ import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import PropTypes from 'prop-types';
import moment from 'moment';
+
import I18n from '../../i18n';
+import sharedStyles from '../Styles';
+import { COLOR_DANGER, COLOR_TEXT_DESCRIPTION } from '../../constants/colors';
const styles = StyleSheet.create({
container: {
@@ -13,29 +16,29 @@ const styles = StyleSheet.create({
marginHorizontal: 14
},
line: {
- backgroundColor: '#9ea2a8',
+ backgroundColor: COLOR_TEXT_DESCRIPTION,
height: 1,
flex: 1
},
text: {
- color: '#9ea2a8',
fontSize: 14,
- fontWeight: '600'
+ ...sharedStyles.textMedium,
+ ...sharedStyles.textColorDescription
},
unreadLine: {
- backgroundColor: '#f5455c'
+ backgroundColor: COLOR_DANGER
},
unreadText: {
- color: '#f5455c'
+ color: COLOR_DANGER
},
marginLeft: {
- marginLeft: 15
+ marginLeft: 14
},
marginRight: {
- marginRight: 15
+ marginRight: 14
},
marginHorizontal: {
- marginHorizontal: 15
+ marginHorizontal: 14
}
});
diff --git a/app/views/RoomView/UploadProgress.js b/app/views/RoomView/UploadProgress.js
index f4560b3bf..a562b9ebc 100644
--- a/app/views/RoomView/UploadProgress.js
+++ b/app/views/RoomView/UploadProgress.js
@@ -11,7 +11,10 @@ import RocketChat from '../../lib/rocketchat';
import log from '../../utils/log';
import I18n from '../../i18n';
import { CustomIcon } from '../../lib/Icons';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+ COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_TEXT_DESCRIPTION, COLOR_DANGER
+} from '../../constants/colors';
+import sharedStyles from '../Styles';
const styles = StyleSheet.create({
container: {
@@ -21,7 +24,7 @@ const styles = StyleSheet.create({
maxHeight: 246
},
item: {
- backgroundColor: '#F1F2F4',
+ backgroundColor: COLOR_BACKGROUND_CONTAINER,
height: 54,
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: COLOR_SEPARATOR,
@@ -40,19 +43,20 @@ const styles = StyleSheet.create({
descriptionText: {
fontSize: 16,
lineHeight: 20,
- color: '#54585E'
+ ...sharedStyles.textColorDescription,
+ ...sharedStyles.textRegular
},
progress: {
position: 'absolute',
bottom: 0,
- backgroundColor: '#1D74F5',
+ backgroundColor: COLOR_PRIMARY,
height: 3
},
tryAgainButtonText: {
- color: '#1D74F5',
+ color: COLOR_PRIMARY,
fontSize: 16,
- fontWeight: '500',
- lineHeight: 20
+ lineHeight: 20,
+ ...sharedStyles.textMedium
}
});
@@ -144,11 +148,11 @@ export default class UploadProgress extends Component {
return (
[
-
+
{I18n.t('Uploading')} {item.name}
- this.cancelUpload(item)} />
+ this.cancelUpload(item)} />
,
]
@@ -156,14 +160,14 @@ export default class UploadProgress extends Component {
}
return (
-
+
{I18n.t('Error_uploading')} {item.name}
this.tryAgain(item)}>
{I18n.t('Try_again')}
- this.deleteUpload(item)} />
+ this.deleteUpload(item)} />
);
}
diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index 37aaededc..03376214e 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -30,6 +30,7 @@ import { CustomHeaderButtons, Item } from '../../containers/HeaderButton';
import RoomHeaderView from './Header';
import StatusBar from '../../containers/StatusBar';
import Separator from './Separator';
+import { COLOR_WHITE } from '../../constants/colors';
@connect(state => ({
user: {
@@ -350,7 +351,7 @@ export default class RoomView extends LoggedView {
onPress={this.joinRoom}
style={styles.joinRoomButton}
activeOpacity={0.5}
- underlayColor='#fff'
+ underlayColor={COLOR_WHITE}
>
{I18n.t('Join')}
@@ -360,14 +361,14 @@ export default class RoomView extends LoggedView {
if (this.isReadOnly()) {
return (
- {I18n.t('This_room_is_read_only')}
+ {I18n.t('This_room_is_read_only')}
);
}
if (this.isBlocked()) {
return (
- {I18n.t('This_room_is_blocked')}
+ {I18n.t('This_room_is_blocked')}
);
}
diff --git a/app/views/RoomView/styles.js b/app/views/RoomView/styles.js
index 723b9cc9a..471888ce8 100644
--- a/app/views/RoomView/styles.js
+++ b/app/views/RoomView/styles.js
@@ -1,11 +1,14 @@
import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+ COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE, COLOR_TEXT_DESCRIPTION
+} from '../../constants/colors';
+
+import sharedStyles from '../Styles';
export default StyleSheet.create({
- typing: { fontWeight: 'bold', paddingHorizontal: 15, height: 25 },
container: {
flex: 1,
- backgroundColor: '#fff'
+ backgroundColor: COLOR_WHITE
},
safeAreaView: {
flex: 1
@@ -13,22 +16,17 @@ export default StyleSheet.create({
list: {
flex: 1
},
+ contentContainer: {
+ paddingTop: 10
+ },
separator: {
height: 1,
backgroundColor: COLOR_SEPARATOR
},
- bannerContainer: {
- backgroundColor: 'orange'
- },
- bannerText: {
- margin: 5,
- textAlign: 'center',
- color: '#a00'
- },
loadingMore: {
textAlign: 'center',
padding: 15,
- color: '#ccc'
+ color: COLOR_TEXT_DESCRIPTION
},
readOnly: {
justifyContent: 'flex-end',
@@ -57,17 +55,17 @@ export default StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
- backgroundColor: '#1d74f5',
- borderRadius: 4
+ backgroundColor: COLOR_PRIMARY,
+ borderRadius: 2
},
joinRoomText: {
- color: '#fff',
+ color: COLOR_WHITE,
fontSize: 14,
- fontWeight: '500'
+ ...sharedStyles.textMedium
},
previewMode: {
fontSize: 16,
- fontWeight: '500',
- color: '#0C0D0F'
+ ...sharedStyles.textMedium,
+ ...sharedStyles.textColorNormal
}
});
diff --git a/app/views/RoomsListView/Header/Header.android.js b/app/views/RoomsListView/Header/Header.android.js
index 2af487c5e..136563ea5 100644
--- a/app/views/RoomsListView/Header/Header.android.js
+++ b/app/views/RoomsListView/Header/Header.android.js
@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
import { TextInput } from 'react-native-gesture-handler';
import I18n from '../../../i18n';
+import sharedStyles from '../../Styles';
+import { COLOR_WHITE } from '../../../constants/colors';
const styles = StyleSheet.create({
container: {
@@ -18,14 +20,16 @@ const styles = StyleSheet.create({
},
server: {
fontSize: 20,
- color: '#FFF'
+ color: COLOR_WHITE,
+ ...sharedStyles.textRegular
},
serverSmall: {
fontSize: 16
},
updating: {
fontSize: 14,
- color: '#FFF'
+ color: COLOR_WHITE,
+ ...sharedStyles.textRegular
},
disclosure: {
marginLeft: 9,
diff --git a/app/views/RoomsListView/Header/Header.ios.js b/app/views/RoomsListView/Header/Header.ios.js
index 5ea0dd7d7..64836a114 100644
--- a/app/views/RoomsListView/Header/Header.ios.js
+++ b/app/views/RoomsListView/Header/Header.ios.js
@@ -5,6 +5,8 @@ import {
import PropTypes from 'prop-types';
import I18n from '../../../i18n';
+import sharedStyles from '../../Styles';
+import { COLOR_PRIMARY } from '../../../constants/colors';
const styles = StyleSheet.create({
container: {
@@ -17,11 +19,13 @@ const styles = StyleSheet.create({
},
title: {
fontSize: 14,
- color: '#0C0D0F'
+ ...sharedStyles.textColorTitle,
+ ...sharedStyles.textRegular
},
server: {
fontSize: 12,
- color: '#1D74F5'
+ color: COLOR_PRIMARY,
+ ...sharedStyles.textRegular
},
disclosure: {
marginLeft: 3,
diff --git a/app/views/RoomsListView/Search/index.js b/app/views/RoomsListView/Search/index.js
deleted file mode 100644
index 4df82214f..000000000
--- a/app/views/RoomsListView/Search/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { View, TextInput } from 'react-native';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { setSearch as setSearchAction } from '../../../actions/rooms';
-import styles from './styles';
-import I18n from '../../../i18n';
-
-@connect(null, dispatch => ({
- setSearch: searchText => dispatch(setSearchAction(searchText))
-}))
-export default class RoomsListSearchView extends React.Component {
- static propTypes = {
- setSearch: PropTypes.func
- }
-
- componentDidMount() {
- this.inputSearch.focus();
- }
-
- onSearchChangeText(text) {
- const { setSearch } = this.props;
- setSearch(text.trim());
- }
-
- render() {
- return (
-
- this.inputSearch = inputSearch}
- underlineColorAndroid='transparent'
- style={styles.inputSearch}
- onChangeText={text => this.onSearchChangeText(text)}
- returnKeyType='search'
- placeholder={I18n.t('Search')}
- placeholderTextColor='#eee'
- clearButtonMode='while-editing'
- blurOnSubmit
- autoCorrect={false}
- autoCapitalize='none'
- />
-
- );
- }
-}
diff --git a/app/views/RoomsListView/Search/styles.js b/app/views/RoomsListView/Search/styles.js
deleted file mode 100644
index 4d35f2ea9..000000000
--- a/app/views/RoomsListView/Search/styles.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
- header: {
- zIndex: 2,
- flexDirection: 'row',
- alignItems: 'center',
- flex: 1
- },
- inputSearch: {
- flex: 1,
- fontSize: 18,
- color: '#fff'
- }
-});
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
index 1d6e83d4f..e0b4feac1 100644
--- a/app/views/RoomsListView/index.js
+++ b/app/views/RoomsListView/index.js
@@ -12,7 +12,7 @@ import SearchBox from '../../containers/SearchBox';
import ConnectionBadge from '../../containers/ConnectionBadge';
import database from '../../lib/realm';
import RocketChat from '../../lib/rocketchat';
-import RoomItem from '../../presentation/RoomItem';
+import RoomItem, { ROW_HEIGHT } from '../../presentation/RoomItem';
import styles from './styles';
import LoggedView from '../View';
import log from '../../utils/log';
@@ -34,10 +34,9 @@ import RoomsListHeaderView from './Header';
import { DrawerButton, CustomHeaderButtons, Item } from '../../containers/HeaderButton';
import StatusBar from '../../containers/StatusBar';
-const ROW_HEIGHT = 70;
const SCROLL_OFFSET = 56;
-const shouldUpdateProps = ['searchText', 'loadingServer', 'showServerDropdown', 'showSortDropdown', 'sortBy', 'groupByType', 'showFavorites', 'showUnread', 'useRealName', 'appState'];
+const shouldUpdateProps = ['searchText', 'loadingServer', 'showServerDropdown', 'showSortDropdown', 'sortBy', 'groupByType', 'showFavorites', 'showUnread', 'useRealName', 'StoreLastMessage', 'appState'];
const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
const keyExtractor = item => item.rid;
@@ -54,7 +53,8 @@ const keyExtractor = item => item.rid;
showFavorites: state.sortPreferences.showFavorites,
showUnread: state.sortPreferences.showUnread,
useRealName: state.settings.UI_Use_Real_Name,
- appState: state.app.ready && state.app.foreground ? 'foreground' : 'background'
+ appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
+ StoreLastMessage: state.settings.Store_Last_Message
}), dispatch => ({
toggleSortDropdown: () => dispatch(toggleSortDropdownAction()),
openSearchHeader: () => dispatch(openSearchHeaderAction()),
@@ -108,6 +108,7 @@ export default class RoomsListView extends LoggedView {
showFavorites: PropTypes.bool,
showUnread: PropTypes.bool,
useRealName: PropTypes.bool,
+ StoreLastMessage: PropTypes.bool,
// appState: PropTypes.string,
toggleSortDropdown: PropTypes.func,
openSearchHeader: PropTypes.func,
@@ -469,7 +470,9 @@ export default class RoomsListView extends LoggedView {
)
renderItem = ({ item }) => {
- const { useRealName, userId, baseUrl } = this.props;
+ const {
+ useRealName, userId, baseUrl, StoreLastMessage
+ } = this.props;
const id = item.rid.replace(userId, '').trim();
return (
@@ -485,6 +488,7 @@ export default class RoomsListView extends LoggedView {
id={id}
type={item.t}
baseUrl={baseUrl}
+ showLastMessage={StoreLastMessage}
onPress={() => this._onPressItem(item)}
testID={`rooms-list-view-item-${ item.name }`}
height={ROW_HEIGHT}
@@ -492,8 +496,6 @@ export default class RoomsListView extends LoggedView {
);
}
- renderSeparator = () =>
-
renderSectionHeader = header => (
{I18n.t(header)}
@@ -520,7 +522,6 @@ export default class RoomsListView extends LoggedView {
keyExtractor={keyExtractor}
style={styles.list}
renderItem={this.renderItem}
- ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={() => this.renderSectionHeader(header)}
getItemLayout={getItemLayout}
enableEmptySections
@@ -547,7 +548,6 @@ export default class RoomsListView extends LoggedView {
keyExtractor={keyExtractor}
style={styles.list}
renderItem={this.renderItem}
- ItemSeparatorComponent={this.renderSeparator}
getItemLayout={getItemLayout}
enableEmptySections
removeClippedSubviews
@@ -590,7 +590,6 @@ export default class RoomsListView extends LoggedView {
keyExtractor={keyExtractor}
style={styles.list}
renderItem={this.renderItem}
- ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderListHeader}
getItemLayout={getItemLayout}
enableEmptySections
diff --git a/app/views/RoomsListView/styles.js b/app/views/RoomsListView/styles.js
index 862aac978..95c111664 100644
--- a/app/views/RoomsListView/styles.js
+++ b/app/views/RoomsListView/styles.js
@@ -1,30 +1,19 @@
import { StyleSheet } from 'react-native';
import { isIOS } from '../../utils/deviceInfo';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+ COLOR_SEPARATOR, COLOR_TEXT, COLOR_PRIMARY, COLOR_WHITE
+} from '../../constants/colors';
+
+import sharedStyles from '../Styles';
export default StyleSheet.create({
container: {
flex: 1,
- backgroundColor: isIOS ? '#FFF' : '#E1E5E8'
- },
- separator: {
- height: StyleSheet.hairlineWidth,
- backgroundColor: COLOR_SEPARATOR,
- marginLeft: 73
+ backgroundColor: isIOS ? COLOR_WHITE : '#E1E5E8'
},
list: {
width: '100%',
- backgroundColor: '#FFFFFF'
- },
- emptyView: {
- flexGrow: 1,
- alignItems: 'stretch',
- justifyContent: 'center'
- },
- emptyText: {
- textAlign: 'center',
- fontSize: 18,
- color: '#ccc'
+ backgroundColor: COLOR_WHITE
},
actionButtonIcon: {
fontSize: 20,
@@ -39,7 +28,7 @@ export default StyleSheet.create({
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: COLOR_SEPARATOR,
alignItems: 'center',
- backgroundColor: isIOS ? '#fff' : '#54585E',
+ backgroundColor: isIOS ? COLOR_WHITE : '#54585E',
flexDirection: 'row'
},
sortToggleContainerClose: {
@@ -48,14 +37,14 @@ export default StyleSheet.create({
width: '100%'
},
sortToggleText: {
- color: '#9EA2A8',
fontSize: 15,
- fontWeight: 'normal',
flex: 1,
- marginLeft: 15
+ marginLeft: 15,
+ ...sharedStyles.textColorDescription,
+ ...sharedStyles.textRegular
},
dropdownContainer: {
- backgroundColor: '#fff',
+ backgroundColor: COLOR_WHITE,
width: '100%',
position: 'absolute',
top: 0
@@ -69,10 +58,10 @@ export default StyleSheet.create({
alignItems: 'center'
},
sortItemText: {
- color: '#54585E',
fontSize: 18,
- fontWeight: 'normal',
- flex: 1
+ flex: 1,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textRegular
},
backdrop: {
...StyleSheet.absoluteFill,
@@ -88,39 +77,37 @@ export default StyleSheet.create({
width: 22,
height: 22,
marginHorizontal: 15,
- // resizeMode: 'contain',
- // justifyContent: 'center',
- color: '#9ea2a8'
+ ...sharedStyles.textColorDescription
},
groupTitleContainer: {
paddingHorizontal: 15,
paddingTop: 17,
paddingBottom: 10,
- backgroundColor: isIOS ? '#fff' : '#E1E5E8'
+ backgroundColor: isIOS ? COLOR_WHITE : '#9ea2a8'
},
groupTitle: {
- color: isIOS ? '#2F343D' : '#54585E',
+ color: isIOS ? COLOR_TEXT : '#54585E',
fontSize: isIOS ? 22 : 15,
- fontWeight: 'bold',
letterSpacing: 0.27,
flex: 1,
- lineHeight: isIOS ? 41 : 24
+ lineHeight: isIOS ? 41 : 24,
+ ...sharedStyles.textBold
},
serverHeader: {
justifyContent: 'space-between'
},
serverHeaderText: {
- color: '#9EA2A8',
fontSize: 15,
- fontWeight: 'normal',
- marginLeft: 15
+ marginLeft: 15,
+ ...sharedStyles.textColorDescription,
+ ...sharedStyles.textRegular
},
serverHeaderAdd: {
- color: isIOS ? '#1D74F5' : '#FFF',
+ color: isIOS ? COLOR_PRIMARY : COLOR_WHITE,
fontSize: 15,
- fontWeight: 'normal',
marginRight: 15,
- paddingVertical: 10
+ paddingVertical: 10,
+ ...sharedStyles.textRegular
},
serverItem: {
height: 68
@@ -143,15 +130,18 @@ export default StyleSheet.create({
justifyContent: 'center'
},
serverName: {
- fontSize: 18, fontWeight: '600', color: '#0C0D0F'
+ fontSize: 18,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textSemibold
},
serverUrl: {
fontSize: 15,
- color: '#9EA2A8'
+ ...sharedStyles.textColorDescription,
+ ...sharedStyles.textRegular
},
checkIcon: {
marginHorizontal: 15,
- color: '#1d74f5'
+ color: COLOR_PRIMARY
},
serverSeparator: {
height: StyleSheet.hairlineWidth,
diff --git a/app/views/SearchMessagesView/index.js b/app/views/SearchMessagesView/index.js
index 82e504bd4..1d282e99d 100644
--- a/app/views/SearchMessagesView/index.js
+++ b/app/views/SearchMessagesView/index.js
@@ -92,7 +92,7 @@ export default class SearchMessagesView extends LoggedView {
renderEmpty = () => (
- {I18n.t('No_results_found')}
+ {I18n.t('No_results_found')}
)
@@ -100,7 +100,6 @@ export default class SearchMessagesView extends LoggedView {
const { user, customEmojis, baseUrl } = this.props;
return (
diff --git a/app/views/SidebarView/index.js b/app/views/SidebarView/index.js
index 21972146c..703ba5651 100644
--- a/app/views/SidebarView/index.js
+++ b/app/views/SidebarView/index.js
@@ -19,6 +19,7 @@ import { getReadableVersion } from '../../utils/deviceInfo';
import { CustomIcon } from '../../lib/Icons';
import styles from './styles';
import SidebarItem from './SidebarItem';
+import { COLOR_TEXT } from '../../constants/colors';
const keyExtractor = item => item.id;
@@ -163,21 +164,21 @@ export default class Sidebar extends Component {
}
+ left={}
onPress={() => this.sidebarNavigate('RoomsListView')}
testID='sidebar-chats'
current={activeItemKey === 'ChatsStack'}
/>
}
+ left={}
onPress={() => this.sidebarNavigate('ProfileView')}
testID='sidebar-profile'
current={activeItemKey === 'ProfileStack'}
/>
}
+ left={}
onPress={() => this.sidebarNavigate('SettingsView')}
testID='sidebar-settings'
current={activeItemKey === 'SettingsStack'}
@@ -185,7 +186,7 @@ export default class Sidebar extends Component {
}
+ left={}
onPress={this.logout}
testID='sidebar-logout'
/>
@@ -219,7 +220,7 @@ export default class Sidebar extends Component {
- {user.username}
+ {user.username}
{Site_Name}
diff --git a/app/views/SidebarView/styles.js b/app/views/SidebarView/styles.js
index 420c66c27..98a7d54ef 100644
--- a/app/views/SidebarView/styles.js
+++ b/app/views/SidebarView/styles.js
@@ -1,10 +1,12 @@
import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import { COLOR_SEPARATOR, COLOR_WHITE } from '../../constants/colors';
+
+import sharedStyles from '../Styles';
export default StyleSheet.create({
container: {
flex: 1,
- backgroundColor: '#fff'
+ backgroundColor: COLOR_WHITE
},
item: {
flexDirection: 'row',
@@ -23,8 +25,9 @@ export default StyleSheet.create({
},
itemText: {
marginVertical: 16,
- fontWeight: 'bold',
- color: '#292E35'
+ fontSize: 14,
+ ...sharedStyles.textSemibold,
+ ...sharedStyles.textColorNormal
},
separator: {
borderBottomWidth: StyleSheet.hairlineWidth,
@@ -45,9 +48,14 @@ export default StyleSheet.create({
flexDirection: 'row',
alignItems: 'center'
},
+ username: {
+ fontSize: 14,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textMedium
+ },
headerIcon: {
paddingHorizontal: 10,
- color: '#292E35'
+ ...sharedStyles.textColorNormal
},
avatar: {
marginHorizontal: 10
@@ -56,14 +64,16 @@ export default StyleSheet.create({
marginRight: 5
},
currentServerText: {
- fontWeight: 'bold'
+ fontSize: 14,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textSemibold
},
version: {
- marginHorizontal: 5,
- marginBottom: 5,
- fontWeight: '600',
- color: '#292E35',
- fontSize: 13
+ marginHorizontal: 10,
+ marginBottom: 10,
+ fontSize: 13,
+ ...sharedStyles.textColorNormal,
+ ...sharedStyles.textSemibold
},
inverted: {
transform: [{ scaleY: -1 }]
diff --git a/app/views/StarredMessagesView/index.js b/app/views/StarredMessagesView/index.js
index eb5b3f67e..c9b123db1 100644
--- a/app/views/StarredMessagesView/index.js
+++ b/app/views/StarredMessagesView/index.js
@@ -137,7 +137,7 @@ export default class StarredMessagesView extends LoggedView {
renderEmpty = () => (
- {I18n.t('No_starred_messages')}
+ {I18n.t('No_starred_messages')}
)
@@ -145,7 +145,6 @@ export default class StarredMessagesView extends LoggedView {
const { user, customEmojis, baseUrl } = this.props;
return (
-
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index 9081b4dc9..af85b7f8e 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -57,7 +57,7 @@ export default (
msg='Different user'
author={{
...author,
- username: 'rocket.cat'
+ username: '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'
}}
/>
@@ -69,6 +69,14 @@ export default (
+
@@ -229,12 +237,35 @@ export default (
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
}]}
/>
+
+
+
+
(
+
+);
+
+export default (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* We can't add date stories because it breaks jest snapshots
+
+
+
+
+ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 238deb1bb..b42345765 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -4,14 +4,26 @@ import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { storiesOf } from '@storybook/react-native';
-import DirectMessage from './Channels/DirectMessage';
+import RoomItem from './RoomItem';
import Avatar from './Avatar';
import Message from './Message';
-const reducers = combineReducers({ settings: () => ({}), login: () => ({ user: {} }), meteor: () => ({ connected: true }) });
+const reducers = combineReducers({
+ settings: () => ({}),
+ login: () => ({
+ user: {
+ username: 'diego.mello'
+ }
+ }),
+ meteor: () => ({ connected: true })
+});
const store = createStore(reducers);
-storiesOf('Avatar', module).addDecorator(story => {story()}).add('avatar', () => Avatar);
-storiesOf('Channel Cell', module).addDecorator(story => {story()}).add('Direct Messages', () => DirectMessage);
+storiesOf('Avatar', module)
+ .addDecorator(story => {story()})
+ .add('avatar', () => Avatar);
+storiesOf('RoomItem', module)
+ .addDecorator(story => {story()})
+ .add('list', () => RoomItem);
storiesOf('Message', module)
.add('list', () => Message);