Better UI for Piwik 3, more responsive, faster, lots of other fixes (#10397)

* improved ui and responsiveness

* improve rss widget

* commit changes for ui again, got lost after the last commit

* fix more tests

* restoring files

* fix fonts

* fix more tests

* more test fixes

* fix some system tests

* fix tests

* fix system and ui tests

* fix updater tests

* make a page as loaded once the callback is called

* enable verbose

* more verbose output

* enable phantomjs debug flag

* debug should be a phantomjs option

* trying to fix installation tests

* fixes #10173 to not compile css files as less

* trying to minimize js/css requests to hopefully prevent random ui test fails

* disable verbose mode

* fix updater and installation

* lots of bugfixes and ui tweaks

* fix reset dashboard

* various bugfixes

* fix integration tests

* fix text color

* hoping to fix installation tests this way

* cache css/js resources for an hour, should speed up tests and prevent some random issues

* we need to avoid installing plugins multiple times at the same time when requesting resources

* finally getting the colors right again

* fix most tests, more tests for theme

* use an h2 element for titles for better accessibility

* fix headline color

* use actual theme text color (piwik-black)

* fix small font size was applied on all p elements

* fix tests

* now improving all the datatables

* trying to ignore images for visitor log

* Revert "trying to ignore images for visitor log"

This reverts commit ad1ff7267aae14ad905bef130e956c8593c4fb22.

* fix tests

* fix we had always ignored a max label width

* trying to fix file permissions

* fix more file permissions

* Improved plugins update API (#10028)

* refs #7983 let plugins add or remove fields to websites and better settings api

* * Hide CorePluginsAdmin API methods
* More documentation
* Added some more tests

* improved updates API for plugins

* better error code as duplicate column cannot really happen when not actually renaming a colum

Conflicts:
	core/Updates/3.0.0-b1.php
	plugins/CoreUpdater/Commands/Update/CliUpdateObserver.php

* fix DB field piwik_log_visit.location_provider too small (#10003)

* fixes #9564 fix DB field piwik_log_visit.location_provider too small

* use new plugins updater API

* DB field piwik_log_visit.visit_total_actions too small (#10002)

* fixes #9565 DB field piwik_log_visit.visit_total_actions too small

* change type of some db columns that are too small

* fix tests (#10040)
Conflicts:
	plugins/CoreAdminHome/Menu.php
	plugins/Goals/Menu.php
	plugins/MobileMessaging/Menu.php
	plugins/SitesManager/Menu.php
	plugins/UsersManager/Menu.php
	tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml

* fix more file permissions

* repair more file permissions

* repair more file permissions

* trying to make ui tests work again, the table was missing

* fix some encoding issues

* cross browser fixes and usability improvement

* move back the config icon, need to find a better solution later

* more cross browser fixes

* bugfixes

* fix ui tests

* fix encoding issue

* fix various issues with the ui tests when a test gets aborted

* also skip this visitor log test when aborted

* there were 3 css files that were loaded separately, merge them instead into one css

* forgot to add the actual manifest

* do not add manifest if custom logo is specified

* load font css files first as it was before merging them into big css

* fix link icon was not aligned anymore

* minor fixes

* setting it back to 4px

* in popovers the font variable was always ignored and a different font loaded

* forgot to update screenshots

* fix remaining tests

* this should fix an update error

* added 3 new widgets system check, system summary and plugin updates

* tweak new widgets content

* no page reload when changing date or segment

* in admin home show only enabled widgets

* refs #10295 use getMockBuilder instead of deprecated getMock

* fix some ui tests

* fix various bugs

* fix more tests

* fix ui tests

* add a space between loading image and loading message

* fix docs so they appear on developer.piwik.org

* improved documentation

* introduce new Widget::renderTemplate method for consistency with controllers

* remove no longer needed files

* testing system fonts

* fix strong was not really bold

* more useful system summary

* remove ubuntu font

* fix most tests and removed most em elements

* fix tests

* fix headline was very thin

* update submodule

* update submodules

* update submodule

* fix failing ui tests

* update submodules

12 files changed, 145 insertions, 108 deletions

diff --git a/plugins/SitesManager/templates/_displayJavascriptCode.twig b/plugins/SitesManager/templates/_displayJavascriptCode.twig
index 772fcadf89..b523ec28e7 100644
--- a/plugins/SitesManager/templates/_displayJavascriptCode.twig
+++ b/plugins/SitesManager/templates/_displayJavascriptCode.twig
@@ -13,5 +13,5 @@
 
     <p>{{ 'CoreAdminHome_JSTrackingIntro5'|translate('<a rel="noreferrer" target="_blank" href="http://piwik.org/docs/javascript-tracking/">','</a>')|raw }}</p>
 
-    <p>{{ 'Installation_JSTracking_EndNote'|translate('<em>','</em>')|raw }}</p>
+    <p>{{ 'Installation_JSTracking_EndNote'|translate('','')|raw }}</p>
 </div>
\ No newline at end of file
diff --git a/plugins/SitesManager/templates/global-settings.html b/plugins/SitesManager/templates/global-settings.html
index 04e049f9e2..57d291595c 100644
--- a/plugins/SitesManager/templates/global-settings.html
+++ b/plugins/SitesManager/templates/global-settings.html
@@ -1,85 +1,107 @@
-<div ng-show="hasSuperUserAccess">
+<div ng-controller="SitesManagerController" class="SitesManager">
+<div ng-show="hasSuperUserAccess" piwik-content-block content-title="{{ 'SitesManager_GlobalWebsitesSettings' | translate }}">
 
-    <h2 id="globalSettings" class="secondary">{{ 'SitesManager_GlobalWebsitesSettings' | translate }}</h2>
+    <a name="globalSettings" id="globalSettings"></a>
 
-    <h3>{{ 'SitesManager_GlobalListExcludedIps'|translate }}</h3>
-    <p>{{ 'SitesManager_ListOfIpsToBeExcludedOnAllWebsites'|translate }}</p>
-    <div class="form-group">
+    <div id="excludedIpsGlobalHelp" class="inline-help-node">
         <div ng-include="'plugins/SitesManager/templates/help/excluded-ip-help.html'"></div>
-        <div sites-manager-multiline-field field="globalSettings.excludedIpsGlobal" cols="30" rows="3" id="excludedIpsGlobal"></div>
     </div>
 
-    <h3>{{ 'SitesManager_GlobalListExcludedQueryParameters'|translate }}</h3>
-    <p>{{ 'SitesManager_ListOfQueryParametersToBeExcludedOnAllWebsites'|translate }}</p>
-    <div class="form-group">
+    <div id="excludedQueryParametersGlobalHelp" class="inline-help-node">
         <div ng-include="'plugins/SitesManager/templates/help/excluded-query-parameters-help.html'"></div>
-        <div sites-manager-multiline-field field="globalSettings.excludedQueryParametersGlobal" cols="30" rows="3" id="excludedQueryParametersGlobal"></div>
     </div>
 
-    <h3>{{ 'SitesManager_GlobalListExcludedUserAgents'|translate }}</h3>
-    <p>{{ 'SitesManager_GlobalListExcludedUserAgents_Desc'|translate }}</p>
-    <div class="form-group">
+    <div id="excludedUserAgentsGlobalHelp" class="inline-help-node">
         <div ng-include="'plugins/SitesManager/templates/help/excluded-user-agents-help.html'"></div>
-        <div sites-manager-multiline-field field="globalSettings.excludedUserAgentsGlobal" cols="30" rows="3" id="excludedUserAgentsGlobal"></div>
     </div>
-    <div class="form-group">
-        <div class="form-help" ng-bind-html="'SitesManager_EnableSiteSpecificUserAgentExclude_Help'|translate:'<a href=\'#excludedUserAgentsGlobal\'>':'</a>'"></div>
-        <label class="checkbox">
-            <input type="checkbox" id="siteSpecificUserAgentExcludeEnabled" ng-model="globalSettings.siteSpecificUserAgentExcludeEnabled">
-            {{ 'SitesManager_EnableSiteSpecificUserAgentExclude'|translate }}
-        </label>
+
+    <div id="timezoneHelp" class="inline-help-node">
+        <div ng-include="'plugins/SitesManager/templates/help/timezone-help.html'"></div>
     </div>
 
-    <h3>{{ 'SitesManager_KeepURLFragments'|translate }}</h3>
-    <p ng-bind-html="'SitesManager_KeepURLFragmentsHelp'|translate:'<em>#</em>':'<em>example.org/index.html#first_section</em>':'<em>example.org/index.html</em>'"></p>
-    <div class="form-group">
-        <p class="form-help">{{ 'SitesManager_KeepURLFragmentsHelp2'|translate }}</p>
-        <label class="checkbox">
-            <input type="checkbox" id="keepURLFragmentsGlobal" ng-model="globalSettings.keepURLFragmentsGlobal">
-            {{ 'SitesManager_KeepURLFragmentsLong'|translate }}
-        </label>
+    <div id="keepURLFragmentsHelp" class="inline-help-node">
+        <div ng-bind-html="'SitesManager_KeepURLFragmentsHelp'|translate:'<em>#</em>':'<em>example.org/index.html#first_section</em>':'<em>example.org/index.html</em>'"></div>
+        <div>{{ 'SitesManager_KeepURLFragmentsHelp2'|translate }}</div>
+    </div>
+
+    <div piwik-field uicontrol="textarea" name="excludedIpsGlobal"
+         var-type="array"
+         ng-model="globalSettings.excludedIpsGlobal"
+         title="{{ 'SitesManager_ListOfIpsToBeExcludedOnAllWebsites'|translate }}"
+         introduction="{{ 'SitesManager_GlobalListExcludedIps'|translate }}"
+         inline-help="#excludedIpsGlobalHelp">
+    </div>
+
+    <div piwik-field uicontrol="textarea" name="excludedQueryParametersGlobal"
+         var-type="array"
+         ng-model="globalSettings.excludedQueryParametersGlobal"
+         title="{{ 'SitesManager_ListOfQueryParametersToBeExcludedOnAllWebsites'|translate }}"
+         introduction="{{ 'SitesManager_GlobalListExcludedQueryParameters'|translate }}"
+         inline-help="#excludedQueryParametersGlobalHelp">
+    </div>
+
+    <div piwik-field uicontrol="textarea" name="excludedUserAgentsGlobal"
+         var-type="array"
+         ng-model="globalSettings.excludedUserAgentsGlobal"
+         title="{{ 'SitesManager_GlobalListExcludedUserAgents_Desc'|translate }}"
+         introduction="{{ 'SitesManager_GlobalListExcludedUserAgents'|translate }}"
+         inline-help="#excludedUserAgentsGlobalHelp">
+    </div>
+
+    <div piwik-field uicontrol="checkbox" name="siteSpecificUserAgentExcludeEnabled"
+         ng-model="globalSettings.siteSpecificUserAgentExcludeEnabled"
+         title="{{ 'SitesManager_EnableSiteSpecificUserAgentExclude'|translate }}"
+         inline-help="{{ 'SitesManager_EnableSiteSpecificUserAgentExclude_Help'|translate:'<a href=\'#excludedUserAgentsGlobal\'>':'</a>' }}">
+    </div>
+
+    <div piwik-field uicontrol="checkbox" name="keepURLFragmentsGlobal"
+         ng-model="globalSettings.keepURLFragmentsGlobal"
+         title="{{ 'SitesManager_KeepURLFragmentsLong'|translate }}"
+         introduction="{{ 'SitesManager_KeepURLFragments'|translate }}"
+         inline-help="#keepURLFragmentsHelp">
     </div>
 
     <h3>{{ 'SitesManager_TrackingSiteSearch'|translate }}</h3>
+
     <p>{{ 'SitesManager_SiteSearchUse' | translate }}</p>
     <div class="alert alert-info">
         {{ 'SitesManager_SearchParametersNote'|translate }} {{ 'SitesManager_SearchParametersNote2'|translate }}
     </div>
-    <div class="form-group">
-        <label>{{ 'SitesManager_SearchKeywordLabel' | translate }}</label>
-        <div class="form-help">
-            {{ 'SitesManager_SearchKeywordParametersDesc' | translate }}
-        </div>
-        <input ng-list size="15" ng-model="globalSettings.searchKeywordParametersGlobal">
+
+    <div piwik-field uicontrol="text" name="searchKeywordParametersGlobal" var-type="array"
+         ng-model="globalSettings.searchKeywordParametersGlobal"
+         title="{{ 'SitesManager_SearchKeywordLabel'|translate }}"
+         inline-help="{{ 'SitesManager_SearchKeywordParametersDesc' | translate }}">
     </div>
+
     <div ng-hide="customVariablesActivated" class="alert alert-info">
         Note: you could also track your Internal Search Engine Categories, but the plugin Custom Variables is required. Please enable the plugin CustomVariables (or ask your Piwik admin).
     </div>
-    <p ng-show="customVariablesActivated">
-        {{ 'Goals_Optional'|translate }} {{ 'SitesManager_SearchCategoryDesc'|translate }}
-    </p>
-    <div class="form-group" ng-show="customVariablesActivated">
-        <label>{{ 'SitesManager_SearchCategoryLabel' | translate }}</label>
-        <div class="form-help">
-            {{ 'Goals_Optional'|translate }} {{ 'SitesManager_SearchCategoryParametersDesc'|translate }}
-        </div>
-        <input ng-list size="15" ng-model="globalSettings.searchCategoryParametersGlobal">
+
+    <div piwik-field uicontrol="text" name="searchCategoryParametersGlobal" var-type="array"
+         ng-show="customVariablesActivated"
+         ng-model="globalSettings.searchCategoryParametersGlobal"
+         title="{{ 'SitesManager_SearchCategoryLabel'|translate }}"
+         inline-help="{{ 'Goals_Optional'|translate }} {{ 'SitesManager_SearchCategoryDesc'|translate }} {{ 'SitesManager_SearchCategoryParametersDesc'|translate }}">
     </div>
 
-    <h3>{{ 'SitesManager_DefaultTimezoneForNewWebsites'|translate }}</h3>
-    <p>{{ 'SitesManager_SelectDefaultTimezone'|translate }}</p>
-    <div class="form-group">
-        <div ng-include="'plugins/SitesManager/templates/help/timezone-help.html'"></div>
-        <select ng-model="globalSettings.defaultTimezone" ng-options="t.code as t.label group by t.group for t in timezones"></select>
+    <div piwik-field uicontrol="select" name="defaultTimezone"
+         ng-model="globalSettings.defaultTimezone"
+         options="timezones"
+         title="{{ 'SitesManager_SelectDefaultTimezone'|translate }}"
+         introduction="{{ 'SitesManager_DefaultTimezoneForNewWebsites'|translate }}"
+         inline-help="#timezoneHelp">
     </div>
 
-    <h3>{{ 'SitesManager_DefaultCurrencyForNewWebsites'|translate }}</h3>
-    <p>{{ 'SitesManager_SelectDefaultCurrency'|translate }}</p>
-    <div class="form-group">
-        <div class="form-help">{{ 'SitesManager_CurrencySymbolWillBeUsedForGoals' | translate }}</div>
-        <select ng-model="globalSettings.defaultCurrency" ng-options="k as v for (k, v) in currencies"></select>
+    <div piwik-field uicontrol="select" name="defaultCurrency"
+         ng-model="globalSettings.defaultCurrency"
+         options="currencies"
+         title="{{ 'SitesManager_SelectDefaultCurrency'|translate }}"
+         introduction="{{ 'SitesManager_DefaultCurrencyForNewWebsites'|translate }}"
+         inline-help="{{ 'SitesManager_CurrencySymbolWillBeUsedForGoals' | translate }}">
     </div>
 
-    <input type="submit" class="submit" ng-click="saveGlobalSettings()" value="{{ 'General_Save'|translate }}"/>
+    <div piwik-save-button onconfirm="saveGlobalSettings()"></div>
 
+</div></div>
 </div>
diff --git a/plugins/SitesManager/templates/globalSettings.twig b/plugins/SitesManager/templates/globalSettings.twig
new file mode 100644
index 0000000000..cf7b13ff10
--- /dev/null
+++ b/plugins/SitesManager/templates/globalSettings.twig
@@ -0,0 +1,9 @@
+{% extends 'admin.twig' %}
+
+{% set title %}{{ 'SitesManager_GlobalWebsitesSettings'|translate }}{% endset %}
+
+{% block content %}
+
+    <div ng-include="'plugins/SitesManager/templates/global-settings.html?cb={{ cacheBuster }}'"></div>
+
+{% endblock %}
diff --git a/plugins/SitesManager/templates/help/excluded-ip-help.html b/plugins/SitesManager/templates/help/excluded-ip-help.html
index b12f9439d8..7bfa421d6f 100644
--- a/plugins/SitesManager/templates/help/excluded-ip-help.html
+++ b/plugins/SitesManager/templates/help/excluded-ip-help.html
@@ -1,4 +1,4 @@
-<div class="form-help">
+<div>
     {{ 'SitesManager_HelpExcludedIps' | translate : '1.2.3.*' : '1.2.*.*' }}
 
     <br/><br/>
diff --git a/plugins/SitesManager/templates/help/excluded-query-parameters-help.html b/plugins/SitesManager/templates/help/excluded-query-parameters-help.html
index 9ec52250bd..39fed1cf89 100644
--- a/plugins/SitesManager/templates/help/excluded-query-parameters-help.html
+++ b/plugins/SitesManager/templates/help/excluded-query-parameters-help.html
@@ -1,4 +1,4 @@
-<div class="form-help">
+<div>
     {{ 'SitesManager_ListOfQueryParametersToExclude'|translate }}
 
     <br/><br/>
diff --git a/plugins/SitesManager/templates/help/excluded-user-agents-help.html b/plugins/SitesManager/templates/help/excluded-user-agents-help.html
index 080443f2cb..52c49a17cc 100644
--- a/plugins/SitesManager/templates/help/excluded-user-agents-help.html
+++ b/plugins/SitesManager/templates/help/excluded-user-agents-help.html
@@ -1,4 +1,4 @@
-<div class="form-help">
+<div>
     {{ 'SitesManager_GlobalExcludedUserAgentHelp1'|translate }}
 
     <br/><br/>
diff --git a/plugins/SitesManager/templates/help/timezone-help.html b/plugins/SitesManager/templates/help/timezone-help.html
index f77ad7863e..393606f147 100644
--- a/plugins/SitesManager/templates/help/timezone-help.html
+++ b/plugins/SitesManager/templates/help/timezone-help.html
@@ -1,4 +1,4 @@
-<div class="form-help">
+<div>
     <span ng-switch="timezoneSupportEnabled">
         <span ng-switch-default>
             {{ 'SitesManager_AdvancedTimezoneSupportNotFound'|translate }}
diff --git a/plugins/SitesManager/templates/index.html b/plugins/SitesManager/templates/index.html
index adedf3e644..42e4d426f9 100644
--- a/plugins/SitesManager/templates/index.html
+++ b/plugins/SitesManager/templates/index.html
@@ -5,5 +5,4 @@
     <div ng-include="'plugins/SitesManager/templates/sites-list/add-entity-dialog.html?cb=' + cacheBuster"></div>
     <div ng-include="'plugins/SitesManager/templates/sites-list/sites-list.html?cb=' + cacheBuster"></div>
     <div class="bottomButtonBar" ng-include="'plugins/SitesManager/templates/sites-list/add-site-link.html?cb=' + cacheBuster"></div>
-    <div ng-include="'plugins/SitesManager/templates/global-settings.html?cb=' + cacheBuster"></div>
 </div>
diff --git a/plugins/SitesManager/templates/measurable_type_settings.twig b/plugins/SitesManager/templates/measurable_type_settings.twig
deleted file mode 100644
index 7c1bb624f2..0000000000
--- a/plugins/SitesManager/templates/measurable_type_settings.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% import 'settingsMacros.twig' as settingsMacro %}
-
-{% for name, setting in settings %}
-    <fieldset>
-        {{ settingsMacro.singleSetting(setting, loop.index) }}
-    </fieldset>
-{% endfor %}
diff --git a/plugins/SitesManager/templates/sites-list/add-entity-dialog.html b/plugins/SitesManager/templates/sites-list/add-entity-dialog.html
index f1a1679684..9c9f6a5244 100644
--- a/plugins/SitesManager/templates/sites-list/add-entity-dialog.html
+++ b/plugins/SitesManager/templates/sites-list/add-entity-dialog.html
@@ -1,16 +1,18 @@
-<div piwik-dialog="$parent.showAddSiteDialog"
-     title="{{ 'SitesManager_ChooseMeasurableTypeHeadline'|translate }}">
+<div piwik-dialog="$parent.showAddSiteDialog" class="ui-confirm">
 
-    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
-        <div class="ui-dialog-buttonset">
+    <h2>{{ 'SitesManager_ChooseMeasurableTypeHeadline'|translate }}</h2>
+
+    <p>
+        <div class="center">
             <button type="button"
                     ng-repeat="type in availableTypes"
                     title="{{ type.description }}"
-                    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
-                    ng-click="addSite(type.id);closeAddMeasurableDialog()"
+                    class="modal-close btn"
+                    style="margin-left: 20px;"
+                    ng-click="addSite(type.id);"
                     aria-disabled="false">
                 <span class="ui-button-text">{{ type.name }}</span>
             </button>
         </div>
-    </div>
+    </p>
 </div>
\ No newline at end of file
diff --git a/plugins/SitesManager/templates/sites-list/site-fields.html b/plugins/SitesManager/templates/sites-list/site-fields.html
index 29b74a48b5..df8d6e7a3b 100644
--- a/plugins/SitesManager/templates/sites-list/site-fields.html
+++ b/plugins/SitesManager/templates/sites-list/site-fields.html
@@ -1,8 +1,9 @@
-<div class="site" idsite="{{site.idSite}}" ng-class="{'editingSite': site.editMode==true}">
+<div class="site card hoverable" idsite="{{site.idSite}}" ng-class="{'editingSite': site.editMode==true}">
+<div class="card-content">
 
     <div class="row" ng-if="!site.editMode">
 
-        <div class="col-md-3">
+        <div class="col m3">
             <h4>{{ site.name }}</h4>
             <ul>
                 <li><span class="title">{{ 'General_Id'|translate }}:</span> {{ site.idsite }}</li>
@@ -15,7 +16,7 @@
                 </li>
             </ul>
         </div>
-        <div class="col-md-4">
+        <div class="col m4">
             <ul>
                 <li><span class="title">{{ 'SitesManager_Timezone'|translate }}:</span> {{ site.timezone }}</li>
                 <li><span class="title">{{ 'SitesManager_Currency'|translate }}:</span> {{ site.currency }}</li>
@@ -27,7 +28,7 @@
                 </li>
             </ul>
         </div>
-        <div class="col-md-4">
+        <div class="col m4">
             <ul>
                 <li>
                     <span class="title">{{ 'SitesManager_Urls'|translate }}</span>:
@@ -47,15 +48,15 @@
                 </li>
             </ul>
         </div>
-        <div class="col-md-1 text-right">
+        <div class="col m1 text-right">
             <ul>
                 <li>
-                    <button class="btn btn-flat btn-lg" ng-click="editSite()" title="{{ 'General_Edit'|translate }}">
+                    <button class="table-action" ng-click="editSite()" title="{{ 'General_Edit'|translate }}">
                         <span class="icon-edit"></span>
                     </button>
                 </li>
                 <li>
-                    <button class="btn btn-flat btn-lg" ng-show="site.idsite" ng-click="openDeleteDialog()" title="{{ 'General_Delete'|translate }}">
+                    <button class="table-action" ng-show="site.idsite" ng-click="openDeleteDialog()" title="{{ 'General_Delete'|translate }}">
                         <span class="icon-delete"></span>
                     </button>
                 </li>
@@ -66,9 +67,12 @@
 
     <div ng-if="site.editMode">
 
-        <div class="form-group">
-            <label>{{ 'General_Name'|translate }}</label>
-            <input type="text" ng-model="site.name"/>
+        <div class="form-group row">
+            <div class="col s12 m6 input-field">
+                <input type="text" ng-model="site.name"/>
+                <label>{{ 'General_Name'|translate }}</label>
+            </div>
+            <div class="col s12 m6"></div>
         </div>
 
         <div piwik-activity-indicator loading="site.isLoading"></div>
@@ -79,18 +83,24 @@
             </div>
         </div>
 
-        <div class="form-group">
-            <label>{{ 'SitesManager_Currency'|translate }}</label>
-            <div class="form-help">
+        <div class="form-group row">
+            <div class="col s12 m6 input-field">
+                <select ng-model="site.currency" ng-options="k as v for (k, v) in currencies"></select>
+                <label>{{ 'SitesManager_Currency'|translate }}</label>
+            </div>
+            <div class="col s12 m6 form-help">
                 {{ 'SitesManager_CurrencySymbolWillBeUsedForGoals' | translate }}
             </div>
-            <select ng-model="site.currency" ng-options="k as v for (k, v) in currencies"></select>
         </div>
 
-        <div class="form-group">
-            <label>{{ 'SitesManager_Timezone'|translate }}</label>
-            <div ng-include="'plugins/SitesManager/templates/help/timezone-help.html'"></div>
-            <select ng-model="site.timezone" ng-options="t.code as t.label group by t.group for t in timezones"></select>
+        <div class="form-group row">
+            <div class="col s12 m6 input-field">
+                <select ng-model="site.timezone" ng-options="t.key as t.value group by t.group for t in timezones"></select>
+                <label>{{ 'SitesManager_Timezone'|translate }}</label>
+            </div>
+            <div class="col s12 m6 form-help">
+                <div ng-include="'plugins/SitesManager/templates/help/timezone-help.html'"></div>
+            </div>
         </div>
 
         <div class="editingSiteFooter">
@@ -99,5 +109,5 @@
         </div>
 
     </div>
-
+</div>
 </div>
diff --git a/plugins/SitesManager/templates/sites-manager-header.html b/plugins/SitesManager/templates/sites-manager-header.html
index 167b20ed83..4a7a1c08cb 100644
--- a/plugins/SitesManager/templates/sites-manager-header.html
+++ b/plugins/SitesManager/templates/sites-manager-header.html
@@ -1,18 +1,20 @@
-<h2
-        ng-show="availableTypes"
-        piwik-enriched-headline
-        help-url="http://piwik.org/docs/manage-websites/"
-        feature-name="{{ 'SitesManager_WebsitesManagement'|translate }}">
-    {{ 'SitesManager_XManagement'|translate:(availableTypes.length > 1 ? ('General_Measurables'|translate) : ('SitesManager_Sites'|translate)) }}
-</h2>
+<div piwik-content-intro>
+    <h2
+            ng-show="availableTypes"
+            piwik-enriched-headline
+            help-url="http://piwik.org/docs/manage-websites/"
+            feature-name="{{ 'SitesManager_WebsitesManagement'|translate }}">
+        {{ 'SitesManager_XManagement'|translate:(availableTypes.length > 1 ? ('General_Measurables'|translate) : ('SitesManager_Sites'|translate)) }}
+    </h2>
 
-<p>
-    {{ 'SitesManager_MainDescription'|translate }}
+    <p>
+        {{ 'SitesManager_MainDescription'|translate }}
 
-    <span ng-bind-html="'SitesManager_YouCurrentlyHaveAccessToNWebsites'|translate:'<strong>' + totalNumberOfSites + '</strong>'"></span>
+        <span ng-bind-html="'SitesManager_YouCurrentlyHaveAccessToNWebsites'|translate:'<strong>' + totalNumberOfSites + '</strong>'"></span>
 
-    <span ng-show="hasSuperUserAccess">
-        <br/>
-        <span ng-bind-html="'SitesManager_SuperUserAccessCan'|translate:'<a href=\'#globalSettings\'>':'</a>'"></span>
-    </span>
-</p>
+        <span ng-show="hasSuperUserAccess">
+            <br/>
+            <span ng-bind-html="'SitesManager_SuperUserAccessCan'|translate:'<a href=\'#globalSettings\'>':'</a>'"></span>
+        </span>
+    </p>
+</div>
\ No newline at end of file