From 5bc462927a4bd09af48c1359833b25abeacf11ab Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 9 Apr 2021 01:14:42 +0800
Subject: [PATCH] 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 | 22 ++++++++--------------
 ui/scss/component/_markdown-preview.scss | 23 -----------------------
 2 files changed, 8 insertions(+), 37 deletions(-)

diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx
index a492568b9..fba66eea5 100644
--- a/ui/component/common/markdown-preview.jsx
+++ b/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}
-        className="button--external-link"
-        href={src}
-      />
-      {helpText && <Icon className="icon--help" icon={ICONS.HELP} tooltip size={24} customTooltipText={helpText} />}
-    </div>
+    <Button
+      button="link"
+      iconRight={ICONS.EXTERNAL}
+      label={title || alt || src}
+      title={helpText || title || alt || src}
+      className="button--external-link"
+      href={src}
+    />
   );
 };
 
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 29acb4a4f..21c77aab6 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/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);
   }