fix publish modal style

ui/component/claimPreview/view.jsx

@@ -266,6 +266,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             </div>
             <ClaimPreviewSubtitle uri={uri} type={type} />
           </div>
+          {type !== 'small' && (
             <div className="claim-preview__actions">
               {!pending && (
                 <React.Fragment>
@@ -285,6 +286,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
               )}
               {properties !== undefined ? properties : <ClaimTags uri={uri} type={type} />}
             </div>
+          )}
         </div>
       </div>
     </li>

ui/modal/modalPublish/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Modal } from 'modal/modal';
 import ClaimPreview from 'component/claimPreview';
 import Button from 'component/button';
+import Card from 'component/common/card';
 
 type Props = {
   closeModal: () => void,
@@ -19,41 +20,50 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
     const contentLabel = isEdit ? 'Update published' : 'File published';
     const publishMessage = isEdit ? 'update is now' : 'file is now';
 
+    function handleClose() {
+      clearPublish();
+      closeModal();
+    }
+
     return (
-      <Modal
-        isOpen
+      <Modal isOpen type="card" contentLabel={__(contentLabel)} onAborted={handleClose}>
+        <Card
           title={__('Success')}
-        contentLabel={__(contentLabel)}
-        onConfirmed={() => {
-          clearPublish();
-          navigate('/$/published');
-          closeModal();
-        }}
-        confirmButtonLabel={__('View My Publishes')}
-        abortButtonLabel={__('Close')}
-        onAborted={() => {
-          clearPublish();
-          closeModal();
-        }}
-      >
-        <p className="section__subtitle">
-          {__(`Your %publishMessage% pending on LBRY. It will take a few minutes to appear for other users.`, {
+          subtitle={__(`Your %publishMessage% pending on LBRY. It will take a few minutes to appear for other users.`, {
             publishMessage,
           })}
-        </p>
+          body={
+            <React.Fragment>
               <div className="card--inline">
                 <ClaimPreview type="small" uri={uri} />
               </div>
-        <p className="help">
               {filePath && !IS_WEB && (
+                <p className="help">
                   <React.Fragment>
                     {__(
                       `Upload will continue in the background, please do not shut down immediately. Leaving the app running helps the network, thank you!`
                     )}{' '}
                     <Button button="link" href="https://lbry.com/faq/host-content" label={__('Learn More')} />
                   </React.Fragment>
-          )}
                 </p>
+              )}
+            </React.Fragment>
+          }
+          actions={
+            <React.Fragment>
+              <Button
+                button="primary"
+                label={__('View My Publishes')}
+                onClick={() => {
+                  clearPublish();
+                  navigate('/$/published');
+                  closeModal();
+                }}
+              />
+              <Button button="link" label={__('Close')} onClick={handleClose} />
+            </React.Fragment>
+          }
+        />
       </Modal>
     );
   }

ui/scss/component/_file-properties.scss

@@ -5,6 +5,7 @@
   font-size: var(--font-small);
   color: var(--color-text-help);
   margin-left: var(--spacing-small);
+  white-space: nowrap;
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-small);