Fix. Vulnerability alarm. Safe badge layout fixed. (#340)

css/src/spbc-admin.css

@@ -158,14 +158,13 @@ span.green_dot{
 .spbct-safe-extension-badge-description {
 	display: none;
 	position: absolute;
-	min-width: 150px;
+	min-width: 200px;
 	background: rgba(0, 0, 0, 0.5);
 	color: white;
-	text-align: left;
-	top: 5px;
+	text-align: center;
+	top: 2px;
 	right: 0;
 	padding: 5px;
-	border-radius: 4px;
 	animation: fadeInFromNone 0.3s ease-in-out;
 	z-index: 9999;
 }
@@ -187,7 +186,7 @@ span.green_dot{
 	content: '';
 	position: absolute;
     top: -10px;
-    right: 12px;
+    right: 10px;
 	border: 5px solid transparent;
 	border-bottom: 5px solid rgba(0, 0, 0, 0.5);
 }
@@ -197,14 +196,5 @@ span.green_dot{
 }
 .spbct-safe-extension-badge-description > a {
 	color: white;
-}
-.spbct-safe-icon {
-	background-color: transparent;
-	background-image: url(../images/spbct-safe-extension.png);
-	background-size: 34px;
-	display: inline-block;
-	height: 34px;
-	width: 34px;
-	top: -5px;
-	left: -5px;
+	text-decoration: underline;
 }

lib/CleantalkSP/SpbctWP/VulnerabilityAlarm/View/PluginIsSafeBadge.html

@@ -1,5 +1,5 @@
 <div class="spbct-safe-extension-badge" data-tooltip="SPBCT safe plugin">
-    <span class="spbct-safe-icon"></span>
+    <img src="{{ASSETS_URL}}/approved_auto.svg"  alt="Approved"/>
 </div>
 <div class="spbct-safe-extension-badge-description-placeholder">
     <div class="spbct-safe-extension-badge-description">

lib/CleantalkSP/SpbctWP/VulnerabilityAlarm/VulnerabilityAlarmView.php

@@ -6,6 +6,8 @@
 
 class VulnerabilityAlarmView
 {
+    const ASSETS_URL = SPBC_PATH . '/lib/CleantalkSP/SpbctWP/VulnerabilityAlarm/Assets';
+
     /**
      * @param string $plugin_file
      * @param PluginReport $plugin_report
@@ -69,6 +71,7 @@ public static function showSafeBadge($module_type, $plugin_slug, $plugin_id)
 
         if ( file_exists($layout_file) ) {
             $replaces = [
+                '{{ASSETS_URL}}' => self::ASSETS_URL,
                 '{{DESCRIPTION}}' => $badge_description,
                 '{{MORE_DETAILS_LINK}}' => static::getMoreDetailsLink($plugin_slug, $plugin_id, true)
             ];
@@ -93,18 +96,20 @@ public static function showSafeBadge($module_type, $plugin_slug, $plugin_id)
     private static function getMoreDetailsLink($plugin_slug = '', $plugin_id = '', $line_break = false)
     {
         $details_link = "https://research.cleantalk.org";
-        $line_break = $line_break ? '<br>' : ' ';
+        $line_break_layout = $line_break ? '<br>' : ' ';
         if ($plugin_slug && $plugin_id) {
-            $details_link = $details_link . '/reports/app/' . $plugin_slug . '#' . $plugin_id;
+            $details_link = esc_attr($details_link . '/reports/app/' . $plugin_slug . '#' . $plugin_id);
         }
         return sprintf(
-            esc_html__('Full report is here %s', 'security-malware-firewall'),
-            '<a href="' . $details_link . '" target="_blank">' . $details_link . '</a>'
+            esc_html__('Full report is %shere%s', 'security-malware-firewall'),
+            '<a href="' . $details_link . '" target="_blank">',
+            '</a>'
         )
-        . $line_break
+        . $line_break_layout
         . sprintf(
-            esc_html__('Have questions? Ask us here %s', 'security-malware-firewall'),
-            '<a href="https://wordpress.org/support/plugin/security-malware-firewall/" target="_blank">https://wordpress.org/support/plugin/security-malware-firewall/</a>'
+            esc_html__('Have questions? Ask us %shere%s', 'security-malware-firewall'),
+            '<a href="https://wordpress.org/support/plugin/security-malware-firewall/" target="_blank">',
+            '</a>'
         );
     }