Fix the design of the "reused tables" screen in the installation #7584

1 files changed, 60 insertions, 64 deletions

diff --git a/plugins/Installation/templates/reuseTables.twig b/plugins/Installation/templates/reuseTables.twig
index 12eb53bca6..3e90d026fb 100644
--- a/plugins/Installation/templates/reuseTables.twig
+++ b/plugins/Installation/templates/reuseTables.twig
@@ -2,80 +2,76 @@
 
 {% block content %}
 
-{% set helpMessage %}{{- 'CoreUpdater_HelpMessageContent'|translate('[',']',"<br/>")|raw }}{% endset %}
+    {% set helpMessage %}{{- 'CoreUpdater_HelpMessageContent'|translate('[',']',"<br/>")|raw }}{% endset %}
 
-<h2>{{ 'Installation_ReusingTables'|translate }}</h2>
+    <h2>{{ 'Installation_ReusingTables'|translate }}</h2>
 
-<div class="reuseTables">
+    <div class="reuseTables">
 
-{% if coreError %}
-    <div class="error">
-        <img src="plugins/Morpheus/images/error_medium.png"/> {{ 'CoreUpdater_CriticalErrorDuringTheUpgradeProcess'|translate }}
-        <ul>
-            {% for message in errorMessages %}
-                <li>{{ message }}</li>
-            {% endfor %}
-        </ul>
-    </div>
-    <p>{{ 'CoreUpdater_HelpMessageIntroductionWhenError'|translate }}
-    <ul>
-        <li>{{ helpMessage }}</li>
-    </ul>
-    </p>
-    <p>{{ 'CoreUpdater_ErrorDIYHelp'|translate }}
-    <ul>
-        <li>{{ 'CoreUpdater_ErrorDIYHelp_1'|translate }}</li>
-        <li>{{ 'CoreUpdater_ErrorDIYHelp_2'|translate }}</li>
-        <li>{{ 'CoreUpdater_ErrorDIYHelp_3'|translate }} <a href='https://piwik.org/faq/how-to-update/#faq_179' rel='noreferrer' target='_blank'>(see FAQ)</a></li>
-        <li>{{ 'CoreUpdater_ErrorDIYHelp_4'|translate }}</li>
-        <li>{{ 'CoreUpdater_ErrorDIYHelp_5'|translate }}</li>
-    </ul>
-    </p>
-{% else %}
-    {% if warningMessages|length > 0 %}
-        <div class="warning">
-            <img src="plugins/Morpheus/images/warning_medium.png"/> {{ 'CoreUpdater_WarningMessages'|translate }}
+        {% if coreError %}
+            <div class="alert alert-danger">
+                {{ 'CoreUpdater_CriticalErrorDuringTheUpgradeProcess'|translate }}
+                <ul>
+                    {% for message in errorMessages %}
+                        <li>{{ message }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+            <p>{{ 'CoreUpdater_HelpMessageIntroductionWhenError'|translate }}</p>
             <ul>
-                {% for message in warningMessages %}
-                    <li>{{ message }}</li>
-                {% endfor %}
+                <li>{{ helpMessage }}</li>
             </ul>
-        </div>
-    {% endif %}
-
-    {% if errorMessages|length > 0 %}
-        <div class="error">
-            <img src="plugins/Morpheus/images/error_medium.png"/> {{ 'CoreUpdater_ErrorDuringPluginsUpdates'|translate }}
+            <p>{{ 'CoreUpdater_ErrorDIYHelp'|translate }}</p>
             <ul>
-                {% for message in errorMessages %}
-                    <li>{{ message }}</li>
-                {% endfor %}
+                <li>{{ 'CoreUpdater_ErrorDIYHelp_1'|translate }}</li>
+                <li>{{ 'CoreUpdater_ErrorDIYHelp_2'|translate }}</li>
+                <li>{{ 'CoreUpdater_ErrorDIYHelp_3'|translate }} <a href='https://piwik.org/faq/how-to-update/#faq_179' rel='noreferrer' target='_blank'>(see FAQ)</a></li>
+                <li>{{ 'CoreUpdater_ErrorDIYHelp_4'|translate }}</li>
+                <li>{{ 'CoreUpdater_ErrorDIYHelp_5'|translate }}</li>
             </ul>
+        {% else %}
+            {% if warningMessages|length > 0 %}
+                <div class="alert alert-warning">
+                    {{ 'CoreUpdater_WarningMessages'|translate }}
+                    <ul>
+                        {% for message in warningMessages %}
+                            <li>{{ message }}</li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            {% endif %}
 
-            {% if deactivatedPlugins is defined and deactivatedPlugins|length > 0 %}
-                {% set listOfDeactivatedPlugins=deactivatedPlugins|join(', ') %}
-                <p style="color:red;">
-                    <img src="plugins/Morpheus/images/error_medium.png"/>
-                    {{ 'CoreUpdater_WeAutomaticallyDeactivatedTheFollowingPlugins'|translate(listOfDeactivatedPlugins) }}
-                </p>
+            {% if errorMessages|length > 0 %}
+                <div class="alert alert-error">
+                    {{ 'CoreUpdater_ErrorDuringPluginsUpdates'|translate }}
+                    <ul>
+                        {% for message in errorMessages %}
+                            <li>{{ message }}</li>
+                        {% endfor %}
+                    </ul>
+
+                    {% if deactivatedPlugins is defined and deactivatedPlugins|length > 0 %}
+                        {% set listOfDeactivatedPlugins=deactivatedPlugins|join(', ') %}
+                        <p>
+                            {{ 'CoreUpdater_WeAutomaticallyDeactivatedTheFollowingPlugins'|translate(listOfDeactivatedPlugins) }}
+                        </p>
+                    {% endif %}
+                </div>
             {% endif %}
-        </div>
-    {% endif %}
 
-    {% if errorMessages|length > 0 or warningMessages|length > 0 %}
-        <p>{{ 'CoreUpdater_HelpMessageIntroductionWhenWarning'|translate }}
-        <ul>
-            <li>{{ helpMessage }}</li>
-        </ul>
-        </p>
-    {% else %}
-        <div class="success"> {{ 'Installation_TablesUpdatedSuccess'|translate(oldVersion, currentVersion) }}
-            <img src="plugins/Morpheus/images/success_medium.png"/></div>
-        <br />
+            {% if errorMessages|length > 0 or warningMessages|length > 0 %}
+                <p>{{ 'CoreUpdater_HelpMessageIntroductionWhenWarning'|translate }}</p>
+                <ul>
+                    <li>{{ helpMessage }}</li>
+                </ul>
+            {% else %}
+                <div class="alert alert-success">
+                    {{ 'Installation_TablesUpdatedSuccess'|translate(oldVersion, currentVersion) }}
+                </div>
+            {% endif %}
 
-    {% endif %}
+        {% endif %}
 
-{% endif %}
+    </div>
 
-</div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}