feat: fixed link preview and message details styling

ts/components/conversation/ConversationHeader.tsx

@@ -141,6 +141,12 @@ const SelectionOverlay = () => {
   );
 };
 
+const TripleDotContainer = styled.div`
+  user-select: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+`;
+
 const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) => {
   const { showBackButton } = props;
   if (showBackButton) {
@@ -162,12 +168,6 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
   );
 };
 
-const TripleDotContainer = styled.div`
-  user-select: none;
-  flex-grow: 0;
-  flex-shrink: 0;
-`;
-
 const ExpirationLength = (props: { expirationSettingName?: string }) => {
   const { expirationSettingName } = props;
 
@@ -281,6 +281,19 @@ export type ConversationHeaderTitleProps = {
   currentNotificationSetting?: ConversationNotificationSettingType;
 };
 
+/**
+ * The subtitle beneath a conversation title when looking at a conversation screen.
+ * @param props props for subtitle. Text to be displayed
+ * @returns JSX Element of the subtitle of conversation header
+ */
+export const ConversationHeaderSubtitle = (props: { text?: string | null }): JSX.Element | null => {
+  const { text } = props;
+  if (!text) {
+    return null;
+  }
+  return <span className="module-conversation-header__title-text">{text}</span>;
+};
+
 const ConversationHeaderTitle = () => {
   const headerTitleProps = useSelector(getConversationHeaderTitleProps);
   const notificationSetting = useSelector(getCurrentNotificationSettingText);
@@ -344,19 +357,6 @@ const ConversationHeaderTitle = () => {
   );
 };
 
-/**
- * The subtitle beneath a conversation title when looking at a conversation screen.
- * @param props props for subtitle. Text to be displayed
- * @returns JSX Element of the subtitle of conversation header
- */
-export const ConversationHeaderSubtitle = (props: { text?: string | null }): JSX.Element | null => {
-  const { text } = props;
-  if (!text) {
-    return null;
-  }
-  return <span className="module-conversation-header__title-text">{text}</span>;
-};
-
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
   const isMessageDetailOpened = useSelector(isMessageDetailView);

ts/components/conversation/message/message-content/MessageBody.tsx

@@ -88,43 +88,6 @@ const JsxSelectable = (jsx: JSX.Element): JSX.Element => {
   );
 };
 
-export const MessageBody = (props: Props) => {
-  const { text, disableJumbomoji, disableLinks, isGroup } = props;
-  const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
-
-  if (disableLinks) {
-    return JsxSelectable(
-      renderEmoji({
-        text,
-        sizeClass,
-        key: 0,
-        renderNonEmoji: renderNewLines,
-        isGroup,
-      })
-    );
-  }
-
-  if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) {
-    return <pre className="text-selectable">{text.substring(4, text.length - 3)}</pre>;
-  }
-
-  return JsxSelectable(
-    <Linkify
-      text={text}
-      isGroup={isGroup}
-      renderNonLink={({ key, text: nonLinkText }) => {
-        return renderEmoji({
-          text: nonLinkText,
-          sizeClass,
-          key,
-          renderNonEmoji: renderNewLines,
-          isGroup,
-        });
-      }}
-    />
-  );
-};
-
 type LinkifyProps = {
   text: string;
   /** Allows you to customize now non-links are rendered. Simplest is just a <span>. */
@@ -184,3 +147,40 @@ const Linkify = (props: LinkifyProps): JSX.Element => {
 
   return <>{results}</>;
 };
+
+export const MessageBody = (props: Props) => {
+  const { text, disableJumbomoji, disableLinks, isGroup } = props;
+  const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
+
+  if (disableLinks) {
+    return JsxSelectable(
+      renderEmoji({
+        text,
+        sizeClass,
+        key: 0,
+        renderNonEmoji: renderNewLines,
+        isGroup,
+      })
+    );
+  }
+
+  if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) {
+    return <pre className="text-selectable">{text.substring(4, text.length - 3)}</pre>;
+  }
+
+  return JsxSelectable(
+    <Linkify
+      text={text}
+      isGroup={isGroup}
+      renderNonLink={({ key, text: nonLinkText }) => {
+        return renderEmoji({
+          text: nonLinkText,
+          sizeClass,
+          key,
+          renderNonEmoji: renderNewLines,
+          isGroup,
+        });
+      }}
+    />
+  );
+};

ts/components/conversation/message/message-content/MessagePreview.tsx

@@ -10,7 +10,10 @@ import { SessionIcon } from '../../../icon';
 import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
 import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
 
-export type MessagePreviewSelectorProps = Pick<MessageRenderingProps, 'attachments' | 'previews'>;
+export type MessagePreviewSelectorProps = Pick<
+  MessageRenderingProps,
+  'direction' | 'attachments' | 'previews'
+>;
 
 type Props = {
   handleImageError: () => void;
@@ -24,7 +27,7 @@ export const MessagePreview = (props: Props) => {
   if (!selected) {
     return null;
   }
-  const { attachments, previews } = selected;
+  const { direction, attachments, previews } = selected;
 
   // Attachments take precedence over Link Previews
   if (attachments && attachments.length) {
@@ -53,7 +56,7 @@ export const MessagePreview = (props: Props) => {
   return (
     <div
       role="button"
-      className={classNames('module-message__link-preview')}
+      className={classNames(`module-message__link-preview--${direction}`)}
       onClick={openLinkFromPreview}
     >
       {first.image && previewHasImage && isFullSizeImage ? (

ts/components/conversation/message/message-item/MessageDetail.tsx

@@ -17,6 +17,7 @@ import {
 import { ContactName } from '../../ContactName';
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../../../basic/SessionButton';
 
 const AvatarItem = (props: { pubkey: string }) => {
   const { pubkey } = props;
@@ -29,14 +30,14 @@ const DeleteButtonItem = (props: { messageId: string; convoId: string; isDeletab
 
   return props.isDeletable ? (
     <div className="module-message-detail__delete-button-container">
-      <button
+      <SessionButton
+        text={i18n('delete')}
+        buttonColor={SessionButtonColor.Danger}
+        buttonType={SessionButtonType.Solid}
         onClick={async () => {
           await deleteMessagesById([props.messageId], props.convoId);
         }}
-        className="module-message-detail__delete-button"
-      >
-        {i18n('delete')}
-      </button>
+      />
     </div>
   ) : null;
 };

ts/components/menu/ConversationListItemContextMenu.tsx

@@ -29,7 +29,6 @@ export type PropsContextConversationItem = {
 const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {
   const { triggerId } = props;
 
-  // TODO Theming - Waiting on Session Components for correct colors
   return (
     <SessionContextMenuContainer>
       <Menu id={triggerId} animation={animation.fade}>

ts/state/selectors/conversations.ts

@@ -954,6 +954,7 @@ export const getMessagePreviewProps = createSelector(getMessagePropsByMessageId,
   }
 
   const msgProps: MessagePreviewSelectorProps = pick(props.propsForMessage, [
+    'direction',
     'attachments',
     'previews',
   ]);