Merge pull request #3943 from lbryio/fix-tipSupportErrors

style and limit height of errors on tip unlock modal

static/app-strings.json

@@ -1116,8 +1116,17 @@
   "Repost %count%": "Repost %count%",
   "File Description": "File Description",
   "View %count% reposts": "View %count% reposts",
-  "Preparing your content": "Preparing your content",
   "Already have an account? %sign_in%": "Already have an account? %sign_in%",
   "Sign in with a password (optional)": "Sign in with a password (optional)",
-  "Don't have an account? %sign_up%": "Don't have an account? %sign_up%"
+  "Don't have an account? %sign_up%": "Don't have an account? %sign_up%",
+  "Preparing your content": "Preparing your content",
+  "File Details": "File Details",
+  "You can unlock all or some of this LBC at any time.": "You can unlock all or some of this LBC at any time.",
+  "Keeping it locked improves the trust and discoverability of your content.": "Keeping it locked improves the trust and discoverability of your content.",
+  "It's usually only worth unlocking what you intend to use immediately. %learn_more%": "It's usually only worth unlocking what you intend to use immediately. %learn_more%",
+  "%amount% available to unlock": "%amount% available to unlock",
+  "%message% hihi": "%message% hihi",
+  "How much would you like to unlock?": "How much would you like to unlock?",
+  "A prudent choice": "A prudent choice",
+  "Join": "Join"
 }

ui/component/supportsLiquidate/view.jsx

@@ -6,6 +6,7 @@ import Button from 'component/button';
 import { Form, FormField } from 'component/common/form';
 import Card from 'component/common/card';
 import I18nMessage from 'component/i18nMessage';
+import ErrorText from 'component/common/error-text';
 
 type Props = {
   balance: number,
@@ -107,6 +108,11 @@ const SupportsLiquidate = (props: Props) => {
         </>
       }
       body={
+        abandonClaimError ? (
+          <div className="error__wrapper--no-overflow">
+            <ErrorText>{__('%message%', { message: abandonClaimError })}</ErrorText>
+          </div>
+        ) : (
           <>
             <div className="section">
               <I18nMessage
@@ -151,17 +157,18 @@ const SupportsLiquidate = (props: Props) => {
               )}
             </div>
           </>
+        )
       }
       actions={
         <React.Fragment>
-          {abandonClaimError ? (
-            <>
-              <div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
-              <Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
-            </>
-          ) : (
-            <Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
-          )}
+          <div className="section__actions">
+            <Button
+              disabled={error}
+              button="primary"
+              onClick={abandonClaimError ? handleClose : handleSubmit}
+              label={abandonClaimError ? __('Done') : __('Unlock')}
+            />
+          </div>
         </React.Fragment>
       }
     />

ui/scss/init/_gui.scss

@@ -244,6 +244,12 @@ img {
   border-radius: var(--border-radius);
 }
 
+.error__wrapper--no-overflow {
+  @extend .error__wrapper;
+  max-height: 10rem;
+  overflow: hidden;
+}
+
 .error__text {
   color: var(--color-text-error);
 }