Merge branch 'master' into user-history

src/renderer/component/selectThumbnail/view.jsx

@@ -55,22 +55,34 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
     const thumbnailSrc =
       !thumbnail || thumbnailError ? Native.imagePath(thumbnailErrorImage) : thumbnail;
 
+    /*
+      Note:
+      We are using backgroundImage instead of an <img /> to zoom if the selected thumbnail isn't
+      the proper aspect ratio. This is to avoid blackbars on the side of images and inconsistent thumbnails
+      We still need to render the image to see if there is an error loading the url
+    */
+
     return (
       <div className="card__content">
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
           <div className="column">
-            <img
-              src={thumbnailSrc}
-              className="column__item thumbnail-preview"
-              alt={__('Thumbnail Preview')}
-              onError={() => {
-                this.setState({
-                  thumbnailError: true,
-                  thumbnailErrorImage:
-                    thumbnail && thumbnail.length > 0 ? 'broken.png' : 'no-thumbnail.png',
-                });
-              }}
-            />
+            <div
+              className="column__item thumbnail-preview card__media"
+              style={{ backgroundImage: `url(${thumbnailSrc})` }}
+            >
+              <img
+                style={{ display: 'none' }}
+                src={thumbnailSrc}
+                alt={__('Thumbnail Preview')}
+                onError={() => {
+                  this.setState({
+                    thumbnailError: true,
+                    thumbnailErrorImage:
+                      thumbnail && thumbnail.length > 0 ? 'broken.png' : 'no-thumbnail.png',
+                  });
+                }}
+              />
+            </div>
             <div className="column__item">
               <FormField
                 className="input--thumbnail"

src/renderer/page/help/view.jsx

@@ -217,7 +217,14 @@ class HelpPage extends React.PureComponent<Props, State> {
                   <td>{__('Connected Email')}</td>
                   <td>
                     {user && user.primary_email ? (
-                      user.primary_email
+                      <React.Fragment>
+                        {user.primary_email}{' '}
+                        <Button
+                          button="link"
+                          href={`http://lbry.io/list/edit/${accessToken}`}
+                          label={__('Update mailing preferences')}
+                        />
+                      </React.Fragment>
                     ) : (
                       <React.Fragment>
                         <span className="empty">{__('none')} </span>

src/renderer/scss/_gui.scss

@@ -389,5 +389,4 @@ p {
 .thumbnail-preview {
   height: var(--thumbnail-preview-height);
   width: var(--thumbnail-preview-width);
-  border: var(--thumbnail-preview-border);
 }

src/renderer/scss/_vars.scss

@@ -195,6 +195,4 @@ $large-breakpoint: 1921px;
   /* Image */
   --thumbnail-preview-height: 100px;
   --thumbnail-preview-width: 177px;
-  // This will awlways white, it looks fine on light mode
-  --thumbnail-preview-border: 1px solid var(--color-white);
 }

src/renderer/scss/component/_button.scss

@@ -163,7 +163,7 @@ button:disabled {
   transition: color var(--animation-duration) var(--animation-style);
 
   &:hover {
-    color: var(--color-light-blue);
+    color: var(--btn-color-inverse);
   }
 }
 

src/renderer/scss/component/_content.scss

@@ -32,7 +32,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-size: cover;
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   display: flex;

src/renderer/scss/component/_table.scss

@@ -3,7 +3,7 @@ table.table,
   word-wrap: break-word;
   max-width: 100%;
   text-align: left;
-  margin-top: $spacing-width;
+  margin-top: $spacing-vertical * 2/3;
 
   tr td:first-of-type,
   tr th:first-of-type {