move tourniquet style to button

src/renderer/component/button/view.jsx

@@ -23,6 +23,7 @@ type Props = {
   noPadding: ?boolean, // to remove padding and allow circular buttons
   uppercase: ?boolean,
   iconColor: ?string,
+  tourniquet: ?boolean, // to shorten the button and ellipsis, only use for links
 };
 
 class Button extends React.PureComponent<Props> {
@@ -50,6 +51,7 @@ class Button extends React.PureComponent<Props> {
       noPadding,
       uppercase,
       iconColor,
+      tourniquet,
       ...otherProps
     } = this.props;
 
@@ -69,6 +71,7 @@ class Button extends React.PureComponent<Props> {
             'btn--link': button === 'link',
             'btn--external-link': button === 'link' && href,
             'btn--uppercase': uppercase,
+            'btn--tourniquet': tourniquet,
           }
         : 'btn--no-style',
       className

src/renderer/component/transactionList/internal/transaction-list-item.jsx

@@ -72,6 +72,7 @@ class TransactionListItem extends React.PureComponent<Props> {
           {name &&
             claimId && (
               <Button
+                tourniquet
                 button="link"
                 navigate="/show"
                 navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}

src/renderer/scss/component/_button.scss

@@ -76,6 +76,13 @@ button:disabled {
   background-color: var(--btn-bg-secondary);
 }
 
+.btn.btn--tourniquet {
+  max-width: 20vw;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .btn.btn--no-style {
   font-size: inherit;
   font-weight: inherit;

src/renderer/scss/component/_table.scss

@@ -99,15 +99,6 @@ table.table--transactions {
   }
   td:nth-of-type(3) {
     width: 22.5%;
-
-    .btn--link {
-      // Tourniquets text over 20VW
-      // Style needs to be on the button to allow for proper ellipsis
-      max-width: 20vw;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
   }
   td:nth-of-type(4) {
     width: 17.5%;