From f4d5f4dcaf6cce6ad95e5316c2f48b882ed9fe6a Mon Sep 17 00:00:00 2001
From: RAKESH PEELA <rakhi2104@gmail.com>
Date: Fri, 3 Apr 2020 03:12:49 +0530
Subject: [PATCH] Update `more unreads` button to new design (#4101)

* update `more unreads` button to new design

* update More Unreads button with UI suggestions

* fix lint issues
---
 .../main/channels_list/channels_list.js       |  6 +++
 .../unread_indicator/unread_indicator.base.js | 44 +++++++++++++------
 2 files changed, 37 insertions(+), 13 deletions(-)

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'}
             >
+                <MaterialIcon
+                    size={15}
+                    name='arrow-upward'
+                    color={theme.mentionColor}
+                    style={style.arrow}
+                />
                 <FormattedText
                     style={[style.indicatorText, this.props.textStyle]}
                     id='sidebar.unreads'
                     defaultMessage='More unreads'
                 />
-                <IonIcon
-                    size={14}
-                    name='md-arrow-round-up'
-                    color={theme.mentionColor}
-                    style={style.arrow}
-                />
             </View>
         );
 
@@ -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,
         },
     };
 });