tip error tweaks

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"
 }

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')} />
+            <Button
+              disabled={error}
+              button="primary"
+              onClick={abandonClaimError ? handleClose : handleSubmit}
+              label={abandonClaimError ? __('Done') : __('Unlock')}
+            />
           </div>
-            </>
-          ) : (
-            <div className="section__actions">
-              <Button disabled={error} button="primary" onClick={handleSubmit} label={__('Unlock')} />
-            </div>
-          )}
         </React.Fragment>
       }
     />

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;
 }