diff --git a/native/chat/chat-constants.js b/native/chat/chat-constants.js
--- a/native/chat/chat-constants.js
+++ b/native/chat/chat-constants.js
@@ -1,7 +1,7 @@
// @flow
-export const inlineSidebarHeight = 20;
+export const inlineSidebarHeight = 38;
export const inlineSidebarMarginTop = 5;
-export const inlineSidebarMarginBottom = 3;
+export const inlineSidebarMarginBottom = 33;
export const clusterEndHeight = 7;
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -137,9 +137,13 @@
let inlineSidebar = null;
if (item.threadCreatedFromMessage) {
+ const position = isViewer ? 'right' : 'left';
inlineSidebar = (
-
+
);
}
diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-sidebar.react.js
--- a/native/chat/inline-sidebar.react.js
+++ b/native/chat/inline-sidebar.react.js
@@ -13,9 +13,10 @@
type Props = {
+threadInfo: ThreadInfo,
+ +position: 'left' | 'right',
};
function InlineSidebar(props: Props): React.Node {
- const { threadInfo } = props;
+ const { threadInfo, position } = props;
const { repliesText } = useInlineEngagementText(threadInfo);
const navigateToThread = useNavigateToThread();
@@ -25,9 +26,10 @@
const styles = useStyles(unboundStyles);
const unreadStyle = threadInfo.currentUser.unread ? styles.unread : null;
+ const contentStyles = [styles.content, styles[position]];
return (
-
+
@@ -38,8 +40,12 @@
const unboundStyles = {
content: {
flexDirection: 'row',
- flex: 1,
height: inlineSidebarHeight,
+ backgroundColor: 'listForegroundTertiaryLabel',
+ borderRadius: 28,
+ padding: 8,
+ position: 'absolute',
+ bottom: -29,
},
unread: {
color: 'listForegroundLabel',
@@ -54,12 +60,18 @@
color: 'listForegroundTertiaryLabel',
},
name: {
+ color: 'listForegroundLabel',
paddingTop: 1,
- color: 'listForegroundTertiaryLabel',
- fontSize: 16,
+ fontSize: 14,
paddingLeft: 4,
paddingRight: 2,
},
+ left: {
+ left: 0,
+ },
+ right: {
+ right: 20,
+ },
};
export default InlineSidebar;
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -41,6 +41,7 @@
verticalBounds,
...viewProps
} = props;
+ const { isViewer } = item.messageInfo.creator;
let timestamp = null;
if (focused || item.startsConversation) {
@@ -52,9 +53,13 @@
const styles = useStyles(unboundStyles);
let inlineSidebar = null;
if (item.threadCreatedFromMessage) {
+ const position = isViewer ? 'right' : 'left';
inlineSidebar = (
-
+
);
}
@@ -100,7 +105,6 @@
const belowMargin = 20;
const belowSpace = robotextMessageTooltipHeight + belowMargin;
- const { isViewer } = item.messageInfo.creator;
const aboveMargin = isViewer ? 30 : 50;
const aboveSpace = robotextMessageTooltipHeight + aboveMargin;
@@ -128,7 +132,14 @@
key: getMessageTooltipKey(item),
});
},
- [item, props.navigation, props.route.key, verticalBounds, visibleEntryIDs],
+ [
+ item,
+ props.navigation,
+ props.route.key,
+ verticalBounds,
+ visibleEntryIDs,
+ isViewer,
+ ],
);
const onLongPress = React.useCallback(() => {