Merge branch 'chats-styles' into 'develop'

Minor chats styles improvements

Closes #1181 and #1210

See merge request soapbox-pub/soapbox!1932

app/soapbox/components/dropdown-menu.tsx

@@ -259,6 +259,7 @@ export interface IDropdown extends RouteComponentProps {
   text?: string,
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
   children?: JSX.Element,
+  dropdownMenuStyle?: React.CSSProperties,
 }
 
 interface IDropdownState {
@@ -369,7 +370,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
+    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
@@ -403,7 +404,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
         )}
 
         <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
-          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} style={dropdownMenuStyle} />
         </Overlay>
       </>
     );

app/soapbox/components/ui/textarea/textarea.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly' | 'onKeyDown' | 'onPaste'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */

app/soapbox/features/chats/components/chat-box.tsx

@@ -8,6 +8,7 @@ import {
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
 import IconButton from 'soapbox/components/icon-button';
+import { Textarea } from 'soapbox/components/ui';
 import UploadProgress from 'soapbox/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload-button';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
@@ -179,11 +180,11 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
       {isUploading && (
         <UploadProgress progress={uploadProgress * 100} />
       )}
-      <div className='chat-box__actions simple_form'>
+      <div className='chat-box__actions'>
         <div className='chat-box__send'>
           {renderActionButton()}
         </div>
-        <textarea
+        <Textarea
           rows={1}
           placeholder={intl.formatMessage(messages.placeholder)}
           onKeyDown={handleKeyDown}

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -254,6 +254,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
               items={menu}
               src={require('@tabler/icons/dots.svg')}
               title={intl.formatMessage(messages.more)}
+              dropdownMenuStyle={{ zIndex: 1000 }}
             />
           </div>
         </div>

app/styles/chats.scss

@@ -68,7 +68,7 @@
   }
 
   &__content {
-    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-800;
+    @apply flex flex-1 flex-col overflow-hidden bg-white dark:bg-gray-900;
 
     > div {
       @apply max-h-full;
@@ -92,7 +92,7 @@
   }
 
   .audio-toggle .react-toggle-track {
-    @apply h-4 w-8 bg-accent-500;
+    @apply h-4 w-8 bg-accent-500 dark:bg-accent-500;
   }
 
   .audio-toggle .react-toggle-track-check {
@@ -112,6 +112,10 @@
   .fa {
     font-size: 14px;
   }
+
+  .chat-message--me .chat-message__bubble {
+    @apply dark:bg-primary-900;
+  }
 }
 
 .chat-messages {
@@ -155,7 +159,7 @@
   }
 
   &--me .chat-message__bubble {
-    @apply bg-primary-200 dark:bg-primary-900;
+    @apply bg-primary-200 dark:bg-primary-800;
     margin-left: auto;
   }
 
@@ -169,15 +173,16 @@
     right: -8px;
     height: 20px;
     padding: 1px;
-    background: var(--background-color);
-    border-radius: 999px;
     opacity: 0;
     pointer-events: none;
     transition: 0.2s;
 
-    .svg-icon {
-      height: 20px;
-      width: 20px;
+    button {
+      @apply p-1 bg-gray-100 dark:bg-gray-800;
+
+      svg {
+        @apply h-4 w-4;
+      }
     }
   }
 }
@@ -250,29 +255,17 @@
     position: relative;
 
     textarea {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      box-sizing: border-box;
-      padding: 6px;
-      padding-right: 25px;
-      background: var(--background-color);
-      border: 0;
-      border-radius: 6px;
-      color: var(--primary-text-color);
-      font-size: 15px;
-      overflow: hidden;
+      @apply pr-6;
     }
   }
 
   &__send {
     .icon-button,
     button {
-      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
+      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 bg-transparent text-black dark:text-white;
       top: 50%;
       transform: translateY(-50%);
 
-      .svg-icon,
       svg {
         @apply w-[18px] h-[18px];
       }