From 9e90884fceb55a853b296c7fe8435f8f875b84d1 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Sun, 30 Apr 2017 21:32:26 +0500 Subject: [PATCH] Multiple UI improvements (#512) * Multiple UI improvements * RN-107 - Adding margin in more channels modal * RN-108 - Updating center channel overlay --- .../channel_drawer_list.js | 4 +- .../custom_list/channel_list_row.js | 1 + app/components/custom_list/member_list_row.js | 6 +-- app/components/markdown/index.js | 8 +--- app/components/post/post.js | 43 +++++++++++++------ app/components/post_textbox/post_textbox.js | 14 +++++- app/navigation/router.js | 2 +- .../channel_add_members.js | 4 +- .../channel_info/channel_info_header.js | 4 +- app/scenes/channel_info/channel_info_row.js | 2 +- app/scenes/channel_members/channel_members.js | 4 +- app/scenes/create_channel/create_channel.js | 14 +++--- app/scenes/more_channels/more_channels.js | 4 +- app/scenes/more_dms/more_dms.js | 4 +- app/scenes/settings/settings_item.js | 12 +++++- 15 files changed, 77 insertions(+), 49 deletions(-) diff --git a/app/components/channel_drawer_list/channel_drawer_list.js b/app/components/channel_drawer_list/channel_drawer_list.js index 00c4b073b..9038ef0bc 100644 --- a/app/components/channel_drawer_list/channel_drawer_list.js +++ b/app/components/channel_drawer_list/channel_drawer_list.js @@ -421,7 +421,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { color: theme.sidebarText, opacity: 1, fontSize: 15, - fontWeight: '500', + fontWeight: '400', letterSpacing: 0.8, lineHeight: 18 }, @@ -437,7 +437,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, action: { color: theme.sidebarText, - fontSize: 16, + fontSize: 20, fontWeight: '500', lineHeight: 18 }, diff --git a/app/components/custom_list/channel_list_row.js b/app/components/custom_list/channel_list_row.js index c456075e3..ed9335bf1 100644 --- a/app/components/custom_list/channel_list_row.js +++ b/app/components/custom_list/channel_list_row.js @@ -111,6 +111,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { marginLeft: 5 }, purpose: { + marginTop: 7, fontSize: 13, color: changeOpacity(theme.centerChannelColor, 0.5) }, diff --git a/app/components/custom_list/member_list_row.js b/app/components/custom_list/member_list_row.js index 6b3c1d9a7..306e59df0 100644 --- a/app/components/custom_list/member_list_row.js +++ b/app/components/custom_list/member_list_row.js @@ -44,7 +44,7 @@ function MemberListRow(props) { } @@ -97,7 +97,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { backgroundColor: theme.centerChannelBg }, displayName: { - fontSize: 16, + fontSize: 15, color: theme.centerChannelColor }, icon: { @@ -110,7 +110,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { }, username: { marginLeft: 5, - fontSize: 16, + fontSize: 15, color: changeOpacity(theme.centerChannelColor, 0.5) }, selector: { diff --git a/app/components/markdown/index.js b/app/components/markdown/index.js index 414d3ee72..7536ae283 100644 --- a/app/components/markdown/index.js +++ b/app/components/markdown/index.js @@ -110,9 +110,7 @@ export default class Markdown extends PureComponent { renderParagraph = ({children}) => { return ( - - {children} - + {children} ); } @@ -120,9 +118,7 @@ export default class Markdown extends PureComponent { renderHeading = ({children, level}) => { return ( - - {children} - + {children} ); } diff --git a/app/components/post/post.js b/app/components/post/post.js index 0f43d0899..235fcb6da 100644 --- a/app/components/post/post.js +++ b/app/components/post/post.js @@ -683,29 +683,46 @@ const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => { color: theme.linkColor }, heading1: { - fontSize: 30, - lineHeight: 45 + fontSize: 17, + lineHeight: 25, + fontWeight: '700', + marginTop: 10, + marginBottom: 10 }, heading2: { - fontSize: 24, - lineHeight: 36 + fontSize: 17, + lineHeight: 25, + fontWeight: '700', + marginTop: 10, + marginBottom: 10 }, heading3: { - fontSize: 20, - lineHeight: 30 + fontSize: 17, + lineHeight: 25, + fontWeight: '700', + marginTop: 10, + marginBottom: 10 }, heading4: { - fontSize: 16, - lineHeight: 24 + fontSize: 17, + lineHeight: 25, + fontWeight: '700', + marginTop: 10, + marginBottom: 10 }, heading5: { - fontSize: 14, - lineHeight: 21 + fontSize: 17, + lineHeight: 25, + fontWeight: '700', + marginTop: 10, + marginBottom: 10 }, heading6: { - fontSize: 14, - lineHeight: 21, - opacity: 0.8 + fontSize: 17, + lineHeight: 25, + fontWeight: '700', + marginTop: 10, + marginBottom: 10 }, code: { alignSelf: 'center', diff --git a/app/components/post_textbox/post_textbox.js b/app/components/post_textbox/post_textbox.js index ddce06386..fd7da7407 100644 --- a/app/components/post_textbox/post_textbox.js +++ b/app/components/post_textbox/post_textbox.js @@ -321,7 +321,7 @@ class PostTextbox extends PureComponent { > @@ -392,6 +392,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { borderTopWidth: 1, borderTopColor: changeOpacity(theme.centerChannelColor, 0.20) }, + attachIcon: { + ...Platform.select({ + ios: { + marginTop: 2 + }, + android: { + marginTop: 0 + } + }) + }, sendButton: { backgroundColor: theme.buttonBg, borderRadius: 18, @@ -403,7 +413,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { marginBottom: 5 }, android: { - marginBottom: 3.5 + marginBottom: 6.5 } }), alignItems: 'center', diff --git a/app/navigation/router.js b/app/navigation/router.js index 00bb53a05..5668c791d 100644 --- a/app/navigation/router.js +++ b/app/navigation/router.js @@ -216,7 +216,7 @@ class Router extends Component { return { mainOverlay: { - backgroundColor: '#000', + backgroundColor: this.props.theme.centerChannelBg, opacity }, drawerOverlay: { diff --git a/app/scenes/channel_add_members/channel_add_members.js b/app/scenes/channel_add_members/channel_add_members.js index 0a52bb227..5db8d6651 100644 --- a/app/scenes/channel_add_members/channel_add_members.js +++ b/app/scenes/channel_add_members/channel_add_members.js @@ -253,9 +253,9 @@ class ChannelAddMembers extends PureComponent { placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})} height={27} fontSize={14} - textColor={theme.centerChannelColor} + textColor={changeOpacity('#000', 0.5)} hideBackground={true} - textFieldBackgroundColor={changeOpacity(theme.centerChannelColor, 0.07)} + textFieldBackgroundColor={'#fff'} onChange={this.searchProfiles} onSearchButtonPress={this.onSearchButtonPress} onCancelButtonPress={this.cancelSearch} diff --git a/app/scenes/channel_info/channel_info_header.js b/app/scenes/channel_info/channel_info_header.js index 6841084e1..f0d521223 100644 --- a/app/scenes/channel_info/channel_info_header.js +++ b/app/scenes/channel_info/channel_info_header.js @@ -112,7 +112,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, createdBy: { flexDirection: 'row', - fontSize: 11, + fontSize: 12, marginTop: 5, color: changeOpacity(theme.centerChannelColor, 0.5), backgroundColor: 'transparent' @@ -122,7 +122,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { color: theme.centerChannelColor }, header: { - fontSize: 12, + fontSize: 13, marginBottom: 10, color: theme.centerChannelColor, backgroundColor: 'transparent' diff --git a/app/scenes/channel_info/channel_info_row.js b/app/scenes/channel_info/channel_info_row.js index be0fd143b..39dcde605 100644 --- a/app/scenes/channel_info/channel_info_row.js +++ b/app/scenes/channel_info/channel_info_row.js @@ -52,7 +52,7 @@ function channelInfoRow(props) { /> : } diff --git a/app/scenes/channel_members/channel_members.js b/app/scenes/channel_members/channel_members.js index eaea29218..e6ac81f7a 100644 --- a/app/scenes/channel_members/channel_members.js +++ b/app/scenes/channel_members/channel_members.js @@ -300,9 +300,9 @@ class ChannelMembers extends PureComponent { placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})} height={27} fontSize={14} - textColor={theme.centerChannelColor} + textColor={changeOpacity('#000', 0.5)} hideBackground={true} - textFieldBackgroundColor={changeOpacity(theme.centerChannelColor, 0.07)} + textFieldBackgroundColor={'#fff'} onChange={this.searchProfiles} onSearchButtonPress={this.onSearchButtonPress} onCancelButtonPress={this.cancelSearch} diff --git a/app/scenes/create_channel/create_channel.js b/app/scenes/create_channel/create_channel.js index ee82dc420..3b7bcf523 100644 --- a/app/scenes/create_channel/create_channel.js +++ b/app/scenes/create_channel/create_channel.js @@ -232,7 +232,7 @@ class CreateChannel extends PureComponent { autoCapitalize='none' autoCorrect={false} placeholder={{id: 'channel_modal.nameEx', defaultMessage: 'E.g.: "Bugs", "Marketing", "客户支持"'}} - placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)} + placeholderTextColor={changeOpacity('#000', 0.5)} underlineColorAndroid='transparent' /> @@ -255,7 +255,7 @@ class CreateChannel extends PureComponent { onChangeText={this.onPurposeChangeText} style={[style.input, {height: 110}]} placeholder={{id: 'channel_modal.purposeEx', defaultMessage: 'E.g.: "A channel to file bugs and improvements"'}} - placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)} + placeholderTextColor={changeOpacity('#000', 0.5)} multiline={true} underlineColorAndroid='transparent' /> @@ -289,7 +289,7 @@ class CreateChannel extends PureComponent { onChangeText={this.onHeaderChangeText} style={[style.input, {height: 110}]} placeholder={{id: 'channel_modal.headerEx', defaultMessage: 'E.g.: "[Link Title](http://example.com)"'}} - placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)} + placeholderTextColor={changeOpacity('#000', 0.5)} multiline={true} onFocus={this.scrollToEnd} underlineColorAndroid='transparent' @@ -333,14 +333,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, inputContainer: { marginTop: 10, - borderTopWidth: 1, - borderBottomWidth: 1, - borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), - borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1), - backgroundColor: theme.centerChannelBg + backgroundColor: '#fff' }, input: { - color: theme.centerChannelColor, + color: '#333', fontSize: 14, height: 40, paddingHorizontal: 15 diff --git a/app/scenes/more_channels/more_channels.js b/app/scenes/more_channels/more_channels.js index a991be78e..7628d3e2b 100644 --- a/app/scenes/more_channels/more_channels.js +++ b/app/scenes/more_channels/more_channels.js @@ -254,9 +254,9 @@ class MoreChannels extends PureComponent { placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})} height={27} fontSize={14} - textColor={this.props.theme.centerChannelColor} + textColor={changeOpacity('#000', 0.5)} hideBackground={true} - textFieldBackgroundColor={changeOpacity(this.props.theme.centerChannelColor, 0.07)} + textFieldBackgroundColor={'#fff'} onChange={this.searchProfiles} onSearchButtonPress={this.onSearchButtonPress} onCancelButtonPress={this.cancelSearch} diff --git a/app/scenes/more_dms/more_dms.js b/app/scenes/more_dms/more_dms.js index a45c4bd77..76feed5d9 100644 --- a/app/scenes/more_dms/more_dms.js +++ b/app/scenes/more_dms/more_dms.js @@ -202,9 +202,9 @@ class MoreDirectMessages extends PureComponent { placeholder={formatMessage({id: 'search_bar.search', defaultMesage: 'Search'})} height={27} fontSize={14} - textColor={this.props.theme.centerChannelColor} + textColor={changeOpacity('#000', 0.5)} hideBackground={true} - textFieldBackgroundColor={changeOpacity(this.props.theme.centerChannelColor, 0.07)} + textFieldBackgroundColor={'#fff'} onChange={this.searchProfiles} onSearchButtonPress={this.onSearchButtonPress} onCancelButtonPress={this.cancelSearch} diff --git a/app/scenes/settings/settings_item.js b/app/scenes/settings/settings_item.js index b0a14bc1c..fdd743419 100644 --- a/app/scenes/settings/settings_item.js +++ b/app/scenes/settings/settings_item.js @@ -86,7 +86,9 @@ export default class SettingsItem extends PureComponent { style={{flex: 1}} > - {icon} + + {icon} + { height: 50, paddingLeft: 16 }, + iconContainer: { + width: 18, + marginRight: 15, + alignItems: 'center', + justifyContent: 'center' + }, icon: { - color: theme.linkColor, + color: changeOpacity(theme.centerChannelColor, 0.5), fontSize: 20 }, label: {