more experimental changes

add more focus for support button

minor fixes css

ui/js/component/fileActions/view.jsx

@@ -23,15 +23,6 @@ class FileActions extends React.PureComponent {
             navigateParams={{ id: claimId }}
           />}
         <FileDownloadLink uri={uri} />
-        {showSupport &&
-          <Link
-            button="text"
-            icon="icon-gift"
-            label={__("Support")}
-            navigate="/show"
-            className="no-underline"
-            navigateParams={{ uri, tab: "tip" }}
-          />}
         {showDelete &&
           <Link
             button="text"
@@ -47,6 +38,15 @@ class FileActions extends React.PureComponent {
           className="no-underline"
           label={__("report")}
         />
+        {showSupport &&
+          <Link
+            button="primary"
+            icon="icon-gift"
+            label={__("Support")}
+            navigate="/show"
+            className="card__action--right no-underline"
+            navigateParams={{ uri, tab: "tip" }}
+          />}
       </section>
     );
   }

ui/js/component/transactionList/internal/TransactionListItem.jsx

@@ -18,12 +18,22 @@ class TransactionListItem extends React.PureComponent {
       type,
     } = transaction;
 
+    const dateFormat = {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    };
+
     return (
       <tr>
         <td>
           {date
             ? <div>
-                <DateTime date={date} show={DateTime.SHOW_DATE} />
+                <DateTime
+                  date={date}
+                  show={DateTime.SHOW_DATE}
+                  formatOptions={dateFormat}
+                />
                 <div className="meta">
                   <DateTime date={date} show={DateTime.SHOW_TIME} />
                 </div>

ui/js/page/file/view.jsx

@@ -87,9 +87,10 @@ class FilePage extends React.PureComponent {
                   <h1>{title}</h1>
                   <div className="card__subtitle">
                     <UriIndicator uri={uri} link={true} />
-                    <span style={{ margin: "10px" }}>&#9899;</span>
+                    <span className="divider__vertical">&bull;</span>
                     <span>
-                      Published on <DateTime block={height} show="date" />
+                      Published on{" "}
+                      <DateTime block={height} show={DateTime.SHOW_DATE} />
                     </span>
                   </div>
                 </div>

ui/scss/all.scss

@@ -24,4 +24,5 @@
 @import "component/_scrollbar.scss";
 @import "component/_tabs.scss";
 @import "component/_media.scss";
+@import "component/_divider.scss";
 @import "page/_show.scss";

ui/scss/component/__divider.scss

@@ -0,0 +1,8 @@
+.divider__horizontal {
+  border: var(--divider);
+  margin: 16px 0;
+}
+
+.divider__vertical {
+  margin: 10px;
+}

ui/scss/component/_card.scss

@@ -44,8 +44,7 @@
   text-overflow: ellipsis;
 }
 .card__title-identity {
-  margin-top: $spacing-vertical * 1/3;
-  margin-bottom: $spacing-vertical * 1/3;
+  margin: $spacing-vertical * 1/2 0;
 }
 .card__actions {
   margin-top: var(--card-margin);

ui/scss/component/_form-field.scss

@@ -36,7 +36,10 @@ input[type="text"].input-copyable {
   padding-left: 5px;
   padding-right: 5px;
   width: 100%;
-  &:focus { border-color: var(--color-primary); }
+  &:focus {
+    border-color: var(--color-primary);
+    background: none !important;
+  }
 }
 
 .form-field {