SimpleImageLink: simplify + use 'src' as last resort

- The icon makes the screen too busy when there are lots of images in a page.

- Use src as the last resort for the text (I though `title` and `alt` was mandatory in markdown; apparently not).

ui/component/common/markdown-preview.jsx

@@ -15,7 +15,6 @@ import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
 import ZoomableImage from 'component/zoomableImage';
 import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
 import Button from 'component/button';
-import Icon from 'component/common/icon';
 import * as ICONS from 'constants/icons';
 
 type SimpleTextProps = {
@@ -99,19 +98,14 @@ const SimpleImageLink = (props: ImageLinkProps) => {
   }
 
   return (
-    <div className="preview-link__img--no-preview">
     <Button
       button="link"
-        icon={ICONS.IMAGE}
-        iconSize={28}
       iconRight={ICONS.EXTERNAL}
-        label={title || alt}
-        title={title || alt}
+      label={title || alt || src}
+      title={helpText || title || alt || src}
       className="button--external-link"
       href={src}
     />
-      {helpText && <Icon className="icon--help" icon={ICONS.HELP} tooltip size={24} customTooltipText={helpText} />}
-    </div>
   );
 };
 

ui/scss/component/_markdown-preview.scss

@@ -253,29 +253,6 @@
     width: 8rem;
   }
 
-  .preview-link__img--no-preview {
-    margin: var(--spacing-s) var(--spacing-m);
-    padding: var(--spacing-s);
-    background-color: var(--color-card-background);
-
-    border-bottom-left-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    .button {
-      max-width: 90%;
-    }
-  }
-
   .preview-link__description {
     margin-top: var(--spacing-s);
   }