From 0b8239241b5bd09a02eb3a8af0c55d7d233b5892 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Fri, 25 Jun 2021 12:23:46 +0530
Subject: [PATCH] integrate styles for remote images

---
 .../src/less2/include/markdown.less           | 22 ++++++++++++++++---
 www/common/diffMarked.js                      | 10 +++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less
index 3e1837f96..f52b2666f 100644
--- a/customize.dist/src/less2/include/markdown.less
+++ b/customize.dist/src/less2/include/markdown.less
@@ -156,21 +156,37 @@
     }
 
     div.cp-inline-img-warning {
+        @cryptpad_test_red_fader: fade(@cryptpad_color_red, 15%); // XXX
         display: inline-block;
         padding: 10px;
 
-        color: @cryptpad_text_col;
-        background-color: @cryptpad_color_red_fader;
+        color: @cryptpad_text_col; // XXX
+        background-color: @cryptpad_test_red_fader; // XXX @cryptpad_color_red_fader;
         border: 1px solid @cryptpad_color_red;
 
         .cp-inline-img {
             display: flex;
-            margin-bottom:10px;
+            margin-bottom: 10px;
         }
         .cp-alt-txt {
             margin-left: 10px;
             font-family: monospace;
             font-size: 0.8em;
+            color: fade(@cryptpad_text_col, 90%);
+        }
+        a {
+            color: @cryptpad_text_col;
+            font-size: 0.8em;
+            &.cp-remote-img::before {
+                font-family: FontAwesome;
+                //content: "\f08e\00a0";
+                content: "\f08e\00a0\00a0";
+            }
+            &.cp-learn-more::before {
+                font-family: FontAwesome;
+                content: "\f059\00a0";
+                //content: "\f059\00a0\00a0";
+            }
         }
     }
 }
diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js
index 9e40ad3db..1f4fadefb 100644
--- a/www/common/diffMarked.js
+++ b/www/common/diffMarked.js
@@ -314,11 +314,17 @@ define([
             h('br'),
             h('a.cp-remote-img', {
                 href: qualifiedHref(href),
-            }, Messages.resources_openInNewTab),
+            }, [
+                //h('i.fa.fa-external-link'), // XXX
+                Messages.resources_openInNewTab
+            ]),
             h('br'),
             h('a.cp-learn-more', {
                 href: 'https://docs.cryptpad.fr/en/user_guide/index.html?placeholder=remote_images', // XXX point to an actual page
-            }, Messages.resources_learnWhy),
+            }, [
+                //h('i.fa.fa-question-circle'), // XXX
+                Messages.resources_learnWhy
+            ]),
         ]);
 
         return warning.outerHTML;