From 36573701dc656ea6e70743e50d51e71da7e489a8 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 16 Feb 2021 16:57:13 +0100
Subject: [PATCH] Use svg icon instead of CSS `before`

CSS can be sometimes a little bit inconsistent to create such an icon. Using SVG is better solution to create beautiful icon.
---
 app/assets/images/question-mark-icon.svg       |  1 +
 .../darkswarm/question-mark-icon.scss          | 18 ++----------------
 2 files changed, 3 insertions(+), 16 deletions(-)
 create mode 100644 app/assets/images/question-mark-icon.svg

diff --git a/app/assets/images/question-mark-icon.svg b/app/assets/images/question-mark-icon.svg
new file mode 100644
index 0000000000..cbef96910d
--- /dev/null
+++ b/app/assets/images/question-mark-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="24.87" cy="24.87" r="24" fill="#f4f9fd" stroke="#cfe1f3" stroke-miterlimit="10"/><path d="M36.31 18.13c0 7.51-8.11 7.63-8.11 10.4v.71c0 .74-.6 1.34-1.34 1.34h-5.11c-.74 0-1.34-.6-1.34-1.34v-.97c0-4 3.04-5.61 5.33-6.89 1.97-1.1 3.17-1.85 3.17-3.31 0-1.93-2.46-3.21-4.46-3.21-2.6 0-3.8 1.23-5.48 3.36-.45.57-1.28.68-1.87.24l-3.12-2.36a1.35 1.35 0 01-.3-1.83c2.65-3.89 6.02-6.07 11.27-6.07 5.49-.02 11.36 4.27 11.36 9.93zM29 36.86c0 2.59-2.11 4.71-4.71 4.71s-4.71-2.11-4.71-4.71c0-2.59 2.11-4.71 4.71-4.71S29 34.27 29 36.86z" fill="#81b2e1"/></svg>
diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
index 47696191ee..c8b33a727e 100644
--- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss
+++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
@@ -1,6 +1,7 @@
 .question-mark-icon {
   position: relative;
-  top: 1px;
+  top: 6px;
+  background-image: image-url("question-mark-icon.svg");
 
   // Reset button element css attributes
   padding: 0;
@@ -13,21 +14,6 @@
   &:focus {
     background-color: transparent;
   }
-
-  &::before {
-    content: "?";
-    padding-left: 1px;
-    display: inline-block;
-    color: $tiny-blue;
-    border: 1px solid $grey-250;
-    border-radius: 50%;
-    text-align: center;
-    background-color: $grey-075;
-    width: 20px;
-    height: 20px;
-    font-weight: bold;
-    font-size: 1rem;
-  }
 }
 
 .joyride-tip-guide.question-mark-tooltip {