From 067615afc2f217c532ffb12568eb0a8568618056 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Thu, 2 Apr 2020 14:45:21 -0400
Subject: [PATCH 1/2] style and limit height of errors on tip unlock modal

---
 static/app-strings.json                 |  11 ++-
 ui/component/supportsLiquidate/view.jsx | 102 +++++++++++++-----------
 ui/scss/init/_gui.scss                  |   6 ++
 3 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 2981c0ccd..f974fb1de 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1116,8 +1116,15 @@
   "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",
+  "Comrade Yrbl, we have a problem": "Comrade Yrbl, we have a problem"
 }
diff --git a/ui/component/supportsLiquidate/view.jsx b/ui/component/supportsLiquidate/view.jsx
index 20da319a5..ec6307869 100644
--- a/ui/component/supportsLiquidate/view.jsx
+++ b/ui/component/supportsLiquidate/view.jsx
@@ -107,60 +107,68 @@ const SupportsLiquidate = (props: Props) => {
         </>
       }
       body={
-        <>
-          <div className="section">
-            <I18nMessage
-              tokens={{
-                amount: (
-                  <strong>
-                    <CreditAmount badge={false} amount={Number(previewBalance)} precision={8} />
-                  </strong>
-                ),
-              }}
-            >
-              %amount% available to unlock
-            </I18nMessage>
-          </div>
-          <div className="section">
-            {previewBalance === 0 && <p>{__('No unlockable tips available')}</p>}
-            {previewBalance === undefined && <p>{__('Loading...')}</p>}
-            {previewBalance && (
-              <Form onSubmit={handleSubmit}>
-                <label htmlFor="supports_liquidate_range">{__('Amount to unlock')}</label>
-                <FormField
-                  name="supports_liquidate_range"
-                  type={'range'}
-                  min={0}
-                  step={0.01}
-                  max={previewBalance}
-                  value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available
-                  onChange={e => handleChange(e.target.value)}
-                />
-                <label className="range__label">
-                  <span>0</span>
-                  <span>{previewBalance / 2}</span>
-                  <span>{previewBalance}</span>
-                </label>
-                <FormField
-                  type="text"
-                  value={amount >= 0 ? amount || '' : previewBalance && previewBalance / 4}
-                  helper={message}
-                  onChange={e => handleChange(e.target.value)}
-                />
-              </Form>
-            )}
-          </div>
-        </>
+        !abandonClaimError && (
+          <>
+            <div className="section">
+              <I18nMessage
+                tokens={{
+                  amount: (
+                    <strong>
+                      <CreditAmount badge={false} amount={Number(previewBalance)} precision={8} />
+                    </strong>
+                  ),
+                }}
+              >
+                %amount% available to unlock
+              </I18nMessage>
+            </div>
+            <div className="section">
+              {previewBalance === 0 && <p>{__('No unlockable tips available')}</p>}
+              {previewBalance === undefined && <p>{__('Loading...')}</p>}
+              {previewBalance && (
+                <Form onSubmit={handleSubmit}>
+                  <label htmlFor="supports_liquidate_range">{__('Amount to unlock')}</label>
+                  <FormField
+                    name="supports_liquidate_range"
+                    type={'range'}
+                    min={0}
+                    step={0.01}
+                    max={previewBalance}
+                    value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available
+                    onChange={e => handleChange(e.target.value)}
+                  />
+                  <label className="range__label">
+                    <span>0</span>
+                    <span>{previewBalance / 2}</span>
+                    <span>{previewBalance}</span>
+                  </label>
+                  <FormField
+                    type="text"
+                    value={amount >= 0 ? amount || '' : previewBalance && previewBalance / 4}
+                    helper={message}
+                    onChange={e => handleChange(e.target.value)}
+                  />
+                </Form>
+              )}
+            </div>
+          </>
+        )
       }
       actions={
         <React.Fragment>
           {abandonClaimError ? (
             <>
-              <div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
-              <Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
+              <div className="error__wrapper--no-overflow">
+                <div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
+              </div>
+              <div className="section__actions">
+                <Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
+              </div>
             </>
           ) : (
-            <Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
+            <div className="section__actions">
+              <Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
+            </div>
           )}
         </React.Fragment>
       }
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 24ed8228b..41643081e 100644
--- a/ui/scss/init/_gui.scss
+++ b/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);
 }
-- 
2.45.3


From 63d6cdaa1a5f7e667dcffdd66f4ca70f68ba3d7b Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Mon, 13 Apr 2020 15:42:15 -0400
Subject: [PATCH 2/2] tip error tweaks

---
 static/app-strings.json                 |  6 +++--
 ui/component/supportsLiquidate/view.jsx | 29 ++++++++++++-------------
 ui/scss/init/_gui.scss                  |  2 +-
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index f974fb1de..17ecface6 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1126,5 +1126,7 @@
   "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",
-  "Comrade Yrbl, we have a problem": "Comrade Yrbl, we have a problem"
-}
+  "How much would you like to unlock?": "How much would you like to unlock?",
+  "A prudent choice": "A prudent choice",
+  "Join": "Join"
+}
\ No newline at end of file
diff --git a/ui/component/supportsLiquidate/view.jsx b/ui/component/supportsLiquidate/view.jsx
index ec6307869..f676dd782 100644
--- a/ui/component/supportsLiquidate/view.jsx
+++ b/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,7 +108,11 @@ const SupportsLiquidate = (props: Props) => {
         </>
       }
       body={
-        !abandonClaimError && (
+        abandonClaimError ? (
+          <div className="error__wrapper--no-overflow">
+            <ErrorText>{__('%message%', { message: abandonClaimError })}</ErrorText>
+          </div>
+        ) : (
           <>
             <div className="section">
               <I18nMessage
@@ -156,20 +161,14 @@ const SupportsLiquidate = (props: Props) => {
       }
       actions={
         <React.Fragment>
-          {abandonClaimError ? (
-            <>
-              <div className="error__wrapper--no-overflow">
-                <div className="error__text">{__('%message%', { message: abandonClaimError })}</div>
-              </div>
-              <div className="section__actions">
-                <Button disabled={error} button="primary" onClick={handleClose} label={__('Done')} />
-              </div>
-            </>
-          ) : (
-            <div className="section__actions">
-              <Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
-            </div>
-          )}
+          <div className="section__actions">
+            <Button
+              disabled={error}
+              button="primary"
+              onClick={abandonClaimError ? handleClose : handleSubmit}
+              label={abandonClaimError ? __('Done') : __('Unlock')}
+            />
+          </div>
         </React.Fragment>
       }
     />
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index 41643081e..6b9e70c0e 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -245,7 +245,7 @@ img {
 }
 
 .error__wrapper--no-overflow {
-  @extend .error-wrapper;
+  @extend .error__wrapper;
   max-height: 10rem;
   overflow: hidden;
 }
-- 
2.45.3