From 6bb7a155cd957802c73d2c910604410ba007e22b Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Mon, 7 Feb 2022 10:37:19 -0300
Subject: [PATCH] Add help tip notice to input

---
 ui/component/commentCreate/extra-contents.jsx |  2 +-
 ui/component/commentCreate/view.jsx           |  7 ++++++-
 .../common/form-components/form-field.jsx     |  4 ++++
 ui/scss/component/_textarea-suggestions.scss  | 19 +++++++++++++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/ui/component/commentCreate/extra-contents.jsx b/ui/component/commentCreate/extra-contents.jsx
index 746b6d662..2b468f44a 100644
--- a/ui/component/commentCreate/extra-contents.jsx
+++ b/ui/component/commentCreate/extra-contents.jsx
@@ -42,7 +42,7 @@ export const HelpText = (helpTextProps: HelpTextProps) => {
       {deletedComment && <div className="error__text">{__('This comment has been deleted.')}</div>}
 
       {!!minAmount && (
-        <div className="help--notice commentCreate__minAmountNotice">
+        <div className="help--notice comment-create__min-amount-notice">
           <I18nMessage tokens={{ lbc: <CreditAmount noFormat amount={minAmount} /> }}>
             {minTip ? 'Comment min: %lbc%' : minSuper ? 'HyperChat min: %lbc%' : ''}
           </I18nMessage>
diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index f7dda7b88..386e14c63 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -533,6 +533,11 @@ export function CommentCreate(props: Props) {
             disabled={isFetchingChannels || disableInput}
             isLivestream={isLivestream}
             label={<FormChannelSelector isReply={Boolean(isReply)} isLivestream={Boolean(isLivestream)} />}
+            noticeLabel={
+              isMobile && (
+                <HelpText deletedComment={deletedComment} minAmount={minAmount} minSuper={minSuper} minTip={minTip} />
+              )
+            }
             name={isReply ? 'create__reply' : 'create__comment'}
             onChange={(e) => setCommentValue(SIMPLE_SITE || !advancedEditor || isReply ? e.target.value : e)}
             handleTip={(isLBC) => handleSelectTipComment(isLBC ? TAB_LBC : TAB_FIAT)}
@@ -574,7 +579,7 @@ export function CommentCreate(props: Props) {
         />
       )}
 
-      {(!isMobile || !isLivestream || isReviewingStickerComment || isReviewingSupportComment) && (
+      {(!isMobile || isReviewingStickerComment || isReviewingSupportComment) && (
         <div className="section__actions">
           {/* Submit Button */}
           {isReviewingSupportComment ? (
diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 9de7da802..f33928704 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@@ -49,6 +49,7 @@ type Props = {
   showSelectors?: boolean,
   submitButtonRef?: any,
   tipModalOpen?: boolean,
+  noticeLabel?: any,
   onChange?: (any) => any,
   setShowSelectors?: (boolean) => void,
   quickActionHandler?: (any) => any,
@@ -117,6 +118,7 @@ export class FormField extends React.PureComponent<Props, State> {
       showSelectors,
       submitButtonRef,
       tipModalOpen,
+      noticeLabel,
       quickActionHandler,
       setShowSelectors,
       render,
@@ -282,6 +284,8 @@ export class FormField extends React.PureComponent<Props, State> {
                   </div>
                 )}
 
+                {noticeLabel}
+
                 {hideSuggestions ? (
                   <textarea
                     type={type}
diff --git a/ui/scss/component/_textarea-suggestions.scss b/ui/scss/component/_textarea-suggestions.scss
index 40e3d70ce..2f1337c2d 100644
--- a/ui/scss/component/_textarea-suggestions.scss
+++ b/ui/scss/component/_textarea-suggestions.scss
@@ -45,6 +45,12 @@
   .MuiOutlinedInput-root {
     padding: 0px var(--spacing-xxs) !important;
   }
+
+  @media (max-width: $breakpoint-small) {
+    .MuiOutlinedInput-notchedOutline {
+      display: none;
+    }
+  }
 }
 
 @media (min-width: $breakpoint-small) {
@@ -53,6 +59,19 @@
   }
 }
 
+.MuiDrawer-root {
+  .comment-create__min-amount-notice {
+    margin: 0px;
+    padding: var(--spacing-xxs);
+  }
+}
+
+.card--enable-overflow {
+  .comment-create__min-amount-notice {
+    margin-bottom: var(--spacing-xxs);
+  }
+}
+
 .comment-create--drawer .MuiOutlinedInput-notchedOutline {
   border: 1px solid var(--color-border) !important;
   border-radius: 0 !important;