Use new icons in the system check legend of the installation

3 files changed, 23 insertions, 14 deletions

diff --git a/plugins/Installation/stylesheets/installation.css b/plugins/Installation/stylesheets/installation.css
index 15c169767b..5621ae98df 100644
--- a/plugins/Installation/stylesheets/installation.css
+++ b/plugins/Installation/stylesheets/installation.css
@@ -86,15 +86,19 @@ p.next-step:first-child {
     vertical-align: bottom;
 }
 
-.system-check .icon-ok {
+.system-check .icon-ok, .system-check-legend .icon-ok {
     color: #1AA282;
     margin-right: 10px;
 }
-.system-check .icon-warning {
+.system-check .icon-warning, .system-check-legend .icon-warning {
     color: #DF9D27;
     margin-right: 10px;
 }
-.system-check .icon-error {
+.system-check .icon-error, .system-check-legend .icon-error {
     color: #D73F36;
     margin-right: 10px;
 }
+
+.system-check-legend {
+    font-size: 13px;
+}
diff --git a/plugins/Installation/templates/_systemCheckLegend.twig b/plugins/Installation/templates/_systemCheckLegend.twig
index 3d222ab4ba..c87f44cdeb 100644
--- a/plugins/Installation/templates/_systemCheckLegend.twig
+++ b/plugins/Installation/templates/_systemCheckLegend.twig
@@ -1,13 +1,18 @@
-<div id="systemCheckLegend">
-    <span style="font-size: small;">
-        <h2>{{ 'Installation_Legend'|translate }}</h2>
-        <br/>
-        <img src='plugins/Morpheus/images/warning.png'/> <span class="warn">{{ 'General_Warning'|translate }}: {{ 'Installation_SystemCheckWarning'|translate }}</span>
-        <br/>
-        <img src='plugins/Morpheus/images/error.png'/> <span style="color:red;font-weight:bold;">{{ 'General_Error'|translate }}
-            : {{ 'Installation_SystemCheckError'|translate }} </span><br/>
-        <img src='plugins/Morpheus/images/ok.png'/> <span style="color:#26981C;font-weight:bold;">{{ 'General_Ok'|translate }}</span><br/>
-    </span>
+<div class="system-check-legend">
+    <h2>{{ 'Installation_Legend'|translate }}</h2>
+
+    <p>
+        <span class="icon-ok"></span>
+        {{ 'General_Ok'|translate }}
+    </p>
+    <p>
+        <span class="icon-warning"></span>
+        {{ 'General_Warning'|translate }}: {{ 'Installation_SystemCheckWarning'|translate }}
+    </p>
+    <p>
+        <span class="icon-error"></span>
+        {{ 'General_Error'|translate }}: {{ 'Installation_SystemCheckError'|translate }}
+    </p>
 </div>
 
 <p class="next-step">
diff --git a/plugins/Installation/templates/systemCheck.twig b/plugins/Installation/templates/systemCheck.twig
index a0f6a7f7f1..f73ab100c0 100644
--- a/plugins/Installation/templates/systemCheck.twig
+++ b/plugins/Installation/templates/systemCheck.twig
@@ -22,7 +22,7 @@
 
     {% if not showNextStep %}
         <p>
-            <img src='plugins/Morpheus/images/link.gif'/> &nbsp;
+            <span class="icon-export"></span>
             <a href="?module=Proxy&action=redirect&url=http://piwik.org/docs/requirements/" target="_blank">{{ 'Installation_Requirements'|translate }}</a>
         </p>
         {% include "@Installation/_systemCheckLegend.twig" %}