general css fixes

.eslintrc.json

@@ -40,6 +40,8 @@
     "react/require-default-props": 0,
     "react/jsx-closing-tag-location": 0,
     "jsx-a11y/no-noninteractive-element-to-interactive-role": 0,
-    "class-methods-use-this": 0
+    "class-methods-use-this": 0,
+    "jsx-a11y/interactive-supports-focus": 0,
+    "jsx-a11y/click-events-have-key-events": 0
   }
 }

src/renderer/component/transactionListRecent/view.jsx

@@ -24,6 +24,10 @@ class TransactionListRecent extends React.PureComponent<Props> {
     return (
       <section className="card card--section">
         <div className="card__title">{__('Recent Transactions')}</div>
+        <div className="card__subtitle">
+          {__('To view all of your transactions, navigate to the')}{' '}
+          <Button button="link" navigate="/history" label={__('transactions page')} />.
+        </div>
         {fetchingTransactions && (
           <div className="card__content">
             <BusyIndicator message={__('Loading transactions')} />

src/renderer/component/userHistory/view.jsx

@@ -117,8 +117,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
           />
         </div>
         {!!history.length && (
-          <table className="card--section table table--stretch table--history">
+          <section className="item-list">
-            <tbody>
             {history.map(item => (
               <UserHistoryItem
                 key={item.uri}
@@ -130,8 +129,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
                 }}
               />
             ))}
-            </tbody>
+          </section>
-          </table>
         )}
         {pageCount > 1 && (
           <FormRow padded verticallyCentered centered>

src/renderer/component/userHistoryItem/view.jsx

@@ -36,18 +36,16 @@ class UserHistoryItem extends React.PureComponent<Props> {
     }
 
     return (
-      <tr
+      <div
+        role="button"
         onClick={onSelect}
-        className={classnames({
+        className={classnames('item-list__item', {
-          history__selected: selected,
+          'item-list__item--selected': selected,
         })}
       >
-        <td>
         <input checked={selected} type="checkbox" onClick={onSelect} />
-        </td>
+        <span className="time time--ago">{moment(lastViewed).from(moment())}</span>
-        <td>{moment(lastViewed).from(moment())}</td>
+        <span className="item-list__item--cutoff">{title}</span>
-        <td>{title}</td>
-        <td>
         <Button
           tourniquet
           button="link"
@@ -55,8 +53,7 @@ class UserHistoryItem extends React.PureComponent<Props> {
           navigate="/show"
           navigateParams={{ uri }}
         />
-        </td>
+      </div>
-      </tr>
     );
   }
 }

src/renderer/page/help/view.jsx

@@ -199,7 +199,7 @@ class HelpPage extends React.PureComponent<Props, State> {
           )}
 
           {this.state.uiVersion && ver ? (
-            <table className="table table--stretch table--help">
+            <table className="card__content table table--stretch table--help">
               <tbody>
                 <tr>
                   <td>{__('App')}</td>

src/renderer/scss/_gui.scss

@@ -39,7 +39,7 @@ html {
 }
 
 body {
-  font-family: 'metropolis-semibold';
+  font-family: 'metropolis-medium';
   font-weight: 400;
   font-size: 16px;
   line-height: 1.5;
@@ -74,7 +74,6 @@ input {
   line-height: 1;
   cursor: text;
   background-color: transparent;
-  font-family: 'metropolis-medium';
 
   &[type='radio'],
   &[type='checkbox'],
@@ -109,7 +108,6 @@ input {
 }
 
 textarea {
-  font-family: 'metropolis-medium';
   border: 1px solid var(--color-divider);
   font-size: 0.8em;
   width: 100%;
@@ -152,8 +150,6 @@ dd {
 }
 
 p {
-  font-family: 'metropolis-medium';
-
   &:not(:first-of-type) {
     margin-top: $spacing-vertical * 1/3;
   }
@@ -227,7 +223,6 @@ p {
 .page__empty {
   margin-top: 200px;
   text-align: center;
-  font-family: 'metropolis-medium';
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -300,7 +295,6 @@ p {
   color: inherit;
   font-weight: inherit;
   font-size: inherit;
-  font-family: 'metropolis-medium';
   padding: 0;
 }
 
@@ -333,10 +327,6 @@ p {
   -webkit-box-orient: vertical;
 }
 
-.busy-indicator {
-  font-family: 'metropolis-medium';
-}
-
 .busy-indicator__loader {
   background: url('../../../static/img/busy.gif') no-repeat center center;
   display: inline-block;
@@ -355,7 +345,6 @@ p {
 
 .help {
   font-size: 12px;
-  font-family: 'metropolis-medium';
   color: var(--color-help);
 }
 
@@ -364,7 +353,6 @@ p {
 }
 
 .meta {
-  font-family: 'metropolis-medium';
   font-size: 0.8em;
   color: var(--color-meta-light);
 }

src/renderer/scss/_vars.scss

@@ -52,6 +52,8 @@ $large-breakpoint: 1921px;
   --color-search-placeholder: var(--color-placeholder);
   --color-credit-free: var(--color-dark-blue);
   --color-credit-price: var(--card-text-color);
+  --color-text-black: #444;
+  --color-text-white: #efefef;
 
   /* Shadows */
   --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
@@ -60,8 +62,8 @@ $large-breakpoint: 1921px;
   --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05);
 
   /* Text */
-  --text-color: var(--color-black);
+  --text-color: var(--color-text-black);
-  --text-color-inverse: var(--color-white);
+  --text-color-inverse: var(--color-text-white);
   --text-help-color: var(--color-help);
   --text-max-width: 660px;
   --text-link-padding: 4px;

src/renderer/scss/all.scss

@@ -29,3 +29,5 @@
 @import 'component/_toggle.scss';
 @import 'component/_search.scss';
 @import 'component/_dat-gui.scss';
+@import 'component/_item-list.scss';
+@import 'component/_time.scss';

src/renderer/scss/component/_button.scss

@@ -19,7 +19,6 @@ button:disabled {
   fill: currentColor; // for proper icon color
   font-size: 12px;
   transition: all var(--animation-duration) var(--animation-style);
-  font-family: 'metropolis-medium';
 
   &:not(:disabled) {
     box-shadow: var(--box-shadow-button);
@@ -172,7 +171,6 @@ button:disabled {
 }
 
 .btn.btn--header-balance {
-  font-family: 'metropolis-medium';
   font-size: 14px;
   color: var(--header-primary-color);
 

src/renderer/scss/component/_card.scss

@@ -107,6 +107,7 @@
 .card__title {
   font-size: 18px;
   color: var(--text-color);
+  font-family: 'metropolis-semibold';
 }
 
 .card__title--small {
@@ -151,7 +152,6 @@
 .card__subtitle {
   margin: 0;
   font-size: 14px;
-  font-family: 'metropolis-medium';
   color: var(--card-text-color);
 }
 
@@ -336,6 +336,7 @@
 }
 
 .card-row__title {
+  font-family: 'metropolis-semibold';
   display: flex;
   align-items: center;
   font-size: 18px;

src/renderer/scss/component/_item-list.scss

@@ -0,0 +1,26 @@
+.item-list {
+  background-color: var(--card-bg);
+  margin-top: $spacing-vertical;
+}
+
+.item-list__item {
+  display: flex;
+  align-items: center;
+  padding: $spacing-vertical * 1/3;
+
+  input,
+  .item-list__item--cutoff {
+    margin-right: $spacing-vertical;
+  }
+}
+
+.item-list__item--selected {
+  background-color: var(--table-item-odd);
+}
+
+.item-list__item--cutoff {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  max-width: 350px;
+}

src/renderer/scss/component/_search.scss

@@ -24,7 +24,6 @@
   padding: 10px;
   padding-left: 30px;
   font-size: 13px;
-  font-family: 'metropolis-medium';
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,7 +53,6 @@
   flex-direction: row;
   justify-items: flex-start;
   align-items: center;
-  font-family: 'metropolis-medium';
 
   &:not(:first-of-type) {
     border-top: 1px solid var(--search-item-border-color);
@@ -75,7 +73,6 @@
 .wunderbar__suggestion-label--action {
   margin-left: $spacing-vertical * 1/3;
   white-space: nowrap;
-  font-family: 'metropolis-medium';
   font-size: 12px;
   line-height: 0.1; // to vertically align because the font size is smaller
 }

src/renderer/scss/component/_table.scss

@@ -3,7 +3,6 @@ table.table,
   word-wrap: break-word;
   max-width: 100%;
   text-align: left;
-  margin-top: $spacing-vertical * 2/3;
 
   tr td:first-of-type,
   tr th:first-of-type {
@@ -107,48 +106,3 @@ table.table--transactions {
     width: 15%;
   }
 }
-
-table.table--history {
-  margin-top: $spacing-vertical * 1/3;
-
-  tbody {
-    tr {
-      &:nth-child(even),
-      &:nth-child(odd) {
-        background-color: var(--table-item-even);
-
-        &.history__selected {
-          color: red;
-          background-color: var(--table-item-odd);
-        }
-      }
-    }
-
-    td {
-      cursor: default;
-      padding: $spacing-vertical * 1/3 0;
-    }
-
-    td:nth-of-type(1) {
-      width: 7.5%;
-    }
-    td:nth-of-type(2) {
-      width: 17.5%;
-    }
-    td:nth-of-type(3) {
-      width: 40%;
-      max-width: 30vw;
-      padding-right: $spacing-vertical * 2/3;
-    }
-    td:nth-of-type(4) {
-      width: 30%;
-    }
-
-    td:nth-of-type(3),
-    td:nth-of-type(4) {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}

src/renderer/scss/component/_time.scss

@@ -0,0 +1,9 @@
+// All CSS for date & time ui
+
+.time {
+  color: var(--color-help);
+}
+
+.time--ago {
+  min-width: 160px;
+}

static/themes/dark.css

@@ -12,7 +12,7 @@
   --color-credit-free: var(--color-secondary);
 
   /* Text */
-  --text-color: var(--color-white);
+  --text-color: var(--color-text-white);
   --text-help-color: var(--color-help);
 
    /* Form */