[PAY-1408][PAY-1351][PAY-1383][PAY-1417][PAY-1240][PAY-1345] DMs: Web…

… UI polishes and bugfixes (#3543)
AudiusProject · Jun 8, 2023 · 8e54ff7 · 8e54ff7
1 parent cc1bc46
commit 8e54ff7
Show file tree

Hide file tree

Showing 12 changed files with 247 additions and 103 deletions.
diff --git a/packages/common/src/store/pages/chat/slice.ts b/packages/common/src/store/pages/chat/slice.ts
@@ -270,15 +270,10 @@ const slice = createSlice({
       delete state.optimisticReactions[messageId]
 
       // Ensure the message exists
-      chatMessagesAdapter.addOne(state.messages[chatId], {
-        message_id: messageId,
-        reactions: [],
-        message: '',
-        sender_user_id: '',
-        created_at: '',
-        hasTail: false
-      })
       const existingMessage = getMessage(state.messages[chatId], messageId)
+      if (!existingMessage) {
+        return
+      }
       const existingReactions = existingMessage?.reactions ?? []
       const filteredReactions = existingReactions.filter(
         (r) => r.user_id !== reaction.user_id

diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -510,6 +510,14 @@ export const ChatScreen = () => {
     flatListInnerHeight.current = event.nativeEvent.layout.height
   }, [])
 
+  // Scroll to the bottom if the user sends a message
+  const handleMessageSent = useCallback(() => {
+    // Set a timeout to ensure the full render happened and we got the final height
+    setTimeout(() => {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: true })
+    }, 0)
+  }, [flatListRef])
+
   return (
     <Screen
       url={url}
@@ -621,7 +629,10 @@ export const ChatScreen = () => {
                 pointerEvents={'box-none'}
               >
                 <View style={styles.whiteBackground} />
-                <ChatTextInput chatId={chatId} />
+                <ChatTextInput
+                  chatId={chatId}
+                  onMessageSent={handleMessageSent}
+                />
               </View>
             ) : null}
           </KeyboardAvoidingView>

diff --git a/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx b/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx
@@ -51,9 +51,13 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 
 type ChatTextInputProps = {
   chatId: string
+  onMessageSent: () => void
 }
 
-export const ChatTextInput = ({ chatId }: ChatTextInputProps) => {
+export const ChatTextInput = ({
+  chatId,
+  onMessageSent
+}: ChatTextInputProps) => {
   const styles = useStyles()
   const dispatch = useDispatch()
   const { primary, primaryDark2 } = useThemeColors()
@@ -66,8 +70,9 @@ export const ChatTextInput = ({ chatId }: ChatTextInputProps) => {
     if (chatId && inputMessage) {
       dispatch(sendMessage({ chatId, message: inputMessage }))
       setInputMessage('')
+      onMessageSent()
     }
-  }, [inputMessage, chatId, dispatch])
+  }, [inputMessage, chatId, dispatch, onMessageSent])
 
   const renderIcon = () => (
     <Pressable

diff --git a/packages/stems/src/components/RadioButton/RadioButton.module.css b/packages/stems/src/components/RadioButton/RadioButton.module.css
@@ -23,11 +23,13 @@
   box-sizing: border-box;
 }
 
-.root:has(:checked)::before {
+/* Use the .checked class since Firefox doesn't support :has() */
+.root.checked::before {
   background: var(--white);
   border: 6px solid var(--secondary);
 }
 
-.root:has(:disabled)::before {
+/* Use the .disabled class since Firefox doesn't support :has() */
+.root.disabled::before {
   background: var(--neutral-light-7);
 }
diff --git a/packages/stems/src/components/RadioButton/RadioButton.tsx b/packages/stems/src/components/RadioButton/RadioButton.tsx
@@ -22,6 +22,7 @@ export const RadioButton = (props: RadioButtonProps) => {
     onChange,
     name: nameProp,
     checked: checkedProp,
+    disabled,
     ...other
   } = props
 
@@ -46,13 +47,22 @@ export const RadioButton = (props: RadioButtonProps) => {
   )
 
   return (
-    <div className={cn(styles.root, className)}>
+    <div
+      className={cn(
+        styles.root,
+        // Firefox doesn't support :has() so we're using classes here
+        { [styles.disabled]: disabled },
+        { [styles.checked]: checked },
+        className
+      )}
+    >
       <input
         className={cn(styles.input, inputClassName)}
         name={name}
         checked={checked}
         type='radio'
         onChange={handleChange}
+        disabled={disabled}
         {...other}
       />
     </div>

diff --git a/packages/web/src/components/data-entry/InputV2.module.css b/packages/web/src/components/data-entry/InputV2.module.css
@@ -32,26 +32,26 @@
   border-color: var(--neutral-light-6);
 }
 
-.root:has(input:focus) {
+.root.focused {
   border-color: var(--secondary);
 }
 
 .root.warning,
-.root.warning:has(input:focus) {
+.root.warning.focused {
   border-color: var(--accent-orange);
 }
 
 .root.error,
-.root.error:has(input:focus) {
+.root.error.focused {
   border-color: var(--accent-red);
 }
 
 .root.error:hover,
-.root.error:hover:has(input:focus) {
+.root.error:hover.focused {
   border-color: var(--accent-red-dark-1);
 }
 
-.root:has(input:disabled) {
+.root.disabled {
   background-color: var(--neutral-light-9);
   border-color: var(--neutral-light-8);
 }
@@ -86,7 +86,8 @@
 }
 
 /** Add the "*" to required fields, but have it disappear when elevated **/
-.elevatedPlaceholderLabel:has(input:required:not(:focus))
+.required:not(.focused)
+  .elevatedPlaceholderLabel
   .placeholder:not(.hasValue)::after {
   content: ' *';
 }
@@ -105,7 +106,7 @@
 }
 
 /** Move the elevated placeholder to the top left if focused or has text **/
-.elevatedPlaceholderLabel:has(input:focus) .placeholder,
+.focused .elevatedPlaceholderLabel .placeholder,
 .placeholder.hasValue {
   transform: translate(0px, calc(-1em - var(--gap)));
   font-size: var(--font-xs);

diff --git a/packages/web/src/components/data-entry/InputV2.tsx b/packages/web/src/components/data-entry/InputV2.tsx
@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, MutableRefObject, RefCallback } from 'react'
 import cn from 'classnames'
 
 import styles from './InputV2.module.css'
+import { useFocusState } from './useFocusState'
 
 export enum InputV2Size {
   SMALL,
@@ -42,6 +43,9 @@ export const InputV2 = (props: InputV2Props) => {
     warning: warningProp,
     error,
     inputClassName,
+    disabled,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
     ...other
   } = props
 
@@ -59,20 +63,41 @@ export const InputV2 = (props: InputV2Props) => {
     [styles.error]: error
   }
 
+  /**
+   * Since Firefox doesn't support the :has() pseudo selector,
+   * manually track the focused state and use classes for focus, required, and disabled
+   */
+  const [isFocused, handleFocus, handleBlur] = useFocusState(
+    onFocusProp,
+    onBlurProp
+  )
+
   const input = (
     <input
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       ref={inputRef}
       placeholder={!elevatePlaceholder ? placeholder : undefined}
       required={required}
       className={inputClassName}
       value={value}
       maxLength={maxLength}
+      disabled={disabled}
       {...other}
     />
   )
 
   return (
-    <div className={cn(styles.root, style, className)}>
+    <div
+      className={cn(
+        styles.root,
+        { [styles.focused]: isFocused },
+        { [styles.disabled]: disabled },
+        { [styles.required]: required },
+        style,
+        className
+      )}
+    >
       {elevatePlaceholder ? (
         <label className={styles.elevatedPlaceholderLabel}>
           <span

diff --git a/packages/web/src/components/data-entry/TextAreaV2.module.css b/packages/web/src/components/data-entry/TextAreaV2.module.css
@@ -34,7 +34,8 @@
 .root:hover > textarea {
   border-color: var(--neutral-light-6);
 }
-.root:has(textarea:focus) {
+/* Using .focus class since Firefox doesn't support :has() */
+.root.focus {
   border-color: var(--secondary);
 }
 .root.error {