diff --git a/app/components/sidebars/main/channels_list/channels_list.js b/app/components/sidebars/main/channels_list/channels_list.js
index adbe7f49f..c2c567103 100644
--- a/app/components/sidebars/main/channels_list/channels_list.js
+++ b/app/components/sidebars/main/channels_list/channels_list.js
@@ -175,6 +175,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
above: {
backgroundColor: theme.mentionBg,
top: 40,
+ height: 40,
+ borderRadius: 4,
+ paddingTop: 12,
+ paddingRight: 16,
+ paddingBottom: 12,
+ paddingLeft: 16,
},
action: {
color: changeOpacity(theme.sidebarText, 0.4),
diff --git a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
index bb8ece741..eafc95b57 100644
--- a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
+++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
@@ -4,11 +4,12 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
+ Platform,
TouchableWithoutFeedback,
View,
ViewPropTypes,
} from 'react-native';
-import IonIcon from 'react-native-vector-icons/Ionicons';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
@@ -35,17 +36,17 @@ export default class UnreadIndicatorBase extends PureComponent {
style={[style.wrapper, this.props.style]}
pointerEvents={visible ? 'auto' : 'none'}
>
+
-
);
@@ -64,8 +65,10 @@ export default class UnreadIndicatorBase extends PureComponent {
export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
arrow: {
+ fontSize: 16,
+ marginRight: 8,
position: 'relative',
- bottom: -1,
+ textAlignVertical: 'center',
},
container: {
justifyContent: 'center',
@@ -78,20 +81,35 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme) => {
indicatorText: {
backgroundColor: 'transparent',
color: theme.mentionColor,
- fontSize: 14,
- paddingVertical: 2,
- paddingHorizontal: 4,
+ fontSize: 15,
textAlign: 'center',
textAlignVertical: 'center',
+ ...Platform.select({
+ ios: {
+ fontWeight: '700',
+ },
+ android: {
+ fontFamily: 'Roboto-Medium',
+ },
+ }),
},
wrapper: {
borderRadius: 15,
height: 25,
flexDirection: 'row',
- paddingLeft: 10,
- paddingRight: 12,
+ paddingLeft: 16,
+ paddingRight: 16,
+ paddingVertical: 13.5,
justifyContent: 'center',
alignItems: 'center',
+ elevation: 5,
+ shadowColor: theme.centerChannelColor,
+ shadowOffset: {
+ width: 0,
+ height: 6,
+ },
+ shadowOpacity: 0.12,
+ shadowRadius: 4,
},
};
});