Improve CommentCreate style on mobile view

ui/component/commentCreate/view.jsx

@@ -494,6 +494,19 @@ export function CommentCreate(props: Props) {
             name={isReply ? 'create__reply' : 'create__comment'}
             onChange={(e) => setCommentValue(SIMPLE_SITE || !advancedEditor || isReply ? e.target.value : e)}
             openEmoteMenu={() => setShowEmotes(!showEmotes)}
+            handleTip={(isLBC) =>
+              doOpenModal(MODALS.SEND_TIP, {
+                uri,
+                isTipOnly: true,
+                hasSelectedTab: isLBC ? TAB_LBC : TAB_FIAT,
+                setAmount: (amount) => {
+                  setTipAmount(amount);
+                  setReviewingSupportComment(true);
+                },
+              })
+            }
+            handleSubmit={handleCreateComment}
+            noEmojis={isMobile}
             placeholder={__('Say something about this...')}
             quickActionHandler={!SIMPLE_SITE ? () => setAdvancedEditor(!advancedEditor) : undefined}
             quickActionLabel={
@@ -526,6 +539,7 @@ export function CommentCreate(props: Props) {
       )}
 
       {/* Bottom Action Buttons */}
+      {!isMobile && (
         <div className="section__actions section__actions--no-margin">
           {/* Submit Button */}
           {isReviewingSupportComment ? (
@@ -715,6 +729,7 @@ export function CommentCreate(props: Props) {
             </div>
           )}
         </div>
+      )}
     </Form>
   );
 }

ui/component/common/form-components/form-field.jsx

@@ -48,6 +48,8 @@ type Props = {
   openEmoteMenu?: () => void,
   quickActionHandler?: (any) => any,
   render?: () => React$Node,
+  handleTip?: (isLBC: boolean) => any,
+  handleSubmit?: () => any,
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -93,6 +95,8 @@ export class FormField extends React.PureComponent<Props> {
       openEmoteMenu,
       quickActionHandler,
       render,
+      handleTip,
+      handleSubmit,
       ...inputProps
     } = this.props;
 
@@ -239,7 +243,7 @@ export class FormField extends React.PureComponent<Props> {
               {(label || quickAction) && (
                 <div className="form-field__two-column">
                   <label htmlFor={name}>{label}</label>
-                  {quickAction}
+                  {countInfo}
                 </div>
               )}
 
@@ -260,6 +264,9 @@ export class FormField extends React.PureComponent<Props> {
                     maxLength={textAreaMaxLength || FF_MAX_CHARS_DEFAULT}
                     inputRef={this.input}
                     isLivestream={isLivestream}
+                    handleEmojis={openEmoteMenu}
+                    handleTip={handleTip}
+                    handleSubmit={handleSubmit}
                     {...inputProps}
                   />
                 </React.Suspense>
@@ -276,7 +283,6 @@ export class FormField extends React.PureComponent<Props> {
                     iconSize={20}
                   />
                 )}
-                {countInfo}
               </div>
             </fieldset-section>
           );

ui/component/common/icon-custom.jsx

@@ -2765,4 +2765,5 @@ export const icons = {
       </svg>
     );
   },
+  [ICONS.SUBMIT]: buildIcon(<path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2z" />),
 };

ui/component/livestreamChatLayout/view.jsx

@@ -206,7 +206,7 @@ export default function LivestreamChatLayout(props: Props) {
             />
           </div>
 
-          <div className="livestream__commentCreate">
+          <div className="livestream__comment-create">
             <CommentCreate isLivestream bottom uri={uri} disableInput />
           </div>
         </div>
@@ -293,7 +293,7 @@ export default function LivestreamChatLayout(props: Props) {
           />
         )}
 
-        <div className="livestream__commentCreate">
+        <div className="livestream__comment-create">
           <CommentCreate
             isLivestream
             bottom

ui/component/textareaWithSuggestions/view.jsx

@@ -2,6 +2,7 @@
 import { EMOTES_48px as EMOTES } from 'constants/emotes';
 import { matchSorter } from 'match-sorter';
 import { SEARCH_OPTIONS } from 'constants/search';
+import * as ICONS from 'constants/icons';
 import * as KEYCODES from 'constants/keycodes';
 import Autocomplete from '@mui/material/Autocomplete';
 import BusyIndicator from 'component/common/busy-indicator';
@@ -15,6 +16,8 @@ import TextField from '@mui/material/TextField';
 import useLighthouse from 'effects/use-lighthouse';
 import useThrottle from 'effects/use-throttle';
 import { parseURI } from 'util/lbryURI';
+import Button from 'component/button';
+import { useIsMobile } from 'effects/use-screensize';
 
 const SUGGESTION_REGEX = new RegExp(
   '((?:^| |\n)@[^\\s=&#$@%?:;/\\"<>%{}|^~[]*(?::[\\w]+)?)|((?:^| |\n):[\\w+-]*:?)',
@@ -63,6 +66,9 @@ type Props = {
   onBlur: (any) => any,
   onChange: (any) => any,
   onFocus: (any) => any,
+  handleEmojis: () => any,
+  handleTip: (isLBC: boolean) => any,
+  handleSubmit: () => any,
 };
 
 export default function TextareaWithSuggestions(props: Props) {
@@ -90,8 +96,13 @@ export default function TextareaWithSuggestions(props: Props) {
     onBlur,
     onChange,
     onFocus,
+    handleEmojis,
+    handleTip,
+    handleSubmit,
   } = props;
 
+  const isMobile = useIsMobile();
+
   const inputDefaultProps = { className, placeholder, maxLength, type, disabled };
 
   const [suggestionValue, setSuggestionValue] = React.useState(undefined);
@@ -378,10 +389,29 @@ export default function TextareaWithSuggestions(props: Props) {
 
   const renderInput = (params: any) => {
     const { InputProps, disabled, fullWidth, id, inputProps: autocompleteInputProps } = params;
+
+    if (isMobile) {
+      InputProps.startAdornment = <Button icon={ICONS.STICKER} onClick={handleEmojis} />;
+      InputProps.endAdornment = (
+        <>
+          <Button icon={ICONS.LBC} onClick={() => handleTip(true)} />
+          <Button icon={ICONS.FINANCE} onClick={() => handleTip(false)} />
+
+          {messageValue && messageValue.length > 0 && (
+            <Button button="primary" icon={ICONS.SUBMIT} iconColor="red" onClick={() => handleSubmit()} />
+          )}
+        </>
+      );
+    }
+
     const inputProps = { ...autocompleteInputProps, ...inputDefaultProps };
     const autocompleteProps = { InputProps, disabled, fullWidth, id, inputProps };
 
-    return <TextField inputRef={inputRef} multiline select={false} {...autocompleteProps} />;
+    return !isMobile ? (
+      <TextField inputRef={inputRef} multiline select={false} {...autocompleteProps} />
+    ) : (
+      <TextField inputRef={inputRef} variant="outlined" multiline minRows={1} select={false} {...autocompleteProps} />
+    );
   };
 
   const renderOption = (optionProps: any, label: string) => {

ui/constants/icons.js

@@ -191,3 +191,4 @@ export const ODYSEE_WHITE_TEXT = 'OdyseeLogoWhiteText';
 export const ODYSEE_DARK_TEXT = 'OdyseeLogoDarkText';
 export const FEATURED = 'Featured';
 export const DISMISS_ALL = 'DismissAll';
+export const SUBMIT = 'Submit';

ui/scss/component/_form-field.scss

@@ -1,7 +1,6 @@
 @import '../init/mixins';
 
 input,
-textarea,
 select,
 .date-picker-input {
   height: var(--height-input);
@@ -37,6 +36,42 @@ select,
   }
 }
 
+@media (min-width: $breakpoint-small) {
+  textarea {
+    height: var(--height-input);
+    border-radius: var(--border-radius);
+    border: 1px solid;
+    color: var(--color-input);
+    border-color: var(--color-input-border);
+    background-color: var(--color-input-bg);
+    padding-right: var(--spacing-s);
+    padding-left: var(--spacing-s);
+
+    &:focus {
+      @include focus;
+    }
+
+    &::placeholder {
+      color: var(--color-input-placeholder);
+      opacity: 0.4;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+
+      & + label {
+        opacity: 0.4;
+      }
+    }
+
+    &[type='range'] {
+      height: auto;
+      height: 0.5rem;
+      background-color: var(--color-secondary);
+    }
+  }
+}
+
 checkbox-element,
 radio-element,
 select {
@@ -480,7 +515,6 @@ fieldset-section {
 
     @media (min-width: $breakpoint-small) {
       max-width: none;
-    }
 
       select {
         max-height: 1.5rem !important;
@@ -489,6 +523,13 @@ fieldset-section {
       }
     }
 
+    @media (max-width: $breakpoint-small) {
+      select {
+        max-height: 1.25rem !important;
+      }
+    }
+  }
+
   label {
     .icon--help {
       vertical-align: middle;

ui/scss/component/_livestream-chat.scss

@@ -112,7 +112,7 @@ $recent-msg-button__height: 2rem;
   }
 
   @media (min-width: $breakpoint-small) {
-    height: calc(100% - var(--header-height) - #{$discussion-header__height});
+    height: calc(100vh - var(--header-height) - #{$discussion-header__height});
   }
 
   @media (max-width: $breakpoint-small) {
@@ -144,13 +144,27 @@ $recent-msg-button__height: 2rem;
   }
 }
 
-.livestream__commentCreate {
+.livestream__comment-create {
   padding: var(--spacing-s);
   border-top: 1px solid var(--color-border);
   margin-top: auto;
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-xxs);
+
+    span,
+    select,
+    option {
+      font-size: var(--font-xxsmall);
+    }
+
+    select {
+      padding: 0px var(--spacing-xxs) !important;
+    }
+
+    .select--slim {
+      margin: 0px;
+    }
   }
 }
 
@@ -197,9 +211,9 @@ $recent-msg-button__height: 2rem;
 }
 
 .livestreamPinned__wrapper {
-  @extend .livestreamSuperchats__wrapper;
   display: flex;
   flex-shrink: 0;
+  position: relative;
   padding: var(--spacing-s) var(--spacing-xs);
   border-bottom: 1px solid var(--color-border);
   font-size: var(--font-small);
@@ -225,6 +239,7 @@ $recent-msg-button__height: 2rem;
   }
 
   @media (max-width: $breakpoint-small) {
+    z-index: 1300;
     max-width: 100%;
     padding: 0;
     padding-left: var(--spacing-xxs);

ui/scss/component/_textarea-suggestions.scss

@@ -1,4 +1,5 @@
 .MuiAutocomplete-inputRoot {
+  @media (min-width: $breakpoint-small) {
     padding: 0 !important;
     font-family: inherit !important;
     font-weight: inherit !important;
@@ -10,10 +11,34 @@
     }
 
     .create__comment {
-    @extend textarea;
-
       min-height: calc(var(--height-input) * 1.5) !important;
     }
+  }
+}
+
+@media (max-width: $breakpoint-small) {
+  .MuiOutlinedInput-input {
+    padding: 0px var(--spacing-xxs);
+  }
+
+  .MuiOutlinedInput-root {
+    font-size: var(--font-xsmall) !important;
+    flex-wrap: nowrap !important;
+
+    textarea {
+      border: none;
+    }
+
+    .button--primary {
+      border-radius: 100%;
+      height: unset;
+      padding: var(--spacing-xxs);
+
+      .button__content {
+        height: unset;
+      }
+    }
+  }
 }
 
 .MuiAutocomplete-paper {

ui/scss/init/_gui.scss

@@ -178,8 +178,10 @@ img {
   text-indent: -9999px;
 }
 
-textarea {
+@media (min-width: $breakpoint-small) {
+  textarea {
     min-height: calc(var(--height-input) * 2);
+  }
 }
 
 .columns {

ui/scss/init/_reset.scss

@@ -156,7 +156,8 @@ select {
   outline: none;
 }
 
-textarea {
+@media (min-width: 900px) {
+  textarea {
     width: 100%;
     min-height: var(--spacing-xxl);
     padding: var(--spacing-s);
@@ -166,8 +167,8 @@ textarea {
     &:not([disabled]) {
       resize: vertical;
     }
+  }
 }
-
 @media print {
   // sass-lint:disable-block no-important
   // Intelligent print styles